HTML5-嵌入内容

下述内容主要讲述了《HTML5权威指南》第15章关于“嵌入内容”。

一、嵌入图像

img元素允许我们在HTML文档里嵌入图像。图像在HTML标记处理完毕后才加载!!

  • src属性指定欲嵌入图像的URL;
  • alt属性定义了img元素的备用内容(图像无法显示时呈现)。
  • width和height属性指定img元素所代表图像的尺寸(单位是像素)。如果省略了该属性,浏览器不知道该为图像留出多大的屏幕空间,造成的结果是,浏览器必须依赖图像文件本身来确定它的尺寸,然后重定位屏幕上的内容来容纳它,产生晃动。

1. 在超链接里嵌入图像

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用img和a元素创建服务器端的分区响应图</title>
</head>
<body>
<a href="otherpage.html">
    <img src="../images/sport.jpg" ismap alt="奥运会运动项目" width="520px" height="131px">
</a>
</body>
</html>
http://localhost:63342/html_test/public/embeddedContent_Chapter15/otherpage.html?466,39

添加ismap属性就创建了一个服务器端分区响应图,URL地址中会包含鼠标点击的坐标。

2. 创建客户端分区响应图

创建一个客户端分区响应图,通过点击某张图像上的不同区域让浏览器导航到不同的URL上。

  • map元素包含一个或多个area元素,它们各自代表了图像上可被点击的一块区域。
  • area元素的属性可以被分为两类:第一类处理的是area所代表的图像区域被用户点击后浏览器会导航打的URL;第二类包含shape和coords属性标明用户可以点击的各个图像区域。

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

属性 说明
href 此区域被点击时浏览器应该加载的URL
alt 替代内容
target 应该用来显示URL的浏览上下文
rel 描述了当前文档和目标文档之间的关系
meida 此区域适用的媒介
hreflang 目标文档的语言
type 目标文档的MIME类型

表 shape和coords属性的值

属性 coords值得性质和意思
rect 代表矩形区域。coords属性必须由四个用逗号分隔的整数组成(左,上,右,下)
circle 代表圆形区域。coords属性必须右三个用逗号分隔的整数组成(左边缘到圆心的距离,上边缘到圆心的距离,半径)
poly 代表一个多边形。coords属性必须至少包含六个用逗号分隔的整数组成(每个数字各代表多边形的一个顶点)
default 默认区域,即覆盖整张图片

示例:创建分区响应图

<p>
    <img src="../images/sport.jpg" usemap="#sportmap" alt="Sport image">
</p>
<map name="sportmap">
    <area href="archery.html" shape="rect" coords="0,5,90,125" alt="射箭">
    <area href="swimming.html" shape="rect" coords="120,5,250,125" alt="游泳">
    <area href="weightlifting.html" shape="rect" coords="290,5,390,125" alt="举重">
    <area href="hockey.html" shape="rect" coords="420,5,520,125" alt="曲棍球">
    <area href="sport.html" shape="default" alt="运动">
</map>

注意:

1. 给img元素添加usemap属性;将其与map元素关联起来。

2. 无需使用a元素来显示创建超链接。

二、 嵌入名一张HTML文档

iframe元素允许我们在现有的HTML文档中嵌入另一张文档。

示例:使用iframe元素

<header>
    <nav>
        <ul>
            <li>
                <a href="img_a.html" target="myframe">Img a Demo</a>
            </li>
            <li>
                <a href="img_map.html" target="myframe">Img map Demo</a>
            </li>
        </ul>
    </nav>
</header>

<iframe name="myframe" width="300" height="100"></iframe>

上述示例中创建了一个name属性为myframe的iframe元素,这样就创建了一个名为myframe的浏览上下文。然后将这个浏览上下文同其他元素(具体是指a、form、button、input和base)的target属性结合使用。示例中,会把href属性中指定的URL载入iframe。

表 其他属性

属性 说明
src 指定iframe一开始应该载入并显示的URL
srcdoc 定义一张用于内嵌显示的HTML文档
seamless 把iframe内容显示得像主HTML文档的一个整体组成部分(浏览器未支持)
sandbox 对HTML文档进行限制(浏览器未支持)

三、 通过插件嵌入内容

object和embed元素最初都是作为扩展浏览器能力的一种方式,用于添加插件支持,而插件能够处理浏览器不直接支持的内容。

示例:嵌入视频

<embed src="https://www.youtube.com/embed/jItLiNKSCBg"
    width="560" height="349" allowfullscreen="true">

<object data="https://www.youtube.com/embed/jItLiNKSCBg"
        width="560" height="349">
    <param name="allowFullScreen" value="true">
    <b>Sorry!</b>We can‘t display this content
</object>

示例:用object元素嵌入一张图像

<object data="../images/sport.jpg" type="image/jpg"></object>

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

<header>
    <nav>
        <ul>
            <li>
                <a href="img_a.html" target="myframe">Img a Demo</a>
            </li>
            <li>
                <a href="img_map.html" target="myframe">Img map Demo</a>
            </li>
        </ul>
    </nav>
</header>

<object type="text/html" name="myframe" width="300" height="100"></object>

注意:chrome和Safari目前不支持用object元素创建客户端分区响应图

示例:用object元素创建浏览器上下文

<p>
    <object type="image/jpg" data="../images/sport.jpg" usemap="#sportmap"></object>
</p>
<map name="sportmap">
    <area href="archery.html" shape="rect" coords="0,5,90,125" alt="射箭">
    <area href="swimming.html" shape="rect" coords="120,5,250,125" alt="游泳">
    <area href="weightlifting.html" shape="rect" coords="290,5,390,125" alt="举重">
    <area href="hockey.html" shape="rect" coords="420,5,520,125" alt="曲棍球">
    <area href="sport.html" shape="default" alt="运动">
</map>

四、嵌入数字表现形式

1. 显示进度

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

value属性定义了当前的进度,它位于0和max属性的值所构成的范围之间。当max属性被省略时,范围是0至1。

示例:使用progress元素

<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.getElementsByTagName("progress")[0];
    for(var i = 0, len = buttons.length; i < len; i++){
        buttons[i].onclick = function(e){
            progress.value = e.target.value; // 千万不能通过 buttons[i].value 获取值
        }
    }
</script>

2. 显示范围里的值

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

min和max属性设定了可能值所处范围的边界,它们可以用浮点数表示。

meter元素的显示可以分为三个部分:过低、过高和最佳。

  • low属性设置一个值,在它之下的所有值都被认为是过低;
  • high属性设置一个值,在它之上的所有值都被认为是过高;
  • optimum属性则指定了“最佳”的值。
<meter id="mymeter" value="90"
       min="0" 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, len = buttons.length; i < len; i++){
        buttons[i].onclick = function(e){
            meter.value = e.target.value;
        }
    }
</script>
时间: 2024-11-03 21:21:49

HTML5-嵌入内容的相关文章

html5权威指南:嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

嵌入另一张HTML文档.通过插件嵌入内容.嵌入数字表现形式:http://www.cnblogs.com/yc-755909659/p/5928125.html

【Javascript 基础】嵌入另一张HTML文档、通过插件嵌入内容

1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="叶超Luka" /> <meta name=&quo

Bootstrap组件之具有响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放.这些规则被直接应用在 <iframe>.<embed>.<video> 和 <object> 元素上. .embed-responsive--指定div为具有响应式特性的嵌入内容的组件: .embed-responsive-16by9..embed-responsive-4by3--指定组件内元素宽高比分别为16:9.4:3;

如何同步iframe与嵌入内容的高度

最近频繁的做一些通过iframe在a页面嵌入b页面需求.总结下来,有以下问题需要解决 1.如何同步iframe与嵌入内容的高度 2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航等等 -如何同步iframe与嵌入内容的高度 a)获取由iframe引入的页面高度 b)同步引入页面与iframe的高度 demo <iframe src="http://jsbin.com/nobefis" id="currentFrame" width=&qu

响应式的嵌入内容和图片

依据被嵌入内容的外部容器的宽度,自己主动创建一个固定的比例,从而让浏览器自己主动确定视频或 slideshow 的尺寸,可以在各种设备上缩放. 这些规则被直接应用在 iframe.embed 和 object 元素上.假设你希望让终于样式与其它属性相匹配,还能够明白地使用一个派生出来的 .embed-responsive-item 类. 超级提示: 不须要为 iframe 元素设置 frameborder="0" 属性,由于我们已经替你这样做了! 先看demo DEMO 等比缩放的属性

Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容

well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放. 这些规则被直接应用在 <iframe>.<embed>.<video> 和 <object> 元素上.如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item 类.常用的有16:9   4:3 1.

学习笔记之html5相关内容

写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的一个属性是 type="email".以前用html的时候,type是有很多类型的,有text,password,summit.就是没听说过email.当得知这个email是验证输入的内容是否为email格式的时候.我顿时兴奋了.以前接触到html的时候,如果要验证输入内容时,是需要写js

Angular2 ng-content 在组件中嵌入内容

ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件.比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容.源码以前文为基础. 父组件使用方法: <app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" > <menu> <ul

html5 基本内容 摘自W3C

HTML5 教程(摘录自 W3C School) HTML 5 简介(HTML5 是下一代的 HTML) 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. HTML5 是如何起步的? HTML5 是 W3C 与 WHATWG 合作的结果. 编者注:W3C 指 World Wid

HTML5基础内容(二)

HTML(HyperText Markup Language)超文本标记语言 一.HTML注释 元素就是标签,标签就是元素. 注释中的内容不会在页面中显示,但是可以在源码中看到. 可以通过编写注释来对代码进行描描述,从而帮助其他工作人员开发.(注释要简洁明了) 方法:可以选中HTML代码,然后Ctrl + / 键. HTML注释:<!-- 需要注释的内容 --> 二.HTML标签属性 通过属性来设置标签如何处理标签的内容. 属性只能在开始标签中添加,实际上就是一个名值对结构(属性名 = &qu