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