html5唯一标准文档类型声明是，必须位于文件最开头、无任何前置字符，否则触发怪异模式导致布局和api异常。
HTML语言声明必须写成
HTML5 只接受一种标准的文档类型声明，就是 。它不区分大小写，但不能加任何参数、版本号或系统标识符（比如不要写成 <code>）。浏览器一旦看到非标准 DOCTYPE，会触发怪异模式（Quirks Mode），导致 CSS 盒模型、表格布局、<code>getBoundingClientRect() 行为等出现意外偏差。
常见错误包括：
- 漏写 DOCTYPE —— 现代浏览器默认进入怪异模式
- 拼错为
（小写）—— 实际可用，但建议统一用大写 <code>DOCTYPE提高可读性 - 在 DOCTYPE 前插入注释或空格 —— 会导致 IE9 及更早版本直接退化为怪异模式
dir 属性作用于 标签时，会设置整个文档的基线方向（base direction），影响：textarea 光标起始位置、表单输入框文字对齐、CSS text-align: start/end 的解析、以及某些 RTL 语言（如阿拉伯语、希伯来语）的自动换行逻辑。它不是视觉翻转，也不改变 CSS flex-direction 或 transform: scaleX(-1) 这类样式。
使用时注意：
-
dir="rtl"和dir="ltr"是仅有的两个合法值；dir="auto"虽然被支持，但在上效果不可靠，不建议用 - 如果页面同时含 LTR 和 RTL 内容（比如英文文档中嵌入阿拉伯引文），应优先用
dir属性作用于具体元素（如<blockquote dir="rtl"></blockquote>），而非全局设在 - 与
lang属性配合使用更稳妥：例如，有助于屏幕阅读器和搜索引擎理解内容意图
dir 属性不触发重排，但会影响 getComputedStyle() 返回的 direction 值
设置 不会强制浏览器重新计算布局（即不触发 layout/reflow），但会改变计算样式中与方向相关的属性。例如调用 getComputedStyle(document.documentElement).direction 会返回 "rtl"，而 getComputedStyle(document.body).direction 默认继承该值（除非 显式覆盖）。
这在动态切换语言/方向时很关键：
- 不要依赖
document.body.style.direction判断当前方向 —— 它只反映内联样式，不包含继承值 - 需要响应方向变化时，监听
document.documentElement.dir的变更比监听lang更直接 - CSS 中用
[dir="rtl"] .btn { padding-right: 8px; }比用html[dir="rtl"]更精准，避免被子元素的dir干扰选择范围
dir 和 CSS 逻辑属性不是一回事，但能协同工作
dir 是 HTML 层级的方向上下文，而 margin-inline-start、padding-block 这类逻辑属性是 CSS 层级的响应式书写模式（writing-mode-aware）。二者结合才能真正实现“一套代码适配多语言流向”。
例如：
<style>
.example {
margin-inline-start: 16px; /* 在 RTL 下实际是 left，LTR 下是 right */
text-align: start; /* 对齐到起始侧，由 dir 决定 */
}
</style>
但要注意：
- 若未设置
dir，text-align: start默认按 LTR 解析，可能不符合预期 - 旧版 Safari（dir 本身兼容性极好（IE6+ 支持），可作为降级兜底
- JavaScript 中通过
element.style.marginInlineStart = "16px"设置逻辑属性，不会受dir影响，仍需手动判断流向
很多开发者以为只要写了 dir="rtl" 就万事大吉，其实它只是方向系统的起点；真正要让按钮、表单、滚动条、图标顺序都自然翻转，还得靠逻辑属性 + 语义化结构 + 有意识的 JS 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
