图像标签
向网页中添加图片的方法为
<img src="图片的路径">
这是一个单标签,src
称为标签<img>
的属性,它的值应该为图片的路径。
而路径又分为绝对路径和相对路径,下面将简单介绍一下二者,假设有如下的目录结构
磁盘C
file1文件夹
html.md
p1.png
image文件夹
p2.png
p3.png
现在我打开的是html.md
文件,如果我要与绝对路径插入p1.png,p2.png,p3.png
这三张图片,那么方法是这样的
<img src="C:/file1/p1.png">
<img src="C:/file1/image/p2.png">
<img src="C:/p3.png">
如果以相对路径插入图片,那么图片相对于该文件的位置就很重要,下面演示如何以相对路径插入图片
<img src="p1.png">
<img src="image/p2.png">
<img src="../p3.png">
p1.png
和文件html.md
处于同一级目录,所以直接写src="p1.png"
即可,而p2.png
位于image
文件夹,该文件夹与html.md
文件处于同一目录,所以写为src="image/p2.png"
,而p3.png
位于上级目录,..
表示上一级目录,所以写为src="../p3.png"
。
图像标签除了有src
属性外,还有其他的属性,如下
属性 | 功能 |
---|---|
alt | 图像不能显示时的替换文本 |
title | 鼠标悬停显示的内容 |
width height |
宽度和高度,设置其中一个就可以,会等比例的缩放 |
border | 添加边框,其值为边框的粗细 |
下面给一个示例写法:
<img src="p1.png" width="60%" title="p1.png" border="1">