前端 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 指表 ...

随机推荐

mybatis的selectOne和selectList没有数据返回时的问题
1.使用mybatis的selectList方法,如果数据表中没有数据返回,则返回空集合[ ],而不会返回null,这是mybatis作的封装 @Override public List<Con ...
Eclipse删除代码中所有注释及空格
替换方法: Ctrl+F 删除java注释: /\*{1,2}[\s\S]*?\*/ Ctrl+F 删除xml注释: <!-[\s\S]*?--> Ctrl+F 删除空白行: ^\ ...
WebService连接sql serever并使用Android端访问数据
一.下载sql serever(真真难下) 建立数据库二.创建WebService VS2015中新建项目,进行连接调试 1. 服务资源管理文件->数据连接->新建连接 2. 继续-&g ...
【python3】 django2.0 在生成数据库表时报错： TypeError: __init__() missing 1 required positional argument: 'on_delete'
python: 3.6.4 django: 2.0 models.py 代码如下 # coding: utf-8 from django.db import models from django.co ...
Undeclared identifier:XXX
未识别错误,是因拼写错误或找不到定义文件. 下面列举一些类型和函数用到的单元. _Stream ADODB_TLB akTop, akLeft, akRight, akBottom Controls ...
DELPHIER,正转向PYTHON了
用了10多年的DELPHI ,现在准备学PYTHON了, 理由是: 1)现在是云计算时代了,需要学习一门适应该时代的语言,研究了很久,PYTHON是最佳选择,排除了PHP,PERL,RUBY等,至于G ...
smarty 双引号中嵌入变量的方法
1.如果变量中只包含字符.数字.下划线,可以将变量直接写在双引号中,如:"my name is $name" 2.如果带有其它字符,如“.”,则需要将变量用单引号括起来,如:“my ...
google v8引擎常见问题
最近在项目中使用v8来进行扩展,下面简单说一下使用v8过程中遇到的一些问题. v8的多线程调用最初调研v8的测试代码是单线程的,后来一个项目在多线程中使用,出现了一些问题,后来看到参考3中的才恍 ...
使用MSBUILD 构建时出错 error MSB3086: 任务未能使用 SdkToolsPath“”或注册表项“XXX”找到“LC.exe”，请确保已设置 SdkToolsPath。
如果项目有添加有WB引用,比如引用其它网站的WEB服务等,那么VS在编译时会自动生成个 [项目名称].Serializers.dll的文件,就是把引用服务中的相关对象信息生成硬编码的程序集,以提高效率 ...
MySQL外键和高级查询（连接查询、联合查询、子查询、去重查询）
MySQL的外键什么是外键,很简单保持数据一致性的一个约束键.如果你有两张表,第一张是学生表,第二张表是一个成绩表,我们来看看保持数据一致性,其实在Django等框架的模型中中也能做关联获取对象. ...

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

图片标签 <img/>

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