图像标签及相关属性

最新推荐文章于 2024-04-22 21:35:12 发布

Blue_lan18

最新推荐文章于 2024-04-22 21:35:12 发布

阅读量5.2k

点赞数 1

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Blue_lan18/article/details/122514637

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

（代码都用一个例子来展现）

1.图像标签<img>及相关属性,img为image的缩写。

src是必需属性，它用于指定图像文件的路径和文件名。插入图像时应该将图像文件和html文件放在同一个文件夹下。

属性不分先后顺序，不过要以空格分开，标签名和属性之间也要有空格。属性采用键值对的格式，即属性="属性值"。

为了方便寻找，我们的文件不能随便乱放，因此需要一个文件夹来管理它们。

目录文件夹：在桌面上见到的普通文件夹就是目录文件夹。

根目录：打开目录文件夹的第一层就是根目录。如这个界面上“名称”下面的东西就是根目录。

3.路径

创建一个页面时会用到非常多的图片，为了方便管理，应该有一个专门存放图片的文件夹，使用图片时，用“路径”的方式来指定图像文件的位置。

路径可分为：

（1）相对路径：

同一级路径：直接引用文件名即可，<img srg="图像url" />

下一级路径：路径格式为<img srg="文件夹/图像url" />，文件夹即与html文件同一级的文件夹。

上一级路径：路径格式为<img srg="../图像url" />或<img srg="../../图像url" />，以此类推。

（2）绝对路径：即文件在自己电脑中的绝对位置，通常从盘符开始。如C:\Users\西红柿炒番茄鸡蛋\Desktop\前端开发\01-HTML\TAO.jpg。绝对路径通常用于引用网络地址（如图像链接）。

例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黄子韬蓝西装</title>
</head>

<body>
  <h4>黄子韬蓝西装</h4>
  <img src="TAO.jpg">
  <h4>alt属性，图像显示不出来的时候用于说明图像的文字,改变图像名，就无法显示图像</h4>
  <img src="TAOTAO.jpg" alt="黄子韬蓝西装">
  <h4>title属性，鼠标放到图像上时的提示文字</h4>
  <img src="TAO.jpg" alt="黄子韬蓝西装" title="黄子韬呀">
  <h4>给图像设定宽高，一般只需要设定宽度或高度，会等比例缩放</h4>
  <h4>如图，宽高都设置</h4>
  <img src="TAO.jpg" alt="黄子韬蓝西装" title="黄子韬呀" width="500" height="400">
  <h4>如图，只设置宽度</h4>
  <img src="TAO.jpg" alt="黄子韬蓝西装" title="黄子韬呀" width="500">
  <h4>给图像设定边框，代码显示红色是因为在真正应用时边框一般用CSS</h4>
  <img src="TAO.jpg" alt="黄子韬蓝西装" title="黄子韬呀" width="500" border="12">
  <h4>同一级路径直接引用文件名即可，如</h4>
  <img src="TAO.jpg">
  <h4>下一级路径，路径格式为<img srg="文件夹/图像url" />（标题里定义的图像不显示），文件夹即与html文件同一级的文件夹。</h4>
  <img src="黄子韬侧脸图（路径例子用）/黄子韬侧脸.webp">
  <h4>上一级路径，路径格式为<img srg="../图像url" />或<img srg="../../图像url" />，以此类推。</h4>
  这里无法引用，例子在下一个html文件中
  <h4>绝对路径，即文件在自己电脑中的绝对位置，通常从盘符开始。如C:\Users\西红柿炒番茄鸡蛋\Desktop\前端开发\01-HTML\TAO.jpg</h4>
  <img src="C:\Users\西红柿炒番茄鸡蛋\Desktop\前端开发\01-HTML\TAO.jpg">
  <h4>绝对路径通常用于引用网络地址（如图像链接）。</h4>
  <img src="https://img1.baidu.com/it/u=2106323291,1609106673&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=449 ">
</body>

</html>

页面效果（部分）如图：

Blue_lan18

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图像标签及相关属性

（代码都用一个例子来展现）1.图像标签<img>及相关属性,img为image的缩写。<img srg="图像url" />src是必需属性，它用于指定图像文件的路径和文件名。插入图像时应该将图像文件和html文件放在同一个文件夹下。属性不分先后顺序，不过要以空格分开，标签名和属性之间也要有空格。属性采用键值对的格式，即属性="属性值"。2.目录文件夹和根目录为了方便寻找，我们的文件不能随便乱放，因此需要一个文件夹来管理它们。目录文件夹：在桌面上见到的普
复制链接

扫一扫