html5+css3课件.pptx

第三章 基本html结构 标题：hn html提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5和h6元素对各级标题进行标记，其中h1最高,后面依次递减。 页眉 如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素进行标记。一个页面可以有任意数量的header元素，它们根据其含义不同位置也不同，处于页面顶端或者接近这个位置的header可能代表整个页面的页眉。 标记导航：nav nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼而有之。无论哪种情况，应该仅对文档中重要的链接群使用nav。 用法：nav一组链接/nav 标记页面主要区域：main 一个页面仅有一个部分代表其主要内容。可以将这样的内容包在main元素中，该元素在一个页面中仅使用一次。 不能将main放置在article、aside、footer、header或nav元素中 文章：article article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。 定义块区：section section元素代表文档或应用的一个一般的区块。在这里section是具有相似主题的一组内容，通常包含一个标题。 section用在文章里的可以这样理解，article包含整个文章，section则包含一篇文章的一个小节，若干个段落组成一个section。 附注栏：aside 有时候，页面中有一部分内容与主题内容相关性不强但可以独立存在，就可以使用aside标签。 使用aside的例子还包括重要引述、侧栏，指向相关文章的一组链接等等。 创建页脚：footer footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚。 如果一个footer包着它所在的区块的所有内容，它代表的是像附录、索引、版权、许可协议这样的内容。 不能再footer里面嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。 通用容器：div 有时需要在一段内容外围包一个容器，从而可以为其应用css样式或者javascript效果。如果没有这个容器，页面就会不一样。div是一个完全没有任何语义含义的容器。 地标角色：role WAI-ARIA(Web Accessibility Initiatives Accessible Rich Internet Applications,无障碍网页协议-无障碍富互联网应用，简称ARIA)是一种技术规范，在html提供相应的语义功能之前，它会使用属性来填补一些语义上的空白。 地标角色 如何使用及何时使用 role=”banner” (横幅） 将其添加到页面级的header元素，每个页面只用一次 role=”navigation” (导航） 与nav元素是对应关系。应将其添加到每一个nav元素，或其他包含导航性链接的容器。 role=”main” (主体） 与main元素对应关系。最好将其添加到main元素，也可以添加到其他表示主体内容的元素（可能是div),只能用一次 role=”complementary” (补充性内容） 与aside元素对应关系。应将其添加到aside或div（前提是该div中仅包含补充性内容）中。可以在一个页面多包含几个complementary,不要过度使用 role=”contentinfo” (内容信息） 将其添加至整个页面的页脚，每个页面仅使用一次。 元素的title属性 可以使用title属性（与title元素不同）为网站上任何部分加上提示标签。而且它们并不只是提示标签，加上它们之后屏幕阅读器可以为用户朗读title文本，因此使用title可以提升无障碍访问功能。 作业： 用Dreamweaver制作一个简单的网页。 要求：根据语义在合适地方用上今天所学到的标签，包括：div、title、hn(可选任意数量)、header、footer、nav、main、article、section、aside、role、li.