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

HTML面试整理

news 2025/6/27 7:18:38

本篇博客整理了本人在近期 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>