网页设计与制作（HTML+CSS+JS）-3期（KC003） HTML5的结构标签 1HTML5结构性标签.pptx

1 HTML5结构性标签 Part ◎HTML5结构性标签 ◎section标签 ◎nav标签 ◎article标签 ◎aside标签 ◎header标签 ◎footer标签 1 认知结构性标签 传统DIV+CSS布局 HTML5结构标签 结构性标签其实就是语义化的html网页框架。 结构性标签，标签本质上和div没有任何区别。 借助id与class，通过CSS样式来实现页面布局，没有标准的规范，搜索引擎只能去猜测某部分的功能，文档结构和内容不够清晰。 / 举例界面 举例演示 【实例3-1】HTML5结构性标签。 header nav article section aside footer 定义和用法 <section>标签用于对网页的内容进行分区、分块，定义文档中的节。 比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由标题和内容组成。 注 意 <section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。 根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。 举例演示 定义和用法 <article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。 注 意 Article标签会有标题部分，通常可以包含header，有时也会包含footer。 article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。 举例演示 定义和用法 nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。 nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。 举例演示 定义和用法 aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。 aside标签可以被包含在article标签内作为主要内容的附属信息。 也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。 举例演示 定义和用法 header标签定义文档的页眉，通常是一些引导和导航信息。 header标签不局限于写在网页头部，也可以写在网页内容里面。 通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识Logo、搜索表单、<nav>导航等。 定义和用法 footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。 作为页面的页脚时，一般包含了版权、相关文件和链接。 footer标签和<header>标签使用基本一样，可以在一个页面中多次使用，也可以在article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。