一眼识别html5还是html4：看doctype是否为，再查是否存在；html5新增语义标签（如）具真实语义约束，影响seo与辅助技术；表单验证和localstorage需注意兼容性与使用边界。
怎么一眼认出是 HTML5 还是 HTML4？看 DOCTYPE 和 <meta charset>
最直接的办法：打开源码第一行。HTML4 的 那一长串几乎没人手写，而 HTML5 就是干净的 <code>。再往下扫一眼 <code><meta> 标签——如果看到 <meta http-equiv="content-type" content="text/html; charset=utf-8">，基本就是 HTML4；换成 <meta charset="utf-8">，十有八九是 HTML5。
注意两个坑：
• IE8 及更早版本遇到 会触发标准模式，但若漏写或写错（比如多空格、大小写混用），可能意外掉进怪异模式，布局全乱；<br>• <code><meta charset> 必须放在 最前面，否则部分浏览器（尤其是旧版 Safari）可能忽略它，导致中文变问号。
<header></header>、<nav></nav> 这些标签不是“高级 div”，它们有真实语义约束
很多人把 <header></header> 当成 <div class="header"> 的语法糖，其实不是。这些标签会影响 DOM 结构、辅助技术识别逻辑，甚至搜索引擎提取内容的方式。
<ul>
<li>
<code><main></main> 在整个页面中只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header> 或 <nav></nav> 内部
<nav></nav> 应该包裹的是“主要导航链接集合”，比如顶部菜单、侧边栏跳转入口；页脚里一堆友情链接不算，RSS 订阅按钮也不算<article></article> 和 <section></section> 不可互换：<article></article> 强调内容可独立分发（如一篇博客、一条新闻），<section></section> 只是逻辑分组（如“评论区”“相关推荐”），且必须配合 <h1></h1>–<h6></h6> 使用才能体现层级滥用语义标签不会报错，但会让屏幕阅读器读出混乱结构，也削弱 SEO 效果——搜索引擎现在真会按语义解析标题层级和内容权重。
立即学习“前端免费学习笔记（深入）”；
表单验证不是“加个属性就完事”，pattern 和 type="date" 有兼容性陷阱
HTML5 表单控件看着省事，但实际项目里最容易翻车：
-
<input type="email">只校验基础格式（a@b.c算通过），不发请求验邮箱是否存在；required在 iOS Safari 上有时不触发弹窗提示 -
<input pattern="[0-9]{6}">的正则不支持\p{Han}这类 Unicode 属性类，只认 JS 正则基础语法；而且 pattern 错误时默认提示是英文，得靠setCustomValidity()手动覆盖 -
<input type="date">在 Safari 和旧版 Android 浏览器里直接退化成普通文本框，没有日期选择器——必须搭配 JS fallback（比如 flatpickr）才可靠
别指望纯 HTML5 表单验证能替代后端校验，它只是第一道用户体验过滤器，不是安全边界。
本地存储用 localStorage 前，先想清楚“永久”有多久
HTML4 只能靠 cookie 存点小数据，HTML5 的 localStorage 看起来很美，但现实很骨感：
- 容量约 5–10MB（各浏览器不同），但存大量 JSON 容易触发 QuotaExceededError
- 数据是字符串，存对象得手动
JSON.stringify()，取出来得JSON.parse()，忘了这步会默默失败 - 所谓“永久”是指除非用户主动清除，否则一直存在——但隐私模式下每次关闭窗口就清空；某些国产浏览器还默认禁用
localStorage（需用户授权） -
sessionStorage比localStorage更容易被误用：它按 tab 页隔离，同一网站开两个 tab，彼此的sessionStorage完全不互通
真正需要持久化关键状态时，别只依赖前端存储——它太不可控，该发请求存后端还得存。
