1 section元素
用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内而外及其标题组成。但它并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
示例：
<section>
<h1>苹果</h1>
<p><b>苹果</b> ，植物类水果，多次花果</p>
</section>
通常不推荐为那些没有标题的内容使用section元素，可以使用HTML5轮廓工具来检查页面中是否有没标题的section。
2 article元素
代表文档、页面或应用程序中独立的 、完整的、可以独自为外部引用的内容。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
示例：
<section>
<article>
<h3>情绪产生过程</h3>
<a class="a1"><img src="C:\Documents\Desktop\杭州实习作业\picture\1527219280392304.jpg" width="200px" height="px"></a>
<p>
从古希腊至今，历代思想家都试图在理论上解释情绪的产生。
当代情绪理论多注重经验主义研究方法，
很多独立的理论并不互相排斥，
大多数研究人员乐于采纳多种视角，融合各种理论。
引起争议的问题主要是认知判断对产生情绪有多重要，特别是和身体反应等其他方面比较。
</p>
</article>
<h4>构成要素</h3>
<p>
情绪既是主观感受，又是客观生理反应，具有目的性，也是一种社会表达。情绪是多元的、复杂的综合事件。情绪构成理论认为，在情绪发生的时候，有五个基本元素必须在短时间内协调、同步地进行。
认知评估：注意到外界发生的事件（或人物），认知系统自动评估这件事的感情色彩，因而触发接下来的情绪反应（例如：看到心爱的宠物死亡，主人的认知系统把这件事评估为对自身有重要意义的负面事件）。
身体反应：情绪的生理构成，身体自动反应，使主体适应这一突发状况（例如：意识到死亡无法挽回，宠物的主人神经系统觉醒度降低，全身乏力，心跳频率变慢）。
感受：人们体验到的主观感情（例如：在宠物死亡后，主人的身体和心理产生一系列反应，主观意识察觉到这些变化，把这些反应统称为“悲伤”）。
表达：面部和声音变化表现出这个人的情绪，这是为了向周围的人传达情绪主体对一件事的看法和他的行动意向（例如：看到宠物死亡，主人紧皱眉头，嘴角向下，哭泣）。对情绪的表达既有人类共通的成分，也有各地独有的成分。
行动的倾向：情绪会产生动机（例如：悲伤的时候希望找人倾诉，愤怒的时候会做一些平时不会做的事。
</p>
3 nav元素
一个可以用作页面导航的链接组。只需要把主要的，基本的链接组发你放进nav元素即可。
示例：
<nav>
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="https://baike.baidu.com/item/%E5%96%9C/4754?fr=aladdin">喜</a></li>
<li><a href="https://baike.baidu.com/item/%E6%80%92/19912590?fr=aladdin">怒</a></li>
<li><a href="https://baike.baidu.com/item/%E5%93%80%E5%A7%93/10313765?fr=aladdin&fromid=6107073&fromtitle=%E5%93%80">哀</a></li>
<li><a href="https://baike.baidu.com/item/%E4%B9%90/34288?fr=aladdin">乐</a></li>
<li><a href="https://baike.baidu.com/item/%E6%83%8A/5218156?fr=aladdin">惊</a></li>
<li><a href="https://baike.baidu.com/item/%E6%81%90/6500595?fr=aladdin">恐</a></li>
<li><a href="https://baike.baidu.com/item/%E7%88%B1/433?fr=aladdin">爱</a></li>
<li><a href="http://www.sohu.com/a/243573186_100233783">没有情绪</a></li>
<li class="search">
<form action="http://www.baidu.com/s" method="get">
<input type="text" name="wd" placeholder="" value="心情" >
<input type="submit" value="?">
</form>
</li>
</ul>
</nav>
4 aside元素
用来表示当前面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
示例：
<aside>
<section class="widget">
<h4>最近文章</h4>
<ul>
<li><a href="https://book.douban.com/review/10138454/"><mark>如何才能不焦虑</mark></a></li>
<li><a href="javascript:;">听说你不会情绪管理</a></li>
<li><a href="javascript:;">疾病真的更青睐于悲观的人吗</a></li>
</ul>
</section>
<section>
</section>
<section>
<h4>文章归档</h4>
<ul>
<li><a href="javascript:;">2019/06/28</a></li>
<li><a href="javascript:;">2019/06/29</a></li>
<li><a href="javascript:;">2019/06/30</a></li>
</ul>
</section>
</aside>
原文地址：https://www.cnblogs.com/yanyanstyle/p/11261801.html