HTML5是浏览器支持的最新标记标准，核心区别在于原生支持音视频、本地存储、语义化表单及标签；最简模板为开头，新增等语义标签；关键特性如、localStorage、fetch()等需按浏览器兼容性谨慎使用。
HTML5 不是“新版 Word”，也不是某种独立软件，它是浏览器能看懂的一套标记规则的最新公开标准——你写的 <video></video>、<canvas></canvas>、localStorage，背后全是它在支撑。
HTML5 和以前的 HTML 有啥实际区别？
区别不在“要不要写 ”，而在“能不能不靠 Flash 就播视频”“能不能离线用网页应用”“表单是不是自动带日期选择器”。
- 旧 HTML（比如 HTML4）要求用
<object></object>或第三方插件才能嵌视频，HTML5 直接支持<video></video>和<audio></audio>标签 - 以前存点用户偏好得靠 Cookie（最大 4KB、每次请求都发），现在可用
localStorage存 5MB+ 且不发给服务器 -
<input type="email">、<input type="date">这类语义化输入框，浏览器原生校验+软键盘适配，不用再写一堆 JS 判断
写 HTML5 页面，最简模板长啥样？
不用记 DTD、不用抄几十行声明，现代浏览器只认一个开头：。其余全是可选但推荐的语义标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一页</title>
</head>
<body>
<header><h1>标题</h1></header>
<main><p>正文内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></main>
<footer><p>页脚</p></footer>
</body>
</html>
注意：<header></header>、<main></main>、<footer></footer> 是 HTML5 新增语义标签，不影响显示，但对 SEO、屏幕阅读器、维护性有实质帮助。
哪些 HTML5 特性现在敢放心用？
不是所有特性都“全浏览器支持”，得看场景：
-
<picture></picture>+srcset：响应式图片，Chrome/Firefox/Edge/Safari 全支持，移动端可直接用 -
fetch()：替代XMLHttpRequest，IE 完全不支持，但如果你不保 IE，它比 jQuery.ajax() 更轻、更符合 Promise 流程 -
Geolocation API（navigator.geolocation）：所有现代浏览器支持，但必须 HTTPS 环境下才能启用（HTTP 协议下仅 localhost 例外） -
<canvas></canvas>：支持极好，但绘图逻辑得自己写；如果只是展示图表，用 Chart.js 这类库更稳
真正容易被忽略的，是 <meta name="viewport"> —— 没它，HTML5 页面在手机上会默认按桌面宽度渲染，文字小到看不见。这个标签虽不属于 HTML5 新增，但已是移动优先事实标配。
