健壮的HTML靠结构正确、语义清晰、容错性强、可验证四点落地:必须声明DOCTYPE和lang属性,严格使用语义化标签(如header、main、h1),img必设alt,属性值统一用双引号,meta charset须为head内首项。
直接上结论:健壮的 HTML 不是靠“写得漂亮”撑起来的,而是靠「结构正确、语义清晰、容错性强、可验证」四点落地。任何脱离浏览器解析行为和实际协作场景的“美观缩进”或“标签洁癖”,都可能让代码在 IE11、旧版 Safari 或屏幕阅读器里突然失效。
DOCTYPE 和 lang 属性必须显式声明
不写
,浏览器会退化到怪异模式(Quirks Mode),盒模型、
行为、甚至
布局都会出偏差;不设
,语音合成工具读不出中文,翻译插件无法识别语言,SEO 也会弱化。
必须是文档第一行,不能有空格或注释前置
推荐用带地区码的格式,比
更精准
避免
或留空 —— 这等于没设,部分辅助技术会 fallback 到系统默认语言
语义化标签不是装饰,是解析依据
浏览器、搜索引擎、自动化测试工具(如 axe、Lighthouse)都依赖语义标签做结构推断。用
、当 CDN 返回 404 的 JS、当用户禁用 JS 时,页面是否仍可读、可操作、可导航”。规范不是终点,是让错误发生时,系统仍有明确 fallback 路径的底线保障。
getBoundingClientRect()flexlangzh
代替
,会导致
document.querySelector('header')
查不到,
role="banner"
自动绑定失效,甚至影响
outline
键盘导航顺序。
主标题必须且仅用一次
;子标题严格按层级用
–
,跳级(如
后跟
)会破坏大纲树
应包裹页面核心内容,且每个页面只出现一次;没有它,屏幕阅读器可能无法快速定位主体
的
alt
属性不可省略 —— 即使是装饰图,也要写
alt=""
(空字符串),而不是删掉属性或写
alt="图片"
自闭合标签和属性书写有真实兼容差异
HTML5 允许
不写斜杠,但某些 XML 工具链(如 JSDOM 测试环境、部分 CMS 导出器)或老旧构建脚本仍会报错;属性不用双引号在多数现代浏览器能运行,但在
这类含
&
的 URL 中会提前截断。
立即学习
“
前端免费学习笔记(深入)
”;
统一用
形式,不加
/
,也不写
—— 这是 HTML5 官方推荐写法
所有属性值必须用双引号,包括布尔属性:写
disabled="disabled"
,别写
disabled
(虽然合法,但易被误删或与 JS
el.disabled = true
混淆)
class
和
id
值禁止用中文、空格、特殊符号;连字符
-
可用,下划线
_
在部分 CSS 预处理器中可能触发意外行为
head 中的 meta 和资源加载顺序影响首屏表现
必须是
内第一个元素,否则浏览器可能已按错误编码解析了前面的
或
;JS 放
底部虽是老经验,但在现代 SPA 场景下,
defer
或
type="module"
才是更可控的选择。
前不能有任何内容(包括空行、BOM 字节),否则部分 Android WebView 会忽略它
CSS 必须放在
中,且早于
—— 否则 JS 执行时可能读不到样式计算结果(如
getComputedStyle
返回空)
避免
这类非关键 CSS 放在 head 顶部,它会阻塞渲染,应改用
onload
动态注入
最常被忽略的一点:健壮性不体现在“我写的 HTML 能过 W3C 验证”,而在于“当后端模板漏掉一个
