html5的新特性有哪些：前端开发常用清单

html5的新特性有哪些，主要分为语义化标签、多媒体原生支持、表单增强、Canvas绘图、SVG矢量图、本地存储、WebWorker、地理定位、拖放API这几大类，你可以在不引入第三方插件的前提下实现音视频播放、页面绘图、客户端数据持久化、后台脚本运行等功能，这些特性在现代Chrome、Edge、Firefox浏览器中兼容性较好，IE11对大部分高级特性支持不足，面向老旧政企内网用户的项目，需要单独做降级方案。

html5语义化标签

语义化标签替换了过去大量无意义的div布局，标签本身自带页面结构含义，搜索引擎和读屏软件可以识别页面区块，常见标签包含header、nav、section、article、aside、footer、figure、figcaption。article用于独立完整内容，比如单篇文章、评论卡片；section用来划分主题相关内容块，不要单纯为了样式包裹元素使用这类标签，语义标签不自带默认样式，样式仍需要CSS控制。

利于SEO和无障碍访问。

html5多媒体相关特性

新增audio和video标签，原生支持音频、视频嵌入页面，不再依赖Flash插件，标签自带controls属性调出播放控件，支持loop循环播放、autoplay自动播放、muted静音等属性。浏览器自动支持不同编码格式，video标签搭配source子标签可以提供多格式视频源，浏览器会自动加载自身支持的文件，移动端自动适配播放逻辑，自动播放在多数浏览器里要求音频处于静音状态才能生效。

html5表单增强特性

扩展了input输入框类型，新增email、tel、url、number、range、date、time、datetime-local、color等类型，浏览器自带基础校验和对应输入控件，同时新增placeholder占位提示、required必填校验、pattern正则校验、autofocus自动聚焦属性，form标签支持formaction、formmethod，按钮可以脱离表单标签单独提交数据。原生表单校验样式在不同浏览器展示效果不一致，复杂校验场景一般会搭配JS自定义校验逻辑。

html5绘图与图形能力

Canvas是位图绘图画布，通过JavaScript脚本绘制矩形、线条、图片、动画，像素渲染模式适合游戏、数据大屏、实时画板场景，画布放大后容易出现模糊。SVG属于矢量图形，标签直接写在HTML文档内，图形放大不会失真，适合图标、流程图、简单动画，SVG可以单独作为文件引入，也可以直接内嵌在页面中使用。

html5本地存储API

这一组存储方案用来替代Cookie存储限制，Cookie单条容量小，每次http请求都会携带，本地存储API不会自动发给服务端，适合缓存配置、用户偏好、离线页面数据。存储都遵循同源策略，不同域名无法互相读取数据，不要在本地存储存放敏感账号密码信息。

html5其他实用API

• WebWorker：开启独立后台线程，复杂计算不阻塞页面渲染主线程
• Geolocation：获取设备地理位置，使用前需要用户授权
• 拖放API：drag系列事件，实现元素拖拽交互
• HistoryAPI：修改浏览器历史记录，实现无刷新路由跳转
• WebSocket：长连接通信，适合聊天室、实时数据推送

WebWorker内部不能直接操作DOM节点，只能通过postMessage和主线程传递消息，大量渲染操作依旧需要交给主线程处理。Geolocation定位精度受GPS、WiFi、基站信号影响，室内环境定位偏差会明显变大。

W3C在2014年正式发布HTML5推荐标准，后续新增能力归入HTML生活标准持续迭代，很多新能力不属于最初版本定义范围，选型时要区分基础特性和后续新增扩展API。