页面布局与交互
HTML5可以使用结构元素构建网页布局,使Web设计和开发变得更加容易,并且对数据挖掘服务更加友好。HTML5提供了各种切割和划分页面的手段,允许用户创建的切割组件不仅能用来有逻辑地组织站点页面布局,而且能够赋予网站聚合的能力。
HTML5可以称为“信息到网站设计的映射方法”,因为它体现了信息映射的本质,划分信息更加有逻辑,并给信息加上标签,使其变得容易使用和理解。
在HTML5中,为了使文档的结构更加清晰明确,使用了文档结构元素构建网页布局。
如图所示：
源自书本
标签作用：
| 元素 | 用途 |
| header | 设置页面的页眉 |
| nav | 构建导航 |
| main | 主体部分，在一个文档中不能出现一个以上的<main>标签。目前IE浏览器不支持<main>，其经常被<div>代替 |
| section | 对网站或应用程序中页面的内容进行分块 |
| footer | 设置页面页脚 |
| aside | 表示与页面内容相关、有别于主要内容部分 |
| article | 表示文档、页面、应用程序或网站中一体化的内容 |
| figure、figcaption和hgroup | 对页面中的内容进行分组 |
优点：
（1）没有CSS时，也呈现出内容结构、代码结构
（2）方便开发与维护
（3）方便搜索引擎识别页面结构，有利于SEO
（4）方便其他设备解析
（5）有利于合作，遵守W3C标准
1、header元素
header元素是一种具有云引导和导航的作用的结构元素，该元素可以包含所有通常放在页面头部的内容
基本语法主要为：
<header>
<h1>标题1</h1>
<p >内容</p>
</header>
2、nav元素
用于定义导航链接，是HTML五新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。
基本语法：
<nav>
<a href="#">xxx</a>
<a href="#">xxx</a>
<a href="#">xxx</a>
</nav>
3、 section元素
用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成
使用section元素时需要注意以下三点 ：
（1）不要将section元素用作设置样式的页面容器，section元素并非是一个普通的容器元素，当一个容器需要被定义样式或通过脚本定义行为时，推荐使用div。
（2）如果article元素、aside元素或nav元素更符合条件时，建议不要使用section元素。
（3）没有标题的内容区块不要使用section元素定义
基本语法：
<section>
<h3>标题</h3>
<h4>内容</h4>
</section>
4、footer元素
用来定义section或document的页脚，通常该标签包含网站的版权、作者的姓名、文档的创作日期与联系信息。
基本语法：
<footer>
<p>此作品为 xx 版权所有</p>
</footer>
5、 article元素
用来定义独立的区块内容，该标题定义的内容可独立于页面中的其他内容使用，article元素经常用在论坛帖子、新闻文章、博客条目和用户评论的应用中
section元素可以和article元素互相包含， section元素用来对类似的信息进行分组，而article元素则用来放置一篇文章或是博客一类的相对独立的信息
语法格式：
<article>
<h1>标题</h1>
<p>内容</p>
<p>源自xxx</p>
</article>
6、aside元素
用于放置主要内容的附属信息部分，该标签内的内容可以使与当前文章有关的相关资料、标签、名词解释等或作为页面或站点全局的附属信息部分，如广告，其他日志链接或者其他分类的导航
语法格式：
<aside>
<h3>侧边栏题目</h3>
<p>侧边栏内容</p>
</aside>
总结小练习（含之前的文章内容）
最后成品效果 （大家可练习交作业）
参考代码：
<body>
<header>
<h1>无限流小说推荐</h1>
</header>
<hr>
<nav>
<ul>
<li> <a href="#">看书网站1</a></li>
<li> <a href="#">看书网站2</a></li>
<li> <a href="#">看书网站3</a></li>
</ul>
<hr>
</nav>
<section>
<article>
<h3>下面是我的推荐清单</h3>
<h4>ps：希望收到大家的推荐</h4>
<p>欢迎来到我的地狱<br>
我在惊悚游戏里封神<br>
死亡万花筒</p>
<p>想了解更多：<a href="#">点击这里</a></p>
</article>
<aside>
<h3>侧边栏</h3>
<p>招聘广告位</p>
</aside>
</section>
<footer>
<p>以上内容都可自己编写，格式对即可</p>
</footer>
</head>
<body>
