HTML5：语义化标签、移动端适配 viewport、直播相关标签<video>/<audio>

爱折腾的小雨
13 阅读4分钟

请解释什么是 HTML5 语义化标签？为什么它们对现代 Web 开发很重要？列举至少 5 个语义化标签并说明其用途。

  • 定义：语义化标签是带有明确含义的 HTML 元素（如 <header>、<article>），它们直接描述内容的结构和角色，而非仅用于样式。

  • 重要性：

    • SEO 优化：帮助搜索引擎理解页面结构，提升排名。
    • 可访问性：屏幕阅读器能更精准解析内容，提升残障用户访问体验。
    • 代码可维护性：结构清晰，便于团队协作和维护。

  • 常用标签：

    • <header>：页面或区块的页眉（标题/导航）。
    • <footer>：页面或区块的页脚（版权/联系信息）。
    • <article>：独立内容区块（博客/新闻）。
    • <section>：逻辑分节（章节/主题分组）。
    • <nav>：主导航链接集合。
    • <aside>：侧边栏或附加内容（广告/引用）。

拓展问题： <section> 和 <div>的语意和区别

  • <div> ：
    是一个通用的块级容器，没有特殊的语义，可以嵌套在任何地方。它纯粹用于样式布局或脚本操作（例如通过 CSS 或 JavaScript 对其内容进行分组和操作）。
  • <section> ：
    表示文档中的一个独立章节或区域，通常有自己的标题（通常为h2~h6）。它用于将内容按主题或功能进行逻辑分组，是具有语义的元素，通常用于博客文章章节、产品特性、用户评论区等。

如何通过 viewport 实现移动端适配？解释以下代码的作用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参考答案：

  • 核心作用：viewport Meta 标签控制移动端浏览器的布局视口（layout viewport），确保页面按设备宽度渲染。

  • 代码解析：

    • width=device-width：视口宽度等于设备宽度（如 iPhone 的 375px）。
    • initial-scale=1.0：初始缩放比例为 1（不缩放）。
    • maximum-scale=1.0, user-scalable=no：禁止用户缩放页面（提升 PWA 体验，但可能影响可访问性）。

  • 适配实践：

    • 结合 CSS 媒体查询（如 @media (max-width: 768px)）实现响应式布局。
    • 使用 REM/EM 单位 替代固定像素，确保元素自适应。

拓展问题：REM/EM 是相当于哪个来计算的

  • em 相对于父元素的字体大小
  • rem 相对于根元素（HTML）的字体大小（默认是16px）

em：Ems 的缩写，起源于印刷业，最初指的是字母 "M" 的宽度。在 CSS 中，1em 等于元素的父元素的字体大小。例如：

    body { font-size: 16px; }
    p { font-size: 1.5em; } /* 1.5 × 16px = 24px */
  • rem：Root Ems 的缩写，表示相对于根元素（<html>）的字体大小。例如：
    html { font-size: 10px; }
    p { font-size: 2rem; } /* 2 × 10px = 20px */

拓展问题： Viewport 如何适配 Retina 屏（高清屏）

  • 方法 1：手动指定高清图
    为元素设置两倍尺寸的图片，通过 CSS 压缩显示为原尺寸，利用更多物理像素渲染：

    .retina-image {
  width: 100px; /* 逻辑像素尺寸 */
  height: 100px;
  background-image: url('image@2x.png'); /* 实际图片为 200x200px（2x 图） */
}

  • 方法 2：使用 image-set 自动匹配 dpr
    通过 CSS image-set 语法根据设备像素比加载对应分辨率的图片（兼容性较好）：

    .retina-image {
  background-image: url('image.png'); /* 基础图（1x） */
  background-image: image-set(
    url('image.png') 1x,
    url('image@2x.png') 2x,
    url('image@3x.png') 3x
  );
}

  • 方法 3：媒体查询（min-device-pixel-ratio）
    通过媒体查询针对不同 dpr 加载样式：

    /* 普通屏（dpr=1） */
.element { background-image: url('image.png'); }

/* 高清屏（dpr≥2） */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .element { background-image: url('image@2x.png'); }
}

在实现直播功能时，<video> 标签需要配置哪些关键属性？如何解决移动端视频自动播放的限制？

  • 关键属性：

    • src：视频流 URL（如 HLS 的 .m3u8 或 MPEG-DASH 的 .mpd）。
    • controls：显示默认控制条（播放/暂停/音量）。
    • autoplay：尝试自动播放（但浏览器通常限制）。
    • muted：静音（规避自动播放限制）。
    • playsinline：在移动端内联播放（而非全屏）。
    <video src="live.m3u8" controls autoplay muted playsinline></video>

  • 移动端自动播放策略：

    • 方案 1：必须添加 muted 属性（静音时允许自动播放）。
    • 方案 2：通过用户交互触发播放（如点击按钮后调用 videoElement.play()）。
    • 方案 3：使用 Web API（如 MediaSession）提升控制权。
avatar
文章
阅读
粉丝