嵌入元素
1、嵌入图片
img 元素允许我们在 HTML 文档中嵌入图像。
元素 | img |
元素类型 | 短语元素 |
允许具备的父元素 | 任何可能包含短语内容的元素 |
局部属性 | src、alt、height、width、usemap、ismap |
内容 | 无 |
标签用法 | 虚元素形式 |
习惯样式 | 无 |
要嵌入一张图片需要使用 src 和 alt 属性：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>alt 属性定义了 img 图像的备用内容。此内容会在图像无法显示时呈现。
可以使用 width 和 height 属性来定义 img 元素所代表的图像尺寸（单位是像素）。如果你省略了这些属性，浏览器就不知道该为图像留出多大的屏幕空间。造成的结果是，浏览器必须依赖图像文件本身来确定它的尺寸，然后重定位屏幕上的内容来容纳它。指定 width 和 height 属性让浏览器能够在图像尚未载入时正确摆放网页里的各个元素。
1.1、在超链接里嵌入图像
img 元素的一个常见用法是结合 a 元素创建一个基于图像的超链接。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<a href="otherpage.html">
<img src="triathlon.png" ismap alt="Triathlon Image"
width="200" height="67"/>
</a>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>浏览器显示这张图像的方式没有什么不同，因此，重要的一点是要向用户提供视觉提示，表明特定图像所代表的超链接。
如果点击这张图像，浏览器会导航至父元素 a 的 href 属性所指定的 URL 上。给 img 元素应用 ismap 属性就创建了一个服务器端分区响应图，意思是在图像上点击的位置会附加到 URL 上。
下边代码展示了 otherpage.html 中的内容，它包含一个简单的脚本：
<!DOCTYPE HTML>
<html>
<head>
<title>Other Page</title>
</head>
<body>
<p>The X-coordinate is <b><span id="xco"> ??</span></b></p>
<p>The Y-coordinate is <b><span id="yco"> ??</span></b></p>
<script>
var coords = windows.location.href.split('?')[1].split(',');
document.getElementById('xco').innerHTML = coords[0];
document.getElementById('yco').innerHTML = coords[1];
</script>
</body>
</html>
服务器端分区响应图通常意味着服务器会根据用户在图像上点击区域的不同做出有差别的反应，比如返回不同的响应信息。如果省略了 img 元素上的 ismap 属性，鼠标点击的坐标就不会被包含在请求 URL 之中。
1.2、创建客户端分区响应图
我们创建一个客户端分区响应图，通过点击某张图像上的不同区域让浏览器导航到不同的 URL 上。这一过程不需要通过服务器引导，因此需要使用元素来定义图像上的各个区域以及它们所代表的行为。客户端分区响应图的关键元素是 map。
元素 | map |
元素类型 | map 元素在包含短语内容时被视为短语元素，包含流内容时则被视为流元素 |
允许具有的父元素 | 任何可以包含短语或流内容的元素 |
局部属性 | name |
内容 | 一个或多个 area 元素 |
标签用法 | 开始标签和结束标签 |
习惯样式 | 无 |
map 元素包含一个或多个 area 元素，它们各自代表了图像上可被点击的一块区域。
元素 | area |
元素类型 | 短语 |
允许具有的父元素 | map 元素 |
局部属性 | alt、href、target、rel、media、hreflang、type、shape、coords |
内容 | 无 |
标签用法 | 虚元素形式 |
习惯样式 | area { display: none; } |
area 元素的属性可以被分为两类，第一类处理的是 area 所代表的图像区域被用户点击后浏览器会导航到的 URL。
属性 | 说明 |
href | 此区域被点击时浏览器应该加载的 URL |
alt | 替代内容 |
target | 应该用来显示 URL 的浏览上下文 |
rel | 描述了当前文档和目标文档之间的关系 |
media | 此区域使用的媒体 |
hreflang | 目标文档的语言 |
type | 目标文档的 MIME 类型 |
第二类则包含了更有意思的属性：shape 和 coords 属性。可以用这些属性来标明用户可以点击的各个图像区域。shape 和 coords 属性是共同其作用的。coords 属性的意思根据 shape 属性的值而定。
shape 值 | coords 值的性质和意义 |
rect | 这个值代表了一个矩形区域。coords 属性必须由四个用逗号分隔的整数组成，它们代表了下列位置之间的距离： 图像的左边缘与矩形的左侧 图像的上边缘与矩形的上侧 图像的右边缘与矩形的右侧 图像的下边缘与矩形的下侧 |
circle | 这个值代表了一个圆形的区域。coords 属性必须由三个用逗号分隔的整数组成，它们代表了下列参数： 从图像左边缘到圆心的距离 从图像上边缘到圆心的距离 圆的半径 |
poly | 这个值代表了一个多边形。coords 属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点 |
default | 这个值的意思是默认区域，即覆盖整张图片。shape 属性使用这个值时不需要提供 coords 值 |
介绍完这些元素后，我们现在来看一个例子。演示分区响应图的一大难点是 area 元素在浏览器屏幕上不可见。出于这个目的，下图展示了例子中的定义区域：
根据这张图可以创建 map 和 area 元素：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<img src="triathlon.png" usemap="#mymap" alt="Triathlon Image"/>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
<map name="mymap">
<area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/>
<area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/>
<area href="otherpage.html" shape="default" alt="default"/>
</map>
</body>
</html>2、嵌入另一张 HTML 文档
iframe 元素允许我们在现有 HTML 文档中嵌入另一张文档。
元素 | iframe |
元素类型 | 短语 |
允许具备的父元素 | 任何可包含短语内容的元素 |
局部属性 | src、srcdoc、name、width、height、sandbox、seamless |
内容 | 字符数据 |
标签用法 | 开始标签和结束标签 |
习惯样式 | iframe { border: 2px inset; } |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<header>
<h1>Things I like</h1>
<nav>
<ul>
<li>
<a href="fruits.html" target="frame">Fruits I Like</a>
</li>
<li>
<a href="activities.html" target="frame">Activities I Like</a>
</li>
</ul>
</nav>
</header>
<iframe name="myframe" width="300" height="100">
</iframe>
</body>
</html>3、通过插件嵌入内容
3.1、使用 embed 元素
元素 | embed |
元素类型 | 短语 |
允许具备的父元素 | 任何可以包含短语内容的元素 |
局部属性 | src、type、height、width |
内容 | 无 |
标签用法 | 虚元素形式 |
习惯样式 | 无 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<embed src="https://www.bilibili.com/bangumi/play/ep253576?from=search&seid=2341666349762198842"
type="application/x-shockwave-flash" width="560" height="349"
allowfullscreen="true"/>
</body>
</html>3.2、使用 object 和 param 元素
object 元素实现的效果和 embed 元素一样，但它的工作方式稍有不同，并且还有一些额外的功能。
元素 | object |
元素类型 | 这个元素在包含短语内容时被视为短语元素，包含流内容则被视为流元素 |
允许具备的父元素 | 任何可以包含短语或流内容的元素 |
局部属性 | data、type、height、usemap、form |
内容 | 空白或任意数量的 param 元素，并可选择添加短语或流内容作为备用内容 |
标签用法 | 开始标签和结束标签 |
习惯样式 | 无 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<object width="560" height="349"
data="https://www.bilibili.com/bangumi/play/ep253576?from=search&seid=2341666349762198842"
type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true"/>
</object>
</body>
</html>元素 | param |
元素类型 | 无 |
允许具备的父元素 | object 元素 |
局部属性 | name、type |
内容 | 无 |
标签用法 | 虚元素形式 |
习惯样式 | param { display: none; } |
3.2.1、指定备用内容
object 元素的一大优点是可以包含备用内容，在指定内容不可用时显示出来。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<object width="560" height="349" data="myimaginaryfile">
<param name="allowFullScreen" value="true"/>
<b>Sorry!</b> We can't display this content
</object>
</body>
</html>
4、嵌入数字表现形式
4.1、显示进度
progress 元素可以用来表现某项任务逐渐完成的过程。
元素 | progress |
元素类型 | 短语 |
允许具备的父元素 | 任何可以包含短语内容的元素 |
局部属性 | value、max、form |
内容 | 短语内容 |
标签用法 | 开始标签和结束标签 |
习惯样式 | 无 |
value 属性定义了当前的进度，它位于 0 和 max 属性的值所构成的范围之内。当 max 属性被省略时，范围是 0 至 1。用浮点数来表示的话，比如 0.3 代表 30%。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<progress id="myprogress" value="10" max="100"></progress>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var progress = document.getElementById('myprogress');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
progress.value = e.target.value;
};
}
</script>
</body>
</html>
4.2、显示范围里的值
meter 元素显示了某个范围内所有可能值中的一个。
元素 | meter |
元素类型 | 短语 |
允许具备的父元素 | 任何可以包含短语内容的元素 |
局部属性 | value、min、max、low、high、optimum、form |
内容 | 短语内容 |
标签用法 | 开始标签和结束标签 |
习惯样式 | 无 |
min 和 max 属性设定了可能值所处范围的边界，它们可以用浮点数来表示。meter 元素的显示可以分为三个部分：过低、过高和最佳。low 属性设置了一个值，在它之下的所有值都被认为是过低；high 属性设置了一个值，在它之上的所有值被认为是过高的；optimum 属性则指定了 “最佳” 的值。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<meter id="mymeter" value="90"
min="10" max="100" low="40" high="80" optimum="60"></meter>
<p>
<button type="button" value="30">30</button>
<button type="button" value="60">60</button>
<button type="button" value="90">90</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var meter = document.getElementById('mymeter');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
meter.value = e.target.value;
};
}
</script>
</body>
</html>
