HTML中的图片标签

图片标签

通过<img>来定义，用于插入图片。它是单独使用的，没有闭合标签。

• 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。

从本地导入图片：

绝对路径：

<p>从本地导入本地图片（绝对路径）</p>

• 绝对路径方式（包含盘符的全部路径）

相对路径：

<p>从本地导入本地图片（相对路径）</p>

• 相对路径方式（相当于我现在正在编写的HTML的文档路径）
• "."——代表目前所在的目录
• ". ."——表示上一层目录
• "/"——代表根目录

从网络导入图片：

<p>从网络URL导入本地图片</p>

• URL（统一资源定位符）是用于标识互联网上资源位置的字符串。
• 完整的URL的组成：协议（如：http://、https://、ftp://）、主机名（如：www.example.com）、目录路径、文件名

常用属性：

<img src="图像路径" alt="图像无法显示说明文字" title="鼠标停留提示文字" width="图像宽度" height="图像高度">

border="边框宽度" hspace="水平边距" vspace="垂直边距" align="环绕方式/对齐方式"

实例：

一.

width="图像宽度" height="图像高度"

• 如图所示，上图第一个图片是没有改变图片大小的，是原图大小。第二个图片则改变了图片大小，图片的高度与宽度都改变了。
• 改变 width="图像宽度" height="图像高度" 则会改变图片的高度与宽度

二.

alt="图像无法显示说明文字"

原因：

• 图片路径错误确保图片路径正确，相对路径或绝对路径需与实际文件位置匹配。
• 图片文件损坏或格式不支持验证图片文件是否完整且未被损坏。

三.

title="鼠标停留提示文字"

• 把鼠标停留在图片上时，它会提示这个图片的title是什么。比如上图，当我把鼠标停留在图片上时，它会提示“这是一个杨桃”。