图像标签

图像标签

  向网页中添加图片的方法为

<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">

猜你喜欢

转载自blog.csdn.net/The_last_knight/article/details/86488633