前言

HTML5的新特性主要是针对以前的不足，增加了一些新标签，新表单和新表单属性

但是呢！这些标签大多都存在兼容性的问题，基本是IE9以上的版本才支持

之前我们做布局，都用的是div，但是没有语义性   

一、新增块级标签

1.头部标签 <header >

        <header > </header>

和div一样的效果，但更具有语义性

2.  导航标签<nav>

   <nav>导航</nav>

3.主要内容标签<main>

        <main></main>

4.内容标签 <article>

<article></article>

文章段落， 和段落p相似

5.<section>定义文档某个区域

<section> 节</section>

6.<aside>侧边栏标签

        <aside>侧边栏</aside>

7.<footer>脚注标签

        <footer>脚注   </footer>  

注意：

• 这些语义化标准主要是针对搜索引擎的
• 可以使用多次

可以尝试做以下案例

二、新增块级标签02

1.<details>关于查看详情出现与隐藏的情况

<details>

        <summary>标题</summary>
</details>

       2. <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

   <figure>
           <img src="img/01.jpg" >
            <figcaption>
             图片标题
            </figcaption>
   </figure>

 二、新增行内块元素标签

1.进度条<progress>

<progress value="20" min="1" max="100"></progress>

      2.  度量衡<meter>

  <meter value="72" min="1" max="100" low="60" high="80"> </meter>

三、新增行内标签

1. <time> 标签定义公历的时间（24 小时制）或日期

我们早上<time>12:00</time>上课

今年的<time datetime="2022-2-14 00:00：00">情人节</time>我是一个人过

2.标记标签<mark>

今年的<time datetime="2022-2-14 00:00：00">情人节</time>我是<mark>一个人</mark>过