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

1. WEB标准是什么？

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

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

　　2.1 节约运营成本

　   2.2 用户友好性

　　2.3 内容跨平台的可用性

　　2.4 加快页面解析速度

　　2.5 更良好的用户体验

3. 名词解释

　　1. 横切

　　　　页面中950px宽并且对高度没有限制的容器称为一个标准横切。

　　2. 留白

　　　　两个容器或碎片之间的上、下、左、右的空白距离。

　　3. 继承

　　　　元素可以从其父级元素中获得一些可为自己使用的属性或值。

　　4. 图片定位

　　　　把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图。

　　5. 底图

　　　　页面中在标签中使用的背景图。

　　6. 齐底（图）线

　　　　用户区分横切或碎片结束的线或图。

　　7. 页面结构

　　　　页面的基础框架，由横切、布局元素组成。

　　8. 焦点区（图）

　　　　最易注意的区域。

　　9. 导航

　　　　在页面中具有导向性的链接集合。

　　10. 头图

　　　　页面主题图片。

　　11. 间距

　　　　碎片或文字间的距离。

　　12. 行高

　　　　文字段落中行与行之间的距离。

　　13. 首行缩进

　　　　文字段落首行缩进。

　　14. 浮动

　　　　使被定义的区域脱离正常的页面文档流。

　　15. 碎片

　　　　由文字、图片组合成的内容区域。

　　16. 通栏广告

　　　　与页面内容区同宽的广告区域。

　　17. 功能按钮

　　　　具有交互属性的功能按钮。

　　18. 私有样式

　　　　当前页面独立使用的样式，不具备公用性。

　　19. 水平（垂直）居中

　　　　在页面中的某个元素处于父级的上下或左右的相同距离。

　　20. 标准头（尾）

　　　　定义相同的页面头或尾元素集合。

4. 常用技术术语

　　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

5. 一些约定

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

　　1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；

　　2. 样式名尽量语义化或简写；

　　3. 样式名需要组合拼写时，采用驼峰式拼写，即：KeyWord；

　　4. 使用px（像素）为基本计量单位；

　　5. 页面中空格的使用：全角：中文空格  半角：  

　　6. 项目完成包中，文件及及文件名称全部采用小写字母，不使用中文文件名；

　　7. 减少DIV的嵌套层数；

　　8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；

　　9. 使用正确的注释方法；

　　10. 非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，如:style,font等；

　　11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加”/“ ，如<br/>， 并且有正确的层次；

　　12. 其它特殊符号：

　　　　1） < ( &lt; )

　　　　2)  > ( &gt; )

 6. 命名空间

　　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

7. 基本设置-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

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

9.2 推荐样式拼写顺序

　　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;}　　

9.3 样式编写规则

　　1. 遵循W3C XHTML 代码编写规范

　　2. 优先公用样式，其次结构、再碎片，合并相关元素属性，按从大到小排列。

　　3. 样式中使用修饰图遮罩方法，将公用图片的样式名称复写定义。

　　4. 继承样式定义，多级关系可省略多级父元素名称，至少包含最外层父元素名称，独立碎片除外。

　　5. 横切以#contentA，#contentB...定义，且公用样式和横切加注释说明。

　　6. 样式定义简写，替除多余空格字符。

12 浏览器兼容

　　12.1 兼容浏览器及兼容要求

　　　　1. IE浏览器： IE6.0, IE7.0

　　　　2. Firefox浏览器

　　　　3. Opera浏览器

　　　　4. Safari浏览器

　　　　所定义样式语法定义在常用浏览器中显示无结构、颜色、效果差异。

　　12.3 各版本浏览器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支持。

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

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

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

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

.

.

.

17 代码书写规范

　　17.1 注释

　　　　17.1.1 HTML注释

　　　　正确的注释规范：<!-- 这里是注释 --> 感叹号后面2个横线，结束时2个横线

　　　　17.1.2 CSS样式注释

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

　　　　/* 这里是注释 */

　　17.2 缩进

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

　　17.3 回车

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

【本文内容摘自：搜狐WEB标准_前端技术应用规范】