img图像标签-HTML入门基础（017）

这一节内容，我们分享一下关于图像标签的使用方法。在网页中少不了图片的存在，一个网页如果有了图片会显得生动很多。

在HTML中，图像标签是<img>，img英文意思就是image，它是一个自闭合标签，常用的属性包括src、alt和title三个。

img标签符常用属性
属性	说明
src	图像的文件地址
alt	图片未加载时替换显示的文字
title	鼠标移动到图片上提示的文字

src和alt两个属性是必选的。

语法：

<img src="图片的文件路径">

img标签是一个自闭合标签，没有结束标签。可以写成<img>，也可以写成<img/>，src属性用于设置图像文件的路径，可以是相对路径，也可以是绝对路径。

示例代码：

<html>  <head>    <title>图像标签</title>  </head>  <body>    <img src="data:images/1.jpg" alt="我是一张图片">  </body></html>

在这里我们可以用画图工具，随意的画点东西，然后将文件保存至桌面，在桌面我们可以新建一个文件夹，名称是website，然后在这个文件夹下面再建立一个文件夹和一个文件，文件夹名称是images，文件名称是1.html，然后将刚才保存的图片文件1.jpg，移动或者剪切到文件夹images里存放，当你运行以上代码时，会发现图片可以显示的。以上的路径是相对路径。

alt属性用于设置图片的描述信息，是为你给搜索引擎查看的，这个对于SEO很重要。

title属性用于鼠标移动至图片上时的提示文字，是给用户看的。

语法：

<img src="图片路径" alt="未加载时提示信息" title="图片标题">

示例代码：

<html>  <head>    <title>图像标签</title>  </head>  <body>    <img src="data:images/1.jpg" alt="我是一张图片" title="我是图片标题">  </body></html>

相对路径和绝对路径：

关于路径的问题，初学者一般会比较困惑。我们的计算机为了组织文件，是需要有盘符的，也就是我们通常说的C盘、D盘等，那么我们保存一个文件，就必须让计算机明确知道它的存储位置；

比如我在D盘下，建立一个网站目录，名称是website，内部含有一个文件夹和一个文件，分别是images文件夹用于存放图片，另一个是网页代码文件1.html；

当我们需要保存它们时，绝对路径就表示为d:\website\1.html和d:\website\images\1.jpg，这个就是文件的绝对路径，它明确表示出该文件位于哪个盘符，哪个文件夹下；

那么初学者会说，我们就直接使用绝对路径就好了，为什么还有相对路径呢？

还是拿上面的路径为基础，我们的网站开发在本机编写代码时，保存的路径是如此，但是等我们将网站部署至服务器时，会发现因为环境的因素发生改变，而造成路径变化了；

比如服务器在安装时没有D盘，只有E盘，我们将网站部署在了服务器的E盘，文件夹还是同名，会发现路径变为e:\website\1.html和e:\website\images\1.jpg，由于我们在代码中使用的是绝对路径，会发现全部代码都有出错的可能，程序不能正常运行了。

为了解决这种不灵活的路径问题，就引入了相对路径的方法，比如我们的网站开发时，根目录建立一个文件夹，名称是website，内含一个文件夹images，一个网页文件1.html，代码中我们全部是从根目录开始表示文件的位置，比如images\1.jpg，那么当我们的网站部署在任何盘符下，系统都会自动将相对路径转换为绝对路径来存取文件了，是不是很方便，很灵活。

绝对路径：

src="d:\website\images\1.jpg"

相对路径：

src="website\images\1.jpg"

来看个实际的例子：

<html>  <head>    <title>路径问题</title>  </head>  <body>    <img src="./images/1.jpg" alt="未加载提示" title="标题">  </body></html>

通常我们在网页代码中都是使用相对路径，绝对路径很少使用，另外插一句，在计算机文件系统中表示路径时，通常是斜杠分隔，就是d:\website\1.html，但是在HTML网页开发中，路径通常是使用反斜杠分隔的，比如 ./images/1.jpg，这个初学者一定要注意掌握。

当网站开发过程中，文件系统中文件比较多，我们需要找到同级目录文件和上级目录文件该如何表示呢？

通常都是从自身文件出发，如果你的网页代码是1.html，images文件夹与你同级目录，路径可以表示为 ./images/1.jpg，如果需要找到你的上级目录，路径表示为 ../website/xxx。

./	同级目录
../	上级目录

下一节我们接着分享关于图像标签的内容。

img图像标签-HTML入门基础（017）相关推荐

万字大章_标题、段落、链接、图像等_HTML入门必备基础
万字大章_HTML入门必备基础 HTML篇_第四章.HTML基础一.标题二.段落三.链接 3.1文本超链接 3.2锚点链接 3.3功能性链接四.图像 4.1 图像标签(<img>) ...
day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、转义（实体）字符、基本表格、合并表格
HTML 一 HTML概述超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
HTML学习总结基础篇图像标签imag的使用及其属性
图像标签在HTML中,用img标签显示图像. 语法格式: < img src=" 图像路径">,src为必须要写的元素,用于指定文件的路劲和文件名属性属性值说明 ...
【Educoder】HTML答案（HTML入门——基础、HTML入门——基本标签、HTML——表单类的标签）
文章目录 HTML入门--基础初识HTML:简单的Hello World网页制作 HTML结构:自我简介网页 HTML入门--基本标签创建第一个 HTML 标签创建 h2-h6标签创建 p 标 ...
OpenCV入门基础操作（二）----图像像素的处理
OpenCV入门基础操作(二)----图像像素的处理像素处理读取一个图像像素修改像素值代码案例像素处理读取一个图像像素在读取图像的时候一般要用到如下的命令: 返回值=图像(位置参数), ...
html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
LSTM入门必读：从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆（LSTM）是一种非常重要的神经网络技术，其在语音识别和自然语言处理等许多领域都得到了广泛的应用
LSTM入门必读:从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆(LSTM)是一种非常重要的神经网络技术,其在语音识别和自然语言处理等许多领域都得到了广泛的应用. ...
CSS3入门基础（详解）
CSS3入门基础详解一.基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素样式是为了解决内容与表现分离的问题多个样式定义可层叠为一样式通 ...
数据竞赛专题 | 从赛题理解到竞赛入门基础
为了帮助更多竞赛选手入门进阶比赛,通过数据竞赛提升理论实践能力和团队协作能力.DataFountain 和 Datawhale 联合邀请了数据挖掘,CV,NLP领域多位竞赛大咖,将从赛题理解.数据探索 ...

img图像标签-HTML入门基础（017）

img图像标签-HTML入门基础（017）相关推荐

最新文章

热门文章