也提供了新的功能标签,如媒体播放器<audio> 和 <video> 标记。
还有一些过时的 HTML 4 标记将取消,像包括纯粹用作显示效果的标记,如<font> 和
<center>,因为它们已经被 CSS 取代。
曾经,网页编写会频繁使用<table>这样的没有任何语义的布局,不过最终还是慢慢的接
受了相对更语义化的<div>布局替代了,并且开始调用外部样式表。
但不幸的是,代码中大量使用<div>标记又太单一了,而复杂的网页设计需要大量不同
的标签结构代码,我们把它叫做“<div>-soup” 综合症。
现在,HTML5 和 CSS3 正跃跃欲试的等待大家,新增加了和布局相关的多种语义标记。
表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可
以与 h1、h2、h3、h4、h5、h6 等元素结合起来使用标记文档结构。
表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
表示 article 元素内容之外的,与 article 元素内容相关的辅助信息。
表示页面中一个内容区块或整个页面的标题。
用于整个页面或页面中一个内容区块的标题进行组合。
表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名,
创建日期及创作者联系信息。
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用
figcaption 元素为 figure 元素组添加标题。
尽管这有些勉强,但这个实例还是可以说明使用 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 浏览器必须在元素解析前知道这个元素,所以这个
<script src="./html5.js"></<script>
评论0
最新资源