本篇博客整理了本人在近期 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 中实现一个可访问性良好的表单？
- 使用 `<label>` 与输入框关联：
```html
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
```
-
使用 `<fieldset>` 和 `<legend>` 来组织表单组。
-
使用 `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>
```
第 7 题：ARIA 属性的作用以及你在什么情况下使用它。
ARIA 属性用于增强无障碍访问，例如：
-
`aria-label`：提供辅助说明
-
`aria-hidden="true"`：隐藏内容对读屏软件不可见
-
`role="button"`：声明元素的交互角色
第 8 题：HTML5 中新增的本地存储机制有哪些？它们与 Cookie 有何不同？
-
`localStorage`：持久存储
-
`sessionStorage`：临时存储（关闭标签页即失效）
区别：本地存储不会自动随请求发送，容量更大，操作更简单
总结
通过本次错题整理发现，自己在 HTML 的可访问性、响应式图片、多媒体标签、ARIA 属性等方面还存在一定的理解偏差。
建议后续结合项目实际进行实践运用，并加强对 HTML5 新特性与浏览器行为的理解。