4-2 html常用标签图像标签

邢邢好吧（前端学习中）

于 2024-04-21 17:00:00 发布

阅读量701

点赞数 18

分类专栏：前端学习 # html学习文章标签：前端 html html5

本文链接：https://blog.csdn.net/weixin_61897906/article/details/137926017

版权

前端学习同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html学习

11 篇文章 0 订阅

订阅专栏

跟学：B站黑马程序员pink老师

之前发过，但是太多了不好阅读，因此拆分成几篇

4.6 图像标签和路径

4.6.1 图像标签 <img src="图像URL" />

1.概念：

是一个单标签，用于定义html页面中的图像

src 是<img> 标签的必须属性，用于指定图像文件的路径和文件名

2.其他属性

src：指定图像文件的路径和文件名

alt：图片不能显示时，用属性alt里的文字替换

title：鼠标放在图片上时的文字

width：设定图片宽度

height：设定图片高度

一般设定一个，即可保持原比例，等比例缩放

border：设定图片边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>图像标签</h4>
    
    图像标签属性src 指定图像文件路径和文件名<br />
    <img src="img.jpg" /> <br />

    图像标签属性alt 替换文本<br />
    <img src="img.jpg" alt="邢邢好吧无法显示"/> <br />
    <img src="img0.jpg" alt="邢邢好吧无法显示"/> <br />

    图像标签属性title 提示文本<br /> 
    <img src="img.jpg" alt="邢邢好吧无法显示" title="你好呀"/> <br />

    图像标签属性width 设定宽度<br />
    <img src="img.jpg" alt="邢邢好吧无法显示" title="你好呀" width="500"/> <br />

    图像标签属性height 设定高度<br />
    <img src="img.jpg" alt="邢邢好吧无法显示" title="你好呀" height="500"/> <br />
    
    图像标签属性border 设定边框<br />
    <img src="img.jpg" alt="邢邢好吧无法显示" title="你好呀" width="500" border="15"/> <br />

</body>
</html>

3. 注意点：

图像标签可以有多个属性，必须在标签名后面
属性之间没有先后顺序，标签名与属性，属性之间都用空格隔开
属性采取键值对的格式，属性="属性值"，key="value"

4.6.2 路径

目录文件夹：普通文件夹，放html页面和图片

2.相对路径和绝对路径

相对路径：图片相对于html页面的位置 // 注意斜杠方向

同一级：<img src="img1.jpg" />
下一级：<img src="imges/img1.jpg" />
上一级：<img src="../img1.jpg" />
上两级：<img src="../../img1.jpg" />

绝对路径：

在电脑中文件的位置，只在本地运行时有用 \\\\\\ 注意斜杠方向
在网络中的文件的位置，完整的网络地址：https://www.itcast.cn/2018czgw/images/logo2.png

邢邢好吧（前端学习中）

关注

18
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
4-2 html常用标签图像标签

img src="img.jpg" alt="邢邢好吧无法显示" title="你好呀" width="500" border="15"/>src 是<img> 标签的必须属性，用于指定图像文件的路径和文件名。alt：图片不能显示时，用属性alt里的文字替换。目录文件夹：普通文件夹，放html页面和图片。是一个单标签，用于定义html页面中的图像。图片相对于html页面的位置 ////// 注意斜杠方向。title：鼠标放在图片上时的文字。根目录：目录文件夹的第一层。1. 目录文件夹和根目录。
复制链接

扫一扫