DOCTYPE必须顶格写在第一行且前面无任何字符，否则IE/旧Edge立即进入Quirks Mode，导致盒模型错乱、getBoundingClientRect()异常、flex失效；需配合html5shiv、display:block重置及normalize.css。
DOCTYPE 必须顶格写，否则所有兼容性努力都白搭
浏览器是否启用标准模式，只看第一行是不是干净的 。哪怕前面多一个空格、一行注释、PHP 输出的换行，IE 和旧版 Edge 就立刻切进 Quirks Mode——盒模型错乱、<code>getBoundingClientRect() 返回值异常、flex 布局直接失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 新建文件后，直接敲
!+ Tab（VS Code/Sublime 自动补全），别手打 - 用
head -c 3 index.html | xxd检查开头三字节：正常应是3c 21 44（即），出现 <code>ef bb bf就是 UTF-8 BOM，得另存为“UTF-8 无 BOM” - CI 流程里加校验脚本：
grep -q '^' index.html || exit 1
语义标签必须配 display:block，光引入 html5shiv 不够
IE8–IE11 认得 <header></header> 标签，但默认当 inline 元素渲染。结果 <nav></nav> 里的链接挤成一排、<main></main> 宽度塌成内容宽度，布局当场失守。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CSS 中显式声明：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 条件加载 html5shiv：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 别用
document.createElement('header')零散调用——漏一个就崩一个区域，且不解决样式问题
可访问性不是加 aria-label 就完事，得从结构源头约束
屏幕阅读器靠 DOM 结构树理解页面逻辑。<div class="nav"> 再漂亮，它也只读出 “division”，而 <code><nav aria-label="主导航"></nav> 能直接跳转到导航区。但前提是：这个 <nav></nav> 真包着一组链接，不是塞了个 banner 图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<main></main>必须全局唯一，且不能嵌套在<article></article>或<section></section>内部 -
<header></header>应含站点标识或主标题，别只放装饰性 logo 图片 - 表单控件必须绑定
<label for="id"></label>，仅靠 CSS 视觉对齐，键盘用户根本不知道当前聚焦的是邮箱还是密码字段 - 图片
alt属性不可省略：功能图写用途（如alt="搜索按钮"），装饰图写空字符串（alt=""）
lang 属性影响渲染和辅助技术，不是 SEO 专属配置
不只帮搜索引擎识别语言，还决定标点符号渲染（如中文顿号 vs 英文 comma）、字体回退顺序、甚至语音合成引擎的发音规则。漏设或设错，会导致屏幕阅读器用日语腔读中文，或把「·」当成英文句点停顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多语言站点按实际内容设
lang，不要全局写zh-CN；子页面可用<html lang="en-US"> - 局部语言切换用
<span lang="ja">日本語</span>，避免整页重载 - 验证方式：Chrome DevTools → Elements → 右键节点 → “Inspect Accessibility”，看 “Language” 字段是否匹配
真正难的不是写对几个标签，而是让每个语义标签都承载与之严格匹配的内容意图——<nav></nav> 里不能塞广告，<main></main> 里不能混页脚信息，alt 不能写“一张图”。机器不会宽容“差不多”，它只认结构与语义是否咬合。
