HTML属性必须写在开始标签内、用双引号包裹值，布尔属性无需等号和值；class用于样式与通用选择器，data-*专供JS传私有数据；src必填、srcset配合sizes实现响应式；title仅作无障碍补充，非tooltip。
怎么给 HTML 标签加属性才不报错
属性写错位置或格式不对，浏览器直接忽略，页面看起来“没反应”。最常见的是把属性塞到结束标签里、漏引号、拼错属性名。
-
src、href、alt、class、id这些必须写在开始标签内，比如<img src="logo.png" alt="Logo">，不能写成</img src="..."> - 属性值一律用双引号包裹，哪怕只是数字或单词——
width="300"正确，width=300在某些场景下会失效（尤其值含空格或特殊字符时） - 布尔属性如
checked、disabled、required不需要等号和值，存在即生效：<input type="checkbox" checked>，写成checked="true"反而多余
哪些属性该用 class，哪些该用 data-*
class 是样式和通用选择器的通道，data-* 是给 JavaScript 传私有数据的专用接口。混用会导致 CSS 膨胀或 JS 逻辑混乱。
- 用
class：控制外观或批量行为，比如<button class="btn btn-primary">或<div class="card active"> - 用
data-id、data-category等：存业务数据，比如<article data-id="123" data-author="alice">，JS 里用el.dataset.id拿到"123" - 别用
class存 ID 类信息（如class="user-456"），既难维护又污染样式语义；也别用data-控制颜色或尺寸，那是 CSS 的事
src 和 srcset 都能设图片，到底用哪个
src 是必填兜底项，srcset 是响应式增强项。只写 src 会强制加载同一张图，浪费带宽；只写 srcset 不配 src，旧浏览器直接不显示图。
- 基础写法：
<img src="photo.jpg" alt="风景"> - 响应式写法：
<img src="photo-small.jpg" srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="风景"> -
sizes不是可选的“锦上添花”，它告诉浏览器不同视口下这张图占多宽，没有它，srcset就没法智能选图 - 注意路径一致性：所有
src和srcset中的路径都要能被浏览器正确解析，相对路径以 HTML 文件所在位置为基准
title 属性不是 tooltip，别乱用
title 确实会触发鼠标悬停提示，但它本质是无障碍辅助属性，用于屏幕阅读器播报。滥用会导致提示泛滥、干扰键盘导航，甚至掩盖真正需要的 ARIA 说明。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：补充非视觉信息，比如
<abbr title="HyperText Markup Language">HTML</abbr>或<time datetime="2026-07-23" title="2026年7月23日">今天</time> - 不适合场景：纯装饰性提示（如按钮上的“点击我”）、重复已有文本（
<h2 title="关于我们">关于我们</h2>）、替代aria-label（按钮图标无文字时，优先用aria-label） - 移动端基本不触发
title提示，指望它做交互反馈是靠不住的
data- 属性没被 JS 读取过，就该删掉；一个 title 写了但对屏幕阅读器没意义，不如不写。 
