HTML5 新增的标签有哪些？

HTML5 新增的标签有哪些？

1. 语义化结构标签
   • <header>：就好比是网页的“头部招牌”。一个网页的顶部区域，通常放网站的标志、导航菜单这些重要信息，都可以用<header>包起来，让人一看就知道这是网页开头部分，比如新闻网站顶部放着网站名字、搜索框和导航栏的地方。
   • <nav>：是网页里的“路线指引牌”，专门用来放页面的导航链接。像那种点击能跳转到不同页面、不同板块的链接，放在<nav>标签里，方便用户快速找到想去的地方，电商网站底部的“首页”“商品分类”“购物车”这些导航链接就适合用它。
   • <section>：可以理解成网页的“功能分区牌”，用来把网页划分成不同功能或主题的区域。比如一个美食网站，介绍不同菜品的区域，每个区域都可以用<section>包起来，每个区域就是一个相对独立的内容板块。
   • <article>：是网页的“文章独立小盒子”，装那些能独立存在、有自己完整内容的文章。一篇博客文章、一条新闻报道，就适合放在<article>里，它能让内容更突出，搜索引擎也能更好识别，像博客平台上每一篇具体的文章。
   • <footer>：是网页的“底部信息栏”，一般在网页最下面，放版权声明、公司地址、联系方式这些信息。就像一本书最后面的版权页，告诉大家一些基本信息，任何网站底部的那些固定信息都可以用<footer>标签。
2. 多媒体标签
   • <audio>：是网页的“音频播放器”，有了它，不用借助其他插件就能在网页上播放音频，像背景音乐、有声小说、语音消息等，只要把音频文件链接放在<audio>标签里，再加上播放控制按钮（可以用controls属性），就能轻松播放音频。
   • <video>：就是网页的“视频播放窗口”，专门用来播放视频内容，像在线视频网站上播放的视频，把视频文件地址设置好，再调整下大小（width和height属性），加上播放控制条（controls属性），就能播放各种视频，比如电影片段、教学视频等。
3. 其他新增标签
   • <canvas>：是网页上的“画画板”，配合JavaScript代码，能在上面绘制各种图形，像线条、圆形、矩形，还能制作动画。很多网页小游戏、数据可视化图表，就是靠<canvas>绘制出来的。
   • <progress>：可以看作是“任务进度条”，在网页上展示任务的完成进度。比如文件上传、下载时，用这个标签就能让用户清楚看到进行到什么程度了，通过设置value和max属性来表示当前进度和总进度。
   • <input>标签新增了很多类型，比如<input type="date">是“日期选择器”，点击就能弹出日历选日期；<input type="email">是“邮箱格式验证输入框”，能自动检查输入的是不是正确的邮箱格式；<input type="tel">是“电话号码输入框” ，更方便输入电话号码。