html 图片 img

1 语法

<img src="path" />

src属性为必填项，表示图片文件的路径。

图片大小默认按照图片的原始大小进行显示。

2 常用属性

常用属性	说明
width	宽度。默认单位为px。
height	高度。默认单位为px。
title	标题。当鼠标放在图片上，会弹出提示文本。
alt	替换文字。当图片不存在时，会显示替换文本。把src改成不存在的图片，可以看出效果。

3 示例

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" >
    <title> img 例子 | 关关教程</title>
</head>

<body>
    <img src="logo.jpg" width="300" height="80" title="关关教程logo" alt="关关教程logo" >

</body>

</html>

这里，图片文件logo.jpg与html文件在同一文件夹。

运行效果

4 图片网页的请求原理

浏览器打开开发者工具：快捷键F12，或鼠标右键点检查。

切换到网络面板

刷新页面，显示请求情况。

当我们通过浏览器访问html时，会发出第1次请求，服务器第1次响应html代码；

浏览器解析html，发现有图片，浏览器根据图片地址发出第2次请求，服务器第2次响应图片文件内容。

所以总共发出了2次请求，服务器响应了2次。

favicon.ico文件是网站标题栏图标，这里我们没有设置，使用了Open In Default Browser插件植入的图标。

5 图片路径

当图片与html文件不在同一目录时，图片路径常用三种写法：1）相对当前路径、2）相对根路径、3）绝对路径。

这里，html文件与图片文件路径如下：

html文件路径：c01-text/d07-img-path.html

图片文件路径： image/logo2.jpg

1）相对当前路径

不以斜杠/与http(s)开头的路径，表示相对当前html文件的路径。

<img src="../image/logo2.jpg"  >

路径计算

当前html路径 http://localhost:52330/c01-text/

（注：通过Open In Default Browser打开的网页，当前端口是52330，可能会有变化）

..表示上一级路径 http://localhost:52330/

../image 对应路径 http://localhost:52330/image

../image/logo2.jpg 对应路径 http://localhost:52330/image/logo2.jpg

成功找到。

2）相对根路径

斜杠/开头，表示相对于网站根路径。

<img src="/image/logo2.jpg"  >

路径计算

网站根路径：理解网址的第1个斜杠之前的内容，即/ 对应路径 http://localhost:52330/ ；

/image/logo2.jpg 对应 http://localhost:52330/image/logo2.jpg

成功找到。

3）绝对路径

直接以http或https开头的路径，也称完整路径。

<img src="http://localhost:52330/image/logo2.jpg"  >

4）错误写法

磁盘路径，HTML页面里，不允许出现本地磁盘路径。

<img src="F:\99-task\html\image\logo2.jpg" >

早期Chrome能正常显示，当前最新版已经会提示错误：

d07-img-path.html:22 Not allowed to load local resource: file:///F:/99-task/html/image/logo2.jpg。

为什么不允许出现本地磁盘路径？

两个方面理解：

1）我们将来把项目部署到其它服务器，路径会发生变化，会访问失败。

2）HTML代码运行在用户浏览器，这种写法会读取的无论是用户还是服务器的磁盘文件，都存在安全隐患。

6 实际项目的图片路径

图片通常不会和html同一个目录。

通常会独立文件夹，例如image文件夹等。更多会用相对根路径的方式来定位图片，代码复制到其它路径的html也同样能适用。

如果项目有独立的图片服务器，这时用绝对路径比较多。

❮上一节 html 文本常用样式下一节 html 视频 video❯

第02章 html 简单标签