Web前端开发案例教程（HTML5+CSS3） 第3章 HTML5新增页面元素.pptxVIP

第3章 HTML5新增页面元素 ※ 掌握结构元素； ※ 熟悉分组元素； ※ 熟悉页面交互元素； ※ 熟悉文本语义元素。 案例实现 2 3.1 3.2 3.3 案例：旅游部落网页 第3章 HTML5新增页面元素 知识准备 综合利用HTML5新增页面元素，创建旅游部落网页。要求如下： （1）用HTML5新增页面元素定义页面。 （2）其它国内游精品路线用下拉方式展示， 单击标题可以展示或折叠详细内容。 3 4 3.2 知识准备 5 第3章 HTML5新增页面元素 6 HTML 5提供了一些新的元素和属性， 这些元素有利于生成更智能的搜索结果， 同时更好的帮助小屏幕装置和视障人士使用。 7 HTML5中新增了几个结构元素（section元素、article元素、nav元素、aside元素、header元素和footer元素），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。 header元素为页面或页面中某一个区块的页眉，通常是一些引导和导航信息。Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等。 8 语法格式： header h1标题/h1 …… / header 9 例如 nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个nav元素，但并不是所有的链接都需要包含在nav元素中。通常nav元素用于以下几种场合： 传统的导航条； 侧边栏导航； 内页导航； 翻页导航。 10 2、 nav元素 例如，常见的首页、上一页、下一页、尾页链接。 nav a href=#首页/a a href=#上一页/a a href=#下一页/a a href=#尾页/a /nav 学院网站传统导航条也可以用nav元素。 11 2、 nav元素 12 section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。 13 section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。 14 使用需注意以下3点： 不要使用section元素设置样式作为设置样式的页面容器，那是div的工作。 如果article元素、aside元素、nav元素更适合我们使用条件，那么我们就不要使用section元素。 不要为没有标题的内容去使用section元素。没 有标题的内容区块不要使用section元素。 15 article元素用来定义独立的内容，该元素定义的内容可独立于其它的内容使用。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分，一个article元素通常有它自己的标题（通常放在一个header元素里面），有时还有自己的页脚。 16 在HTML5中，article元素可以嵌套使用。article元素可以包含多个section元素，section元素也可以包含多个article元素。article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素侧重分段或分块，而article侧重独立性。如果一块内容相对来说比较独立的、完整 ，应该使用article元素，如果你想将一块内容分成几段，应该使用section元素。 17 aside元素通常用来表示当前页面的附属信息部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。 18 aside元素主要使用方法有两种： （1）被包含在article元素中作为主要内容的附属信息部分。比如与我们当前文章有关的参考资料、名词解释等等。 （2）第二种用法是在article元素之外使用的，作为页面或者站点全局的附属信息。比如侧边栏、广告、友情链接等。 19 footer元素用于定义页面或区域的页脚，可以为网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个footer元素，也可以在section元素或article元素中使用footer元素。 20 footer元素 header元素 article元素 nav 元素 aside元素 section元素 21 分组元素用于对页面元素进行分组。 我们熟悉的div、 p 、ol、ul都是分