前端 HTML body标签相关内容常用标签图片标签 <img/>

最新推荐文章于 2023-05-15 17:28:23 发布

weixin_30551947

最新推荐文章于 2023-05-15 17:28:23 发布

阅读量306

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/mingerlcm/p/9076110.html

版权

图片标签 `<img/>`

一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。

<img/> 是单闭合标签

语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬浮时提示信息" height="高(宽高两个属性只用一个会自动等比缩放)" width="宽度"/>

img标签属于行内标签: 在一行内显示

注意：

src设置的图片地址可以是本地的地址路径也可以是一个网络地址路径。
图片的格式可以是png、jpg和gif。
alt属性的值会在图片加载失败时显示在网页上。
还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
与行内元素在一行内显示
可以设置宽度和高度
span标签可以单独摘出某块内容，结合css设置相应的样式

<!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">
    <title>Title</title>
</head>
<body>
    <img src="imags/1.jpg"/>
</body>
</html>

alt属性当图片显示不出来的时候，代替图片显示的内容

<!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">
    <title>Title</title>
</head>
<body>
    <img src="/imags/1.jpg" alt="github"/>
</body>
</html>

img是行内标签，在一行内显示

<!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">
    <title>Title</title>
</head>
<body>
    <img src="imags/1.jpg" alt="github"/>
    <img src="imags/1.jpg" alt="github"/>
</body>
</html>

给图片设置宽度，高度 style

200像素

<!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">
    <title>Title</title>
</head>
<body>
    <img src="imags/1.jpg" style="width:200px;height:200px"/>
</body>
</html>

在图片上加上跳转url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--  在里面包一个a标签-->
    <a href="http://www.baidu.com">
    <img src="imags/1.jpg" style="height: 200px;width: 200px;">
    </a>
</body>
</html>

鼠标放在图片显示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">
    <img src="imags/1.jpg" title="大章鱼" style="height: 200px;width: 200px;" alt="章鱼">
    </a>
</body>
</html>

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

`src`属性：图片的相对路径和绝对路径

这里涉及到图片的一个属性：

src属性：指图片的路径。

在写图片的路径时，有两种写法：相对路径、绝对路径

1、写法一：相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

举例1：

当前目录中的图片显示

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 当前目录中的图片 -->
    <img src="./imags/1.jpg"/>
    <img src="imags/1.jpg"/>
</body>
</html>

上一级目录中对的图片

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 上一级目录中的图片 -->
    <img src="../常用标签%20图片标签%20img标签/imags/1.jpg"/>
</body>
</html>

举例2：

<img src="imags/1.jpg"/>

上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

2、写法二：绝对路径

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

（2）网络路径。举例：

<img src="http://www.baidu.com/2016040102.jpg">

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

总结：

- 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
- 相对路径，就是../ image/ 这种路径。
- 绝对路径，就是http://开头的路径。

转载于:https://www.cnblogs.com/mingerlcm/p/9076110.html

weixin_30551947

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML body标签相关内容常用标签图片标签 <img/>

图片标签<img/>一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。<img/> 是单闭合标签语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬浮时提示信息" height="高(宽高两个属性只用一个会自动等比缩放)" width="宽度"/>...
复制链接

扫一扫