HTML基础之标签的使用- 标签的语义化使用

此系列文面向一些网页前端初学者，或者是做了很多静态页面，认为只要页面呈现出自己所要的视觉效果就万事OK，不懂W3C标准的童鞋们（我曾经就是这样的）。

语义化标签：你认为用什么标签最能描述这块内容，觉得这样表述更有意义，那么就可以使用这个标签。现在的浏览器对CSS支持都挺完善的（不包括CSS3），讲究的是结构与表现相分离，结构与行为相分离，一个WEB页面，结构是最主要的，结构相当于一栋房子的墙，标签是一块块砖，砖摆得有序，摆得整治齐，墙才牢固，所以说标签语义化很重要，HTML每个标签都有自己的语义。——网上摘下的一段话

上面一段话我并不完全同意。实际上w3c组织在HTML标签的语义和使用方面都有相关的条目，并且这在HTML5中得到了更大的体现。W3C标准的存在意义就是让web页面更规范，团队开发时代码更具有易读性，减少浏览器兼容问题。更深一层，不符合W3C标准的页面是会影响到整个网站的性能。尤其是对一些高并发的SNS网站来说，制作符合W3C标准的网站显得尤为重要。

以下列举一些常见的语义化标签：

p

文本段落。每个p标签包裹一个段落，段落之间会自动换行，无需使用
标签。一般都有默认的段间距，便于更改。

h1,h2,h3,h4,h5,h6

标题。数字越大，优化级别越低。该系列对搜索引擎有加权重作用。一般在文章中字体大小逐级减小，以表示标题级别。

在HTML4中，h1是用于页面标题的，即一个页面只有一个h1。当然这是w3c标准，如果你用多个h1，浏览器也不会显示不正确。

另外，由于h系列在SEO中的作用，经常被用作放LOGO图片和网站名称。

ul,li

无序列表。通俗的说，就是没有序号的列表。可以通过css的list-style轻松地改掉左侧默认的小圆点。

另外，由于ul标签的特殊性，它经常被用于创建一些属于一个整体成序列的结构。如：导航条，现在位置等。

ol,li

有序列表。类似ul,li标签，使用方法相同。唯一不同的是，ol经常用于创建那种第1点，第2点，第3点……的列表。其默认在左侧的显示自动增长的数字符号。

table,tr,th,td,caption...

表格。很多人喜欢偷懒用table来布局，包括ASP.NET的一些控件也经常自动编译生成层层嵌套的table。对于复杂的页面，你会发现代码变得混乱不堪，改起来想吐血。

事实上，布局应当使用div层，而table则是用于显示数据表的。table标签内还可以使用丰富的标签和属性，各自有不同的作用。

如：caption为整个表格标题，th为某列或某行的标题，td为普通的单元格,tr为表格的行……另外还有thead,tbody,tfoot,colgroup,col,rowgroup,row等等丰富的标签在这里就不赘述了。