述自身所包含的内容。许多开发人员都会在自己的设计中使用侧边栏、头部、尾部和区段( section)，正因为如此，HTML5规范引入了新的专用于划分页面不同逻辑区域的标签。我们可以在工作中使用这些新元素。有了HTML5的帮助，我们就能根除滥用div的现象了。 除了新的结构标签，我们还要谈谈meter元素，探讨如何使用新的自定义数据属性在元素中嵌入数据，进而取代惯用的类劫持(hijacking class)或现有属性。简言之，我们要弄清如何在适当的情况下选择合适的标签。 本章中，我们会探讨以下新元素及其特性。① 口<header>定义页面或区段的头部。[C5、F3.6、IE8、S4、010] 口<footer>定义页面或区段的尾部。[C5、F3.6、IE8、S4、010] 口<nav>定义页面或区段的导航区域。[C5、F3.6、IE8、S4、010] 口<section>定义页面的逻辑区域或内容组合。[C5、F3.6、IE8、S4、010] 口<arti cle>定义正文或一篇完整的内容。[C5、F3.6、IE8、S4、010] 口<aside>定义补充或相关内容。[C5，F3.6、IE8、S4、010] 口自定义数据属性(custom data attribute) -允许通过使用“data-”前缀向任意元素中 添加自定义的数据属性。[所有浏览器都支持通过JavaScript的getAttribute0方法获取 这些属性。] 口<mmeter>描述指定范围内的数值。[C5、F3.5、S4、010] 口<progress>用于显示实时进度的控件。[本书出版时，尚无浏览器支持。]2.1 实例1：用语义化标记重定义博客 在博客应用中，济南网站建设有大量内容需要使用结构化标记来进行组织。博客包括了头部、尾部、多种导航（博文归档链接、至其他博客或网站的链接列表和内部链接）、博文和回帖。下面，我们就以顶级优秀的AwesomeCo公司的博客首页为例，使用HTML5标记编写相应原型。 我们的设计方案如图2-1所示。这是一个非常典型的博客结构，其头部区域包含了水平导航。在主要的正文区域中，每篇文章都包括头部和尾部。此外，文章还可能包括摘要或旁白。侧边栏包含了其他的导航元素。最后是页面的尾部，它包含了联系方式和版权信息。结构本身并没有任何新意，唯一不同的是，我们将使用语义化标签来代替以往大量使用的div栎签。①在后续的描述中，浏览器支持情况使用方括号加代码缩写和最低支持版本号的形式表示。缩写代码所表示的意义 分别是：C表示Google Chrome，F表示Firefox，IE表示Internet Explorer，0表示Opera，S表示Safari，IOS表 示使用移动版Safari的iOS设备，A表示Android Browser。2.1.1 以正确的文档类型声明为基础2.1 实例1：用语义化标记重定义博客●13 若想使用HTML5的新元素，就需要让浏览器和验证器能够识别这些新标签。创建名为index.html的新页面，写入基本的HTML5模板： Download htm15newfags/index.hfmlLinel < ! DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; 5 <title>AwesomeCo Blog</title> 6 </head> 8 <body> 9</body> ]o</html> 注意示例中第1行的文档类型声明，它是HTML5的文档类型声明。如果经常编写网页，下面这段冗长难记的XHTML文档类型声明一定不会让你感到陌生：<!DOCTYPE html PUBLIC "~W3CflDTD XHTML l.0 Transitiona7//EN "http: flwww.w3.org/TRlxhtm71/DTDlxhtm71-transitiona7 .dtd">再来看看HTML5的文档类型声明： <! DOCTYPE html>桕比之下，HTML5的文档类型声明显然更加简单好记。 文档类型声明有两个作用。第一，验证器依据它来判断应该采用何种验证规则去验证代码。第二，文档类型声明能够强制IE6、IE7和IE8以“标准模式”(standards mode)渲染页面，在页面需要兼容所有浏览器时，这点极其重要。HTML5文档类型声明具备了上述两种作用，它甚至可以被IE6识别。2.1.2头部 不要将头部( header)与hl. h2. h3这样的标题(heading)混为一谈，头部可能包含从公司的Logo到搜索框在内的各式各样的内容。目前，示例博客的头部只包含了博客的标题： Download htm15newtags/index.htmlLine l <header id=¨page_header¨> 2 <hl>AwesomeCo Blog!<／hl> 3 </header> 同一个页面中可以包含多个header元素。每个独立的区段或文章块都可以拥有自己的头部，
梦之网科技 http://www.mzwkj.com