html5面试题

原创已于 2025-09-25 16:24:55 修改 · 316 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

于 2025-05-23 15:14:29 首次发布

1.简述html5 新特性？

语义化标签

HTML5 引入了新的语义化标签，使文档结构更清晰：

<header>：定义文档或节的页眉
<nav>：定义导航链接的容器
<section>：定义文档中的独立节
<article>：定义独立的自包含内容
<aside>：定义页面内容之外的内容（如侧边栏）
<footer>：定义文档或节的页脚
<main>：定义文档的主要内容

示例：

<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </main>
  <footer>
    <p>版权信息</p>
  </footer>
</body>

多媒体支持

HTML5 原生支持音频和视频播放：

<audio>：嵌入音频内容
<video>：嵌入视频内容支持多种格式：MP3、WAV、Ogg、MP4、WebM等

示例：

<video controls width="500">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持HTML5视频
</video>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持HTML5音频
</audio>

图形和特效

<canvas>：通过JavaScript绘制2D图形
SVG：可缩放矢量图形
WebGL：3D图形API

Canvas示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);
</script>

表单增强

HTML5 提供了新的表单元素和属性：

新的输入类型：email, url, number, range, date, time, color, search
新的表单元素：<datalist>, <output>, <progress>, <meter>
表单验证属性：required, pattern, min, max

示例：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="quantity">数量(1-100)：</label>
  <input type="number" id="quantity" name="quantity" min="1" max="100">
  
  <label for="favcolor">选择颜色：</label>
  <input type="color" id="favcolor" name="favcolor">
  
  <input type="submit" value="提交">
</form>

本地存储

Web Storage：localStorage 和 sessionStorage
IndexedDB：客户端数据库
离线应用缓存（已废弃）

示例：

// 存储数据
localStorage.setItem("username", "JohnDoe");

// 获取数据
const user = localStorage.getItem("username");

// 删除数据
localStorage.removeItem("username");

地理定位

通过 navigator.geolocation API 获取用户位置信息

示例：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      console.log("纬度: " + position.coords.latitude);
      console.log("经度: " + position.coords.longitude);
    },
    function(error) {
      console.log("获取位置失败: " + error.message);
    }
  );
}

Web Workers

允许在后台运行JavaScript，不影响页面性能

示例：

// 主线程
const worker = new Worker("worker.js");
worker.postMessage("开始工作");
worker.onmessage = function(e) {
  console.log("收到消息: " + e.data);
};

// worker.js
onmessage = function(e) {
  console.log("Worker收到: " + e.data);
  postMessage("工作完成");
};

WebSocket

提供全双工通信通道

示例：

const socket = new WebSocket("ws://example.com/socketserver");

socket.onopen = function() {
  socket.send("Hello Server!");
};

socket.onmessage = function(event) {
  console.log("收到消息: " + event.data);
};

拖放API

支持元素拖放操作

示例：

<div id="dragme" draggable="true">拖我</div>
<div id="dropzone">放到这里</div>

<script>
  document.getElementById("dragme").addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("text", e.target.id);
  });

  document.getElementById("dropzone").addEventListener("dragover", function(e) {
    e.preventDefault();
  });

  document.getElementById("dropzone").addEventListener("drop", function(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));
  });
</script>

HTML5的这些新特性大大增强了Web应用的功能和用户体验，使开发者能够创建更丰富、更交互式的Web应用程序。

2.html5为什么只需要写！doctype html？

HTML5只需要写<!DOCTYPE html>是因为它采用了更加简化的文档类型声明（DOCTYPE）设计，这与之前版本的HTML有显著区别。具体原因如下：

向后兼容性
HTML5的DOCTYPE声明被设计为能够触发浏览器的标准模式，同时兼容所有现代浏览器。简短的写法<!DOCTYPE html>足够让浏览器识别这是一个HTML5文档，并按照最新标准渲染页面。
简化语法
相比HTML4.01或XHTML1.0中复杂的DOCTYPE声明（如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">），HTML5的声明更加简洁，符合"保持简单"的设计理念。
不依赖DTD
HTML5不再基于SGML（标准通用标记语言），因此不需要引用DTD（文档类型定义）。传统HTML版本需要DTD来定义标记语言的规则，而HTML5通过浏览器内置的解析规则实现标准化。
大小写不敏感
<!DOCTYPE html>的书写方式对大小写不敏感，比如写成<!doctype html>或<!DocType Html>同样有效，这进一步降低了开发者的学习成本。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5示例</title>
</head>
<body>
    <p>这是一个标准的HTML5文档结构</p>
</body>
</html>

这种简化设计反映了HTML5"渐进增强"和"优雅降级"的核心理念，使开发者能更专注于内容创作而非复杂的语法规则。所有现代浏览器（包括IE9+）都能正确识别这种简短声明并按HTML5标准处理页面。

4.如果把html5 看做一个开放的平台，那么它构建的模块有哪些？

语义化标签模块
- 新增了<header>, <footer>, <nav>, <article>, <section>等语义化标签
- 示例：用<article>标签包裹独立内容，<nav>定义导航栏
- 作用：提升文档结构清晰度和可访问性
多媒体支持模块
- 原生支持<audio>和<video>标签
- 支持多种编解码器（如MP4, WebM, Ogg）
- 提供JavaScript API进行播放控制
图形和动画模块
- <canvas>元素：提供2D绘图API
- SVG支持：矢量图形渲染
- WebGL：基于OpenGL ES的3D图形接口
设备访问模块
- Geolocation API：地理位置获取
- Device Orientation API：设备方向检测
- Camera API：摄像头访问
- 应用场景：LBS服务、AR应用开发
离线应用模块
- Application Cache（已废弃）
- Service Workers：强大的离线缓存机制
- IndexedDB：客户端数据库
- 示例：PWA应用开发
通信模块
- WebSockets：全双工通信
- Server-Sent Events：服务器推送
- WebRTC：实时音视频通信
- 应用场景：在线聊天、视频会议
表单增强模块
- 新增<input>类型：email, date, range等
- 表单验证API
- 示例：<input type="color">显示颜色选择器
性能优化模块
- Web Workers：后台线程
- RequestAnimationFrame：优化动画性能
- 应用场景：大数据处理、流畅动画
安全模块
- Content Security Policy (CSP)
- Same-origin policy增强
- 沙盒机制
存储模块
- localStorage/sessionStorage
- File API
- 应用场景：客户端数据持久化

这些模块共同构成了HTML5开放平台的基础，使开发者能够构建功能丰富、性能优越的现代Web应用。每个模块都提供了相应的API和功能接口，开发者可以根据需求选择使用。

5.简述html5 的离线储存？

HTML5 提供了多种离线存储方案，使网页应用能够在用户离线状态下继续工作。以下是主要的离线存储技术及其特点：

Application Cache（已废弃）
- 通过manifest文件指定缓存资源
- 优点：简单易用
- 缺点：已被W3C废弃，存在更新机制问题
Web Storage
- 包含两种存储方式：
  - localStorage：持久化存储，数据不会过期
  - sessionStorage：会话级存储，关闭标签页后自动清除
- 存储容量：约5MB
- 适用场景：保存用户偏好设置、购物车数据等
IndexedDB
- 浏览器端NoSQL数据库
- 特点：
  - 支持事务操作
  - 存储结构化数据
  - 容量更大（通常50MB以上）
- 适用场景：复杂应用数据存储、大型数据集
Service Worker + Cache API
- 现代PWA应用的主要技术
- 特点：
  - 可以拦截网络请求
  - 支持精细的缓存控制
  - 后台同步功能
- 适用场景：离线优先应用、资源缓存
File System API
- 允许网页访问沙盒文件系统
- 特点：
  - 适合处理大文件
  - 需要用户授权
- 适用场景：编辑器类应用、文件处理应用

实际开发中，通常会组合使用这些技术。例如使用Service Worker处理核心资源缓存，用IndexedDB存储应用数据，同时用localStorage保存用户设置。

6.如何处理html5 新标签的浏览器兼容问题？

如何处理HTML5新标签的浏览器兼容问题

HTML5引入了许多新的语义化标签如<header>、<footer>、<article>、<section>、<nav>等，但在旧版浏览器(特别是IE8及以下版本)中可能会遇到兼容性问题。以下是几种有效的解决方案：

1. 使用JavaScript创建HTML5元素

对于不支持HTML5新标签的浏览器，可以通过JavaScript动态创建这些元素：

document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('section');
document.createElement('nav');
// 其他HTML5标签...

这种方法简单有效，可以确保旧版浏览器能识别这些新标签。

2. 使用HTML5 Shiv/Modernizr

HTML5 Shiv是一个专门解决HTML5标签兼容性的JavaScript库：

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Modernizr是一个更全面的特性检测库，也包含HTML5标签支持：

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

3. CSS重置样式

对于不支持HTML5新标签的浏览器，需要重置这些元素的显示样式：

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

4. 渐进增强策略

采用渐进增强的开发方法：

确保基本功能在不支持HTML5的浏览器中也能工作
为现代浏览器提供增强体验
使用特性检测而非浏览器检测

5. 替代方案

对于关键功能，考虑提供替代方案：

使用<div>元素并添加相应的class作为后备
通过服务器端检测浏览器并提供不同的标记

6. 使用Polyfill

对于更复杂的HTML5特性，可以使用相应的Polyfill：

<picture>元素：Picturefill
表单验证：Webforms2
本地存储：Storage Polyfill

实际应用示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5兼容性示例</title>
    <style>
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

通过以上方法，可以确保HTML5新标签在绝大多数浏览器中都能正常工作，同时保持网站的语义化结构。

7.如何区别html 和 html5?

HTML 与 HTML5 的区别

HTML (HyperText Markup Language) 和 HTML5 是网页开发中常用的两种标记语言，它们之间存在一些重要差异：

1. 文档类型声明

HTML: 使用复杂的文档类型声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5: 简化了文档类型声明
```
<!DOCTYPE html>
```

2. 元素和标签

HTML5新增语义化标签：
- <header>、<footer>、<nav>、<article>、<section>、<aside>
- 多媒体标签：<audio>、<video>
- 图形标签：<canvas>
- 表单控件：<datalist>、<output>、<progress>
HTML5移除或废弃的标签：
- <center>、<font>、<strike>、<frame>、<frameset>、<noframes>
- <acronym> (被<abbr>替代)
- <applet> (被<object>替代)

3. 语法特性

HTML5新增API：
- 本地存储：localStorage和sessionStorage
- 地理定位API
- 拖放API
- Web Workers (后台线程)
- WebSocket (全双工通信)
- 离线应用缓存
HTML5表单增强：
- 新增输入类型：email、url、number、range、date、color等
- 表单验证属性：required、pattern、min、max等
- placeholder属性

4. 多媒体支持

HTML5原生支持：
- 无需插件即可播放音频(<audio>)和视频(<video>)
- 2D/3D图形绘制(<canvas>和WebGL)
传统HTML：
- 依赖第三方插件如Flash播放多媒体

5. 兼容性

HTML5：
- 设计时考虑了向后兼容
- 现代浏览器普遍支持
- 老旧浏览器可能需要polyfill
传统HTML：
- 在老旧浏览器中表现更好
- 缺乏现代网页应用所需的功能

6. 应用场景

HTML5适合：
- 现代Web应用开发
- 响应式网站
- 多媒体丰富的网站
- 需要离线功能的网站
传统HTML适合：
- 简单静态网页
- 需要支持老旧浏览器的项目

7. DOCTYPE声明差异

HTML4.01有三种文档类型：
- Strict
- Transitional
- Frameset
HTML5只有一种简化的DOCTYPE声明

8. 字符编码声明

HTML：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5：
```
<meta charset="UTF-8">
```

HTML5代表了Web技术的重大进步，提供了更丰富的功能、更好的语义化和更强的API支持，使开发者能够创建更强大的Web应用。

8.新的 html5 文档类型和字符集是什么？

HTML5 文档类型声明

HTML5 引入了一种简化的文档类型声明(Document Type Declaration)，写法如下：

<!DOCTYPE html>

与之前的 HTML 版本相比，HTML5 的文档类型声明具有以下特点：

极其简洁：不再需要指定 DTD（文档类型定义）或版本号
大小写不敏感：<!DOCTYPE html> 和 <!doctype html> 都是有效的
向后兼容：确保浏览器以标准模式渲染页面，而非怪异模式

HTML5 字符集声明

HTML5 推荐使用以下方式来声明字符编码：

<meta charset="UTF-8">

特点说明：

推荐使用 UTF-8：UTF-8 是 Unicode 的实现方式之一，能够表示世界上几乎所有的字符
简洁语法：相比 HTML4 的 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 的声明更加简洁
位置要求：字符集声明应放在文档的 <head> 部分，最好是在第一个元素位置

完整 HTML5 文档示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 文档示例</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

实际应用注意事项

字符集声明的重要性：确保网页能正确显示各种语言的字符，避免乱码问题
文档类型的作用：告诉浏览器使用哪种规范来解析文档，影响页面的渲染方式
现代网页开发：这些声明已成为构建任何 HTML5 页面的标准开头部分

在 HTML5 中，这些声明变得更加简洁明了，同时保持了强大的功能和广泛的兼容性。

9.简述html5 新增了哪些功能api?

HTML5 新增了许多功能强大的API，极大地扩展了Web应用的能力。以下是主要新增API的详细说明：

Canvas API
- 提供2D绘图功能，可用于绘制图形、创建游戏等
- 示例：<canvas id="myCanvas" width="200" height="100"></canvas>
- 相关方法：getContext(), fillRect(), strokeText()等
Geolocation API
- 获取用户地理位置信息
- 应用场景：地图服务、本地化内容推送
- 方法：navigator.geolocation.getCurrentPosition()
Web Storage API
- 包括localStorage和sessionStorage
- 存储容量比cookie大(通常5MB)
- 示例：localStorage.setItem('key', 'value')
Web Workers
- 允许在后台运行JavaScript，不阻塞UI
- 使用方法：new Worker('worker.js')
WebSocket API
- 实现全双工通信
- 应用场景：实时聊天、在线游戏
- 建立连接：new WebSocket('ws://example.com')
History API
- 操作浏览器历史记录
- 主要方法：pushState(), replaceState()
- 应用：单页应用(SPA)路由控制
File API
- 访问本地文件系统
- 包括FileReader、FileList等接口
- 示例：文件上传预览功能
Drag and Drop API
- 实现拖放功能
- 相关事件：dragstart, dragover, drop等
Web Audio API
- 处理和控制音频
- 应用场景：音乐播放器、音频编辑器
IndexedDB
- 客户端数据库，存储大量结构化数据
- 支持索引查询
WebRTC
- 实现实时音视频通信
- 应用场景：视频会议、远程教育
Service Workers
- 实现离线缓存和推送通知
- 关键技术：PWA(渐进式Web应用)
Web Components
- 创建可重用的自定义元素
- 包括Custom Elements、Shadow DOM等
Fullscreen API
- 控制元素全屏显示
- 方法：requestFullscreen()
Notifications API
- 显示系统通知
- 需要用户授权

这些API使得HTML5应用能够实现更丰富的功能，接近原生应用的体验，推动了Web开发的革命性进步。

10.html5的form 如何关闭自动补全功能？

使用`autocomplete`属性

1. 关闭整个表单的自动补全

将 autocomplete="off" 添加到 <form> 标签中，可以关闭整个表单的自动补全功能。

2. 关闭单个输入框的自动补全

将 autocomplete="off" 添加到特定的 <input> 标签中，可以关闭该输入框的自动补全功能

11.如何在html5 页面中嵌入音频和视频？

</audio>

</video>

12.html5 中引入了哪些新的表单属性？

HTML5 引入了一系列新的表单属性，包括输入类型、表单元素属性和验证机制等，旨在提供更丰富的表单功能和更好的用户体验。以下是主要的新增表单属性：

1. 新的 input 类型

email：用于输入电子邮件地址，会自动验证格式是否正确。
url：用于输入 URL，会自动验证格式是否符合标准。
number：用于输入数字，通常带有上下箭头调节数值。
range：用于输入数值范围，通常显示为滑块控件。
date：用于选择日期，支持日期选择器。
time：用于选择时间，支持时间选择器。
datetime-local：用于选择本地日期和时间，不包含时区信息。
month：用于选择月份，支持月份选择器。
week：用于选择周，支持周选择器。
color：用于选择颜色，通常显示为颜色选择器。
search：用于搜索框，样式可能与其他输入框不同。
tel：用于输入电话号码，但不自动验证格式。

2. 新的表单元素

<datalist>：提供预定义的输入选项，用户可以选择或自行输入。
<output>：用于显示计算结果或脚本输出。

3. 新的表单属性

placeholder：在输入框中显示提示文本，用户输入时自动消失。
required：标记字段为必填项，提交时验证是否为空。
autofocus：页面加载时自动聚焦到该输入框。
autocomplete：启用或禁用浏览器自动填充功能。
pattern：使用正则表达式验证输入内容是否符合指定格式。
min 和 max：限制数值或日期范围的最小值和最大值。
step：指定数值的增量或减量（如步长为 5 的数字输入）。
multiple：允许用户输入多个值（如文件上传或电子邮件地址）。
form：允许表单元素与表单关联，即使不在 <form> 标签内。
novalidate：禁用表单的默认验证行为。

4. 表单验证

HTML5 提供了内置的表单验证功能，无需 JavaScript 即可实现基本的验证逻辑，如：

检查必填字段是否为空。
检查输入是否符合指定格式（如 email、url 等）。
检查数值是否在指定范围内（如 min、max）。

示例代码

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="请输入邮箱">

  <label for="quantity">数量 (1-10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" step="1">

  <label for="favcolor">选择颜色:</label>
  <input type="color" id="favcolor" name="favcolor">

  <input type="submit" value="提交">
</form>

这些新属性极大地增强了表单的功能，简化了开发流程，并提升了用户体验。

13.html5 应用缓存和常规的html 浏览器缓存有什么区别？

基本概念差异

HTML5应用缓存(Application Cache)

通过manifest文件明确声明需要缓存的资源
允许网站离线访问
开发者可以精确控制缓存哪些资源
即使关闭浏览器后缓存仍然存在

常规浏览器缓存

由浏览器自动管理，基于HTTP头部信息
主要用于提高页面加载速度
缓存策略由服务器和浏览器共同决定
关闭浏览器后可能被清除

技术实现对比

应用缓存实现方式

创建manifest文件(如app.manifest)
在HTML中引用manifest文件：<html manifest="app.manifest">
manifest文件包含三个部分：
- CACHE: 列出需要缓存的资源
- NETWORK: 指定需要在线访问的资源
- FALLBACK: 定义资源不可用时的替代方案

浏览器缓存实现方式

通过HTTP响应头控制：
- Cache-Control: 定义缓存策略
- Expires: 设置过期时间
- ETag: 资源验证标识
- Last-Modified: 最后修改时间

功能特性比较

特性	HTML5应用缓存	常规浏览器缓存
离线访问	支持	不支持
缓存控制粒度	精确到文件	基于URL和规则
更新机制	需修改manifest	自动/条件性更新
缓存持久性	持久	可能被清除
适用场景	Web应用	静态资源

应用场景示例

HTML5应用缓存适用场景

移动Web应用需要离线功能
游戏类网站需要快速加载资源
文档类应用需要在无网络时访问
数据采集应用需要在离线时记录数据

浏览器缓存适用场景

网站公共静态资源(如CSS,JS,图片)
频繁访问但不常变更的内容
需要减少服务器负载的情况
提升普通网页加载速度

注意事项

HTML5应用缓存已被废弃(但部分浏览器仍支持)，推荐使用Service Worker替代
浏览器缓存可能因用户设置或隐私模式而失效
应用缓存更新需要用户再次访问页面才会生效
混合使用两者时需注意缓存策略的一致性

14.为什么html5里面不需要DTD？

在HTML5中，不再需要文档类型定义（DTD）的主要原因包括：

简化标准：HTML5的设计目标之一就是简化标记语言，减少不必要的复杂性。DTD作为XML时代的遗留产物，在HTML5中显得多余，因为HTML5不再基于SGML。
向后兼容模式：HTML5引入了标准模式（standards mode）和怪异模式（quirks mode）的概念，通过简单的<!DOCTYPE html>声明就能触发标准模式，而不需要复杂的DTD声明。
更灵活的语法：HTML5允许更宽松的语法规则（比如可选的闭合标签），这与严格定义的DTD验证相矛盾。HTML5规范本身定义了明确的解析规则，不再依赖外部DTD验证。
性能考虑：避免DTD验证可以提升页面加载速度，因为浏览器不需要额外下载和解析DTD文件。
现代Web需求：HTML5是为动态、交互式Web应用设计的，DTD这种静态验证机制无法适应现代Web开发中动态生成内容的需求。
统一标准：HTML5规范本身已经足够详细和明确，不需要依赖外部DTD来定义文档结构规则。

因此，HTML5只需要一个简单的DOCTYPE声明（<!DOCTYPE html>）来确保浏览器以标准模式渲染页面，这既保持了兼容性，又简化了开发者的工作。

15.哪些浏览器支持html5？

目前主流浏览器均支持HTML5，包括：

Google Chrome（最新版本）
Mozilla Firefox（最新版本）
Microsoft Edge（基于Chromium）
Safari（macOS/iOS）
Opera（最新版本）

注意：建议保持浏览器为最新版本以确保最佳的HTML5兼容性。

16.h5 本地存储和会话（事务）存储之间的区别是什么？

存储周期

本地存储(LocalStorage)：数据永久保存，除非手动清除
会话存储(SessionStorage)：仅在当前浏览器标签页有效，关闭标签后自动清除

作用范围

本地存储：同一域名下所有页面共享
会话存储：仅限创建它的页面使用

存储容量

两者通常都提供约5MB的存储空间

应用场景

本地存储：适合保存长期用户偏好设置
会话存储：适合临时保存当前会话数据

20.html5 应用程序缓存为应用带来什么优势

离线访问：缓存资源后，用户即使断网也能正常使用应用核心功能
加载加速：本地缓存资源大幅减少网络请求，提升页面加载速度
降低服务器负载：减少重复资源请求，有效节省服务器带宽
增强用户体验：确保应用快速响应，避免网络波动带来的性能问题
更新可控：开发者可通过manifest文件精确控制缓存资源的更新时机

21.简述web worker 和 websoket 的作用？

Web Worker 的作用

Web Worker 是 HTML5 提供的浏览器多线程技术，主要用于：

后台执行计算密集型任务：允许在后台线程中运行脚本，不会阻塞主线程（UI线程）的执行。例如：
- 图像处理（如滤镜应用、图片压缩）
- 大数据计算（如复杂的数学运算、统计分析）
- 机器学习模型推理
提升页面响应性能：通过将耗时任务转移到Worker线程，避免页面卡顿或无响应。典型应用场景：
- 电子表格应用中的复杂公式计算
- 3D渲染前的数据预处理
- 音频/视频的编解码处理 实现并行处理：可以创建多个Worker同时处理不同任务。例如：
- 分块处理大型数据集
- 同时执行多个独立的复杂计算
与主线程通信：通过postMessage和onmessage实现线程间通信，但数据传递是值拷贝而非共享内存。

WebSocket 的作用

WebSocket 是 HTML5 提供的全双工通信协议，主要用于：

实时双向通信：建立持久连接后，客户端和服务器可以随时互相发送数据。典型应用：
- 实时聊天应用（如微信网页版）
- 多人在线游戏
- 协作编辑工具（如Google Docs）
低延迟数据传输：相比HTTP轮询，WebSocket避免了重复建立连接的开销。优势场景：
- 股票行情实时推送
- 体育赛事实时比分更新
- 物联网设备状态监控
服务器推送能力：服务器可以主动向客户端推送数据，无需客户端请求。例如：
- 新邮件/消息通知
- 系统告警信息
- 实时日志监控
高效数据传输：相比HTTP有更小的协议头开销（仅2-10字节），适合高频小数据量传输。
支持二进制数据：可以传输ArrayBuffer、Blob等二进制数据，适合：
- 实时音视频传输
- 文件分块传输
- 自定义协议数据传输

两者结合使用的场景

在一些复杂应用中，可以同时使用Web Worker和WebSocket：

用WebSocket接收实时数据，用WebWorker处理数据
在Worker线程中维护WebSocket连接，减轻主线程负担
将计算密集型的数据处理放在Worker中，通过WebSocket传输结果

22.如何让websoket 兼容低版本浏览器？

兼容方案概述

WebSocket是现代浏览器提供的实时通信协议，但在IE10以下版本等老旧浏览器中并不支持。要让WebSocket在这些浏览器中正常工作，可以采用以下几种兼容方案：

1. 使用SockJS库

SockJS是一个JavaScript库，提供了类似WebSocket的API，但在不支持WebSocket的浏览器中会自动降级使用其他技术：

// 安装：npm install sockjs-client
import SockJS from 'sockjs-client';

// 创建连接
const socket = new SockJS('http://yourdomain.com/ws');

// 使用方式与原生WebSocket相同
socket.onopen = function() {
  console.log('连接已建立');
};

socket.onmessage = function(e) {
  console.log('收到消息: ' + e.data);
};

SockJS内部会按以下顺序尝试不同的传输方式：

原生WebSocket
HTTP流(Streaming)
HTTP长轮询(Long Polling)

2. 使用Socket.io库

Socket.io是另一个流行的实时通信库，具有自动降级功能：

// 安装：npm install socket.io-client
import io from 'socket.io-client';

// 创建连接
const socket = io('http://yourdomain.com', {
  transports: ['websocket', 'polling'] // 指定传输方式优先级
});

// 监听事件
socket.on('connect', () => {
  console.log('连接成功');
});

socket.on('message', (data) => {
  console.log('收到消息:', data);
});

Socket.io支持以下传输方式：

WebSocket
Adobe Flash Socket
AJAX长轮询
AJAX多部分流
Forever Iframe
JSONP轮询

3. 手动降级方案

如果你不想使用第三方库，可以手动实现降级逻辑：

function createSocket(url) {
  if ('WebSocket' in window) {
    return new WebSocket(url);
  } else if ('MozWebSocket' in window) {
    return new MozWebSocket(url);
  } else {
    // 降级到长轮询
    return new XHRPollingSocket(url);
  }
}

// 长轮询实现示例
class XHRPollingSocket {
  constructor(url) {
    this.url = url;
    this.listeners = {};
    this.connected = false;
    this.poll();
  }
  
  poll() {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          this.handleMessage(xhr.responseText);
        }
        setTimeout(() => this.poll(), 1000);
      }
    };
    xhr.open('GET', this.url, true);
    xhr.send();
  }
  
  handleMessage(msg) {
    if (this.listeners.message) {
      this.listeners.message({data: msg});
    }
  }
  
  send(data) {
    // 实现发送逻辑
    const xhr = new XMLHttpRequest();
    xhr.open('POST', this.url, true);
    xhr.send(data);
  }
  
  on(event, callback) {
    this.listeners[event] = callback;
  }
  
  // 其他WebSocket方法...
}

4. 服务端配置

无论使用哪种客户端方案，服务端也需要相应支持：

SockJS服务端：需要安装对应的服务器端实现（如Node.js的sockjs模块）
Socket.io服务端：需要安装socket.io服务器
手动降级：需要实现长轮询接口

5. 其他注意事项

性能考虑：长轮询相比WebSocket会有更高的延迟和服务器负载
功能限制：降级方案可能不支持WebSocket的所有特性
安全考虑：确保所有传输方式都应用相同的安全措施
协议一致性：保持API在不同传输方式下行为一致

最佳实践建议

优先使用成熟的库如SockJS或Socket.io
在项目初期就考虑兼容性，而不是后期添加
对不支持WebSocket的浏览器给出适当提示
定期测试各种浏览器下的功能表现
考虑逐步淘汰对老旧浏览器的支持

23.html5 为浏览器提供了哪些数据存储方案？

HTML5 为现代浏览器提供了多种本地存储解决方案，使开发者能够在客户端存储数据而无需依赖服务器会话或 cookies。以下是主要的数据存储方案：

1. Web Storage API

Web Storage 提供了两种对象用于存储键值对数据：

localStorage

特点：持久化存储，数据不会过期（除非手动清除）
容量：通常为 5MB 或更多（不同浏览器实现可能不同）
应用场景：用户偏好设置、购物车数据、应用状态持久化

示例：

// 存储数据
localStorage.setItem('username', 'john_doe');

// 读取数据
const user = localStorage.getItem('username');

// 删除数据
localStorage.removeItem('username');

sessionStorage

特点：会话级存储，数据仅在当前浏览器标签页有效
容量：与 localStorage 类似（约 5MB）
应用场景：临时表单数据、单页面应用的状态管理

示例：

// 存储数据
sessionStorage.setItem('tempFormData', JSON.stringify(formValues));

// 读取数据
const savedData = JSON.parse(sessionStorage.getItem('tempFormData'));

2. IndexedDB

特点：浏览器内置的 NoSQL 数据库，支持事务、索引和复杂查询
容量：理论上无限制（浏览器可能设置上限，通常为 50% 磁盘空间）
应用场景：离线应用、大数据量存储、需要复杂查询的应用

示例：

// 打开/创建数据库
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('books', { keyPath: 'id' });
  store.createIndex('by_title', 'title', { unique: false });
};

// 添加数据
const transaction = db.transaction(['books'], 'readwrite');
const store = transaction.objectStore('books');
store.add({ id: 1, title: 'HTML5 Guide', author: 'John Doe' });

3. Web SQL Database（已废弃）

状态：W3C 已不再维护此规范
特点：基于 SQLite 的关系型数据库
替代方案：建议使用 IndexedDB 替代

4. Cache API（Service Worker 缓存）

特点：用于存储网络请求和响应，支持离线访问
容量：浏览器自动管理，通常为可用存储空间的一部分
应用场景：渐进式 Web 应用(PWA)、资源缓存

示例：

// 打开缓存
caches.open('my-cache').then((cache) => {
  // 添加资源到缓存
  cache.add('/styles/main.css');
  
  // 匹配缓存中的请求
  cache.match('/styles/main.css').then((response) => {
    if (response) {
      // 使用缓存响应
    }
  });
});

5. File API

特点：允许访问本地文件系统
应用场景：文件上传预览、本地文件处理

示例：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = (event) => {
    console.log('File content:', event.target.result);
  };
  
  reader.readAsText(file);
});

6. Application Cache（已废弃）

状态：已被 Service Worker 替代
替代方案：建议使用 Service Worker 和 Cache API

存储方案对比表

特性	localStorage	sessionStorage	IndexedDB	Cache API
存储类型	键值对	键值对	NoSQL	请求/响应
持久性	永久	会话级	永久	永久
容量限制	~5MB	~5MB	大(50%磁盘)	浏览器管理
同步/异步	同步	同步	异步	异步
适合的数据类型	简单数据	简单数据	复杂数据	网络资源

开发者可以根据应用需求选择合适的存储方案，或组合使用多种方案以达到最佳效果。

24.简述sessionStorage 和 localStorage 和 cookie 的区别？

存储容量

Cookie：约4KB
LocalStorage：5-10MB（各浏览器不同）
SessionStorage：5-10MB（各浏览器不同）

生命周期

Cookie：
- 可设置过期时间（默认浏览器关闭时失效）
- 可设置持久性Cookie（通过Expires或Max-Age属性）
LocalStorage：
- 永久存储，除非手动清除或程序删除
- 浏览器关闭后数据依然存在
SessionStorage：
- 仅在当前会话有效
- 关闭浏览器标签页或窗口后自动清除

作用域

Cookie：
- 可设置作用域（通过Domain和Path属性）
- 默认在当前域名及其子域名下有效
LocalStorage：
- 仅在当前域名下有效
- 不同协议（http/https）视为不同存储域
SessionStorage：
- 仅在当前窗口/标签页中有效
- 同一域名下不同标签页也不共享

与服务器交互

Cookie：
- 每次HTTP请求都会自动携带（通过请求头）
- 会增加网络流量
LocalStorage：
- 仅存储在客户端
- 不会自动发送到服务器
SessionStorage：
- 仅存储在客户端
- 不会自动发送到服务器

典型应用场景

Cookie：
- 用户认证（Session ID）
- 跟踪用户行为
- 保存用户偏好设置
LocalStorage：
- 持久化用户设置
- 缓存应用数据
- 离线应用数据存储
SessionStorage：
- 表单数据暂存（防止页面刷新丢失）
- 单次会话中的临时数据
- 敏感信息的临时存储（比Cookie更安全）

26.简述svg 和canvas 区别？

SVG 和 Canvas 的主要区别如下：

图形类型
- SVG 是基于矢量的图形格式，使用 XML 描述图像
- Canvas 是基于像素的绘图技术，通过 JavaScript 脚本绘制
渲染方式
- SVG 作为 DOM 元素存在，支持 CSS 样式和事件绑定
- Canvas 是即时渲染，绘制完成后就变成静态图像
缩放性能
- SVG 可无损缩放，适合需要高清晰度的场景
- Canvas 放大后会失真，适合固定尺寸的图形处理
交互能力
- SVG 支持单个图形元素的交互
- Canvas 只能对整个画布进行交互
适用场景
- SVG 适合需要频繁交互的数据可视化
- Canvas 更适合游戏、图像处理等高性能需求

27.如何使用canvas 和 svg 画一个矩形？

使用Canvas绘制矩形

Canvas是HTML5提供的一个绘图API，它使用JavaScript来绘制图形。

基本步骤

获取Canvas元素：首先需要在HTML中创建canvas元素
获取绘图上下文：通过canvas元素获取2D绘图上下文
设置绘制样式：如填充颜色、边框颜色等
绘制矩形：使用上下文的绘制方法

示例代码

HTML部分

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript部分

// 1. 获取Canvas元素
const canvas = document.getElementById('myCanvas');

// 2. 获取绘图上下文
const ctx = canvas.getContext('2d');

// 3. 设置绘制样式
ctx.fillStyle = 'blue';    // 填充颜色
ctx.strokeStyle = 'red';   // 边框颜色
ctx.lineWidth = 3;         // 边框宽度

// 4. 绘制矩形
// 绘制填充矩形
ctx.fillRect(10, 10, 150, 80);

// 绘制边框矩形
ctx.strokeRect(10, 10, 150, 80);

方法说明

fillRect(x, y, width, height)：绘制填充矩形
strokeRect(x, y, width, height)：绘制边框矩形
clearRect(x, y, width, height)：清除指定矩形区域

使用SVG绘制矩形

SVG是一种基于XML的矢量图形格式，可以直接在HTML中使用。

基本语法

<svg width="200" height="100">
  <rect x="10" y="10" width="150" height="80" 
        fill="blue" stroke="red" stroke-width="3"/>
</svg>

属性说明

x和y：矩形左上角的坐标
width和height：矩形的宽度和高度
fill：填充颜色
stroke：边框颜色
stroke-width：边框宽度
rx和ry：圆角半径（可选）

进阶示例：带圆角的矩形

<svg width="200" height="100">
  <rect x="10" y="10" width="150" height="80" 
        rx="10" ry="10"
        fill="blue" stroke="red" stroke-width="3"/>
</svg>

两种技术的比较

特性	Canvas	SVG
图形类型	位图	矢量图
更新方式	需要重绘整个画布	可以单独操作元素
事件处理	不支持单个图形的事件处理	支持单个图形的事件处理
性能	适合大量图形、动画	适合静态或少量的交互图形
缩放	会失真	可无损缩放
DOM结构	单个元素	包含多个图形元素的DOM结构

根据具体需求选择合适的绘图技术：

需要高性能图形渲染和动画时使用Canvas
需要交互性和可缩放性时使用SVG

28.如何刷新浏览器的应用缓存？

要刷新浏览器应用缓存，可按以下步骤操作：

1.打开开发者工具：

Windows/Linux：按F12或Ctrl+Shift+I
Mac：按Command+Option+I

2..在开发者工具界面

切换到"Application"（应用）选项卡
在左侧菜单中选择"Clear storage"（清除存储）

3.点击"Clear site data"（清除站点数据）按钮

4.强制刷新页面：

Windows/Linux：按Ctrl+F5
Mac：按Command+Shift+R

提示：不同浏览器操作可能略有差异，以上方法适用于Chrome、Edge等主流浏览器。

29.简述应用缓存中的回退是什么？

应用缓存中的回退（Fallback）是指当用户尝试访问某个资源但该资源无法获取时（例如网络不可用或服务器返回404错误），系统会自动提供一个预先定义的备用资源代替显示。

具体来说，回退机制通常通过缓存清单文件（如manifest.appcache）配置，开发者可以在其中指定一组回退规则。例如：

CACHE MANIFEST  
# 需要缓存的资源  
CACHE:  
/styles/main.css  
/scripts/app.js  

# 回退规则  
FALLBACK:  
/ /offline.html  
/images/ /images/offline.png  
/api/ /static/fallback.json

典型应用场景：

离线访问：当用户处于断网状态时，访问任意路径（如/about）会自动显示offline.html页面。
资源不可用：若图片加载失败（如/images/logo.jpg），会替换为预存的offline.png占位图。
API降级：当后端接口（如/api/data）不可用时，返回本地缓存的静态数据（fallback.json）。

实现特点：

回退资源需提前缓存，否则机制失效。
规则支持路径前缀匹配（如/api/匹配所有子路径）。
常用于PWA（渐进式Web应用）或离线优先策略中。

30.简述应用缓存中的网络命令的作用？

应用缓存中的网络命令主要用于控制浏览器在离线状态下如何处理网络资源的加载行为。以下是几种常见网络命令及其作用：

NETWORK 命令：
- 声明需要在线访问的资源白名单
- 如：NETWORK: /api/表示该路径下的所有请求都强制走网络
- 典型应用场景：需要实时更新的API接口
FALLBACK 命令：
- 定义网络不可用时的备用资源
- 格式：FALLBACK: /online/ /offline/
- 示例：当无法访问在线图片时自动显示本地缓存图片
CACHE 命令：
- 显式指定需要缓存的资源
- 这些资源会优先从缓存加载
- 如：CACHE: /styles/main.css
特殊命令：
- 星号(*)表示除明确缓存外的所有资源都走网络
- 空FALLBACK表示其他所有请求都使用备用页面

这些命令通常配置在manifest文件中，浏览器会按照特定顺序解析（CACHE→NETWORK→FALLBACK），其中NETWORK部分的资源永远不会被缓存，确保获取最新版本。在实际开发中，合理配置这些命令可以显著提升离线应用的可用性，同时保证关键数据的实时性。

31.简述html5 如何实现跨域？

HTML5 实现跨域的方法

HTML5 提供了几种实现跨域通信的技术方案，以下是主要的实现方式：

1. CORS (跨域资源共享)

CORS 是 W3C 标准，允许服务器声明哪些源站有权限访问哪些资源。

实现步骤：

服务器端设置响应头：

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

简单请求：
- 使用 GET、HEAD、POST 方法
- 只包含 Accept、Accept-Language、Content-Language、Content-Type 等简单头部
预检请求（复杂请求）：
- 浏览器先发送 OPTIONS 请求检查跨域权限
- 服务器响应后才会发送实际请求

2. postMessage API

允许不同源的窗口/iframe 之间安全地进行跨域通信。

使用示例：

发送方：

// 向目标窗口发送消息
targetWindow.postMessage('Hello there!', 'https://example.com');

接收方：

window.addEventListener('message', function(event) {
  // 验证来源
  if (event.origin !== 'https://example.com') return;
  
  console.log('Received message: ' + event.data);
});

3. WebSocket

WebSocket 协议本身支持跨域通信，不受同源策略限制。

实现步骤：

建立 WebSocket 连接：

const socket = new WebSocket('ws://example.com/socket');

服务器需要在握手阶段处理 Origin 头部

4. JSONP (JSON with Padding)

利用 <script> 标签不受同源策略限制的特性。

实现方式：

客户端定义回调函数：

function handleResponse(data) {
  console.log(data);
}

2.动态创建 script 标签：

const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);

3.服务器返回包装的 JSON 数据：

handleResponse({"name": "John", "age": 30});

5. window.name 传输

利用 window.name 属性可以跨域传递数据（最大 2MB）。

实现流程：

源页面设置 window.name
导航到跨域页面
跨域页面读取 window.name

6. document.domain

适用于主域相同、子域不同的情况。

使用方式：

在两个页面都设置：

document.domain = 'example.com';

2.之后就可以相互访问 DOM 和 JS 对象

最佳实践建议

优先使用 CORS，这是最标准和安全的方式
需要实时通信考虑 WebSocket
旧浏览器兼容可使用 JSONP
同主域下不同子域使用 document.domain
窗口间通信使用 postMessage
始终验证来源以防止安全漏洞

安全注意事项

跨域请求必须正确处理 CSRF 防护
使用 postMessage 时务必验证 event.origin
JSONP 存在 XSS 风险，需要谨慎处理
敏感操作应结合身份验证和授权机制

32.如何解决移动端html5 音频标签 auto 的autoplay 属性失效问题？

移动端浏览器出于流量和用户体验考虑，普遍禁用了autoplay功能。解决方案需结合用户交互和代码优化。

解决方案

交互触发播放
- 通过按钮点击等用户交互事件触发音频播放
- 首次播放需在用户手势事件回调中执行

静音自动播放

const audio = document.getElementById('myAudio');
audio.muted = true;
audio.play().then(() => {
  audio.muted = false; // 播放成功后再取消静音
});

预加载优化
- 添加preload="auto"属性
- 使用canplaythrough事件确保资源加载完成

浏览器兼容处理

document.addEventListener('click', function initAudio() {
  const audio = document.getElementById('myAudio');
  audio.play().catch(e => {
    console.log('自动播放失败:', e);
    // 显示播放按钮让用户手动触发
  });
  document.removeEventListener('click', initAudio);
}, {once: true});

Web Audio API替代方案

const audioContext = new AudioContext();
const source = audioContext.createBufferSource();
// 加载并播放音频

注意事项

iOS系统有更严格的限制，需用户明确交互才能播放
部分浏览器要求音频源与页面同域
始终提供备用手动播放方案

33.解释在ie低版本下的怪异盒模型和css3 的怪异盒模型和弹性盒模型？

IE低版本怪异盒模型（Quirks Mode Box Model）

IE6及以下版本在"怪异模式"下使用的盒模型计算方式与标准模式不同：

宽度计算方式：元素的总宽度 = width属性值（包含padding和border）
实际内容宽度：内容区宽度 = width - padding - border
触发条件：当文档缺少DOCTYPE声明或使用旧的HTML文档类型时

<!-- 触发怪异模式的文档声明示例 -->
<html>
<head>
    <!-- 缺少DOCTYPE声明 -->
    <title>Quirks Mode Example</title>
</head>

.box {
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* 在IE6怪异模式下总宽度为300px（内容区宽度240px） */
}

CSS3标准盒模型（box-sizing属性）

CSS3引入了box-sizing属性来明确控制盒模型的计算方式：

1. content-box（默认值）

标准盒模型：元素的总宽度 = width + padding + border
特点：与W3C标准一致，padding和border会增加元素总尺寸

.box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* 总宽度 = 300 + 20*2 + 10*2 = 360px */
}

2. border-box（类似IE怪异模式）

怪异盒模型：元素的总宽度 = width属性值（包含padding和border）
特点：与IE怪异模式计算方式相同，但现在是可控的标准化实现

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* 总宽度保持300px，内容区宽度=240px */
}

CSS3弹性盒模型（Flexbox）

弹性盒模型是CSS3引入的全新布局模式，与传统的盒模型有显著区别：

主要特点

容器属性：

.container {
    display: flex; /* 或 inline-flex */
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: stretch | flex-start | flex-end | center | baseline;
}

项目属性：

.item {
    flex-grow: <number>; /* 定义项目的放大比例 */
    flex-shrink: <number>; /* 定义项目的缩小比例 */
    flex-basis: <length> | auto; /* 定义在分配多余空间之前项目占据的主轴空间 */
    order: <integer>; /* 定义项目的排列顺序 */
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

应用场景

创建响应式导航栏
实现等高列布局
居中元素（水平和垂直）
重新排序内容（无需修改HTML结构）

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

<style>
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    background: #eee;
}
.flex-item {
    width: 80px;
    height: 80px;
    background: coral;
}
</style>

浏览器兼容性

现代浏览器都支持Flexbox（需要加前缀的版本已逐渐淘汰）
IE10-11有部分支持（需要-ms-前缀）
IE9及以下不支持Flexbox布局

34.简述那个属性将循环播放嵌入到audio 元素中的音频？

要设置 <audio> 元素中的音频循环播放，可以使用 loop 属性。以下是详细说明：

基本用法：在 <audio> 标签中添加 loop 属性即可实现音频循环播放：
```
<audio src="audio.mp3" loop></audio>
```
属性说明：
- loop 是一个布尔属性，不需要赋值，只需在标签中添加即可生效
- 当存在该属性时，音频播放结束后会自动重新开始播放
- 该属性适用于所有支持 HTML5 的浏览器

完整示例：

<audio controls loop>
  <source src="background_music.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素
</audio>

应用场景：
- 背景音乐的循环播放
- 需要持续播放的环境音效
- 重复性的提示音或通知音
注意事项：
- 循环播放可能会影响用户体验，建议在必要时使用
- 可以提供控制按钮让用户自行选择是否循环
- 在移动设备上可能会受到自动播放限制
JavaScript 控制方式：也可以通过 JavaScript 动态设置循环：
```
const audio = document.getElementById("myAudio");
audio.loop = true;
```