# HTML图像与框架

框架是网页设计中很常用的技术，可以在一个浏览器中显示多个文档。

# 插入图像

# 图像标签

在 HTML 中，图像由 <img> 标签定义。语法为：

<img src="url" alt="" />

是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置 width 和 height 的值来设置图片的宽和高。

例子：

<img
  src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
  alt="程序员"
  title="你好啊"
  width="700px"
  height="600px"
/>
<img src="https://www.keaidian.com/uploads/allimg/190424/24110307_19.jpg" alt="" width="50%">
<!--width/height--两种赋值方式:1.像素 2.上级元素的百分比
只设置宽度时,高度会自动等比例缩放,如窗口的50%-->

1
2
3
4
5
6
7
8
9
10

# 相对路径

一般访问站内资源使用(项目目录中)

这种路径是以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，比如：<img src="syl.png" />。
图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用/隔开，比如：<img src="img/img1/syl.png" />。
图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入../ ，如果是上两级，则需要使用 ../ ../，以此类推，比如：<img src="../syl.png" />。

# 绝对路径

一般访问站外资源---有找不到图片的风险

指当所有网页引用同一个文件时，所使用的路径都是一样的。比如D:\webStudy\img\syl.png或者 https://labfile.oss.aliyuncs.com/courses/1236/syl.png

# 框架的使用

使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

语法：

<iframe src="URL">
  <!-- URL指向不同的页面 -->
</iframe>

1
2
3

# iframe - 设置高度与宽度

属性默认以像素为单位,但是你可以指定其按比例显示 (如："60%")。

<iframe src="https://www.lanqiao.cn/" width="400" height="400"></iframe>

图片描述

# iframe - 移除边框

frameborder 属性用于定义 iframe 表示是否显示边框。设置属性值为 "0" 移除 iframe 的边框:

<iframe
  src="https://www.lanqiao.cn/"
  width="400"
  height="400"
  frameborder="0"
></iframe>

1
2
3
4
5
6

# 使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性。

<p><a href="https://www.lanqiao.cn/" target="shiyanlou">实验楼</a></p>
<iframe width="400" height="400" name="shiyanlou"></iframe>

1
2

注：因为 a 标签的 target 属性是名为 shiyanlou 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。需要保证 iframe 框架的 name 属性的名称与 a 标签的 target 属性名一致。

← HTML表单 HTML5简介 →