TML图像标记

常用的图像格式—GIF，PNG，JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
例如：

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种：

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如：

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

原文链接：https://blog.csdn.net/dubaiqaq/article/details/103500345

日常开发中，我们有时候需要获取某个元素的背景图片URL。在本文中，我将向大家介绍如何使用JavaScript来实现这一需求。

获取元素背景图片URL的JavaScript方法

要获取元素的背景图片URL，我们可以使用getComputedStyle方法来获取background-image的CSS属性值。

举个例子，如果我们有如下HTML代码：

<div style="background-image:url('http://www.example.com/img.png');">...</div>

我们可以通过以下JavaScript代码来获取背景图片的URL：

const div = document.querySelector('div');
const style = window.getComputedStyle(div, false);
const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
console.log(bi);

下面我们来逐步解析这段代码的实现原理：

1. 选择元素：我们使用document.querySelector方法来选择目标div元素。
2. 获取计算后的样式：通过调用window.getComputedStyle方法并传入选中的元素，我们可以获取该元素的所有计算后的CSS样式值，这些值存储在一个对象中。
3. 提取背景图片URL：使用style.backgroundImage属性可以获取到background-image的完整值，例如url("http://www.example.com/img.png")。我们使用slice(4, -1)方法来截取字符串中的URL部分，然后通过replace(/"/g, "")方法去除字符串中的引号。

最终，我们得到的bi变量值就是背景图片的URL：

'https://www.example.com/img.png'

结束

通过使用JavaScript中的getComputedStyle方法，我们可以轻松获取到元素的背景图片URL。这对于动态处理样式或者进行其他基于背景图片的操作非常有帮助。

如果你觉得本文对你有帮助，别忘了点赞并分享给更多需要的朋友！有任何问题或建议，欢迎在评论区留言，我们一起讨论学习！

像

HTML文档中使用的图像的目的有：第一，使页面具有视觉效果；第二个：显示有用信息。此外，图像也可以用作链接。

虽然使用图像有很多好处，但是包含太多图像的页面通常看起来过于杂乱，并且可能需要花费太长的时间来加载。

图像 - <img src=“url”>

要显示图像，需要使用src属性来指定图像的路径，如下所示有几个方法来实现：

• src="picture.jpg" - 当图片与html文件在同一个目录下时，直接指定图片名
• src="images/picture.jpg" - 当图片位于其它目录时，使用相对路径来指定
• src="http://www.htmlbasic.com/images/photo.jpg" - 当指定网络图片时

替代文字 - <img alt="?">

img标记的alt属性定义当图像无法加载时显示的文本来代替该图像。对一个考虑周到的html来说这是一个必需属性，简要地描述图像是什么。

图像大小 - <img width="?" height="?">

图像通常显示为它实际的大小，但通过使用width和height属性，可以更改它显示的大小。以像素或百分比形式指定图像的大小。技巧提示：使用图像的实际大小（以像素为单位）来指定其显示大小，以强制浏览器在图像加载之前为其分配空间，以确保无论图像是否显示，页面布局都保持不变。

图像边框 - <img border="?">

img标记的border属性通过指定以像素为单位的厚度来添加边框。您还可以设置border=“0”以删除将图像用作链接时添加的边框。

图像对齐 - <img align="?">

默认情况下，图像显示在html代码中指定的位置（与任何其他标记一样）。但是，可以通过设置align=“left | right | top | bottom | middle”中的任意一个值来将图像与周围的文本或段落对齐。

图像空白 - <img ... vspace="?" hspace="?">

调整图像周围的空白，以像素为单位。使用vspace调整上下垂直间距，或左右两侧使用hspace。

例子

下面是以上标记的示例：

浏览器显示内容如下所示：