前端 HTML body标签相关内容 常用标签 图片标签 <img/>
图片标签 <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://开头的路径。
前端 HTML body标签相关内容 常用标签 图片标签 <img/>的更多相关文章
- 前端 HTML body标签相关内容 常用标签 表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...
- 前端 HTML body标签相关内容 常用标签 超链接标签 a标签
超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...
- 前端 HTML body标签相关内容 常用标签 段落标签 p标签
段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...
- 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6
标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...
- 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li
列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍
input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...
- 前端 HTML body标签相关内容 常用标签 表格标签 table
表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...
随机推荐
- Popupwindow全屏问题
//sdk > 21 解决 标题栏没有办法遮罩的问题 popupWindow.setClippingEnabled(false);
- 保存对象时碰到的问题-列名 'Discriminator' 无效
今天保存对象时碰到问题: {"列名 'Discriminator' 无效.\r\n列名 'Discriminator' 无效."} 百度了一下,百度找到的一个解决: http:/ ...
- iptables常用规则
删除现有规则 iptables -F (OR) iptables --flush 设置默认链策略 iptables的filter表中有三种链:INPUT, FORWARD和OUTPUT.默认的链策略是 ...
- Centos重新启动网络配置文件，/etc/resolv.conf被覆盖或清空问题解决
Centos在执行命令 yum update时报错如下: Could not get metalink https://mirrors.fedoraproject.org/metalink?repo= ...
- slideout
这里在原有slideout.js增加了shade的遮罩功能 核心: 1,此插件的使用需要配合dom来用: <!-- 左边 --> <nav id="menu" c ...
- Atom使用插件精选
小颖之前公司的大哥推荐小颖用的编辑器是atom,之前都是他给小颖了一个atom插件安装列表,小颖电脑出了点问题,所以后来小颖把那弄丢了,小颖重装atom后,就不知道要安装什么插件,所以也百度了很多,今 ...
- 公钥基础设施体系和EJBCA的一些概念
最近一段时间的在公司做的事情是: 1. 为公司的一些线上系统启用https(使用nginx反向代理的方式来实现,之前的应用无需做改动) 2.为符合规则的用户颁发数字证书(自建CA来实现,目前的用途是给 ...
- 23种设计模式之装饰模式（Decorator）
装饰模式是一种对象结构型模式,可动态地给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活.通过装饰模式,可以在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责 ...
- 【CF802C】Heidi and Library (hard) 费用流
[CF802C]Heidi and Library (hard) 题意:有n个人依次来借书,第i人来的时候要求书店里必须有种类为ai的书,种类为i的书要花费ci块钱购入.而书店的容量只有k,多余的书只 ...
- 【LOJ6254】最优卡组 堆（模拟搜索）
[LOJ6254]最优卡组 题面 题解:常用的用堆模拟搜索套路(当然也可以二分).先将每个卡包里的卡从大到小排序,然后将所有卡包按(最大值-次大值)从小到大排序,并提前处理掉只有一张卡的卡包. 我们将 ...