lang属性必须写在标签上，charset必须用声明且位于最前面；布尔属性推荐写disabled="disabled"；data-属性命名需合法，读取用dataset驼峰形式。
lang 属性必须写在 标签上，charset 必须用 <meta charset="UTF-8"> 声明，且必须位于 最前面——否则浏览器可能乱码或回退到怪异模式。
为什么 charset 位置不能错
浏览器解析 HTML 时，遇到第一个非 ASCII 字符就决定编码方式。如果 <meta charset="UTF-8"> 不在 开头（比如被 <title></title> 或其他 <meta> 挡住），部分浏览器会先按默认编码（如 ISO-8859-1）解码前几十字节，导致中文变乱码，甚至影响后续 JS 执行。
- 必须紧贴
开始标签之后，最好排第一 - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 写法，HTML5 只认charset属性 - 值必须是
"UTF-8"（带双引号），不区分大小写但推荐全大写
lang 属性该写在哪、怎么写
lang 是全局属性，但只在 标签上设置才代表整页默认语言；局部语言切换要用 lang 修饰具体元素（如 <p lang="ja"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>），但不能省略根标签的声明。
- 值推荐用 BCP 47 格式：
"zh-CN"（简体中文-中国大陆）、"en"（通用英文）、"zh-Hans"（简体中文，无地域限定） - 不要写
lang="Chinese"或lang="ch"—— 这些不是标准值，会被忽略 - 若页面含多语言混合内容，
仍要保留，再对个别段落加lang="en"
布尔属性（如 disabled、required）要不要写等号和值
HTML5 允许省略布尔属性的值，但显式写出更稳妥——尤其当属性通过 JS 动态增删时，el.setAttribute('disabled', '') 和 el.setAttribute('disabled', 'disabled') 行为一致，但前者在某些旧版工具链中可能被误判为未设置。
- 推荐统一写成
disabled="disabled"或required="required" - 不要写
disabled="true"或required="1"—— 浏览器只看属性是否存在，不解析值内容 - JS 中判断时用
el.hasAttribute('disabled')，而非el.disabled === true（后者受初始渲染影响）
data- 自定义属性命名和读取注意事项
data- 属性用于存业务数据，但命名和访问有隐性规则：连字符会转为驼峰，且仅限字母、数字、连字符、下划线、冒号（但冒号易引发 XML 解析问题，建议避开）。
- 合法命名：
data-user-id、data-api-version；非法：data-1id（不能以数字开头）、data-user.id（点号不被支持） - JS 中读取用
el.dataset.userId（自动转驼峰），不是el.dataset["user-id"] - 避免过度使用：大量
data-属性会影响 DOM 性能，高频更新场景优先考虑Map或组件状态
最容易被跳过的其实是 <meta charset> 的位置和 lang 的值格式——它们不报错，但会在 SEO、可访问性、国际化支持上埋长期隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
