html图像标签、绝对路径和相对路径
2019-01-20 本文已影响50人
Devops海洋的渔夫
仅供学习，转载请注明出处
html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
- src属性 定义图片的引用地址
- alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="e7525a4a93.jpg" alt="美女图片">
</body>
</html>
浏览器展示如下：
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
-
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
-
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
当前文件路劲
./示例
代码如下：
浏览器展示如下：
另一个目录下
./images/示例
代码如下：
浏览器展示如下：
关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。
