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

小咪咪 2022-03-26 01:18 265阅读 0赞

# 知识点笔记—–图片标签 #

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

## 需求： ##

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

## 技术分析: ##

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

* 如果引入的图片在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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]  
案例二：网站图片显示页面  
1.图片标签

<img />

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

[20190114212540888.png]: /images/20220326/751823bf180840cf9c2f6e3f36612dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]: /images/20220326/ac87e703164e44a6aaacdd98af7d4b04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220326/7c086cf7fb76404391b8329e53415965.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220326/190cb95abdc24bd3a60127711cfcc2d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220326/2405fe2c7a824342b10c2eddea421073.png