常用html标签语义大杂烩（一）

大概阐述一下html标签的语义，所有知识来自老师、html5草案（英语四级没过，翻译的糟糕勿怪）、w3cschool。

就先从P标签开始吧：

html5草案对P标签的定义：元素p代表一个段落。是的，当一段内容是段落的时候请用P，而不要使用&nbsp;和<br />来模拟段落的格式。即便这样做了，模拟出来的段落的样式也是依然难以控制的。HTML就是结构，CSS才是负责表现的。

OL标签：

html5对OL语义的解释：OL代表了一个有序列的列表，顺序是人为设置的，改变顺序将会改变文意。

举个例子：将飞机，火车，汽车，自行车，步行的速度从快到慢列出来。那么应该就是

<ol>
<li>飞机</li>
<li>火车</li>
<li>汽车</li>
<li>自行车</li>
<li>步行</li>
</ol>

此时改变li的排序，会导致文章的意思发生变化。

UL标签：

依旧是HTML5的解释：UL代表了一个列表，列表中项目的顺序并不是那么重要，改变其中项目排序后不会改变文章意思。

例子：列举知名的手机厂商

<ul>
<li>诺基亚</li>
<li>索爱</li>
<li>htc</li>
<li>三星</li>
<li>iPhone</li>
</ul>

随便改变排序，并不影响文章的意思。

在此简单讨论一下ul和ol的用途。貌似我们在用的时候并不常常在意他们的区别，我们总会用list-type:none;加上margin:0;padding:0;使他俩在浏览器中变得看起来一样。拿一个资讯网站来说，常见的列表有：最新文章，热门文章，随机文章。

还是从单纯从语义上来讲，很明显，最新文章，肯定是要用ol来显示，排在第一个的一定是最新发表出来的资讯。而热门文章也是应该用ol的，因为是大部分情况是根据浏览数或评论数来决定排序。这些改变顺序很明显会造成误导。而随机文章毫无疑问则用ul了。个人之前习惯用了ul，是个列表就用ul。现在翻一下语义，以后需要改正。

可能有人会说这会不会抬高标签的位置了，这么做到底会有什么影响，即使从seo角度，搜索引擎会不会把语义考虑到这么精细还是一说。但是做技术不能只看眼前，一切技术都需要从根本学起。html5出了canvas，不懂图形学，canvas永远只会停留在表面，成不了真正的高手。web database则需要有扎实的数据库基础，不然充其量也只是懂得如何用接口，而不能算作高手。即便目前这些没有意义，要做一个合格的前端开发工程师，要明白前端开发发展的方向，不懂html标签的语义，就更不会懂得它为什么要存在，更不用说去理解甚至揣测技术的发展方向了。

还有需要说说为什么单纯从语义上来说。一个大型网站（即便是个小网站）涉及的面是很多的，一个小因素究竟如何做，会牵动很多部门来参与。就拿一块内容该用什么标签，会影响到SEO部门，他们希望标签更小、采用搜索引擎重视的标签、标签布局符合他们的整体布局等等；但是UI部门希望这部分更炫更两眼，需要用到更多的标签去实现效果；而这时候还需要加入大量JS，SEO部门又不乐意了。甚至这个标签在前端开发部门内部都难以得到统一，有的人认为应该用strong，有的人认为应该用em；有的人认为JS更方便，有的则认为用JS会影响页面的可用性。所以，只能单纯从语义上来说进行举例子。工作中就要多为用户想，多为其他公司成员想，为他人着想，应该是一名受欢迎的前端开发工程师必备的素质之一吧。

LI标签

html5：li代表了一个列表项目。如果它的父元素是ul，ol，menu，那么li就是这些父标签列表的其中一个列表项目，定义这些父标签。

DL标签

html5：dl标签代表了由0到多个“名字-值”的组组成的一个联合（association 这个词找不到合适的词意来表达）列表。每个小组必须包含一个到多个名称（即dt），紧随其后的是一个或多个值（dd）。在一个单一的dl中，每个name不能对应超过一个dt（绕口）

例子：

<dl>
<dt>murry7094</dt>
<dd>一个网名</dd>
<dd>英文和数字组成的</dd>
<dd>其人比较懒</dd>
<dt>http://hi.baidu.com/summer8th</dt>
<dd>一个百度空间</dd>
<dd>一个二级域名</dd>
</dl>

这个dl里面包含两个 标题-值 的组，一个是murry7094-对应的三个值，另一个则是http://hi.baidu.com/summer8th对应的两个值。

dl就是一个定义列表，dd是dt的一种值，或者说属性，说形容也可以。dl用处很多很多，比如单纯从语义上说，logo就可以设置成dt，而导航条就可以设置成为dd。在首页的新闻导读中，dt内可以写标题，dd写简短的新闻导读。比如网页中的某个人的名片，也可以用dl来做：

<dl>
<dt>murry7094</dt>
<dd>姓名：murry7094</dd>
<dd>住址：北京市</dd>
<dd>性别：男</dd>
<dt>年龄：我也不记得了，真的……</dt>
<dd>目前从事：前端开发工程师--白菜版</dd>
<dd>备注：热爱前端</dd>
</dl>

事实上现在标签的滥用还是比较严重的，等到浏览器普遍支持css3的时候，这种情况会好很多，结构和显示会更加分离。用div三层嵌套实现圆角，对语义化是很不好的，但是目前我们又不得不这么做。

讲的比较乱，下一篇再讲剩下的标签吧。还有很多不常用的标签，不排除公司可能会面试我们，许多不常用的标签，合理的运用在合适的地方，对搜索引擎对用户对后期维护都是很好的。