HTML面试整理

本篇博客整理了本人在近期 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 中实现一个可访问性良好的表单？

1. 使用 <label> 与输入框关联：

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

2. 使用 <fieldset> 和 <legend> 来组织表单组。
3. 使用 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 新特性与浏览器行为的理解。