本篇博客整理了本人在近期 HTML 面试题中的部分错误或薄弱问题。
第 1 题：如何在 HTML 中实现响应式图片加载？请举例说明 srcset 和 picture 的使用场景。
HTML 提供了 srcset 和 <picture> 两种方式来实现响应式图片加载。
方式一：使用 srcset：
<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="示例图片">
srcset 属性可为同一图像提供多个文件源和各自的分辨率描述符。浏览器会根据当前设备的屏幕尺寸（如宽度）和像素密度（如 DPI ）来选择最合适的图像源进行加载。这样，就能 获得与其设备相匹配的最佳图像体验，而不必加载比所需更大或更高分辨率的图像，从而节省带宽并加快页面加载速度。
方式二：srcset与 <picture> 元素结合使用：
<picture>
<source
media="(min-width: 800px)"
srcset="large-1.jpg 1x, large-2.jpg 2x"
sizes="(min-width: 1200px) 600px, (min-width: 1000px) 50vw, 100vw">
<source
media="(min-width: 400px)"
srcset="medium-1.jpg 1x, medium-2.jpg 2x">
<img
src="default.jpg"
srcset="small-1.jpg 1x, small-2.jpg 2x"
alt="Responsive image">
</picture>
<picture> 元素提供了更复杂的图像源选项，可以根据不同的媒体条件（如屏幕宽度和分辨率）指定不同的图像源。这对于艺术方向性的响应式图像特别有用，比如当你希望在不同设备上显示不同裁剪或方向的图片时。
<source> 元素：
- 第一个
<source>元素针对视口宽度至少为 800px 的设备。使用 srcset 提供了两种分辨率（1x 和 2x）的大图像，适用于高分辨率显示设备。sizes 属性进一步定义了不同视口宽度下图像的显示宽 度，提供更精细的控制。 - 第二个
<source>元素针对视口宽度至少为 400px 的设备。同样使用 srcset 提供普通和高分辨率的中等尺寸图像。
<img> 元素：
作为所有 元素的后备选项。如果没有任何 元素的条件被满足，或者浏览器不支持 元素，将加载 中定义的图像。这里还使用了 srcset 来为小图提供不同分辨率的版本。
第 2 题：如何在 HTML 中实现一个可访问性良好的表单？
- 使用
<label>与输入框关联：
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
- 使用
<fieldset>和<legend>来组织表单组。 - 使用
aria-*属性增强辅助技术识别能力。
第 3 题：解释 <label> 标签的作用，并说明它如何与表单控件关联。
<label for="username">用户名</label>
<input type="text" id="username">
<label>标签描述表单输入项- for 属性应对应输入项的 id（不是 name）
- 增强可访问性，点击 label 自动聚焦输入项
第 4 题：什么是块级元素和行内元素？请举出三个例子。
- 行内元素有：a b span img input select strong（强调的语气）
- 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
第 5 题：HTML5 中如何嵌入音频和视频？
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 标签。
</audio>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
第 6 题：ARIA 属性的作用以及你在什么情况下使用它。
ARIA 属性用于增强无障碍访问，例如：
aria-label：提供辅助说明aria-hidden="true"：隐藏内容对读屏软件不可见role="button"：声明元素的交互角色
第 7 题：HTML5 中新增的本地存储机制有哪些？它们与 Cookie 有何不同？
localStorage：持久存储sessionStorage：临时存储（关闭标签页即失效）
区别：本地存储不会自动随请求发送，容量更大，操作更简单
总结
通过本次错题整理发现，自己在 HTML 的可访问性、响应式图片、多媒体标签、ARIA 属性等方面还存在一定的理解偏差。
建议后续结合项目实际进行实践运用，并加强对 HTML5 新特性与浏览器行为的理解。