图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

html jquery link绝对路径 html绝对路径图片_绝对路径

src用来设置图片文件所在的地址，这一路径可以是相对路径，也可以是绝对路径。

练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片标签</title>
</head>
<body>
	<p>插入图片的基本方式：img src="timg.jpg"</p>
	<img src="timg.jpg" />
	
	<p>alt 属性用于图片不能显示时，替换对应文本</p>
    <img src="l.jpg" alt="对不起，找不到该图片" />

    <p>title 属性用于鼠标悬停时，显示的内容</p>
    <img src="timg.jpg" title="这是胡歌的图片" />

    <p>width 属性用于设置图片的宽度，height属性用于设置图片的高度</p>
    <img src="timg.jpg" title="这是胡歌的图片" width="300" height="100" />

    <p>border 属性用于设置图片的边框</p>
    <img src="timg.jpg" title="这是胡歌的图片" border="10" />
</body>
</html>

效果：

html jquery link绝对路径 html绝对路径图片_绝对路径_02

路径(重点)

路径可以分为： 相对路径和绝对路径

相对路径：

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
  2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
  3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径：

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的例如“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”

练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对路径</title>
</head>
<body>
	<h3>带有盘符的路径（很少用，因为换了电脑就不行了）或者完整的网络地址</h3>
	<hr />
	<img src="D:\前端学习\前端资料\前端基础\前端基础第一天\素材\timg.gif" />
	<img src="https://i0.hdslb.com/bfs/sycp/creative_img/201907/66c99b0e64a7b55b19f919019bc7939b.jpg@880w_440h.jpg" />
</body>
</html>

效果：

html jquery link绝对路径 html绝对路径图片_HTML_03

练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下一级路径和上一级路径</title>
</head>
<body>
	<img src="images/timg.gif" title="从下一级获取图片,使用/" /><br />
	<img src="../bd.png" title="从上一级获取图片,使用../，往前返回多少级，使用多少个../" />
</body>
</html>

效果：

html jquery link绝对路径 html绝对路径图片_绝对路径_04