05iframe简单使用和图片映射

最新推荐文章于 2022-03-22 16:26:48 发布

沈川希

最新推荐文章于 2022-03-22 16:26:48 发布

阅读量317

点赞数

分类专栏： HTML基础文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45344023/article/details/107203427

版权

HTML基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、iframe的简单使用

1.iframe

iframe叫浮动框架。

1.在一个网页中可以嵌套另一个页面（通常是第三方），不是内部连接
2.也可以嵌套我们自己写的页面

2.例子

(1)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>iframe的使用</h1>
    <h2>嵌套自己写的页面</h2>
    <iframe width="800" height="600" src="./09-网址大全2.html" frameborder="0"></iframe>
    <h2>嵌套第三方的天气</h2>
    <iframe frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=35&h=55&w=200"></iframe>
</body>
</html>

（2）运行结果

二、图片映射

1. 坐标系的不同

数学中的坐标系：
x：水平向右为正
y: 垂直向上为正
z: 不好说

计算机中的坐标系：
x: 水平向右为正
y: 垂直向下为正
z: 透过电脑屏幕射向开发者为正

2.例子

(1)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/map.png" alt="" usemap="#map">
    <map name="map">
        <area shape="react" coords="85,140,110,150" href="http://www.baidu.com" alt="">
    </map>
</body>
</html>

(2)运行结果

在这里插入图片描述

沈川希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05iframe简单使用和图片映射

一、iframe的简单使用1.iframeiframe叫浮动框架。1.在一个网页中可以嵌套另一个页面（通常是第三方），不是内部连接2.也可以嵌套我们自己写的页面2.例子(1)代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫