HTML5权威指南——嵌入内容

嵌入图像

• 使用img元素嵌入图像
• 嵌入一张图片需要使用src和alt属性
• 用width和height属性来确定图片的宽高，这个属性只是用来告诉浏览器该给这张图片的留下多大的空间，用这个属性来缩放图片是不太适合的。
  1.在超链接里嵌入图像
• 这个其实没什么好记录的，就是a标签里的内容是img标签，点击了img就可以访问到相应的url
• 若给img元素添加ismap属性就创建了一个服务器端分区响应图，就是点击的位置会附加到url上,然后根据根据点击区域的不同做出不同的响应
• 举例如下，若点击的位置距图像顶部4px,左边缘10px，则浏览器导航的地址：http://titan/listings/otherpage.html?10,4
  2.创建客户端分区响应图
• 在img元素使用usemap属性，该属性的值是 #+对应map的name值。
• 创建客户端分区响应图使用到的元素是map
• map的子元素area代表图像上可被点击的一块区域
• area元素的属性有两个分类，一个是与目标地址相关的属性，一个是shape属性和coords属性
• coords属性的值根据shape属性的值而定。
  下面是与目标地址相关的属性

属性	说明
href	此区域被点击时浏览器应该加载的URL
alt	替代内容
target	同base中的target，在何处打开url
rel	当前文档与目标文档的关系，同link中的rel
media	此区域适用的媒介
hreflang	目标文档的语言
type	目标文档的MIME类型

下面是shape和coords属性

嵌入另一张HTML文档

• iframe元素用于嵌入另一张文档
• 局部属性有src，srcdoc，name，width，height，sandbox，seamless
• iframe和a,form,button,input和base元素的target属性结合，那么他们其中的href中的若被点击就会载入到iframe
• src属性指定iframe属性一开始就应该载入的url
• width和height指定宽高
• seamless指示浏览器将iframe中的内容显示的如同主HTML文档一样
• sandbox对HTML 文档进行限制，如脚本，表单，插件，等会被禁用

通过插件嵌入内容

• object元素和embed元素用于添加插件支持，来处理浏览器不直接支持的内容
• object通过属性data提供内容地址，而embed使用src提供地址
• object的优点是可以包含备用内容，即如果内容不存在就会转而显示object元素中的内容，且param元素会被忽略

object元素的其他用途

• 替代img元素
• 同img一样简历分区响应图
• 替代iframe元素

嵌入数字表现形式

1.显示进度

• progress元素用来表现某项任务逐渐完成的过程
• value当前进度，0~max中的值构成范围，当max被省略时是0 ~ 1，使用浮点数表示进度。

<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>
    <button type="button" value="100">100%</button>
</p>
<script>
    var buttons= document.getElementsByTagName('BUTTON')
    var progress=document.getElementById ("myprogress")
    for(let i=0;i<buttons.length;i++){
        buttons[i].onclick=function(e){
            progress.value=e.target.value
        }
    }
</script>

2.显示范围里的值

• meter元素显示某个范围内可能的值