HTML属性必须正确书写在开始标签内:class和id需用引号包裹且符合命名规则,src/href路径须准确,布尔属性仅存在即生效,data-*命名需小写短横、读取自动转驼峰,所有错误均被浏览器静默忽略。

HTML 属性不是“设”出来的,是写在开始标签里、带等号和引号的键值对——写错位置、漏引号、用错值,浏览器就当它不存在。
class 和 id 写错引号或空格会直接失效
常见错误:class=header nav(没引号)、id="main-content"(中间用了中文短横或空格)
-
class值必须用引号包裹,多个类名用空格分隔:class="btn btn-primary is-active" -
id值只能是合法标识符:不能以数字开头,不能含空格或中文标点,大小写敏感 - 浏览器遇到
id="1section"或id="top title"会静默忽略,JS 用document.getElementById()拿不到
src 和 href 的路径写法决定资源是否加载
错误现象:图片不显示、CSS 不生效、链接 404,八成是路径错了。
- 相对路径从当前 HTML 文件所在目录算起:
src="./images/logo.png"、href="../css/style.css" - 以
/开头是根相对路径(从域名根目录开始),不是文件系统根目录:src="/assets/icon.svg" -
src为javascript:void(0)或空字符串时,部分浏览器会触发默认请求,建议用#或事件阻止
布尔属性(如 disabled、checked)不写值或写错值等于没写
错误写法:disabled="false"、checked="0"、required=""(空字符串在部分旧浏览器中不生效)
立即学习“前端免费学习笔记(深入)”;
- 布尔属性只要存在,就代表 true;不写,就是 false。正确写法只有两种:
disabled或disabled="" -
disabled="disabled"是历史写法,兼容性好但冗余,现代项目用disabled更干净 - JS 动态控制时,用
el.disabled = true/false,别用setAttribute('disabled', '')混淆逻辑
data-* 属性命名要全小写加短横,JS 读取时自动转 camelCase
写 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 面板,盯着标签里实际解析出的属性看。











