局部属性必须用于对应元素才生效，用错则被浏览器忽略；如href仅适用于<link><base>，src限于<img><script><iframe>等，type在<input>和<button>中语义不同；可通过MDN“Element-specific”标识、DevTools缺失验证或W3C校验器警告识别。
局部属性不是“能用就行”，而是必须用在对应元素上才生效；用错位置，浏览器会忽略，也不报错——这正是最容易被忽视的隐患。
哪些属性属于局部属性，怎么快速确认
局部属性只对特定元素有意义，比如 href 只对 <a>、<link>、<base> 有效；src 只对 <img>、<script>、<iframe> 等媒体或资源加载类元素起作用；type 在 <input> 和 <button> 中含义完全不同，不能混用。
判断方法很简单：
- 查 MDN 文档对应元素页的 “Attributes” 栏，标为 “Element-specific” 的就是局部属性
- 用浏览器 DevTools 检查元素，输入错误属性名（如给
<div>加href）后，该属性不会出现在 computed 或 DOM 属性列表中 - HTML 验证器（如 W3C Validator）会警告“Attribute href not allowed on element div”这类信息
href、src、alt 这些常见局部属性的典型误用场景
它们看着简单，但语义和行为边界很明确：
立即学习“前端免费学习笔记（深入）”；
-
href必须指向可导航目标，不能写成href="javascript:void(0)"后还指望它被搜索引擎索引或支持右键“在新标签打开”——它只是个 URL，不是执行入口 -
src是强制加载属性：哪怕<img src="404.jpg">，浏览器仍会发请求；而<img >则完全静默 -
alt不是“图片说明”，而是当图像不可用时的**文本替代**；空字符串alt=""表示“该图无文字意义”，而非“懒得写”；alt="logo"不如alt="Company XYZ logo"明确
布尔型局部属性的写法陷阱（如 autoplay、muted、required）
这些属性的存在即生效，值不参与逻辑判断：
- ✅ 正确：
<video autoplay muted>、<input required> - ❌ 错误：
<video autoplay="false">（浏览器仍启用 autoplay）、<input required="0">（等价于required） - ⚠️ 注意：
disabled是布尔属性，但<button disabled="disabled">和<button disabled>效果一致；加引号纯属冗余，无害但降低可读性
响应式图片里 srcset 和 sizes 必须配合 src 使用
srcset 和 sizes 是 <img> 的局部属性，但它们不独立工作：
- 没有
src时，srcset不会 fallback —— 浏览器可能显示空白，且部分旧版 Safari 直接忽略整个<img> -
sizes的值必须是媒体条件 + 宽度描述（如(max-width: 768px) 100vw, 50vw），不能只写100vw；否则现代浏览器会按默认 100px 处理宽度计算 - 如果
srcset中提供的是 x 描述符（如"photo.jpg 2x"），sizes可省略，但依然建议保留src作为基础降级路径
局部属性的“专属性”不是设计缺陷，而是 HTML 语义分层的体现：它强制你思考“这个值对这个元素意味着什么”，而不是把所有字符串都塞进一个叫 data- 的口袋里。真正难的不是记住哪些属性归谁管，而是每次写 href 前，先问一句：这里真的需要一次导航吗？
