标签的语义

    CSS布局就是俗称的div+CSS，或者(X)HTML+CSS布局。其核心思想是用CSS来控制网页中元素的样式，包括位置、大小、颜色等。CSS布局具有代码量少、结构精简和语义清晰等优点。

　　虽然CSS很强大，但是CSS布局只是Web标准的一部分，在HTML、CSS、JavaScript三大元素中，HTML才是最重要的，应该先确定HTML，确定语义的标签，再选用合适的CSS。那么如何确定所用的标签是否语义良好？——去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。语义良好的网页去掉样式后结构依然很清晰。因为浏览器会根据标签的语义给定一个默认的样式，如h1、h2、h3系列标签（应该是完整有序没有断层的），会有加粗、上下边距等默认样式；ul会有缩进和黑点的默认样式。

　　当页面内标签无法满足设计需要时，适当添加div和span等无语义标签来辅助实现。

• 一些常用的标签

标签名 英文全拼 中文翻译

div（无语义） division 分隔

span（无语义） span 范围

ol ordered list 排序列表

ul unordered list 不排序列表

li list item 列表项目

dl definition list 定义列表

dt definition term 定义术语

dd definition description 定义描述

h1~h6 header 1 to header 6 标题1到标题6

p paragraph 段落

a anchor 锚

var variable 变量

pre preformed 预定义格式

blockquote block quotation 区块引用语

strong strong 加重

em emphasized 加重

b bold 粗体

br break 换行

font font 字体

u underlined 下划线

fieldset fieldset 域集

legend legend 图标

caption caption 标题

• 一些常见模块

1、表单<form></form>

　　一般来说，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。可以把fieldset的“border”设为“none”，把legend的“display”设为“none”，去掉它们的默认样式，以兼顾语义和设计两方面的要求。每个input标签对应的说明文本都要用label标签，并通过为input设置id属性，在label标签中设置“for = someId”来让说明文本和相应的input关联起来。

2、表格<table></table>

　　在CSS布局中table不推荐用来布局，但是在二维数据展示方面它是最好的选择。table常用的标签除了table、tr、td，还有caption、thead、tbody、tfoot和th。一般，表格标题要用caption，表头用thead包围，主体部分用tbody包围，表头和一般单元格要区分开，表头用th，一般单元格用td。

语义化标签应注意的一些其他问题

　　1、尽可能少用无语义标签div和span；

　　2、在语义不明显，既可用div也可用p的地方，尽量用p；

　　3、不要使用纯样式标签，例如b、font、u等，改用CSS设置。