HTML属性需正确书写在开始标签内,class/id须引号包裹且命名合规,src/href路径须明确相对基准,布尔属性存在即生效,data-*命名转驼峰,调试应以Elements面板为准。

HTML标签属性不是“设置”出来的,是写在开始标签里、带等号和引号的键值对——漏引号、拼错名、放错位置,浏览器就当它不存在。
class 和 id 必须用引号包裹,且命名有硬约束
class 值多个类名用空格分隔,但必须整体包在引号里:class="btn btn-lg is-disabled"。写成 class=btn btn-lg 会被解析为两个属性:class="btn" 和一个无名属性 btn-lg,后者直接丢弃。
-
id值不能以数字开头,不能含空格、中文、短横(如id="1section"或id="top title"),否则document.getElementById()拿不到 - 大小写敏感:
id="Header"和id="header"是两个不同 ID - 页面中
id必须唯一;重复时,getElementById()只返回第一个匹配元素
src 和 href 的路径错误 = 资源不加载,不是“样式没生效”
路径写错不会报错,只会静默失败:图片空白、CSS 不加载、链接 404。关键看它是相对谁算的:
- 以
./开头:从当前 HTML 文件所在目录出发,比如src="./images/logo.png" - 以
/开头:从域名根目录(不是你电脑的 C:\)出发,比如href="/js/app.js"对应https://example.com/js/app.js -
src=""或src="javascript:void(0)"在部分浏览器会触发默认请求,建议用href="#"并event.preventDefault()控制
布尔属性(disabled、checked、required)只看“有没有”,不看“值是什么”
它们的存在即表示 true,不写就是 false。写 disabled="false" 或 required="" 是常见误解:
立即学习“前端免费学习笔记(深入)”;
-
disabled、checked、readonly、hidden等都属于布尔属性 - 正确写法只有两种:
disabled或disabled=""(后者兼容旧浏览器,但冗余) - JS 动态控制时,务必用 DOM property:
el.disabled = false,而不是el.setAttribute('disabled', 'false')—— 后者会让属性值变成字符串"false",浏览器仍按存在即启用处理
data-* 属性命名要小写+短横,JS 读取自动转驼峰
写 data-user-id="123" 没问题,但 JS 中必须用 el.dataset.userId 访问,不是 el.dataset.userid 或 el.dataset["user-id"]:
- 连字符会转成驼峰:
data-api-key→dataset.apiKey,data-abc-def-ghi→dataset.abcDefGhi - 所有值都是字符串,哪怕你写了
data-count="42",dataset.count仍是"42",需手动parseInt() - 别用
data-存大段 JSON;结构化数据建议用<script type="application/json">块替代
最常被忽略的一点:浏览器不会报错,也不会警告。检查属性是否生效,不能只看页面渲染,得打开开发者工具 Elements 面板,盯着标签里实际解析出的属性看——那里才是真实世界。



















