html5新增标签有哪些：分类速查即用

html5新增标签主要分为结构布局、媒体播放、表单交互、文本语义、绘图交互五大类，共计三十余个实用标签，全部适配W3C2014年正式发布的HTML5标准，可直接用于前端页面开发，其中结构、表单、媒体类标签为项目高频使用标签，语义类标签多用于页面优化与SEO布局，绘图交互类标签侧重动态页面开发，移动端、PC端常规静态页面开发无需全部掌握，按需选用即可。

html5新增结构布局标签

这类标签替代了传统div无语义的布局方式，专门用于划分网页页面结构，让代码层级清晰、可读性更高，同时便于搜索引擎抓取页面模块内容。header用于定义网页或区块的头部区域，可放置标题、导航、logo等内容；nav专属导航区域标签，仅用来包裹页面导航链接；main标记页面核心主体内容，一个页面仅允许出现一次；section用于划分页面独立内容区块，适配主题一致的内容分组；article定义独立完整的内容模块，如文章、资讯、评论等可单独复用的内容；aside用于侧边栏、辅助信息、广告等非核心内容；footer定义页面或区块底部，可放置版权、备案、联系方式等信息。

html5新增媒体播放标签

该类标签彻底摆脱了flash插件依赖，原生支持音视频、图片展示功能，是网页多媒体开发的核心标签，兼容主流现代浏览器。audio为音频播放标签，原生支持mp3、wav、ogg格式音频，可设置自动播放、循环、静音、控件显示等属性；video为视频播放标签，适配mp4、webm、ogg视频格式，支持进度条、音量调节、全屏播放等原生控件；source搭配audio、video使用，可设置多格式媒体资源，适配不同浏览器兼容需求；track用于为视频添加字幕、章节说明等文本轨道内容。

html5新增表单交互标签

html5大幅拓展了表单功能，新增多个输入类型与表单标签，无需JavaScript即可实现基础校验与专属输入场景，有效简化前端表单开发代码量。

• 输入类型标签：email、tel、url、number、date、time、month、color、range，分别对应邮箱、手机号、网址、数字、日期、时间、月份、颜色、区间数值输入
• 功能表单标签：datalist实现输入框下拉联想功能，progress展示进度条状态，meter显示数值度量比例

html5新增文本语义标签

这类标签用于细化文本内容语义，不改变页面展示样式，主要作用是优化网页SEO、提升代码规范性，适配企业官网、资讯网站等需要搜索引擎优化的项目。mark用于高亮标注重点文本内容；time标准化展示时间日期，便于爬虫识别时间信息；figure包裹图片、图表等媒体内容，搭配figcaption可添加图文说明；figcaption专属图文注释标签，仅配合figure使用；details实现点击展开收起的折叠内容，summary作为折叠模块的标题。

html5新增绘图与交互标签

该类标签偏向动态可视化开发，多用于数据可视化、小游戏、动态特效页面，常规静态展示页面使用频率较低。canvas为画布标签，可通过JavaScript绘制图形、动画、图表，是网页可视化开发的基础标签；svg支持矢量图形绘制，图形放大缩小不会失真，适合图标、简单矢量图案开发；iframe升级优化后支持更多嵌入属性，可安全嵌入第三方页面、文档资源。

html5新增标签使用场景对比

老旧IE8及以下浏览器无法兼容大部分html5新增标签，仅现代Chrome、Firefox、Edge、Safari浏览器可完整适配。

新手开发优先掌握结构、表单、媒体三类核心标签，可满足90%以上的常规前端页面开发需求。