1.插入图像
图像标签
在 HTML 中,图像由 <img>
标签定义。语法为:
<img src="url" alt="" />
<img>
是空标签,它只包含属性,没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src
的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。alt
规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title
设置鼠标悬停时显示的内容(一般不用设置)。此外还可以通过设置 width
和 height
的值来设置图片的宽和高。
例子:
<imgsrc="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"alt="程序员"title="你好啊"width="700px"height="600px"
/>
相对路径
这种路径是以引用文件的网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
- 图像文件和 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
。
2.框架的使用
使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
语法:
<iframe src="URL"><!-- URL指向不同的页面 -->
</iframe>
iframe - 设置高度与宽度
属性默认以像素为单位,但是你可以指定其按比例显示 (如:"60%")。
<iframe src="https://www.lanqiao.cn/" width="400" height="400"></iframe>
正在上传…重新上传取消
iframe - 移除边框
frameborder
属性用于定义 iframe 表示是否显示边框。设置属性值为 "0" 移除 iframe 的边框:
<iframesrc="https://www.lanqiao.cn/"width="400"height="400"frameborder="0"
></iframe>
使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性。
<p><a href="https://www.lanqiao.cn/" target="shiyanlou">实验楼</a></p>
<iframe width="400" height="400" name="shiyanlou"></iframe>
注: 因为 a
标签的 target
属性是名为 shiyanlou
的 iframe 框架,所以在点击链接时页面会显示在 iframe 框架中。需要保证 iframe 框架的 name
属性的名称与 a
标签的 target
属性名一致。