HTML5第六章嵌入元素

最新推荐文章于 2023-02-24 11:07:18 发布

weixin_39597587

最新推荐文章于 2023-02-24 11:07:18 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： html5笔记文章标签： html5嵌入元素

本文链接：https://blog.youkuaiyun.com/weixin_39597587/article/details/79536755

html5笔记专栏收录该内容

7 篇文章

订阅专栏

第六章嵌入元素

元素名称	描述
img	图片
map	定义分区响应图
iframe	嵌入文档
embed	嵌入插件
progress	进度条
meter	范围值
img私有属性
属性名称	描述
src	图片的路径url
alt	当图片加载不出来的时候,给用户的提示
width	图片宽度
height	图片高度
ismap	创建服务端分区响应图
usemap	关联<map>元素,通过图片中的热点进行超链接,采用Dreamweaver实现

1.<img>

<body>
<a href="html5.html">
    <!--注意谷歌浏览器不支持此写法,火狐支持-->
    <!--ismap当鼠标点击图片时,会实时响应鼠标点击在该图片的坐标-->
    <img src="img/cat.png" alt="cat" width="140" height="138" ismap>
</a>
</body>

效果图：

2.<iframe>

用法：

<body>
<a href="index1.html" target="in">index1</a>
<a href="index2.html" target="in">index2</a><br>
<iframe src="index1.html" name="in" width="300" height="150"></iframe>
<!--<iframe>表示内嵌一个html文档。src表示初始化显示的页面。
width和height设置内嵌容器的宽高。name用于target的名称。-->
</body>

效果图：

3.<progress>和<meter>

用法：

<body>
<progress value="9" max="100"></progress><br>
<meter value="9" max="100" low="10" high="90"></meter>
<!--low表示最低值,低于最低值则会显示黄色警告-->
<!--high表示最高值,高于最高值也会显示黄色警告-->
</body>