doctype必须顶格写第一行，前面不能有任何字符；lang必须设为zh-cn等合规值，影响渲染、无障碍和seo。

DOCTYPE 和 lang 必须写在最开头，且不能有空格或注释

很多开发者删掉 DOCTYPE 或漏写 lang，以为“页面能显示就行”。但实际后果很直接：<input type="date"> 在旧版 Safari 里直接不渲染；IE11 会退化到怪异模式（Quirks Mode），盒模型全乱；屏幕阅读器无法切换中文发音规则。

• DOCTYPE 必须顶格写第一行，前面不能有任何字符（包括 BOM、空格、<!-- comment -->）
• lang 值要匹配实际语言：简体中文站点必须用 zh-CN，不是 cn、zh 或 en
• 多语言站点不能只靠静态 lang="zh-CN"，得用 JS 动态更新：document.documentElement.lang = 'ja-JP'

charset 必须用 UTF-8，且拼写严格为 "UTF-8"

<meta charset="UTF-8"> 不是可选项，它得出现在 最靠前的位置（建议前 1024 字节内），否则浏览器可能误判编码。写成 utf-8、UTF8 或 utf8 都可能被某些解析器忽略，尤其在邮件客户端或老旧 Android WebView 中。

• 不要用 GBK，除非遗留系统强依赖——现代项目统一用 UTF-8
• 避免在 <meta charset> 前插入任何其他标签或 JS 脚本
• 服务端响应头里的 Content-Type: text/html; charset=UTF-8 要和 HTML 内一致，否则以响应头为准

国际化时 lang 属性不能只靠 HTML 根节点

单靠 只能覆盖整页默认语言，但真实场景中常有混合内容：比如英文引用、日文产品名、阿拉伯数字编号。这时需要局部标注，否则翻译工具、语音合成、SEO 抓取都会出错。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 对非主语言文本加 lang 属性：<span lang="en">JavaScript</span>、<q lang="fr">Merci</q>
• 避免嵌套冲突：父级 lang="zh-CN"，子级 lang="en" 是合法的，浏览器会逐层继承
• 不要用 CSS 的 [lang="zh"] 伪元素做翻译逻辑——它只控制样式，不能替代语义标注

alt 和 img srcset 的写法直接影响多语言体验

图片的 alt 不是装饰字段，它是无障碍访问、SEO 索引、图片加载失败时的唯一文本 fallback。国际化项目里，alt 必须随语言包动态替换，不能写死中文。

• alt 必须描述图像实质内容，不是“logo”或“icon”，而是“公司名称”或“搜索按钮”
• 用 <picture></picture> + <source media></source> 做响应式图时，每个 <source></source> 的 alt 不生效，得写在最终 <img> 上
• srcset 本身不带语言信息，需配合 lang 属性或 JS 动态加载对应语言的图片资源路径

真正容易被忽略的是：lang 属性影响的不只是文字渲染——它还决定标点宽度（如中文顿号 vs 英文 comma）、数字排版（阿拉伯数字在不同语言中的字形）、甚至表单验证提示语的本地化。这些细节不会报错，但会在特定设备或辅助技术上悄悄失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！