HTML5语义元素
1、什么是语义元素？
语义元素清楚的向浏览器和开发者描述其意义
例如：<form><table><img>
非语义元素：<div><span>
2、HTML5提供新的语义元素
（1）section元素
定义文档中的节 节：有主题的内容组 通常具有标题 将网站首页划分为 简介 内容 联系信息
（2）article 元素
规定独自的包含内容 文档有其自身的意义 并且独立于其他内容进行阅读
应用场景：
论坛
博客
新闻
在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <sections> 元素的页面。
您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。
（3）header 文档或者节规定页眉 介绍性内容
footer 文档或者节规定页脚
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等
可以包含多个页眉和页脚
（4）<nav>定义大型导航链接块
（5）<aside>页面内容之外的内容（侧栏）
（6）figure和figcaption
figcation 为图片添加标题
可以将图片和标题组合显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<nav>
<a href="../form/radio.html">radio</a>|
<a href="../form/section.html">section</a>|
<a href="../form/submit.html">submit</a>|
<a href="../form/text.html">text</a>|
</nav>
<section>
<h1>chenjing</h1>
<p>如果需要学习一个网站的内容 你需要先打开这个网页</p>
</section>
<article>
<h1>price</h1>
<p>有些网页需要钱有些不需要</p>
</article>
<figure>
<img src="../taylor.jpg" alt="taylor" width="300" height="300">
<figcaption>fig-1.this is a beautiful girl</figcaption>
</figure>
</body>
</html>
3、HTML5语义元素
| 标签 | 描述 |
|---|---|
| <article> | 定义文章。 |
| <aside> | 定义页面内容以外的内容。 |
| <details> | 定义用户能够查看或隐藏的额外细节。 |
| <figcaption> | 定义 <figure> 元素的标题。 |
| <figure> | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| <footer> | 定义文档或节的页脚。 |
| <header> | 规定文档或节的页眉。 |
| <main> | 规定文档的主内容。 |
| <mark> | 定义重要的或强调的文本。 |
| <nav> | 定义导航链接。 |
| <section> | 定义文档中的节。 |
| <summary> | 定义 <details> 元素的可见标题。 |
| <time> | 定义日期/时间。 |