HTML笔试重在规范、语义、兼容性与陷阱理解；外边距折叠、inline/inline-block对齐差异、alt必要性、button优先于input及语义化书写是核心考点。
HTML 笔试题不考编程能力，只考对规范、语义、兼容性和常见陷阱的准确理解。刷题时盯着“标准答案”不如盯住浏览器实际行为——比如 <div> 和 <p> 都能显示文字，但语义错误在 SEO、无障碍、维护性上会持续反噬。
块级元素的 margin-top/bottom 为什么有时没效果
不是“没效果”，是发生了外边距折叠（margin collapsing）。当两个相邻块级元素的垂直外边距相遇，浏览器会取其中较大者，而不是相加。父子之间也会折叠：如果父元素没 border/padding，子元素的 margin-top 会“冒”到父元素外边。
- 常见现象：
<div><p>内容</p></div>中给<p>加margin-top: 20px，结果整个<div>向下移了 20px，而不是内部留白 - 破除方法：给父元素加
padding-top: 1px、border-top: 1px solid transparent，或触发 BFC（如overflow: hidden） - 注意：
<img>、<input>这类替换元素虽是行内，但margin垂直方向有效；而纯行内元素如<span>的margin-top完全无效
display: inline 和 display: inline-block 的关键区别
别只记“能不能设宽高”。真正影响布局的是基线对齐方式和空白符处理逻辑。
-
display: inline元素默认按baseline对齐，常导致底部多出几像素空隙（其实是行高的留白），且忽略width/height、margin-top/margin-bottom -
display: inline-block保留行内流特性（不换行），但支持全部盒模型属性；它仍按 baseline 对齐，所以同样有底部空隙问题 - 解决空隙：父容器设
font-size: 0，子元素再单独设字体；或用vertical-align: top/middle/bottom替代 baseline
为什么 <img> 必须写 alt 属性
不是为了“通过 W3C 验证”，而是保障可访问性（a11y）和降级体验。搜索引擎、屏幕阅读器、禁用图片的浏览器都依赖它。
立即学习“前端免费学习笔记（深入）”；
- 空
alt=""表示该图纯装饰，应被屏幕阅读器跳过；写alt="logo"则会被读出 - 千万别用
alt堆关键词，会被判定为作弊；也不要用alt="图片"这种无意义描述 - 如果图含重要信息（如图表、验证码），
alt必须准确传达内容，必要时配合<figure><figcaption>
<button> 和 <input type="button"> 选哪个
优先用 <button>。它原生支持更多语义和样式控制，且在表单提交场景中更可靠。
-
<button>默认type="submit"，放在<form>内会触发表单提交；需显式写type="button"阻止 -
<input type="button">永远不会提交，但内容只能是纯文本，无法嵌套图标或<svg> -
<button>支持伪元素（如::before插入图标）、更好的 focus 状态管理、无障碍角色自动识别
HTML 笔试里最易被忽略的点，是那些“看似没毛病但破坏语义”的写法——比如用 <div onclick="..."> 代替 <button>，或用 <br> 代替段落结构。这些在视觉上没问题，却让代码失去表达力，后续维护成本翻倍。
