首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

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 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

Big Boat

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

提示：假如某个 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 属性

























































属性值描述
aligntop bottom middle left right不推荐使用。规定如何根据周围的文本来排列图像。
borderpixels不推荐使用。定义图像周围的边框。
heightpixels**%定义图像的高度。
hspacepixels不推荐使用。定义图像左侧和右侧的空白。
ismapURL将图像定义为服务器端图像映射。
longdescURL指向包含长的图像描述文档的 URL。
usemapURL将图像定义为客户器端图像映射。
vspacepixels不推荐使用。定义图像顶部和底部的空白。
widthpixels**%设置图像的宽度。

JPEG 还是 GIF？

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

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


表格

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

两行三列：


















100 200 300
40000 50000 60000
70000 80000 90000

带有很粗的边框：











First Row
Second Row



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



  • 表头使用

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



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



    • 空单元格问题

    空单元格问题