HTML笔试题有哪些_html前端笔试编程题汇总【必看】

HTML笔试题有哪些_html前端笔试编程题汇总【必看】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

HTML笔试重在规范、语义、兼容性与陷阱理解；外边距折叠、inline/inline-block对齐差异、alt必要性、button优先于input及语义化书写是核心考点。

HTML 笔试题不考编程能力，只考对规范、语义、兼容性和常见陷阱的准确理解。刷题时盯着“标准答案”不如盯住浏览器实际行为——比如 <div> 和 <p> 都能显示文字，但语义错误在 SEO、无障碍、维护性上会持续反噬。

块级元素的 margin-top/bottom 为什么有时没效果

不是“没效果”，是发生了外边距折叠（margin collapsing）。当两个相邻块级元素的垂直外边距相遇，浏览器会取其中较大者，而不是相加。父子之间也会折叠：如果父元素没 border/padding，子元素的 margin-top 会“冒”到父元素外边。

1. 常见现象：<div><p>内容</p></div> 中给 <p> 加 margin-top: 20px，结果整个 <div> 向下移了 20px，而不是内部留白
2. 破除方法：给父元素加 padding-top: 1px、border-top: 1px solid transparent，或触发 BFC（如 overflow: hidden）
3. 注意：<img>、<input> 这类替换元素虽是行内，但 margin 垂直方向有效；而纯行内元素如 <span> 的 margin-top 完全无效

display: inline 和 display: inline-block 的关键区别

别只记“能不能设宽高”。真正影响布局的是基线对齐方式和空白符处理逻辑。

1. display: inline 元素默认按 baseline 对齐，常导致底部多出几像素空隙（其实是行高的留白），且忽略 width/height、margin-top/margin-bottom
2. display: inline-block 保留行内流特性（不换行），但支持全部盒模型属性；它仍按 baseline 对齐，所以同样有底部空隙问题
3. 解决空隙：父容器设 font-size: 0，子元素再单独设字体；或用 vertical-align: top/middle/bottom 替代 baseline

为什么 <img> 必须写 alt 属性

不是为了“通过 W3C 验证”，而是保障可访问性（a11y）和降级体验。搜索引擎、屏幕阅读器、禁用图片的浏览器都依赖它。

1. 空 alt="" 表示该图纯装饰，应被屏幕阅读器跳过；写 alt="logo" 则会被读出
2. 千万别用 alt 堆关键词，会被判定为作弊；也不要用 alt="图片" 这种无意义描述
3. 如果图含重要信息（如图表、验证码），alt 必须准确传达内容，必要时配合 <figure><figcaption>

<button> 和 <input type="button"> 选哪个

优先用 <button>。它原生支持更多语义和样式控制，且在表单提交场景中更可靠。

1. <button> 默认 type="submit"，放在 <form> 内会触发表单提交；需显式写 type="button" 阻止
2. <input type="button"> 永远不会提交，但内容只能是纯文本，无法嵌套图标或 <svg>
3. <button> 支持伪元素（如 ::before 插入图标）、更好的 focus 状态管理、无障碍角色自动识别

HTML 笔试里最易被忽略的点，是那些“看似没毛病但破坏语义”的写法——比如用 <div onclick="..."> 代替 <button>，或用 <br> 代替段落结构。这些在视觉上没问题，却让代码失去表达力，后续维护成本翻倍。