html属性是写在开始标签内的键值对，须用引号包裹、路径准确、布尔属性仅存在即生效；class/id命名须合法，src/href路径需规范，data-*命名转驼峰，错误均被浏览器静默忽略。
HTML属性不是“设”出来的，是写在开始标签里、带等号和引号的键值对——写错位置、漏引号、用错值，浏览器就当它不存在。
class 和 id 必须用引号包裹，且命名不能含空格或中文标点
常见错误：class=header nav（没引号）、id="top title"（含空格）、id="1section"（数字开头）。这些都会被浏览器静默忽略，JS 用 document.getElementById("1section") 拿不到元素，CSS 选择器也匹配失败。
正确写法：
-
class="header nav is-active"：多个类名用空格分隔，全在一对双引号内 -
id="main-content"：只含字母、数字、短横、下划线，不以数字开头，大小写敏感 - 避免
id="user_name"或id="userName"，统一用短横分隔更稳妥
src 和 href 的路径写错，资源根本不会加载
图片不显示、CSS 不生效、链接 404，八成是路径错了。浏览器按当前 HTML 文件所在目录解析相对路径，不是按 JS 或 CSS 文件位置算。
实操要点：
-
src="./images/logo.png"：从当前 HTML 所在目录进入./images/目录找文件 -
href="../css/style.css"：先上一级，再进css/目录 -
src="/assets/icon.svg"：从域名根目录（如https://example.com/）开始找，不是文件系统根目录 - 避免
src="javascript:void(0)"或空字符串，部分浏览器会发默认请求；用href="#"并event.preventDefault()更可控
布尔属性（disabled、required、checked）不写值才真正生效
错误写法：disabled="false"、required=""、checked="0"——这些等于没写，浏览器全当 false 处理。
布尔属性只要存在，就是 true；不出现，就是 false。现代项目推荐最简写法：
<button disabled>提交</button><input type="checkbox" checked><textarea required></textarea>
JS 动态控制时，别用 setAttribute('disabled', '')，直接赋值：el.disabled = true 或 el.required = false，语义清晰、逻辑不混淆。
data-* 属性命名和读取有自动转换规则，别硬猜
写 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(el.dataset.count)。
别把复杂结构塞进 data-，比如 data-config='{"theme":"dark"}' ——可读性差、易出错，改用 <script type="application/json" id="config">{...}</script> 更稳妥。
最容易被忽略的，是检查 Elements 面板里实际渲染出的属性——不是看源码写了什么，而是看浏览器最终解析成了什么。引号漏了、斜杠反了、拼写错了，都不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
