1. HTML语义化
2. 书写规范
3. 补充
4. 注释
1. HTML语义化
分 离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由 使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代 替<h2>标记标题。
遵循语义化的HTML结构在团队开发中可以减少因各成员编码风格的差异化所造成的影响,并且便于维护,提高开发效率。
部分标签的语义:
标签 |
语义 |
<div> |
Division(分隔) |
<span> |
Span(范围) |
<ol> |
Ordered List(有序列表) |
<ul> |
Unordered List(无序列表) |
<li> |
List Item(列表项目) |
部分使用场合:
1.标题
<h1>文档标题</h1>
<h2>次级标题</h2>
而不要使用
<div class=”title”>文档标题</div>,或者<span class=”title”>文档标题</span>.
PS: h1通常用于页面logo
PS2:严格语义研究者会建议你只有一个h1两个h2的,3个h3的等
2.表格
<table>用于显示表格数据。不建议用于页面布局。同时使用下列的结构可让你的表格更具可读性
(1)使用表标题( th )为表格的表头
(2)如果可以的话,使用thead , tbody和tfoot适当的区分表格
(3)为表格提供了一个caption,说明是什么信息在表格中
5. 定义列表
<dl>、<dt>、<dd>
例如:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
<dd>是对<dt>的解释说明
2. 书写规范
1. 所有标签必须闭合,如:<p>内容</p> 或 <br />
2. 所有的HTML元素及其属性名称均使用小写
3. 标签要合理嵌套,避免inline元素嵌套block元素
4. 标签属性值必须包含在双引号中,如 <div class=”content”></div>
5. 特殊字符用编码标识,如: ” <” 用 ”<”表示,” >” 用 ”>”表示
6. 为图片增加alt属性
7. 尽量减少嵌套层次
8. 使用 Tab 键进行代码缩进,以节约代码大小(4个空格宽度)
9. 将编辑器中的换行符设置成Unix格式
3. 补充
对于浏览器的识别可采用IE条件注释,避免使用javascript(或其他)判断
<!–[if !IE]>除IE外都可识别<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>
<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>
<!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
4.注释
<!—o 新闻 by Tom@20090813 –>
正文
<!—x 新闻 –>
每一个HTML section需包含有完整的起始和终结注释,如需要可在注释头部添加修改人相关信息。
这样可以让文本编辑器快速地定位到CSS section的头部与结尾。