HTML学习总结 基础篇 图像标签imag的使用及其属性
西门安歌
图像标签
在HTML中，用img标签显示图像。
语法格式： < img src=" 图像路径">，src为必须要写的元素，用于指定文件的路劲和文件名
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像索 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像索 | 设置图像的边框粗细 |
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签及其属性</title>
</head>
<body>
<h3>使用img引用图像，src为路径</h3>
<img src="imag_l.jpg">
<h3>alt表示的是在图片加载不出来显示不了时代替的文字</h3>
<img src="imag_l.jpg" alt="这是一张海贼王的图片">
<h3>title表示在鼠标移到图片时，在鼠标旁边提示的文字</h3>
<img src="imag_l.jpg" title="这是一张海贼王的图片">
<h3>width height border 就是图片的长宽，边框的粗细</h3>
<img src="imag_l.jpg" width="600px" height="300px" border="700">
</body>
</html>
在这里插入代码片
图像标签的路径
目录文件夹： 就是普通文件夹，里面存放了我们做页面所需要的相关素材。
根目录：打开目录文件夹的第一层就是根目录
路径可以分为相对路径和绝对路径
相对路径
相对路径：以引用文件夹所在位置为参考基础，而建立出的目录路径。 也就是相对于当前编写的HTML文件的位置 如果相对于HTML文件属于同一级的文件夹，则可以直接写文件名引用。如果图片相对于HTML文件属于下一级文件，则需要用文件夹名/图片文件名 引用图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签及其属性</title>
</head>
<body>
<h3>使用img引用图像，src为路径</h3>
<img src="imag_l.jpg">
<img src="images/imag_first.jpg">
</body>
</html>
如果图片相对于HTML文件属于上一级路径，则使用**…/** 引用图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签及其属性</title>
</head>
<body>
<h3>使用img引用图像，src为路径</h3>
<img src="../image/image_lf.jpg">
</body>
</html>
绝对路径
绝对路径：是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
类似资料：