html中的嵌入内容标签

玄玄子
193 阅读3分钟

html中的标签根据其语义可以划分为9种类型，其中之一是嵌入内容标签。

这类标签的共同特点是它们可以嵌入"特殊"的内容。

它们有img、picture、map、area、embed、object、iframe、canvas、audio、video、source、slot、track、template。

它们的语义是：

  • img：将一张图像嵌入文档。
  • picture：通过包含零或多个 source元素和一个 img元素来为不同的显示/设备场景提供图像版本。
  • map：定义一个图像映射。
  • area：在图片上定义一个热点区域，可以关联一个超链接。
  • embed：将外部内容嵌入文档中的指定位置，此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。
  • object：表示引入一个外部资源，通过定义一个嵌入的对象，这个对象包含图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
  • iframe：将另一个 HTML 页面嵌入到当前页面中。
  • canvas：可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
  • audio：用于在文档中嵌入音频内容。
  • video：用于在文档中嵌入媒体播放器。
  • source：为媒体元素（比如 video 和 audio）定义媒体资源。
  • slot：组件内的一个占位符，该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。
  • track：被当作媒体元素—audio 和 video的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。
  • template：一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用 JavaScript 实例化。

一些使用经验：

  1. map与area一起使用来定义一个图像映射 (一个可点击的链接区域)，area元素仅在map元素内部使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>

<p>点击图片中太阳，会弹出新的页面：</p>

<img src="https://www.runoob.com/try/demo_source/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
</map>

</body>
</html>

点击图片中太阳，会弹出新的页面(本页面点不了)：

Planets
  1. 现在已经不建议使用 embed 标签了，可以使用 img、iframe、video、audio 等标签代替。
  2. object标签的初衷是取代 img ，不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
  3. embed和object都可以用来嵌入flash。
  4. canvas 标签只是图形容器，您必须使用脚本来绘制图形。
  5. video/audio元素的url属性或其内的 source 元素都可以来指定视频文件。

小提示： Flash曾经是互联网上最流行的多媒体技术之一，它用于创建动画、游戏、应用程序等，使用矢量图形和位图图像、音频和视频等多种媒体元素，可以在网页上播放，也可以作为独立的应用程序运行。但随着HTML5的兴起，Flash已经逐渐被淘汰，目前Flash已经被大多数浏览器禁用，因为它存在安全漏洞和性能问题，现在建议使用HTML5和CSS3来实现动画和交互效果。

avatar
文章
阅读
粉丝