第十五章 嵌入内容

244 阅读1分钟

嵌入内容

这个章节的内容感觉作用也不是很大,或者说以我的能力还不太能理解。

image--嵌入图像

在HTML文档中添加图片,src属性是图片的地址;alt属性是图片如果无法加载时的替代。

<img src="Luomu.jpg" alt="图片消失了" />

a、image--在超链接中嵌入图片

<a href="www.baidu.com">
    <img src="Luomu.jpg" alt="图片消失了" />
</a>

map、area--创建分区响应

img元素中可以添加usemap属性,值为map元素的name(需要加'#')。 可以实现点击图片不同的地方,跳转到不同的RUL。

其中map元素内含有area元素。area元素拥有hrefshapecoords属性。

  • href代表跳转的RUL
  • shape代表区域的形状。值有rectcirclepolydefault
  • coords代表区域的范围
<img src="Luomu.jpg" alt="图片消失了" usemap="#mymap"/>
<map name="mymap">
    <area href="www.baidu.com" shape="" coords="" />
    <area href="www.baidu.com" shape="" coords="" />
    <area href="www.baidu.com" shape="" coords="" />
</map>

iframe--嵌入另一个HTML

iframe可以在一个浏览器中打开另一个浏览器页面。

<a href="bendi.html" target="myframe">百度</a>
<iframe name="myframe" width="300" height="100"></iframe>

通过插件嵌入内容

这是我感觉最迷胡的部分 通过embed嵌入视频

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

通过object嵌入视频

<object width="560" height="349"
data="http://www.youtube.com/v/qzA6ohHca9s?version=3" 
type="application/x-shockwave-flash" 
>
<param name="allowfullscreen" value="true">
</object>

progress--显示进度

progress用于显示进度条。有valuemax两个元素。value定义当前的进度;max定义最大值。

<progress value="10" max="100">