3 HTML5新增的语义标签
HTML 5 新增加了一些新的元素和属性,反映典型的现代网站用法。
其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>,这种语义标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
也提供了新的功能标签,如媒体播放器<audio> 和 <video> 标记。
还有一些过时的 HTML 4 标记将取消,像包括纯粹用作显示效果的标记,如 <font> 和 <center>,因为它们已经被 CSS 取代。
新增的结构元素
曾经,网页编写会频繁使用<table>这样的没有任何语义的布局,不过最终还是慢慢的接受了相对更语义化的<div>布局替代了,并且开始调用外部样式表。
但不幸的是,代码中大量使用<div>标记又太单一了,而复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“<div>-soup” 综合症。
现在,HTML5和CSS3正跃跃欲试的等待大家,新增加了和布局相关的多种语义标记。
尽管这有些勉强,但这个实例还是可以说明使用HTML4对一个复杂的页面设计进行,代码化后依然过于臃肿。
不过HTML5元素富有更细致的语义,可以代替那些毫无语义的<div>标签,并同时为CSS的调用提供了“自然”的CSS钩子。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。
事实上,后面课程中介绍的CSS3也是可以忽略掉所有class和id 的。 现在布局中结合了富有新的语义化标记的HTML5、CSS3为web设计师们的网页提供了神一般的力量。
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript, Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。
上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。