学习Xhtml+CSS2的一些心得体会

所属分类: 网络编程 / CSS/HTML 阅读数: 1050
收藏 0 赞 0 分享
自从W3C搞了一个Xhtml1.0的标准之后,很多网站都开始用之将站点重构,像yahoo,163,CSDN等,近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上他们了,现在谈一谈最近一段时间来的学习体会。   

为什么要学Xhtml+CSS2  

首先,规范的代码能在各种浏览器中顺利显示。  

一些不规范代码的网页在IE下能正常显示的,在Firefox和Opera上可能就无法正常显示。虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器,但不排除Firefox以及Opera等浏览器等逐渐增大的用户群,而这些人群多是对计算机较为精通的老鸟,被他们骂自己网站太垃圾的话我想滋味应该不好受,呵呵。  
当然这也不是说使用table等做的网页就不符合标准,只是当前不少人习惯用Forntpage或是Dreamweaver来做设计,这些可视化的软件固然方便,但由此带来的问题也是多多,这些软件多多少少会自动增减一些代码,如果没有查看代码的习惯的话,很容易致使产生一下不规范代码。  

其次,DIV + CSS2使页面布局更加简单  
说是Xhtml+CSS2,其实更多的时候是DIV+CSS2来构建网站。之前对页面进行布局或设置一下不错的效果的话,多采用大量的表格嵌套,通常对一个页面进行划分,多用单元格来描述区域,这样在WYSIWYG等软件中倒是比较直观,但这样影响的有几个方面,首先可能影响下载速度,其次对于手写代码来讲,这样的结构非常不直观,另外,牵扯到一个地方就是单元格的合并,假如你不小心搞错了一个colspan="?",那么整个页面的布局将面目全非。  
而用CSS做布局,就像是在PS中对图层进行操作一样,因为CSS中有相对和绝对的概念,呵呵,这样对页面的布局就更加轻松和方便了。  

另外,Xhtml可以减小文件体积  
虽说现在网速越来越大了,但谁不想自己的站点速度更快呢,有人还曾经说“世上最远的距离不是地球到太阳,而是中国电信到中国网通”,如果你在电信服务器上的站点被网通线路的用户浏览,网页文件大小势必也会影响浏览者的感受。而采用Xhtml则利于你解决这个问题,呵呵。  

鉴于以上几点,我开始逐渐习惯使用Xhtml+CSS2来构建网站。  

学习中的心得体会  

代码编写工具:由于现在还没有可视化的工具来编写Xhtml+CSS2页面,所以找到一个适合自己的代码书写工具是必须的,我一直在用Editplus,也像你推荐它,关于Editplus的一些使用技巧,可以看这里:  
http://www.ifess.com/?p=23  

页面布局结构:对一个页面首先要有一个整体的布局,比如,header,menu,sidebar,content,footer等,通过定义这些元素的CSS属性给页面一个整体的划分,之后在这些元素中再写具体的内容,这样就不会让页面看起来很乱。  

CSS写法:一个项目中,定义内容属性和结构布局属性的属性值可以分开写,这样方便查找和修改。尽量减少重复定义,能继承的属性就不要再重复编写了。尽量使用兼容IE和Firefox的CSS属性值,因为有些属性写出来之后无法正常显示就等于做了无用功。  

Xhtml文件:尽量采用外挂链接来调用CSS文件,对于只出现一次的CSS属性也可以采用文件内部书写的方式。书写代码时最好写注释,同时一定要注意对齐的格式,这样便于查错。  

暂时想起来这么些,欢迎大家来一起讨论。  

下面附一些常用的资源及链接:  

CSS2.0中文手册,韩国商业网站设计分析,色标2004,JS手册:  
http://www.im286.com/viewthread.php?tid=875287  
Xhtml1.0校验页面:  
http://validator.w3.org/checklink  
CSS校验页面:  
http://jigsaw.w3.org/css-validator/  
CSS在线优化:  
http://flumpcakes.co.uk/css/optimiser/ 


文章出处:http://www.ifess.com/?p=70 作者:落伍 Ipv6,转载请注明。

更多精彩内容其他人还在看

简单明了带你了解CSS Modules

不要误会,CSS Modules可不是在说“css模块化”这个好像在某些地方见过的词,它其实是特指一种近期才出现的技术手段。什么技术手段呢?下面小编来和大家一起学习一下
收藏 0 赞 0 分享

新手学习css优先级

大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决。下面小编来和大家一起学习CSS的优先级
收藏 0 赞 0 分享

css进阶学习 选择符

css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢?下面小编给大家说明如何从css选择符的角度来提高css代码质量。
收藏 0 赞 0 分享

实现css文字垂直居中的8种方法

CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
收藏 0 赞 0 分享

完美实现CSS垂直居中的11种方法

在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
收藏 0 赞 0 分享

webpack高级配置与优化详解

这篇文章主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面,webpack跨域问题等相关内容
收藏 0 赞 0 分享

5个HTML5的常用本地存储方式详解与介绍

在HTML5规范之前,存储主要是用cookies,但cookies缺点有在请求头上带着数据,大小是4k之内,今天为大家介绍一下H5的5种存储方式
收藏 0 赞 0 分享

CSS代码检查工具stylelint的使用方法详解

stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint
收藏 0 赞 0 分享

Zen Coding css,html缩写替换大观 快速写出html,css

本文是在zen使用生产中遇到的问题做一些分享。
收藏 0 赞 0 分享

javascript代码规范小结

javascript代码规范,大家可以参考下,以便写出更利于阅读的代码。
收藏 0 赞 0 分享
查看更多