当前位置：首页 > news >正文

HTML 面试题错题总结与解析

news 来源：原创 2025/6/8 7:41:09

本篇博客整理了本人在近期 HTML 面试题中的部分错误或薄弱问题。

第 1 题：如何在 HTML 中实现响应式图片加载？请举例说明 srcset 和 picture 的使用场景。

HTML 提供了 `srcset` 和 `<picture>` 两种方式来实现响应式图片加载。

方式一：使用 `srcset`：
```html
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
     src="fallback.jpg" alt="示例图片">
```

方式二：使用 `<picture>` 元素：
```html
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="图片">
</picture>
```

第 2 题：如何在 HTML 中实现一个可访问性良好的表单？

1. 使用 `<label>` 与输入框关联：
```html
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
```
2. 使用 `<fieldset>` 和 `<legend>` 来组织表单组。
3. 使用 `aria-*` 属性增强辅助技术识别能力。

第 3 题：解释 <label> 标签的作用，并说明它如何与表单控件关联。

`<label>` 标签可以让用户点击文字时聚焦对应表单控件。
```html
<label for="username">用户名</label>
<input type="text" id="username">
```
`for` 属性应绑定控件的 `id` 而非 `name`。

第 4 题：什么是块级元素和行内元素？请举出三个例子。

- 块级元素：`<div>`、`<p>`、`<section>`
- 行内元素：`<span>`、`<a>`、`<strong>`
`<input>` 是行内块元素（inline-block）

第 5 题：如何创建一个不可见但仍存在于 DOM 的元素？

```html
<div style="display:none;">隐藏内容</div>
<div hidden>隐藏内容</div>
<div style="visibility:hidden;">占位但不可见</div>
```

第 6 题：HTML5 中如何嵌入音频和视频？

```html
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```