---

WEB标准：标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范

---

一. WEB标准是什么？

“WEB标准”是一系列标准的总称。一般的误区经常把WEB标准说成DIV+CSS。
准确的说法应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页面的方法。
DIV 应该指的是XHTML标签，而CSS 指的是样式表。

二. 采用WEB标准开发的好处

• 节约运营成本
• 用户友好性
• 内容跨平台的可用性
• 加快页面解析速度
• 更良好的用户体验

三. 名词解释

• 1. 横切
     页面中950px宽并且对高度没有限制的容器称为一个标准横切。
• 2. 留白
     两个容器或碎片之间的上、下、左、右的空白距离。
• 3. 继承
     元素可以从其父级元素中获得一些可为自己使用的属性或值。
• 4. 图片定位
     把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图。
• 5. 底图
     页面中在标签中使用的背景图。
• 6. 齐底（图）线
     用户区分横切或碎片结束的线或图。
• 7. 页面结构
     页面的基础框架，由横切、布局元素组成。
• 8. 焦点区（图）
     最易注意的区域。
• 9. 导航
     在页面中具有导向性的链接集合。
• 10. 头图
      页面主题图片。
• 11. 间距
      碎片或文字间的距离。
• 12. 行高
      文字段落中行与行之间的距离。
• 13. 首行缩进
      文字段落首行缩进。
• 14. 浮动
      使被定义的区域脱离正常的页面文档流。
• 15. 碎片
      由文字、图片组合成的内容区域。
• 16. 通栏广告
      与页面内容区同宽的广告区域。
• 17. 功能按钮
      具有交互属性的功能按钮。
• 18. 私有样式
      当前页面独立使用的样式，不具备公用性。
• 19. 水平（垂直）居中
      在页面中的某个元素处于父级的上下或左右的相同距离。
• 20. 标准头（尾）
      定义相同的页面头或尾元素集合。

四. 常用技术术语

1. 浮动： float
2. 宽： width
3. 高： height
4. 块元素： block
5. 背景： background
6. 无序列表：ul
7. 链接： a
8. 表单： form
9. 图片： img
10. 段落： p
11. 文档类型定义： DTD
12. 字体： font-family
13. 字号： font-size
14. 边框： border
15. 文字对齐： text-align
16. 行高： line-height
17. 字色： color
18. 背景不循环： no-repeat
19. 内边距： padding
20. 外间距： margin
21. 显示方式： display
22. 悬停： hover
23. 文字修饰： text-decoration
24. 上： up
25. 底： bottom
26. 左： left
27. 右： right
28. 自动： auto
29. 粗体： bold
30. 正常： normal

五. 一些约定

良好的命名习惯，对一个WEB标准网站的开发来说，必定事半功倍。以下是常用的一些命名习惯：

1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
2. 样式名尽量语义化或简写；
3. 样式名需要组合拼写时，采用驼峰式拼写，即：KeyWord；
4. 使用px（像素）为基本计量单位；
5. 页面中空格的使用：全角：中文空格 半角：  
6. 项目完成包中，文件及及文件名称全部采用小写字母，不使用中文文件名；
7. 减少DIV的嵌套层数；
8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；
9. 使用正确的注释方法；
10. 非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，如:style,font等；
11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加”/“ ，如
    ， 并且有正确的层次；
12. 其它特殊符号：
    　1） < ( < )
    　2) > ( > )

六. 命名空间

6.1 外挂样式名称

• 全局： global.css
  全局样式为公站公用，为页面样式基础，页面中必须包含。
• 结构： layout.css
  页面结构类型复杂，并且公用类型较多时使用。多用在首页类页面及产品类页面中。
• 私有： style.css
  独立页面所使用的样式文件，页面中必须包含。
• 模块： module.css
  产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
• 主题： themes.css
  实现换肤功能时应用。
• 补丁： mend.css
  基于以上样式进行的私有化修补。

6.2 常用名称

头：header　　　　
尾：footer
Logo： logo
版权： copyright
内容块：content
栏目块：column
结构左：left
结构中：center
结构右：right
矩阵导航：matrixNav
首页导航：indexNav
频道二级：channelNav
导航文字：navText
内容导航：nav
内容主导航：mainNav
子内容导航：subNav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
广告：ad
搜索：search
关键字：keyWord
标签：tag
菜单：menu
滚动：scroll
列表：list
下拉：drop
按钮：btn
登陆：login
登陆条：loginbar
注册：reg
提示信息：msg
打印：print
地图：map
功能区：shop
Flash：flash
标题：title
更多：more
博客：blog
视频：video
媒体：media
新闻：news
热点：hot
评论：review
合作：cooperate
联系：contact
加入我们：joinUs
合作伙伴：partner
友情链接：link
论坛社区：club
投票：vote
摘要：summary
服务：service
指南：guild
描述：description
信息：info
状态：status
注释：note
下载：download
价格：price
地址：address
产品：products
跳转：jump
条：bar
线：line
小技巧：Tips

七. 基本设置-global.css

7.1 全局设置

文字（text-align）：align（居中）
上下边距(margin, padding)：0
左右边距（margin）：auto（自动）
底色（background）：#FFF（白色）
字体（font-family）、字号（font-size）、字色（color）："宋体“ 12px #666
body 内容整体居中 ： body>div

全局CSS定义：

　　　　/* 全局CSS 定义 */
 body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋体';text-align:center;}
 body > div{margin-right:auto;margin-left:auto;text-align:center; }
 div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
 h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
 ul,ol,li{list-style:none}
 table,td,input,textarea{font-size:12px}

7.2 页面标签初始化设置

1. 常用基本标签 div， form， ul， ol， li， span, p, dl, dt, dd, img
   设置基本标签的间距、边框默认值为0.
2. h1~h6 标题
   默认标题内字号 12px， 内外间距为0px， 文字不加粗。
3. ul，ol，li 列表
   默认不显示项目符号。
4. h2 栏目标题
5. 默认链接颜色
   常态下不显示文字下划线，颜色为灰（#333），鼠标悬浮时：显示文字下划线，颜色变为暗灰（#CCC）

7.3 页面宽度

默认页面宽（area）：950px

7.4 .clear

结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。

八. 推荐样式拼写顺序

1. 显示与定位： display, position, float, list-style
2. 元素自身： width, height, margin, padding, border, background
3. 文本外观： color, font, line-height, text-align, text-decoration, other
   例：
   .test{float:left;width:950px;margin:10px;background:#fff;color:#000;}

九. 样式编写规则

1. 遵循W3C XHTML 代码编写规范
2. 优先公用样式，其次结构、再碎片，合并相关元素属性，按从大到小排列。
3. 样式中使用修饰图遮罩方法，将公用图片的样式名称复写定义。
4. 继承样式定义，多级关系可省略多级父元素名称，至少包含最外层父元素名称，独立碎片除外。
5. 横切以#contentA，#contentB...定义，且公用样式和横切加注释说明。
6. 样式定义简写，替除多余空格字符。

十.浏览器兼容

10.1 兼容浏览器及兼容要求

1. IE浏览器： IE6.0, IE7.0
2. Firefox浏览器
3. Opera浏览器
4. Safari浏览器
   所定义样式语法定义在常用浏览器中显示无结构、颜色、效果差异。

10.2 各版本浏览器HACK / 12.4.1 浏览器兼容的一般写法

区别各版本浏览器的样式方法，注意样式定义顺序。
当需要解决浏览器兼容问题时，一般采用下面写法可以解决，如margin问题：

　　　　margin:8px: 正常语法，所有浏览器都能够正常解析
　　　　*margin:9px: 针对IE7.0的特殊写法，只针对IE7.0以上的浏览器有效。
       _margin:10px: 针对IE6.0的特殊写法，只针对IE6.0 以上浏览器有效。
　　　　_margin/**/:10px: 针对IE5.0的特殊写法。 IE6.0不支持，IE7.0支持。

Firefox浮动层背景图不能自动平铺

嵌套DIV，当子div为浮动（float）时，父div的高度在Firefox不能根据子DIV自动变化。
浏览器高度不能自动计算。导致的结果是当父层div有背景色和背景图时不能自动平铺。

解决办法是：给父层div 添加样式clear 清除浮动，这样父div 就会随子div高度自动计算，如下代码：

　　　　.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

十一.代码书写规范

注释

• 1. HTML注释
     正确的注释规范：感叹号后面2个横线，结束时2个横线

<!-- 这里是注释 -->

• 2. CSS样式注释
     由于 CSS+DIV 制作页面，样式代码多，布局比较复杂，更便于页面后期的维护，更改。所以有必要在样式中加上注释。注释规则如下：

/* 这里是注释 */

缩进

根据页面代码结构进行包含缩进，这样代码层次结构清晰。

回车

同级间结构或碎片代码块之间添加换行。