HTML5新增标签
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定
在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。
扩展知识
div容器元素，也是页面中见到的最多的元素
div实现
H5新标签实现
HTML5新增的标签
1.article
<article> 标签用于定义页面中独立的、可以独自成篇的内容块，比如博客文章、新闻报道等。一个页面可以包含多个 <article> 标签，它们可以嵌套在 <section> 中。
<article> <h2>文章标题</h2> <p>文章内容</p> </article>
2.section
<section> 标签用于组织文档内容，将相关的内容块分组在一起。它通常包含一个标题，并可以包含多个 <article> 或其他内容。
<section> <h2>节标题</h2> <article> <h3>文章标题</h3> <p>文章内容</p> </article> <article> <h3>另一篇文章标题</h3> <p>另一篇文章内容</p> </article> </section>
3.header
<header> 标签用于定义页面或页面内部分的页眉。通常包含导航、logo、标题等元素。
<header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">导航项1</a></li> <li><a href="#">导航项2</a></li> <!-- ... --> </ul> </nav> </header>
4.footer
<footer> 标签用于定义页面或页面内部分的页脚，通常包含版权信息、联系方式等。
<footer> <p>© 2023 网站名称</p> <p>联系邮箱：info@example.com</p> </footer>
5.nav
<nav> 标签用于定义导航链接的容器，它包含了用户在网站上导航的链接。
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系方式</a></li> </ul> </nav>
6.aside
<aside> 标签用于标识和文章内容相关但不是主要内容的部分，比如侧边栏、广告等。
<article> <h2>文章标题</h2> <p>文章内容</p> <aside> <h3>相关链接</h3> <ul> <li><a href="#">相关文章1</a></li> <li><a href="#">相关文章2</a></li> <!-- ... --> </ul> </aside> </article>
7.figure和 figcaption
<figure> 用于包裹媒体元素（如图像、视频、图表等），<figcaption> 用于为这些媒体元素提供一个标题。
<figure> <img src="example.jpg" alt="示例图像"> <figcaption>图像描述</figcaption> </figure>
8.mark
<mark> 标签用于突出显示文本中的一部分，通常会以黄色或其他明显的颜色进行标记。
<p>文章发布时间：<time datetime="2023-09-16">2023年9月16日</time></p>
9.time
<time> 标签用于表示日期和时间，可以帮助搜索引擎和浏览器理解日期时间的含义。
<p>文章发布时间：<time datetime="2023-09-16">2023年9月16日</time></p>
10.progress
<progress> 标签用于显示任务的完成进度，比如文件上传的进度或者一个游戏的进度条。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 150);
11.video
<video> 标签允许开发者在网页中嵌入视频，而无需依赖第三方插件如Flash。这为用户提供了更好的视觉体验，并且使得视频内容更易于访问。
<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <p>您的浏览器不支持视频播放。</p> </video>
在上面的例子中，<video> 标签嵌入了一个视频文件，并通过 <source> 标签指定了不同格式的视频文件，以便在不同浏览器中提供兼容性支持。controls 属性添加了视频播放器的控制按钮。
12.canvas
<canvas> 标签是一个绘图区域，可以通过JavaScript来绘制图形、动画等。它为开发者提供了灵活的绘图功能，可以实现各种视觉效果。
html：
<canvas id="myCanvas" width="500" height="500"></canvas>
javascript：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 150);
通过JavaScript获取了 <canvas> 元素的上下文（context），并使用上下文绘制了一个红色的矩形。
这些是HTML5中新增的一些重要语义化标签，它们为开发者提供了更多的选择来描述页面的结构和内容，使得网页能够更好地被搜索引擎理解，也提升了可访问性和可维护性。同时，合理使用这些标签也能为用户提供更好的浏览体验。除了上述介绍的标签，HTML5还引入了许多其他标签和API，使得开发者能够实现更丰富的功能和交互效果。
这里就不一一介绍啦，有兴趣的小伙伴可以去阅读官方文档。
