知识点笔记—–图片标签

<img/>标签的 src 属性。
当前目录：直接写文件名称或者./文件名称
上一级目录：../文件名称
下一级：目录名称/文件名称
width：设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息，它的显示效果与浏览器有关

需求：

在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
在这里插入图片描述

技术分析:

【HTML的图片标签】
图片标签:
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名

              <img src="cs10006.jpg" />
              <img src="./cs10006.jpg" />

    * 如果引入的图片在html文件的上一级路径。
        * <img src="../cs10006.jpg" />
    * 如果引入的图片在html文件的下一级路径。
        * <img src="img/cs10006.jpg" />

步骤分析:

【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站图片信息显示页面</title>
	</head>
	<body>
		<img src="../../img/logo2.png" width="260px"height="45px"alt="logo图片"/>
		<img src="../../img/header.png" width="300px"heigjt="45px"alt="header图片" />
	</body>
</html>

在这里插入图片描述

案例二：网站图片显示页面
1.图片标签

	<img />

属性：
	src:指的是图片显示的路径(位置)
		绝对路径：E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image
		相对路径：
			①同一级：直接写文件名称或者./文件名称
			②上一级：../文件名称
			③下一级：写上目录名称/文件名称
	width:指定图片的宽度，取值可以是像素值，也可以是百分比
	height：指定图片的高度，取值可以是像素值，也可以是百分比
	alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

案例二：网站图片显示页面

知识点笔记—–图片标签

需求：

技术分析:

步骤分析:

猜你喜欢