html5嵌入内容_动力节点Java学院整理

在HTML文档中嵌入内容，可以使你的页面更加丰富。

嵌入图像

使用img元素可以在HTML文档里嵌入图像，该元素包含如下属性：

1）src：显示图像的URL；

2）alt：图像的替代文本；

3）height：图像的高度；

4）width：图像的宽度；

5）usemap：将图像定义为客户端图像映射；

6）ismap：将图像定义为服务端图像映射。

下面具体介绍对图像的操作。

嵌入图像

使用src和alt属性就可以嵌入一张图像。

<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>

src定义了图像的URL，alt属性定义了当图像无法显示时，浏览器将显示的替代文本。图像无法显示可能有以下原因：

1）网速太慢；

2）src属性中的错误；

3）浏览器禁用图像；

4）用户使用的是屏幕阅读器。

强烈推荐在每个图像中都使用该属性，这样当图像无法显示时，用户还是可以看到关于图像的一些信息，而对于残疾人来说，alt属性是他们了解图像内容的唯一方式。

alt属性的最大长度是1024个字符，包括空格和标点，可以包含对特殊字符的实体引用，但不允许任何形式的标签。

alt文本的使用原则：

1）如果图像包含信息，使用alt描述图像；

2）如果图像在a元素中，使用alt描述目标链接；

3）如果图像仅供装饰，使用alt=""。

图像在HTML标记处理完毕后才会加载，浏览器通常不知道该给图像预留多大的空间，这样就导致加载图像后，浏览器需要重定位屏幕上的内容来容纳它，导致屏幕的晃动。可以指定图像的width和height属性来解决该问题，但注意width和height属性应该仅用来告诉浏览器图像的尺寸，而不应该用来动态缩放图像。

在超链接中嵌入图像

结合a元素，img元素可以生成一个基于图像的超链接。

<a href="otherpage.html">  
    <img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>  
</a>

这样当点击该图像后，浏览器会导航至父元素a的href属性所指定的URL上。给img元素应用ismap属性就创建了一个服务器端分区响应图：

<a href="otherpage.html">  
    <img src="triathlon.png" alt="Triathlon Image" width="200" height="67" ismap/>  
</a>

这样，图像的点击的位置会附加到URL上，例如，如果点击的位置是距图像顶部4像素，左边10像素，则浏览器将导航到一下URL：

http://bjpowernode/listings/otherpage.html?10,4

服务端分区响应图通常意味着服务器会根据用户在图像上点击区域的不同做出有差别的反应。

客户端分区响应图

客户端分区响应图支持用户通过点击某张图的不同区域让浏览器导航到不同的URL上，我们需要使用元素来定义图像上的各个区域以及他们所代表的行为，需要用到的元素包括map元素和area元素。

map元素

map元素的作用是定义一个客户端图像映射，map元素中包含一个或者area元素，他们各自代表了图像上可被点击的一块区域。map元素通常包含属性：

1）id：必须，为map标签定义唯一的标识；

2）name：可选，名称。

area元素

area元素定义图像映射中的区域，该元素总是嵌套在map元素中。area元素的属性分为两类，第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL：

1）href：此区域被点击后浏览器应该加载的URL；

2）alt：替代内容，同img元素的对应属性；

3）target：显示URL的浏览上下文，同base元素的对应属性；

4）rel：描述当前文档和目标文档的关系，同link元素的对应属性；

5）media：媒介，同style元素的对应属性；

6）hreflang：目标文档的语言；

7）type：目标文档的MIME类型。

第二类包含了属性：shape和coords属性，用来标明用户可以点击的各个图像区域。shape属性的取值如下：

1）rect：代表了一个矩形区域。对应的coords属性必须由四个用逗号分隔的整数组成(a,b,c,d)：a代表图像的左边缘与矩形的左侧；b代表图像的上边缘与矩形的上侧；c代表图像的右边与矩形的右侧；d代表图像的下边缘与矩形的下侧；

2）circle：代表了一个圆形区域。coords属性必须由三个用逗号分隔的整数组成(a,b,c)：a代表从图像左边缘到圆心的距离；b代表从图像上边缘到圆心的距离；c代表圆的半径；

3）poly：代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点；

4）default：默认区域，即覆盖整张图片。不需要提供coords值。

下面是一个例子：

<p><img src="triathlon.png" usemap="#mymap" alt="Triathlon Image"/></p>  
<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>

上面的脚本定义了用户如果点击图片的游泳部分，浏览器导航至swimpage.html，如果用户点击图像上的骑车部分，浏览器则会导航至cyclepage.html，点击其它部分则导航至otherpage.html。

嵌入HTML文档

iframe元素可以在现有的HTML文档中嵌入另一张文档。该元素支持的属性如下：

1）src：在iframe中显示的文档的URL；

2）srcdoc：规定在iframe中显示的页面的HTML内容；

3）name：规定iframe的名称，可以在浏览上下文与其他元素（如a、form、button、input和base）的target属性中使用该名称；

4）width：定义iframe的宽度；

5）height：规定iframe的高度；

6）sandbox：对iframe中的内容的额外限制，支持的值包括：

---""：应用以下所有的限制；

---allow-same-orgin：允许iframe内容被视为与文档其余部分拥有同一个来源；

---allow-top-navigation：允许链接指向顶层的浏览上下文，这样就能用另一个文档替换当前整个文档，或者创建新的标签和窗口； ---allow-top-scripts：启用脚本； ---allow-forms：启用表单。

7）seamless：指示浏览器把iframe的内容显示得像主HTML文档的一个整体组成部分；默认情况下iframe的内容会有一个边框，如果内容比width和height属性所指定的尺寸要大，还会出现一个滚动条。该属性的使用方式如下（该属性大部分浏览器还不支持）：

<iframe src="demo_iframe.htm" seamless></iframe>

下面是iframe的一个完整例子：

<header>  
    <h1>Things I like</h1>  
    <nav>  
        <ul>  
            <li><a href="fruits.html" target="myframe">Fruits IＬike</a></li>  
            <li><a href="activities.html" target="myframe">Activities IＬike</a></li>  
        </ul>  
    </nav>  
</header>  
<iframe name="myframe" width="300" height="100"/>

通过插件嵌入内容

object元素和embed元素用于扩展浏览器能力，添加插件支持。

embed元素

embed元素定义嵌入的内容，支持的属性如下：

1）height：设置嵌入内容的高度；

2）src：嵌入内容的URL；

3）type：定义嵌入内容的MIME类型，这样浏览器就知道该如何处理它；

4）width：设置嵌入内容的宽度。

你应用的其它任何属性都会被当作是插件或内容的参数。看下面的例子：

<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3" type="application/x-shockwave-flash" width="560" height="340" allowfullscreen="true"/>

上面使用了allowfullscreen属性，用于设置是否启用全屏观看功能。

object元素

object元素也用于定义一个嵌入的对象，比如：图像、音频、视频、PDF、Flash等。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>

如果data属性引用的资源不存在，则显示object元素中的内容。

进度条

progress元素表示进度条。支持的属性包括：

1）max：表示任务的最大值；

2）value：定义了当前的进度，位于0到max属性的值之间；

3）form：所属的一个或多个表单。

当max属性被省略时，范围是0到1，而value属性则使用浮点数来表示进度，例如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>  
<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>

上面给出的例子演示了点击不同的button让progress显示不同的值，在chrome中的效果如下：

显示范围里的值

meter元素显示某个范围内的某个值。支持的属性包括：

1）min和max：指定可能只所处范围，可以用浮点数；

2）low：指定低值范围，在它之下的所有制都被认为是过低；

3）high：指定高值范围，在它之上的所有值都被认为是过高；

4）optimum：指定“最佳”值；

5）value：必须，度量的当前值；

6）form：所属的一个或多个表单。

<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>

当meter元素的value值为过低和过高，以及最佳值时，浏览器会以不同的方式呈现它们