HTML5权威指南笔记：15-嵌入内容

最新推荐文章于 2024-05-21 21:13:33 发布

馋雪山丘

最新推荐文章于 2024-05-21 21:13:33 发布

阅读量550

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011069189/article/details/78351050

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1 嵌入图像

img元素允许我们在HTML文档里嵌入图像

img元素
元素类型	短语元素
允许具有的父元素	任何可能包含短语内容的元素
局部属性	src 、alt 、height 、width 、usemap 、ismap
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	border 、longdesc 、name 、align 、hspace和vspace属性在HTML5巳被废弃
习惯样式	无

例子：嵌入一张图像

    <!--
        src属性指定了欲嵌入图像的URL
        alt属性定义了img元素的备用内容，此内容会在图像无法显示时呈现
        width和height属性来指定img元素所代表图像的尺寸（单位是像素）
    -->
    <img src="triathlon.png" alt="Triathlon Image" width="200" height="67" />

1.1 在超链接里嵌入图像

例子：使用img和a元素创建服务器端的分区响应图

    <!--如果点击这张图像，浏览器会导航至父元素a的href属性所指定的URL上-->
    <a href="otherpage.html">
        <!--ismap属性创建了一个服务器端分区响应图，意思是在图像上点击的位置会附加到URL上-->
        <img src="triathlon.png" ismap alt="Triathlon Image"
             width="200" height="67" />
    </a>

1.2 创建客户端分区响应图

使用map元素，可以通过点击某张图像上的不同区域让浏览器导航到不同的URL上。

map元素
元素类型	map元素在包含短语内容时被视为短语元素，包含流内容时则被视为流元素
允许具有的父元素	任何可以包含短语或流内容的元素
局部属性	name
内容	一个或多个area元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	如果使用了id属性，它的值必须和name属性相同
习惯样式	无

map元素包含一个或多个area元素，它们各自代表了图像上可被点击的一块区域。

area元素
元素类型	短语
允许具有的父元素	map元素
局部属性	alt 、href 、target 、rel 、media 、hreflang 、type 、shape 、coords
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	rel 、media和hreflan属性是HTML5中新增的。nohref属性现已被废弃
习惯样式	area { display: none; }

与目标地址相关的area 元素属性：

href：此区域被点击时浏览器应该加载的URL
alt：替代内容，参见img元素的对应属性
target：应该用来显示URL的浏览上下文，参见第7章base元素的对应属性
rel：描述了当前文档和目标文档之间的关系，参见第7章link元素的对应属性
media：此区域适用的媒介，参见第7章style元素的对应属性
hreflang：目标文档的语言
type：目标文档的MIME类型

coords属性的意思根据shape属性的值而定可以用这些属性来标明用户可以点击的各个图像区域

shape值	cords值的性质和意思
rect	这个值代表了一个矩形区域。coords属性必须由四个用逗号分隔的整数组成，它们代表了下列位置之间的距离：图像的左边缘与矩形的左侧图像的上边缘与矩形的上侧图像的右边缘与矩形的右侧图像的下边缘与矩形的下侧
circle	这个值代表了一个圆形区域。coords属性必须由三个用逗号分隔的整数组成，它们代表了下列参数：从图像左边缘到圆心的距离从图像上边缘到圆心的距离圆的半径
poly	这个值代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点
default	这个值的意思是默认区域，即覆盖整张图片。shape属性使用这个值时不需要提供coords值

例子：创建分区响应图

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    Here is a common form for representing the three activities in a triathlon.
    <p>
        <!--usemap属性的值必须由#符开头的字符串。这样就能把map元素与图像关联起来。-->
        <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">
        <!--根据这里的设置，点击图像的某个部分会导航到不同的url-->
        <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
内容	字符数据
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	sandbox和seamless属性是HTML5新增的。longdesc 、align 、allowtransparency 、frameborder 、marginheight 、marginwidthscrolling属性已被废弃
习惯样式	iframe { border: 2px inset; }

例子：使用iframe元素

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <header>
        <h1>Things I like</h1>
        <nav>
            <ul>
                <li>
                    <!--可以把这个浏览上下文与其他元素（具体是指a 、form、button 、input和base ) 的target属性结合使用。
                        这样点击这里就会将url导航至下面的iframe元素-->
                    <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>

src属性指定了iframe一开始应该载入并显示的URL
srcdoc属性可以定义一张用于内嵌显示的HTML文档
seamless属性指示浏览器把iframe 的内容显示得像主HTML文档的一个整体组成部分
sandbox 属性会对HTML文档进行限制（脚本、表单、插件、指向其他浏览上下文的链接），单没有属性值时全部禁用，有值时是启用某功能，值见下面列表。
1. allow-forms：启用表单
2. allow-scripts：启用脚本
3. allow-top-navigation：允许链接指向顶层的浏览上下文，这样就能用另一个文档替换当前整个文档，或者创建新的标签和窗口
4. allow-same-origin：允许iframe里的内容被视为与文档其余部分拥有同一个来源位置

3 通过插件嵌入内容

3.1 使用embed 元素

embed元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	src 、type 、height 、width
内容	无
标签用法	虚元素形式
是否为HTML5新增	是，不过多年来已经作为非正式元素被广泛使用
在HTML5中的变化	无
习惯样式	无

例子：使用embed元素

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--嵌入一个来自www.youtube.com的视频，里面是一些谷歌工程师关于HTML5的谈话
        src属性指定了内容的地址.
        type属性则指定了内容的MIME类型.
        width和height属性决定嵌入内容将在屏幕上占据的空间大小。
        应用的其他任何属性都会被当做是插件或内容的参数，这里的allowfullscreen属性，
        YouTube的视频播放器通过它来启用全屏观看功能
        -->
    <embed src="http://www.youtube.com/v/qzA60hHca9s?version=3"
           type="application/x-shockwave-flash" width="560" height="349"
           allowfullscreen="true" />
</body>
</html>

3.2 使用object和param元素

object元素
元素类型	这个元素在包含短语内容时被视为短语元素，包含流内容时则被视为流元素
允许具有的父元素	任何可以包含短语或流内容的元素
局部属性	data 、type 、height 、width 、usemap 、name 、form
内容	空白或任意数量的param元素，并可选择添加短语或流内容作为备用内容，参见本节后面的示例
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form属性是HTML5里新增的，archive 、classid 、code 、codebase 、codetype 、declare 、standby 、align 、hspace 、vspace和border属性已被废弃
习惯样式	无

param元素来定义将要传递给插件的参数

param元素
元素类型	无
允许具有的父元素	object元素
局部属性	name 、value
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	param { display: none; }

例子：使用object元素的备用内容功能

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
    <!--object元素的一大优点是可以包含备用内容
    data属性提供了内容的地址，当地址不存在时就会转而显示object元素中的内容-->
    <object width="560" height="349" data="http://titan/myimaginaryfile">
        <param name="allowFullScreen" value="true" />
        <b>Sorry!</b> We can't display this content
    </object>
</body>
</html>

4 object 元素的其他用途

例子：用object元素嵌入一张图像

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--和img元素一样-->
    <object data="triathlon.png" type="image/png"></object>
</body>
</html>

例子：用object元素创建一张客户端分区响应图

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <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>
    <!--usemap属性可以用于关联map元素和object元素-->
    <object data="triathlon.png" type="image/png" usemap="#mymap"></object>
</body>
</html>

例子：将object元素作为浏览上下文环境

<!DOCTYPE HTML>
<html>
<head>
</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>
    <!--可以用object元素来将一张HTML文档嵌入到另一张文档之中，就像用iframe元素一样-->
    <object type="text/html" name="frame" width="300" height="100"></object>
</body>
</html>

5 嵌入数字表现形式

5.1 显示进度

progress元素可以用来表现某项任务逐渐完成的过程。

progress元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	value 、max 、form
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

例子：使用progress元素

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--value属性定义了当前的进度。
        当max属性被省略时，范围是0至1 。用浮点数来表示进度，比如0.3代表30%-->
        <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>

        <!--使用脚本关联了按钮和progress元素-->
        <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>

5.2 显示范围里的值

meter元素显示了某个范围内所有可能值中的一个

meter元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	value 、min 、max 、low 、high 、optimum 、form
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

例子：使用meter元素

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--min和max属性设定了可能值所处范围的边界。
    low属性在它之下的所有值都被认为是过低。
    high属性在它之上的所有值都被认为是过高。
    optimum属性指定了“最佳＇的值。-->
    <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>