HTML5基础学习笔记(五)
2016-07-11 20:01
281 查看
Day05 HTML页面元素属性
四、嵌入元素
1.嵌入元素汇总
2.嵌入元素解析
1.<img>嵌入图像
<img src="img.png">
解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。
img
的私有属性
<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap>
</a>
2.<map>创建分区响应图
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100"
href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47"
href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112"
href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释:通过图片中的热点进行超链接,这里我们采用
Dreamweaver
进行操作生成的。
3.<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a> |
<a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500"
name="in"></iframe>
解释:<iframe>表示内嵌一个
HTML
文档。其下的 src
属性表示初始化时显示的页面,
width
和 height
表示内嵌文档的长度和高度,name
表示用于 target
的名称。
4.<embed>嵌入插件内容
<embed
src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了
一个土豆网的
flash 视频。type
类型表示被插入内容的类型,这里不列出所有,后面如果
遇到其他类型的文件,再继续探讨;width
和
height 表示宽高;src
表示文件路径。
5.<object>和<param>元素
解释:<object>元素和<embed>一样,只不过
object
是 html4
的标准,而 embed
是
html5
的标准。而 object
不但可以嵌入 flash,还可以嵌入图片等其他内容。由于图片、
音频、视频、插件都有相应标签元素代替,我们这里暂时不对其详细讲解。
6.<progress>显示进度
<progress value="30" max="100"></progress>
解释:<progress>元素可以显示一个进度条,一般通过
JS
控制内部的值。IE9
以及更
低版本不支持此元素。
7.<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80"
optimum="60"></meter>
解释:
<meter>元素显示某个范围内的值。其下的属性包含:
min 和
max 表示范围边界,
low
表示小于它的值过低,high
表示大于它的值过高,optimum
表示最佳值,但不出现效
果。IE
浏览器不支持此元素。
四、嵌入元素
1.嵌入元素汇总
元素名称 | 说明 |
img | 嵌入图片 |
map | 定义客户端分区响应图 |
area | 表示一个用户客户端分区响应图的区域 |
audio | 表示一个音频资源 |
video | 表示一个视频资源 |
iframe | 嵌入一个文档 |
embed | 用插件在 |
HTML | 中嵌入内容 |
canvas | 生成一个动态的图形画布 |
meter | 嵌入数值在许可值范围背景中的图形表示 |
object | 在 |
HTML | 文档中嵌入内容 |
param | 表示将通过 |
object | 元素传递给插件的参数 |
progress | 嵌入目标进展或任务完成情况的图形表示 |
source | 表示媒体资源 |
svg | 表示结构化矢量内容 |
track | 表示媒体的附加轨道(例如字幕) |
1.<img>嵌入图像
<img src="img.png">
解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。
img
的私有属性
属性名称 | 说明 |
src | 嵌入图像的 |
URL | |
alt | 当图片不加载时显示的备用内容 |
width | 定义图片的长度(单位是像素) |
height | 定义图片的高度(单位是像素) |
ismap | 创建服务器端分区响应图 |
usemap | 关联<map>元素 |
<img src="img.png" width="339" height="229" alt="风景图" ismap>
</a>
2.<map>创建分区响应图
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100"
href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47"
href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112"
href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释:通过图片中的热点进行超链接,这里我们采用
Dreamweaver
进行操作生成的。
3.<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a> |
<a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500"
name="in"></iframe>
解释:<iframe>表示内嵌一个
HTML
文档。其下的 src
属性表示初始化时显示的页面,
width
和 height
表示内嵌文档的长度和高度,name
表示用于 target
的名称。
4.<embed>嵌入插件内容
<embed
src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了
一个土豆网的
flash 视频。type
类型表示被插入内容的类型,这里不列出所有,后面如果
遇到其他类型的文件,再继续探讨;width
和
height 表示宽高;src
表示文件路径。
5.<object>和<param>元素
解释:<object>元素和<embed>一样,只不过
object
是 html4
的标准,而 embed
是
html5
的标准。而 object
不但可以嵌入 flash,还可以嵌入图片等其他内容。由于图片、
音频、视频、插件都有相应标签元素代替,我们这里暂时不对其详细讲解。
6.<progress>显示进度
<progress value="30" max="100"></progress>
解释:<progress>元素可以显示一个进度条,一般通过
JS
控制内部的值。IE9
以及更
低版本不支持此元素。
7.<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80"
optimum="60"></meter>
解释:
<meter>元素显示某个范围内的值。其下的属性包含:
min 和
max 表示范围边界,
low
表示小于它的值过低,high
表示大于它的值过高,optimum
表示最佳值,但不出现效
果。IE
浏览器不支持此元素。
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- HTML5中在客户端验证文件上传的大小
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- html5 web数据存储
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Powershell 创建炫丽美观的Html报表
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器