1、例如：<img src="img1png" /> ,双引号下直接是文件名，这是找当前文件（3-标签html）所在目录(标签)下的img1png。
2、当img1png在标签目录在，那么就可以防问到。点击可以预览到效果。另外<img src="/img1png" />和<img src="img1png" />是一样的，但是当前路径。
3、如下图，当我们把img1png移动到标签的上层目录html标签时。这时<img src="img1png" /> 路径不对。无法显示。
4、如果想访问到这张，可以使用<src="/img1png" />/ 就是代表上层目录。标签目录的上层目录就是——html标签目录。
5、我们将再往外挪到web01-html目录下。这时候并不是加一个点可以访问到（并不是 /），而是再加一个上层目录,具体几个上层目录，主要看参照物是当前文件（3-标签html）所在目录——标签<src="//img1png">。
6、接下来我们把放到web01-html目录下的img目录。注意参照物是标签（也就该html文件所在的目录）,相对路径就是相对这个目录的。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml。
2、在indexhtml中的<style>标签中，输入css代码：body{background-image: URL(//image/imagejpg)}。
3、浏览器运行indexhtml页面，此时CSS成功通过相对路径引用了。
［］< img >标签 代表 ，img标签的作用是向网页中插入一张，并不是将绘制到网页中。src 属性：“插入”到网页中去。
alt 属性：值可以是一段文字，当由于各种原因无法显示时，alt属性的值就会被显示在网页上。
width/height 属性：设置的宽度／高度；不适合用于，可用于纯色图的拉伸；单位可以是px，也可以是％，单位为％时是指占窗体宽高的百分比大小。
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img src="apng" alt="picture" width="100px" height="100px" />
</body>
</html>123456789
推荐< img >标签中加上“/”来关闭标签。
推荐使用PNG格式
当无法正确加载时会出现错误的图标：
可能导致错误的原因：
1 路径名写错了
2 引用的被删除了
3 网络问题
像素：显示内容基本长度单位 pixel。
位图：中每一个像素都由4个数字（argb）组成（0-255），原则上不能拉伸因为会导致失真。
a：透明度；r：红色；g：绿色；b：蓝色
矢量图：可以随意拉伸。
通过的拉伸可以将一张很小的纯色冒充为一张大图，节约资源的加载。
绝对路径：使用在硬盘上的绝对位置来访问，通常是从根目录开始，向下一个目录一个目录的寻找；在开发网页的过程中，一般不会使用绝对路径
相对路径：指的是相对于当前网页的路径。
相对路径的起点就是
src的值就是路径。
“” 在路径中代表当前网页所在目录的上一级目录
“” 在路径中代表当前网页所在目录
<img src="/apng" />
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）