前端学习笔记-html-图像标签img&绝对/相对路径

图像标签img (重点)

单词缩写： image 图像

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

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

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

练习：

	
	


	
插入图片的基本方式：img src="timg.jpg"
	
	
	
alt 属性用于图片不能显示时，替换对应文本
    

    
title 属性用于鼠标悬停时，显示的内容
    

    
width 属性用于设置图片的宽度，height属性用于设置图片的高度
    

    
border 属性用于设置图片的边框
    

效果：

 

路径(重点)

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

相对路径：

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

1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如。

2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如。

3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如。

绝对路径：

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

练习：

	
	


	
带有盘符的路径（很少用，因为换了电脑就不行了）或者完整的网络地址
	

	
	

效果：

练习：

效果：