前端学习笔记之——嵌入元素

最新推荐文章于 2022-10-10 18:44:29 发布

前丨尘忆·梦

最新推荐文章于 2022-10-10 18:44:29 发布

阅读量621

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_36879493/article/details/118074366

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

嵌入元素

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>

在这里插入图片描述

前丨尘忆·梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习笔记之——嵌入元素

嵌入元素1、嵌入图片img 元素允许我们在 HTML 文档中嵌入图像。元素img元素类型短语元素允许具备的父元素任何可能包含短语内容的元素局部属性src、alt、height、width、usemap、ismap内容无标签用法虚元素形式习惯样式无要嵌入一张图片需要使用 src 和 alt 属性：<!DOCTYPE HTML><html> <head> <title&
复制链接

扫一扫