什么叫结构化?
由于个人认为这个知识点是十分重要的,所以请允许我在这里多罗嗦几句,我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用 table布局的时候,我们的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而大家再看看我上面给大家展示的代码,很明显, 结构十分清晰。
呵呵,说了半天,还是没有说什么是结构化,什么才是结构清晰啊?不要急。还记得我刚才提到的那几个标签吗?
h1~h6--如果你要显示的数据是作为标题显示的时候,就用这些标签,因为这个标签的意思就是说,这个是一个标题,不仅我们的用户很容易理解h- head的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。呵呵,看到了吧,一个充分结构化的页面,对用户是十分友好的。
p--Paragraph(段落)
ul--unorglized list(无序的列表)
ol--orglized list(有序的列表)
li--list item(列表项)
form--表单
div--division(区域)
我这么一写,大家估计开始明白了,原来XHTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释,也可以查看 语义化你的HTML标签和属性),所以我们讲要语意化的意思,就是用合理的标签来显示数据,比如前面提到的,是标题,就应该用h1~h6标签,如果是一个 段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此...
所以看这个例子里
<h2>Ajax标签导航实例详解</h2> |
这么写就是很合理的,h2标签就说明这里是个标题。而这么写:
复制内容到剪贴板代码:
.title{ font-size:18px; ... } <div class="title"><strong>Ajax标签导航实例详解</strong></div> |
虽然你用了strong来强调说明这部分文字,但是还是没有h2标签来的直接明了。
还有这么写
<div class="ariticle-title"><h2>Ajax标签导航实例详解</h2></div> |
也不是我们推荐的,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让我们的浏览器解析起来会更容易,速度更快。
所我们使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面,也不意味着我们就不使用table。只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。
其实我们的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是我们当时 的设计师们都用table标签来布局了。关于table标签的使用,大家也可以去看看上面提供那篇参考文章《语义化你的HTML标签和属性》。