html5布局元素,HTML5布局元素.ppt

HTML5布局元素

第17章 HTML5布局元素 第17章 HTML5布局元素 1、HTML5分块内容元素 2、页眉和页脚 3、导航 4、文章 5、区块 6、侧栏 7、对分级标题进行分组 8、在块级元素周围设置链接 9、帮助旧版本的浏览器理解 1、HTML5分块内容元素 HTML5提供了四个分块内容(sectioning content)元素：, , 和 。 这些元素将文档划分为不同的区块，并定义了

～

(以及和)元素的范围。? 每个分块元素都有它自己的

～

层次结构，同时，每个页面都可以有一个以上的

。 2、页眉和页脚 如果页面中有一块包含一组介绍性或导航性内容的区域，应该用元素对其进行标记。 一个页面可以有任意数量的元素，它们的含义可以根据其上下文而有所不同。 通常，页眉包括网站标志、主导航和其它全部链接，甚至搜索框。 元素也很适合对页面深处的一组介绍性或导航性内容进行标记。例如，一个区块的目录。 2、页眉和页脚 元素代表嵌套它的最近的< article >、< aside >、< blockquote >、< body>、< details >、、

、< nav >、< section>或< td >元素的页脚。 只有当它最近的祖先是< body>时，它才是整个页面的页脚。 如果一个包着它所在区块(如一个< article >)的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。 (练习P433) 3、导航 元素表示主导航链接的区域。中的链接可以指向页面中的内容，也可以指向其它页面或资源，或者两者兼而有之。 无论是那种情况，应该仅对文档中重要的链接群使用元素。 导航元素中的链接标记为

• 结构。如果连接顺序重要，则可标记为

1. (有序列表)结构。 (练习P434) 4、文章 HTML5对元素的定义： 元素表示文档、页面应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。它可以是一篇论坛帖子，一篇杂志或报刊文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或任何其他独立的内容项。 一个页面可以有多个元素，也可以没有。 (练习P435) 5、区块 HTML5对元素的定义：元素代表文档或应用的一个一般的区块。是具有相似主题的一组内容，通常包含一个标题。 的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。 (练习P437) 6、侧栏 有时，一部分内容与页面的主体内容并不那么相关，但可以独立存在，可以用HTML5中的元素标记。 浏览器在默认情况下并未对元素应用任何样式(除了在新行开始)，但可以通过CSS控制其外观显示。 很容易将元素看作侧栏，但元素其实可以用在页面的很多地方。它可以是主要内容中的一个框，或者与主要内容位于同一栏而并未嵌套，或者位于(或作为)侧栏。(练习P436) 7、对分级标题进行分组 一个标题有多个连续的层级，例如带有子标题，替换标题或广告语，这时将它们放进元素可以指明它们是相关的。 ?使用元素的目的是将两个或多个

～

元素组合在一起。使它们被看作一个单独的标题。? 每个元素都包含两个或更多的

～

标题，不可放入其它元素。? 在一个元素中，只有第一个最高级别的标题会出现在文档大纲中。但元素中的所有标题都会在浏览器中显示。 8、在块级元素周围设置链接 HTML5允许在一个包含子元素的块级元素周围放置元素，这样可以将整个块转换成一个链接。 9、帮助旧版本的浏览器理解 旧版本的浏览器不支持新增的HTML5元素，旧版本的浏览器会自动地将它们当作行内元素。因此，为了使旧版本的浏览器支持新增的HTML5元素，需要加入以下CSS代码，这段CSS代码表明哪些新的元素应被呈现为块级元素。 header, section, footer, aside, nav, article, figure, figcaption { display: block;} 9、帮助旧版本的浏览器理解 为了能够使用早期版本的IE定义这些元素的样式，需要使用简单的JavaScript，称作H