HTML图片

HTML图像语法

HTML中，图片使用<img>标签定义。

<img> 标签是空的，它只包含属性，并且没有关闭标签。

通过src属性指定图像的URL（网址）：

<img src="url" alt="some_text" style="width:width;height:height;">

alt 属性

alt属性提供了一种图像的替换文字，如果用户因为某些原因不能查看它（因为连接速度慢，src属性指定的错误，或者如果用户使用屏幕阅读器）。

如果浏览器不能找到一个图像，它会显示alt属性的值：

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

让我试试

alt属性是必需的。没有它的网页将无法正确验证。

HTML 屏幕阅读器

屏幕阅读器是一个软件程序，读取HTML代码，转换为文本，并允许用户“听” 这些内容。屏幕阅读器对盲人、视力受损或学习障碍的人有帮助。

图片尺寸-宽度和高度

可以使用样式属性指定图像的宽度和高度。

值被指定为像素（使用后的值的px）：

<img src="html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">

让我试试

或者，可以使用宽度和高度属性。这里，默认值是按像素指定的：

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

让我试试

注意：总是指定图像的宽度和高度。如果未指定宽度和高度，则当图像加载时，该页将闪烁。

使用宽度和高度，还是style样式？

宽度、高度和样式属性在HTML5是有效的。

但是，我们建议使用样式属性。它可以防止内部或外部样式表改变图像的原始大小：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
    <style>
      img {
          width:100%;
      }
    </style>
  </head>
  <body>

  <p>
   最好使用样式属性来设置宽和高，以防止外部样式修改：
  </p>

  <p>使用样式属性:</p>
  <img src="examples/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

  <p>使用宽高属性:</p>
  <img src="examples/html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

让我试试

图像在另一个文件夹中里面

如果未指定，浏览器将在同一文件夹中找到与网页相同的图像。

然而，在子文件夹中存储图像是常见的。你必须包括在src文件夹名称：

<img src="test_img/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">

让我试试

图片在另一台服务器上

一些网站将图像存储在图像服务器上。

实际上，您可以访问世界上任何网站地址的图像：

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
 alt="baidu.com" style="width:270px;height:129px;">

你可以阅读更多关于文件路径，在本章的HTML文件的路径中。

动画图片

允许使用GIF动画图片：

<img src="programming.gif" alt="程序员" style="width:48px;height:48px;">

让我试试

注意插入动画图像的语法与非动画图像没有什么不同。

使用图像作为链接

使用图片作为一个链接，简单的在<a>标签中嵌套<img>标签即可：

<a href="http://www.CodingDict.com">
  <img src="new_logo.png" alt="编程字典" style="width:250px;height:112px;border:0;">
</a>

让我试试

添加: 添加 border:0; 防止IE9（和早期版本）显示图像的边框（当图像是一个链接时）。

图像浮动

使用CSS浮动属性让图象浮动到文本的右侧或左侧：

<p>
<img src="smiley.gif" alt="Smiley face"
  style="float:right;width:42px;height:42px;">
一个段落有一个浮动图片，一个段落有一个浮动图片，一个段落有一个浮动图片，一个段落有一个浮动图片。
</p>
<p><strong>浮动图片到左边:</strong></p>
<p>
  <img src="smiley.gif" alt="Smiley face"
    style="float:left;width:42px;height:42px;">
  一个段落有一个浮动图片，一个段落有一个浮动图片，一个段落有一个浮动图片，一个段落有一个浮动图片。
</p>

让我试试

图像地图

使用 <map> 标签来定义一个图片地图. 图片地图是可点击的区域图像.

<map>标签的name属性与<img>的usemap属性相关，产生图像和地图之间的关系。

标签包含一些 标签, 定义的可点击区域在图像地图上:

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

让我试试

本章小结

  • 使用 HTML <img> 元素定义图像的元素。
  • 使用 HTML src 属性来定义图像的URL。
  • 使用 HTML alt 属性来定义图像的替换文本，如果无法显示。
  • 使用 HTML width 和 height 属性来定义图像的大小。
  • 使用 CSS width 和 height 属性来定义图像的大小（可选）。
  • 使用 CSS float 属性让图像浮动。
  • 使用 HTML <map> 元素定义一个图像映射的元素。
  • 使用 HTML <area> 元素在图像映射定义的可点击区域。
  • 使用 HTML <img>元素的usemap属性指向一个图像映射。

注意：加载图像需要时间。大的图像可能降低页面的下载。小心使用图像。