HTML标签作用及使用场景详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《HTML 中 标签的作用是为

HTML中的source标签，简单来说，它不是一个独立的显示元素，而是作为、和这三大媒体元素的内部助手存在的。它的核心作用就是为这些媒体元素提供多种可供选择的媒体资源，让浏览器能根据自身能力、设备特性或者网络环境，自动选择最适合加载的那一个。这就像是给浏览器提供了一份“备选菜单”，确保内容尽可能地被正确、高效地呈现出来。

解决方案

说白了，source标签就是为了解决媒体内容在不同浏览器、不同设备上兼容性和性能优化的问题。想想看，网络世界浏览器千差万别，有的支持MP4，有的偏爱WebM；设备性能更是五花八门，高分屏需要高清晰度图片，而移动网络又渴望小尺寸文件。如果只提供一种媒体资源，很可能就会出现兼容性问题，或者用户体验不佳。

source标签就是来当这个“智能调度员”的。它允许你在一个媒体元素（比如）内部放置多个子标签，每个标签都指向一个不同格式、不同分辨率或不同大小的媒体文件。浏览器会从上到下地检查这些source标签，一旦找到它自己能识别并支持的第一个资源，就会立即加载并播放它，而忽略后面的。这种机制极大地增强了媒体内容的健壮性和适应性。

它主要通过以下几个核心属性来实现这种能力：

• src：指定媒体资源的URL。
• type：非常关键，告诉浏览器这个资源的MIME类型（例如video/mp4，image/webp）。浏览器会根据这个类型来判断自己是否支持。
• media：在元素中特别有用，用于指定媒体查询条件（如屏幕宽度），让浏览器根据条件选择图片。
• srcset 和 sizes：同样是元素里的好帮手，用于响应式图片，指定不同分辨率的图片源和它们在不同布局下的尺寸。

这种多源选择的策略，让前端开发者在处理富媒体内容时有了更多的灵活性和控制力，不必再为某个特定格式的兼容性而头疼。

source 标签在 和 中的具体应用有哪些？

在和这两个标签里，source标签简直是“救星”般的存在。你可能知道，视频和音频文件格式繁多，而不同浏览器对它们的兼容性并不完全一致。比如，Safari对MP4支持很好，但对WebM可能就没那么热情；而Chrome和Firefox则对WebM和Ogg情有独钟。如果你只提供一种格式，那很可能有一部分用户就看不到或听不到你的内容了。

这时，source标签就派上用场了。我们可以为同一个视频或音频提供多种格式的源文件，浏览器会按照它们在HTML中出现的顺序，从上到下依次检查。它会选择它支持的第一个格式来加载。

举个例子，一个视频文件，我通常会准备MP4和WebM两种格式：

<video controls width="640"    style="max-width:100%" preload="metadata">
  <source src="my-video.webm" type="video/webm">
  <source src="my-video.mp4" type="video/mp4">
  <!-- 这是一个备用内容，如果所有source都无法播放，或者浏览器不支持video标签，就会显示这段文字 -->
  您的浏览器不支持HTML5视频播放。请尝试更新您的浏览器。
</video>

这里，浏览器会先看my-video.webm，如果支持WebM，就加载它。如果不支持，再去看my-video.mp4。如果连MP4也不支持（虽然现在很少见），或者干脆不支持标签，那么用户就会看到“您的浏览器不支持HTML5视频播放...”这行字。

音频文件也是同样的道理，常见的有MP3、Ogg、WAV等：

<audio controls preload="metadata">
  <source src="my-audio.ogg" type="audio/ogg">
  <source src="my-audio.mp3" type="audio/mpeg">
  您的浏览器不支持HTML5音频播放。
</audio>

通过这种方式，我们极大地提高了媒体内容的跨浏览器兼容性。type属性在这里至关重要，它不是告诉浏览器“这个文件是MP4”，而是告诉浏览器“这个文件是video/mp4格式的”，这让浏览器在下载文件之前就能判断自己是否支持，避免了不必要的网络请求。我个人在处理这类问题时，总是会优先考虑WebM/Ogg这类开放格式，再辅以MP4/MP3作为兜底，这样既能保证兼容性，又能兼顾文件大小和编码效率。

元素结合 source 标签如何实现响应式图片？

响应式图片是现代网页设计中非常重要的一环。想象一下，一个用户在手机上浏览你的网站，如果他加载的是一张为桌面显示器准备的4K大图，那不仅会消耗大量流量，还会让页面加载速度慢如蜗牛。元素就是为了解决这个问题而生的，它和source标签的结合，是实现真正响应式图片的关键。

元素本身并不渲染图片，它只是一个容器，里面包含多个标签和一个必需的标签。每个标签可以根据不同的条件（比如屏幕尺寸、设备像素比或者图片格式支持）提供不同的图片源。浏览器会根据这些条件，选择最匹配的那个，然后将它的srcset或src属性值传递给标签去加载。如果所有标签都不匹配，或者浏览器不支持，那么最终会加载标签的src属性指定的图片。

这里主要用到source标签的media、srcset和type属性：

1. media属性：它接受CSS媒体查询语句，让你可以根据视口宽度、设备方向等条件来选择图片。

   <picture>
     <source media="(min-width: 1200px)" srcset="large-image.jpg">
     <source media="(min-width: 768px)" srcset="medium-image.jpg">
     <img src="small-image.jpg" alt="描述性文本">
   </picture>

   在这个例子中，如果屏幕宽度大于1200px，就加载large-image.jpg；如果大于768px但小于1200px，就加载medium-image.jpg；如果都小于768px，就加载small-image.jpg。

2. srcset和sizes属性：这两个属性通常一起使用，用于根据设备像素比（DPR）和图片在布局中的实际尺寸来选择最合适的图片。

   • srcset：提供一系列图片URL及其对应的宽度描述符（w）或像素密度描述符（x）。
   • sizes：告诉浏览器在不同媒体查询条件下，图片在布局中会占据多大的空间。

     <picture>
     <source srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
           sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
           type="image/webp">
     <source srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
           sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
           type="image/jpeg">
     <img src="image-fallback.jpg" alt="Fallback Image">
     </picture>

     这个例子稍微复杂些，但非常强大。它首先尝试加载WebP格式的图片，并根据屏幕宽度和图片在布局中的预期尺寸（sizes）选择最合适的srcset中的图片。如果浏览器不支持WebP，它会尝试加载JPEG格式的图片，同样根据srcset和sizes选择。最后，如果都不支持，就加载image-fallback.jpg。

通过这种方式，我们可以为用户提供极致优化的图片加载体验，既保证了视觉质量，又显著提升了页面性能。这比单纯地用CSS媒体查询来切换背景图要灵活和高效得多。

使用 source 标签时有哪些常见的坑和最佳实践？

任何工具都有它的脾气，source标签也不例外。在实际使用中，我确实遇到过一些让人头疼的问题，但也总结出了一些能让开发更顺畅的最佳实践。

常见的坑：

1. type属性写错或缺失：这是最常见的问题之一。如果type属性不正确，比如把video/mp4写成了video/mpeg，或者干脆忘了写，浏览器就无法在下载文件之前判断它是否支持这种格式。结果就是，浏览器可能会尝试下载一个它根本无法播放的文件，白白浪费了带宽和时间，然后才去尝试下一个source，或者直接显示错误。我个人每次都会仔细核对MIME类型，避免这种低级错误。
2. source标签的顺序问题：浏览器会按照source标签在HTML中出现的顺序，从上到下进行检查。它会选择它支持的第一个格式。这意味着如果你把一个体积很大但兼容性一般的格式放在了前面，即使后面有一个体积小、兼容性好的格式，浏览器可能也会优先尝试加载那个大的。所以，合理的顺序应该是：优先放置体积小、编码效率高（如WebM、AVIF），或者现代浏览器普遍支持的格式，再将兼容性最好的（如MP4、JPEG）作为兜底放在后面。
3. 忘记提供或备用内容：在元素中，标签是强制性的，它不仅是所有标签的最终备用方案，也是那些不支持元素的浏览器的唯一图片来源。同样，在和中，标签后面的文本内容或提示也是非常重要的，它会在浏览器无法播放任何媒体源时显示，给用户一个明确的反馈。我见过不少网站，忘了这个，结果就是一片空白。
4. srcset和sizes的复杂性：尤其是在中，srcset和sizes的组合使用对初学者来说确实有点绕。如果sizes计算不准确，或者srcset提供的图片尺寸不合理，可能会导致浏览器加载了不必要的超大图片，或者在视网膜屏幕上显示模糊的图片。这需要一些实践和调试来掌握。
5. 服务器MIME类型配置问题：这虽然不是HTML标签本身的问题，但它会直接影响source标签的type属性的判断。如果你的服务器没有正确配置文件的MIME类型（例如，把.webm文件当成了application/octet-stream），即使你在HTML中写对了type="video/webm"，浏览器也可能因为服务器返回的错误MIME类型而拒绝加载。这是我经常会提醒后端同事检查的地方。

最佳实践：

1. 始终包含通用兼容格式作为备用：对于视频，MP4（H.264编码）几乎是所有浏览器都支持的万金油；对于图片，JPEG依然是最佳的通用格式。把它们放在source列表的最后，或者作为标签的src，确保在极端情况下内容也能被访问。
2. 正确使用type属性：务必使用标准的MIME类型。不确定时可以查阅MDN或IANA的MIME类型列表。这能让浏览器在下载前就做出明智的决策。
3. 优化source标签的顺序：将文件体积更小、压缩效率更高（如WebP、AVIF）的格式放在前面，然后是主流但可能体积稍大的格式（如MP4），最后是广泛兼容的兜底格式。这样可以优先为用户提供更快的加载体验。
4. 提供有意义的alt文本：标签中的alt属性对于可访问性至关重要，它为视障用户和图片加载失败时提供描述性信息。即使在内部，也别忘了给标签添加它。
5. 利用工具辅助生成srcset和sizes：手动计算和编写复杂的srcset和sizes组合很容易出错。有一些在线工具或构建工具（如Webpack的响应式图片插件）可以帮助你自动化这个过程，生成优化的图片源和属性值。
6. 测试，测试，再测试：在不同的浏览器（Chrome、Firefox、Safari、Edge）、不同的设备（桌面、平板、手机）和不同的网络条件下测试你的媒体内容。只有这样，你才能确保你的source标签配置真正达到了预期的效果。
7. 考虑渐进式增强：对于老旧的浏览器，它们可能不支持、或标签。在这种情况下，确保你的备用内容（比如的src或媒体标签内的文本）能够提供基本的体验。

掌握了这些，你就能更自信、更高效地处理网页中的媒体内容了。

以上就是《HTML标签作用及使用场景详解》的详细内容，更多关于的资料请关注golang学习网公众号！