当前位置: 开发笔记 > 后端 > 正文

HTML学习02图像标签的使用和属性

作者：井然洞中别样天 | 来源：互联网 | 2023-12-13 11:31

本文介绍了HTML中图像标签的使用和属性，包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项，帮助读者更好地理解和应用图像标签。

学习参考来自 https://www.w3school.com.cn/

图像

标签	描述
	定义图像。
	定义图像地图。
	定义图像地图中的可点击区域。

实例：

一幅图像：

一幅动画图像：

请注意，插入动画图像的语法与插入普通图像的语法没有区别。

来自另一个文件夹的图像：

来自 W3School.com.cn 的图像：

标签和源属性`Src`

在 HTML 中，图像由标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

背景图片

`图像背景`

gif 和 jpg 文件均可用作 HTML 背景。

如果图像小于页面，图像会进行重复。

排列图片，垂直加载位置

`未设置对齐方式的图像：`

图像在文本中


已设置对齐方式的图像：
图像  在文本中
图像  在文本中
图像  在文本中
请注意，bottom 对齐方式是默认的对齐方式。

浮动图像

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

图像尺寸

通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。

图像映射

请点击图像上的星球，把它们放大。


src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

	
        shape="circle"
    coords="129,161,10"
    href ="/example/html/mercur.html"
    target ="_blank"
    alt="Mercury" />
        shape="rect"
    coords="0,0,110,260"
    href ="/example/html/sun.html"
    target ="_blank"
    alt="Sun" />
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

把图像转换为图像映射服务器端

请把鼠标移动到图像上，看一下状态栏的坐标如何变化。

img 属性

属性	值	描述
align	top bottom middle left right	不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels%	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels%	设置图像的宽度。

JPEG 还是 GIF？

如果图像的来源或者你的工具软件更倾向于某一种格式，您可能只能使用 JPEG 或者 GIF 图像中的一种。现在，这两种格式都得到了浏览器的广泛支持，所以不会存在用户能否浏览的问题。

然而，我们还是建议您使用一定的工具去创建或者转换这两种格式，以充分利用它们各自的功能。例如，可以把 GIF 的透明特性应用在图标和小的装饰符号上。而利用 JPEG 来压缩那些较大的颜色丰富的图像，以加快下载速度。

表格

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

`两行三列：`


















  100   200   300
  40000   50000   60000
  70000   80000   90000

带有很粗的边框：
  









  First   Row
     Second   Row

100	200	300
40000	50000	60000
70000	80000	90000

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

表头使用

标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

空单元格问题，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。实验证明现在的Chrome、Edge浏览器都已经修复了这个bug，不在需要使用占位符的方式解决这个问题了。

空单元格问题

没有边框，没有border属性，或

表头、垂直表头

`表头：`













  姓名   电话   电话
  Bill Gates   555 77 854   555 77 855

垂直的表头：














  姓名   Bill Gates
  电话   555 77 854
  电话   555 77 855

HTML学习02图像标签的使用和属性

图像

标签和源属性Src

替换文本属性（Alt）

背景图片

图像背景

排列图片，垂直加载位置

未设置对齐方式的图像：

已设置对齐方式的图像：

浮动图像

图像尺寸

图像映射

img 属性

JPEG 还是 GIF？

表格

两行三列：

带有很粗的边框：

表头：

垂直的表头：

这个表格有一个标题，以及粗边框：

背景颜色：

背景图像：

跨行或跨列的表格单元格

横跨两列的单元格：

横跨两行的单元格：

使用 table的cellpadding属性来创建单元格内容与其边框之间的空白

没有 cellpadding：

带有 cellpadding：

使用table的cellspacing属性增加单元格之间的距离

没有 cellspacing：

带有 cellspacing：

表格标签

列表

一个无序列表：

一个嵌套列表：

不同类型的无序列表 ul的type属性

不同类型的有序列表，ol的type属性

嵌套

一个嵌套列表：

列表标签

标签和源属性`Src`

`图像背景`

`未设置对齐方式的图像：`

`两行三列：`

`表头：`

`这个表格有一个标题，以及粗边框：`

`背景颜色：`

`横跨两列的单元格：`

`没有 cellpadding：`

`没有 cellspacing：`

`一个无序列表：`

`一个嵌套列表：`