7、音频和视频

TIP： 早年在网页中插入音视频需要使用 Flash 技术，当下基本已经淘汰。可直接使用 HTML5 标签轻松在网页中像插入图片一样插入音频和视频即可。

---

7.1、音频标签

TIP： ​ <audio>标签可直接在网页中插入音频，并自动生成默认的播放器。

<audio controls src="mp3/不错哟.mp3">
  亲爱的，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
</audio>

![[Pasted image 20260127163311.png]] 属性说明：

• controls：显示播放控件

• src：音频文件路径

• 标签内部文字：对不兼容 audio 标签的浏览器所显示的文字

其他常用属性：

• autoplay：音频自动播放，不会等待整个音频文件下载完成

• loop：循环播放音频

<audio controls src="mp3/不错哟.mp3" autoplay loop>
  抱歉，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
</audio>

---

7.2、音频标签 audio 的子标签

TIP： source标签为媒体元素定义媒体资源，该标签允许定义多个格式的音视频文件，供浏览器选择自己支持的媒体类型进行播放。

Format	MIME-type	描述
MP3	audio/mpeg	一种音频压缩技术，用来大幅度的降低音频数据量
Ogg	audio/ogg	一种新的音频压缩格式，是完全免费、开发和没有专利限制的
Wav	audio/wav	微软公司开发的一种声音文件格式，声音文件质量和 CD 相差无几

浏览器行为： 需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）

<h2>audio 子标签 source</h2>
<audio controls>
  <source src="audio/不错哟.mp3" type="audio/mpeg" />
  <source src="audio/不错哟.ogg" type="audio/ogg" />
  <source src="audio/不错哟.wav" type="audio/wav" />
  亲爱的，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
</audio>

![[Pasted image 20260127163410.png]]

7.3、视频标签 video 的子标签

Format	MIME-type	描述
mp4	video/mp4	MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
webm	video/webm	WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
avi	video/avi	avi 文件支持 256 色和 RLE 压缩，他对视频文件采用了一种有损压缩方式
ogv	video/ogv	Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器

浏览器行为： 需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）

<h2>video 子标签 source</h2>
<video controls width="500">
  <source src="video/1.mp4" type="video/mp4" />
  <source src="video/1.webm" type="video/webm" />
  <source src="video/1.ogv" type="video/ogv" />
  <source src="video/1.avi" type="video/avi" />
  亲爱的，您的浏览器不支持video标签，请升级您的浏览器哟 ^_^
</video>

![[Pasted image 20260127163434.png]]

8、iframe 标签

TIP： <iframe>是 HTML 中用于在当前页面嵌入另一个 HTML 文档（如第三方内容、广告、视频等）的内联框架标签。它允许在一个网页中显示来自其他页面的内容，实现网页间的互联互通。

注意事项： 所有主流浏览器都支持 <iframe>标签，但不当使用可能导致性能、安全或用户体验问题。

8.1、基本语法

src属性指定要嵌入的页面 URL，可以是相对路径或绝对路径：

<iframe src="URL"></iframe>

8.2、常用属性

属性名	说明	示例
width	设置 <iframe>的宽度（像素值或百分比）	<iframe width="800"></iframe>
height	设置 <iframe>的高度（像素值或百分比）	<iframe height="600"></iframe>
frameborder	规定是否显示 <iframe>周围的边框（HTML5 中已不推荐，建议用 CSS）	<iframe frameborder="0"></iframe>
scrolling	规定是否在 <iframe>中显示滚动条（HTML5 中已不推荐，建议用 CSS）	<iframe scrolling="no"></iframe>
name	规定 <iframe>的名称	<iframe name="myFrame"></iframe>
sandbox	启用对 <iframe>内容的额外限制（如 allow-same-origin）	<iframe sandbox="allow-same-origin"></iframe>
allow	控制 <iframe>内嵌页面的具体功能（如 camera、microphone）	<iframe allow="camera; microphone"></iframe>
loading	延迟加载（lazy）或立即加载（默认）	<iframe loading="lazy"></iframe>
title	为屏幕阅读器提供描述性文本	<iframe title="视频播放器"></iframe>

8.3、实践应用

嵌入网页

<iframe
  src="https://www.arryblog.com"
  width="800"
  height="600"
  frameborder="0"
></iframe>

将名为 https://www.arryblog.com的网页嵌入到当前页面中，嵌入的 <iframe>宽度为 800 像素，高度为 600 像素，且不显示边框。

嵌入图片

<iframe
  src="https://sce7a2b9c9d95a-sb-qn.qiqiuyun.net/files/course/2024/08-27/2052535547fa551878.png"
  width="800"
  height="600"
  frameborder="0"
></iframe>

嵌入第三方服务

<!-- 嵌入优酷视频 -->
<iframe
  height="498"
  width="510"
  src="https://player.youku.com/embed/XNjM2MzAzNzUyOA=="
  frameborder="0"
  allowfullscreen
></iframe>

注： allowfullscreen属性允许全屏模式。

嵌入地图

<!-- 嵌入百度地图 -->
<iframe
  src="https://j.map.baidu.com/aa/5NJ"
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

referrerpolicy 属性说明：

• no-referrer-when-downgrade表示在从 HTTPS 页面发送到 HTTP 页面时不发送 Referer 头信息

• 这种策略在安全性方面提供了一种平衡，防止潜在的安全风险

嵌入广告或第三方内容

<iframe
  src="https://huodong.taobao.com/wow/a/act/tao/dailygroup/23509/24308/wupr?spm=a21bo.jianhua/a.banner.d1.5af92a895B8bah&wh_pid=daily-565955&disableNav=YES&status_bar_transparent=true&custom_content_source=a2113w.30197676"
  width="1000"
  height="550"
  sandbox="allow-same-origin allow-scripts"
  title="广告"
></iframe>

注： 严格限制 sandbox 权限，防止广告代码恶意操作。

JavaScript 控制 iframe

<script>
  function changeURL() {
    var iframe = document.getElementById("myFrame");
    iframe.src = "https://www.arryblog.com";
  }
</script>
<input type="button" value="改变URL" onclick="changeURL()" />
<iframe
  id="myFrame"
  src="https://www.icodingedu.com/"
  width="800"
  height="600"
  frameborder="0"
></iframe>

8.4、iframe 最佳实践

最佳实践	说明
安全性​
设置 sandbox	限制 <iframe>的权限，防止恶意代码攻击
指定 allow	控制 <iframe>内嵌页面的具体功能
避免混合内容	确保 <iframe>的 src 使用 https://
性能优化​
使用 loading="lazy"	延迟加载，减少初始页面加载时间
明确设置 width 和 height	避免页面布局抖动
减少嵌套层级	防止性能下降
可访问性​
添加 title 属性	为屏幕阅读器提供描述性文本
避免关键内容依赖 <iframe>	重要内容应直接放在主页面中
用户体验​
提供备用内容	当 <iframe>无法加载时显示备用文本或链接
避免自动播放	尤其是音频内容
SEO 优化​
避免滥用 <iframe>	搜索引擎通常无法索引 <iframe>内的内容

---

三、语义化标签

TIP： HTML 语义化是指我们在写 HTML 结构时用有英文语义的标签，使 HTML 更易于开发人员和机器的阅读和理解。

为什么要语义化？

• 为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构，易于阅读

• 提升用户体验：如 title、alt 属性用于名词解释或图片内容说明，以及 label 标签的灵活运用等

• 有利于 SEO 优化：与搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息

• 可访问性：帮助辅助技术（如视障用户的屏幕阅读器）更好的阅读和转译你的网页

• 国际化：遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构

• 可维护性：语义化更具可读性，减少网页间的差异性，方便后期开发和维护

---

1、HTML 文本格式化标签

TIP： 对文本内容进行格式化处理的相关标签

1.1、span 标签

TIP： <span>标签是文本中的区块标签，没有任何显示的效果，可以结合 CSS 来定位区块的样式。

<h1>语义化标签</h1>
<h2>span 标签</h2>
<p>
  商品价格：
  <span>368</span>元，优惠价：<span>298</span>元
</p>

1.2、文本格式化标签

标签	功能	示例	语义化用途
<strong>	定义加重语气，表示特别重要的文字（粗体显示）	<p>这是<strong>重要</strong>内容</p>	表示文本内容的重要性和紧迫性
<em>	强调文本（斜体显示）	<p>这是<em>强调</em>内容</p>	表示文本内容的语气或情感强调
<mark>	高亮文本	<p>这是<mark>高亮</mark>内容</p>	标记需要用户特别注意的文本
<del>	删除线文本	<p>原价<del>100元</del></p>	表示已删除或不再准确的内容
<ins>	下划线文本（插入内容）	<p>现价<ins>80元</ins></p>	表示新增或修改的内容
<u>	下划线文本（非强调用途）已被 CSS 替代	<p><u>拼写错误</u></p>	不推荐用于强调，建议用 CSS 或语义标签
<small>	小号字体文本	<p><small>版权声明</small></p>	表示次要文本（如版权、免责声明）
<sup>	定义上标字	H<sub>2</sub>O 或 2<sup>2</sup>	用于科学公式、脚注等
<sub>	定义下标字	同上	用于化学式、数学公式等
<pre>	预格式化文本	<pre>保留空格和换行</pre>	用于显示代码、诗歌等需要保留格式的内容
<code>	计算机代码片段	<p>使用<code>console.log()</code></p>	标记代码片段
<kbd>	键盘输入文本	<p>按<kbd>Ctrl+S</kbd>保存</p>	表示用户键盘输入的内容
<samp>	程序输出样本	<p>输出结果：<samp>Hello</samp></p>	表示程序或系统的输出内容
<var>	变量名	<p>定义变量：<var>x</var>=10</p>	用于数学表达式或编程文档中的变量
<abbr>	缩写词	<p><abbr title="World Wide Web">WWW</abbr></p>	表示缩写词，可通过title提供全称
<q>	短引用	<p>他说：<q>你好</q></p>	表示短引用，浏览器可能自动加引号
<blockquote>	长引用	<blockquote>长引用内容</blockquote>	表示长引用，通常缩进显示
<cite>	引用来源	<p>出自《<cite>书名</cite>》</p>	表示作品标题（如书籍、电影等）
<dfn>	定义术语	<p><dfn>HTML</dfn>是标记语言</p>	表示术语的定义
<b>	视觉加粗（无语义）已被 CSS 替代	<p><b>粗体文本</b></p>	仅用于视觉样式，无语义
<i>	视觉斜体（无语义）已被 CSS 替代	<p><i>斜体文本</i></p>	仅用于视觉样式，无语义
<figure>	一段独立的内容	<figure><img src="images/6.webp" alt="" /><figcaption>小米智能家居，智能门锁</figcaption></figure>	代表一段独立的内容，与说明 figcaption 标签配合使用
<figcaption>	一个独立的引用单元	同上	标签为 <figure>元素定义标题
<time>	日期和时间	<p>会议将于 <time datetime="2028-06-15T14:30">6月15日下午2:30</time> 开始。</p>	包含 datetime 属性提供机器可读格式

1.3、完整示例

<h1>语义化标签</h1>

<h2>span 标签</h2>
<p>
  商品价格：
  <span>368</span>元，优惠价：<span>298</span>元
</p>

<h2>文本格式化标签</h2>
b标签：<b>定义粗体文本</b> <br /><br />
em标签：<em>表示被强调的文本</em> <br /><br />
i标签：<i>斜体</i> <br /><br />
u标签：<u>定义文本下划线</u> <br /><br />
strong标签：<strong>定义加重语气，表示特别重要的文字</strong><br /><br />
del标签：<del>定义删除字 </del><br /><br />
mark标签：<mark>一段需要被高亮的文本</mark>

<h3>sub 标签</h3>
<p>碳在氧气中充分燃烧：C + O<sub>2</sub> = CO<sub>2</sub></p>
<p>铁在氧气中燃烧： 3Fe + 2O<sub>2</sub> = Fe<sub>3</sub>O<sub>4</sub></p>

<h3>sup 标签</h3>
<p>2<sup>3</sup> + 3<sup>2</sup> = 17</p>

<h3>pre 预格式化文本</h3>
<pre>
  预格式化文本

  被包围在 pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

  pre 标签的一个常见应用就是用来表示计算机的源代码。

  &lt;div id="app"&gt;
      &lt;button @click="count++"&gt;
        Count is: {{ count }}
      &lt;/button&gt;
  &lt;/div&gt;
</pre>

<h3>figure、figcaption 标签</h3>
<p>
  代表一段独立的内容，与figcaption配合使用。figure
  标签规定独立的流内容（图像、图表、照片、代码等等）。一个独立的引用单元，标签为figure
  元素定义标题
</p>
<p>
  <figure>
    <img src="images/6.webp" alt="" />
    <figcaption>小米智能家居，智能门锁</figcaption>
  </figure>

  <figure>
    <img src="images/7.webp" alt="" />
    <figcaption>小米智能家居，平衡车</figcaption>
  </figure>
</p>

<h3>blockquote 和 q</h3>
<blockquote cite="https://example.com/quote">
  <p>设计不仅仅是外观和感觉，设计是产品如何工作。</p>
  <footer>— Steve Jobs</footer>
</blockquote>
<p>正如 <q>时间就是金钱</q> 这句话所说...</p>

<h3>time 标签</h3>
<p>会议将于 <time datetime="2028-06-15T14:30">6月15日下午2:30</time> 开始。</p>

![[Pasted image 20260127163736.png]]