HTML5权威指南笔记:15-嵌入内容
2017-10-26 11:00
375 查看
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属性相同 |
习惯样式 | 无 |
area元素 | |
---|---|
元素类型 | 短语 |
允许具有的父元素 | map元素 |
局部属性 | alt 、href 、target 、rel 、media 、hreflang 、type 、shape 、coords |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | rel 、media和hreflan属性是HTML5中新增的。nohref属性现已被废弃 |
习惯样式 | area { display: none; } |
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; } |
<!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文档进行限制(脚本、表单、插件、指向其他浏览上下文的链接),单没有属性值时全部禁用,有值时是启用某功能,值见下面列表。
allow-forms:启用表单
allow-scripts:启用脚本
allow-top-navigation:允许链接指向顶层的浏览上下文,这样就能用另一个文档替换当前整个文档,或者创建新的标签和窗口
allow-same-origin:允许iframe里的内容被视为与文档其余部分拥有同一个来源位置
3 通过插件嵌入内容
3.1 使用embed 元素
embed元素 | |
---|---|
元素类型 | 短语 |
允许具有的父元素 | 任何可以包含短语内容的元素 |
局部属性 | src 、type 、height 、width |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 是,不过多年来已经作为非正式元素被广泛使用 |
在HTML5中的变化 | 无 |
习惯样式 | 无 |
<!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元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | object元素 |
局部属性 | name 、value |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | param { display: none; } |
<!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中的变化 | 无 |
习惯样式 | 无 |
<!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中的变化 | 无 |
习惯样式 | 无 |
<!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>
相关文章推荐
- HTML5权威指南笔记:9-组织内容
- HTML5权威指南笔记:16-理解CSS(内容简介)
- HTML5权威指南笔记:13-定制input元素
- HTML5权威指南笔记:36-使用canvas元素(2)
- HTML5权威指南笔记:19-使用边框和背景
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
- HTML5权威指南笔记:24-其他css属性和特性
- js-权威指南学习笔记15
- HTML5权威指南笔记:34-使用多媒体
- HTML5权威指南笔记:11-表格元素
- HTML5权威指南笔记(一)
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- HTML5权威指南笔记:35-使用canvas元素(1)
- HTML5权威指南笔记:12-表单
- HTML5权威指南笔记:21-创建布局
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
- HTML5权威指南笔记:23-过渡、动画和变换
- ES权威指南[官方文档学习笔记]-15 highlighting our searches
- HTML5权威指南笔记:8-标记文字
- angular js权威指南笔记五--模块加载、多重视图和路由