图片标签 <img/>
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。
<img/> 是单闭合标签
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬浮时提示信息" height="高(宽高两个属性只用一个会自动等比缩放)" width="宽度"/>
img标签属于行内标签: 在一行内显示
注意：
- src设置的图片地址可以是本地的地址路径也可以是一个网络地址路径。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
- 与行内元素在一行内显示
- 可以设置宽度和高度
- span标签可以单独摘出某块内容，结合css设置相应的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <img src="imags/1.jpg"/> </body> </html>
alt属性 当图片显示不出来的时候，代替图片显示的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <img src="/imags/1.jpg" alt="github"/> </body> </html>
img是行内标签，在一行内显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <img src="imags/1.jpg" alt="github"/> <img src="imags/1.jpg" alt="github"/> </body> </html>
给图片设置宽度，高度 style
200像素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <img src="imags/1.jpg" style="200px;height:200px"/> </body> </html>
在图片上加上跳转url
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 在里面包一个a标签--> <a href="http://www.baidu.com"> <img src="imags/1.jpg" style="height: 200px; 200px;"> </a> </body> </html>
鼠标放在图片显示文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com"> <img src="imags/1.jpg" title="大章鱼" style="height: 200px; 200px;" alt="章鱼"> </a> </body> </html>
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
src属性：图片的相对路径和绝对路径
这里涉及到图片的一个属性：
- src属性：指图片的路径。
在写图片的路径时，有两种写法：相对路径、绝对路径
1、写法一：相对路径
相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。
举例1：
当前目录中的图片显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <!-- 当前目录中的图片 --> <img src="./imags/1.jpg"/> <img src="imags/1.jpg"/> </body> </html>
上一级目录中对的图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <!-- 上一级目录中的图片 --> <img src="../常用标签%20图片标签%20img标签/imags/1.jpg"/> </body> </html>
举例2：
<img src="imags/1.jpg"/>
上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg
2、写法二：绝对路径
（1）以盘符开始的绝对路径。举例：
<img src="C:UsersaaaDesktophtml-01images1.jpg">
（2）网络路径。举例：
<img src="http://www.baidu.com/2016040102.jpg">
相对路径和绝对路径的总结
相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
总结：
-
我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
-
相对路径，就是../ image/ 这种路径。
-
绝对路径，就是http://开头的路径。