HTML5布局元素.ppt

第17章 HTML5布局元素 第17章 HTML5布局元素 1、HTML5分块内容元素 2、页眉和页脚 3、导航 4、文章 5、区块 6、侧栏 7、对分级标题进行分组 8、在块级元素周围设置链接 9、帮助旧版本的浏览器理解 1、HTML5分块内容元素 HTML5提供了四个分块内容（sectioning content）元素：article, aside, nav 和section 。 这些元素将文档划分为不同的区块，并定义了h1～h6（以及header和footer）元素的范围。? 每个分块元素都有它自己的h1～h6层次结构，同时，每个页面都可以有一个以上的h1。 2、页眉和页脚 如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。 一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而有所不同。 通常，页眉包括网站标志、主导航和其它全部链接，甚至搜索框。 header元素也很适合对页面深处的一组介绍性或导航性内容进行标记。例如，一个区块的目录。 2、页眉和页脚 footer元素代表嵌套它的最近的 article 、 aside 、 blockquote 、 body、 details 、fieldset、figure 、 nav 、 section或 td 元素的页脚。 只有当它最近的祖先是 body时，它才是整个页面的页脚。 如果一个footer包着它所在区块（如一个 article ）的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。 （练习P433） 3、导航 nav元素表示主导航链接的区域。nav中的链接可以指向页面中的内容，也可以指向其它页面或资源，或者两者兼而有之。 无论是那种情况，应该仅对文档中重要的链接群使用nav元素。 导航nav元素中的链接标记为ul结构。如果连接顺序重要，则可标记为ol（有序列表）结构。 （练习P434） 4、文章 HTML5对article元素的定义： article元素表示文档、页面应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。它可以是一篇论坛帖子，一篇杂志或报刊文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或任何其他独立的内容项。 一个页面可以有多个article元素，也可以没有。 （练习P435） 5、区块 HTML5对section元素的定义：section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容，通常包含一个标题。 section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。 （练习P437） 6、侧栏 有时，一部分内容与页面的主体内容并不那么相关，但可以独立存在，可以用HTML5中的aside元素标记。 浏览器在默认情况下并未对aside元素应用任何样式（除了在新行开始），但可以通过CSS控制其外观显示。 很容易将aside元素看作侧栏，但aside元素其实可以用在页面的很多地方。它可以是主要内容中的一个框，或者与主要内容位于同一栏而并未嵌套，或者位于（或作为）侧栏。（练习P436） 7、对分级标题进行分组 一个标题有多个连续的层级，例如带有子标题，替换标题或广告语，这时将它们放进hgroup元素可以指明它们是相关的。 ?使用hgroup元素的目的是将两个或多个h1～h6元素组合在一起。使它们被看作一个单独的标题。? 每个hgroup元素都包含两个或更多的h1～h6标题，不可放入其它元素。? 在一个hgroup元素中，只有第一个最高级别的标题会出现在文档大纲中。但hgroup元素中的所有标题都会在浏览器中显示。 8、在块级元素周围设置链接 HTML5允许在一个包含子元素的块级元素周围放置a元素，这样可以将整个块转换成一个链接。 9、帮助旧版本的浏览器理解 旧版本的浏览器不支持新增的HTML5元素，旧版本的浏览器会自动地将它们当作行内元素。因此，为了使旧版本的浏览器支持新增的HTML5元素，需要加入以下CSS代码，这段CSS代码表明哪些新的元素应被呈现为块级元素。 header, section, footer, aside, nav, article, figure, figcaption { display: block;} 9、帮助旧版本的浏览器理解 为了能够使用早期版本的IE定义这些元素的样式，需要使用简单的JavaScript，称作HTML5 shiv或HTML5 shim。 !--[if lt IE 9] script src=/svn/trunk/html5.js/script ![endif]? 这段JavaScript被放在条件注释中