此系列文面向一些网页前端初学者,或者是做了很多静态页面,认为只要页面呈现出自己所要的视觉效果就万事OK,不懂W3C标准的童鞋们(我曾经就是这样的)。
语义化标签:你认为用什么标签最能描述这块内容,觉得这样表述更有意义,那么就可以使用这个标签。现在的浏览器对CSS支持都挺完善的(不包括CSS3),讲究的是结构与表现相分离,结构与行为相分离,一个WEB页面,结构是最主要的,结构相当于一栋房子的墙,标签是一块块砖,砖摆得有序,摆得整治齐,墙才牢固,所以说标签语义化很重要,HTML每个标签都有自己的语义。——网上摘下的一段话
上面一段话我并不完全同意。实际上w3c组织在HTML标签的语义和使用方面都有相关的条目,并且这在HTML5中得到了更大的体现。W3C标准的存在意义就是让web页面更规范,团队开发时代码更具有易读性,减少浏览器兼容问题。更深一层,不符合W3C标准的页面是会影响到整个网站的性能。尤其是对一些高并发的SNS网站来说,制作符合W3C标准的网站显得尤为重要。
以下列举一些常见的语义化标签:
- p
- 文本段落。每个p标签包裹一个段落,段落之间会自动换行,无需使用<br/>标签。一般都有默认的段间距,便于更改。
- 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等等丰富的标签在这里就不赘述了。