必须以开头，lang和charset属性不可省略，语义化标签是dom操作与无障碍基础，表单应优先使用原生type/required，localstorage需注意容量与序列化。
从 开始写，别碰任何教程的“理论章节”
HTML5 不是靠背出来的，是靠浏览器立刻反馈验证出来的。很多人卡在第一步：新建文件、写完代码、双击打开——结果页面空白或乱码。根本原因不是语法错，而是结构不合法。
- 必须以
开头，少一个字符或写成 <code> 都可能触发怪异模式（Quirks Mode），让 CSS 布局失效 -
的lang属性不是可选的，它影响屏幕阅读器、SEO 以及部分浏览器的字体回退逻辑 -
<meta charset="UTF-8">必须放在最前面，否则中文可能在加载中途乱码，且无法被后续 JS 正确读取 - 不要用 Word 或记事本保存 HTML 文件——它们默认加 BOM 头，会导致
localStorage读写异常或fetch解析失败
用 <header></header>、<main></main>、<footer></footer> 搭骨架，别再套 <div id="header">
<p>语义化标签不是“锦上添花”，是 DOM 操作和辅助技术的基础设施。你写一个 <code><div class="nav">，JS 就得靠 class 查找；但写 <code><nav></nav>，document.querySelector('nav') 更稳，而且屏幕阅读器能直接跳转。
-
<main></main> 在整个文档中只能出现一次，重复会导致 W3C 验证失败，也干扰无障碍导航顺序
-
<section></section> 必须有标题（<h2></h2> 或更高），否则它只是个普通容器，失去语义价值
-
<aside></aside> 不等于“右边栏”——它表示与当前内容弱相关的信息，比如博客页里的“同类文章推荐”，而不是“网站公告”
- Chrome 和 Safari 对
<dialog></dialog> 支持良好，但 Firefox 目前仍需 showModal() 手动调用，别默认它一渲染就弹出
表单先用原生 type 和 required，别急着写 JS 校验
<main></main> 在整个文档中只能出现一次，重复会导致 W3C 验证失败，也干扰无障碍导航顺序<section></section> 必须有标题（<h2></h2> 或更高），否则它只是个普通容器，失去语义价值<aside></aside> 不等于“右边栏”——它表示与当前内容弱相关的信息，比如博客页里的“同类文章推荐”，而不是“网站公告”<dialog></dialog> 支持良好，但 Firefox 目前仍需 showModal() 手动调用，别默认它一渲染就弹出type 和 required，别急着写 JS 校验HTML5 表单能力被严重低估。很多开发者一上来就写 onsubmit + 正则，结果手机端失去原生键盘类型（如数字键盘、邮箱键盘），还绕过了浏览器内置的错误提示逻辑。
-
<input type="email">在 iOS 上会自动启用邮箱键盘，并在提交时做基础格式检查；但pattern属性若写错正则（比如漏了^$），反而会让校验失效 -
required对<select></select>生效的前提是第一个<option></option>的value为空字符串：<option value="" disabled selected>请选择</option> -
<input type="date">在 Safari 中不支持min/max的中文格式（如2026-03-05可以，2026年3月5日会直接忽略） - 用
autocomplete="off"并不能真正禁用自动填充——现代浏览器会忽略它；真要屏蔽，得用随机name值或autocomplete="new-password"（仅限密码字段）
本地存储优先用 localStorage.setItem()，但别存大对象
localStorage 看似简单，实际是前端最易翻车的 API 之一。它同步阻塞主线程，且容量硬限制（通常 5–10MB），超出直接抛 QuotaExceededError。
立即学习“前端免费学习笔记（深入）”；
- 存对象前必须
JSON.stringify()，读取后必须JSON.parse()；漏掉任一环节，得到的就是"[object Object]"或null - 不要把用户上传的图片 base64 字符串直接塞进
localStorage——一张 2MB 的图编码后超 2.5MB，极易突破限额 - Firefox 私密模式下，
localStorage默认禁用，调用setItem会静默失败，必须包裹try/catch并降级到内存缓存 -
sessionStorage和localStorage的 API 完全一致，但前者标签页关闭即清空，适合临时草稿，不适合登录态
<canvas></canvas>”，而是改完一个 placeholder 文案后，发现 Safari 下输入框聚焦时文字偏移了 2px——这种细节没有文档会写，只有反复在真机上点、输、删、刷新才能踩出来。
