HTML5通过语义化标签、原生音视频、增强表单和本地存储等特性提升网页开发效率。①语义化标签如header、nav、main使结构更清晰，利于SEO和无障碍访问；②video和audio标签取代Flash，实现浏览器原生多媒体支持；③新增input类型和属性（如email、required）优化表单交互；④localStorage、Canvas、Geolocation等API增强Web应用功能，推动网页向原生体验靠近。
HTML5带来了许多革新，让网页开发更高效、功能更强。它不只是增加几个新标签，而是从结构、多媒体到数据存储都进行了全面升级。核心在于用原生功能替代了过去依赖插件或复杂脚本的实现方式。
语义化标签：让代码更有意义
以前页面布局全靠div，代码像一团迷宫。HTML5引入了一套语义化标签，让每个区块的作用一目了然。
- header 和 footer：分别代表页眉和页脚，可以用于整个页面或文章内部。
- nav：专门包裹导航链接，屏幕阅读器能快速识别。
- main：标识页面最主要的、独一无二的内容区域。
- article 和 section：article 指代独立的、可分发的内容，比如一篇博客；section 则是文档的一个主题性章节。
- aside：放侧边栏或与主内容相关但独立的信息，如广告或相关文章链接。
这些标签提升了代码可读性，对SEO和残障人士使用的辅助设备非常友好。
原生音视频支持：告别Flash
这是最直观的变化。以前播放视频必须装Flash等插件，现在浏览器原生就能处理。
立即学习“前端免费学习笔记（深入）”；
-
video 标签：直接在网页嵌入视频。
<video controls><source src="movie.mp4" type="video/mp4"></video>这样写就包含了播放控件，并通过source标签提供不同格式（如mp4, webm）以确保兼容性。 - audio 标签：同理，用于嵌入背景音乐或播客。同样使用source标签来适配不同音频格式。
不过要注意，自动播放在多数移动端和部分桌面浏览器被限制，通常需要用户先有交互行为才能触发。
增强型表单：输入更智能
HTML5让表单输入体验更好，也减轻了前端验证的负担。
-
新的 input 类型：把
type="email"，输入框会自动检查邮箱格式；type="url"确保输入的是网址；还有date,number,range（滑块）等，手机上会弹出对应的专用键盘。 -
实用的新属性：
placeholder提供输入提示文字；required标记必填项，提交时会自动校验；autofocus让光标默认落在某个输入框。 - datalist 元素：为输入框提供一个下拉的选项列表，像是input和select的结合体，适合做搜索建议。
这些特性让表单更易用，但关键的业务逻辑验证仍需在后端进行。
本地存储与API：打造强大Web应用
HTML5让网页能做的事更多了，开始接近原生应用的体验。
- localStorage 和 sessionStorage：比cookie容量大得多，能存更复杂的数据。localStorage数据永久存在，sessionStorage则在关闭标签页后消失，非常适合保存用户偏好或临时状态。
- Canvas 元素：一个画布，配合JavaScript可以绘制图形、制作图表甚至开发2D游戏。
- Geolocation API：获取用户的地理位置信息，为地图、本地服务类应用提供了基础，但需要用户明确授权。
- Drag & Drop API：让元素可以拖拽，无需再引入庞大的第三方库。
基本上就这些，它们共同构成了现代Web开发的基础。不复杂但容易忽略细节。
