内容结构简称结构，是为网页内容建立一个框架，就象写文章先写一个提纲。
HTML5 页面结构元素语法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML5文档结构</title>
</head>
<body>
<header>
<nav>...</nav>
</header>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
header
- 包括网站标志、主导航和其他全站链接， 甚至搜索框。
- 一个header元素至少可以包含一个heading元素（h1-h6）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML5文档结构</title>
</head>
<body>
<header >
<img src="../images/logo.png" alt="茗茶馆">
<nav>
<ul>
<li ><a href="home.html" title="主页">主页</a></li>
<li><a href="#" title="花茶及文化">花茶及文化</a></li>
<li><a href="#" title="饮品及美食">饮品及美食</a></li>
<li><a href="#" title="俱乐部">俱乐部</a></li>
<li><a href="form.html" title="在线订购">在线订购</a></li>
</ul>
</nav>
</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
nav
其语法格式如下：
<nav>
<ul>
<li ><a href="#">……</a></li>
<li ><a href="#">……</a></li>
……
</ul>
</nav>
main
标签定义文档的主要内容。标签中的内容对于文档来说应当是唯一的article
article元素在页面中用来表示结构完整且独立的内容部分,可以嵌套使用
<article>
<header>
<h3>茗茶推荐——祁门红茶</h3>
<time datetime="2016-10-10">2016年10月10日</time>
</header>
<p>
祁门红茶简称祁红，茶叶原料选用当地的中叶、中生种茶树“槠叶种”（又名祁门种）制作，是中国历史名茶，著名红茶精品。祁门红茶是红茶中的极品，享有盛誉，是英国女王和王室的至爱饮品，高香美誉，香名远播，美称“群芳最”、“红茶皇后”。
</p>
<footer>
<span>阅读(99)</span>
</footer>
</article>
section
…
…
<section class="recommend-book">
<h3>《JavaScript权威指南》</h3>
<div class="description">
<p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员心中的《圣经》。</p>
<p>David Flanagan，是一名程序员，也是一名作家 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby Programming Language》、以及《Java in a Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p>
</div>
<div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
<a class="more" href="details.html">详细内容</a>
</div>
</section>
aside
<aside>
<!--边栏广告-->
<div id="advert"></div> <!--畅销图书-->
<section id="best-selling">
<h2>畅销图书</h2>
<ul>
<li>深度学习 [deep learning]</li>
<li>Hadoop权威指南：大数据的存储与分析(第4版)，累计销量超过10万册 </li>
<li>和秋叶一起学PPT 第3版 </li>
<li>深度学习优化与识别 </li>
<li>区块链原理、设计与应用 </li>
</ul>
</section>
<div id="classify-partner"> <!--图书分类-->
<section id="classify">………..
</section>
<!--合作伙伴-->
<section id="partner">………
</section>
</div>
<!--关于书店-->
<section id="about">
<h2>关于书店</h2>
<div class="content">
<p>叮叮书店成立于2010年6月，是由教育部主管、清华大学主办的综合出版单位。</p>
</div>
</section>
</aside>
footer
<footer class="container">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>服务条款</li>
<li>隐私策略</li>
<li>联系我们</li>
</ul>
</footer>
details和summary
<summary>元素说明文档的标题，<details>元素用于说明文档的详细信息。<summary>元素是<details>元素中的第一个子元素，二者经常同时出现在页面中。
其语法格式如下：
<details>
<summary>……</summary>
……
</details>
- <
details>元素实际上是一种用于标识该元素内部子元素可以被展开、收缩显示的元素。元素具有一个布尔类型值的open属性，当open属性值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。 - <
summary>标签可以为<details>元素定义标题，标题是可见的，用户用鼠标单击标题时，会展开显示<details>元素内容，再次单击标题时，<details>元素会收缩起来不显示。<summary>元素从属于<details>元素
如果<details>元素内没有定义<summary>元素，浏览器会提供默认的文字显示，如“详细信息”。
div
<div>和<span>标签并没有具体标识这个元素到底是什么，需要在实际使用中根据元素内容确定
- <
div>用来定义文档中的分区或节或块，<div>标签可以把文档分割为独立的、不同的部分，是一个容器标签，<div>的内容可以是任何HTML5元素。 - 如果有多个<
div>标签把文档分成多个部分，可以使用id或class属性来区分不同的<div>。
<div>
<h3>这是一个标题</h3>
<p>这是一个段落</p>
</div>
<span>一些文本</span>
<span>一些其他文本</span>
格式化标签
<tt>呈现类似打字机或者等宽的文本效果
<i>显示斜体文本效果
<b>呈现粗体文本效果
<wbr>规定在文本中的何处适合添加换行符
<big>呈现大号字体效果
<small>呈现小号字体效果元素均是字体样式元素
建议使用样式表设定来取得更加丰富的效果。
