HTML 简明教程 ( HTML5 标准 ) - 图像 ( image )

图像可以使网页看起来更漂亮，文字更生动，是网页的必要部分，我们可以使用 <img> 标签在网页上显示图像

下面是一个范例

<img src = "boat.jpg" alt = "This is a boat">

图像语法

HTML中的图像可以使用 <img> 标记标签定义

基本上，<img> 是一个空元素，这意味着它只包含属性并且没有结束标记

定义图像的语法如下

<img src = "url" alt = "some_text">

图像的 src 属性

<img> 标记标签的 src 属性用于定义图像的 URL

相对 URL

图像位于本地站点中，例如

<img src = "images / boat.jpg" alt = "This is a boat">

绝对 URL

图像可以位于其它站点中，例如

<img src = "https://www.twle.cn/static/i/img.jpg" alt = "This is a boat">

图像的 alt 属性

alt 属性用于在页面中的图像无法平滑渲染时提供的图像的描述

例如，当图像缓慢加载或图像的源地址不正确时，将显示 alt 属性的文本描述而不是图像本身

以下是可以正确显示图像的情况

<img src = "boat.gif" alt = "Big Boat">

这是另一种无法正确显示图像的情况

<img src = "boat2.gif" alt = "Big Boat">

为页面中的每个图像添加 alt 属性添加到是一个好习惯，因为它不仅有助于更好地显示信息，而且对于使用纯文本浏览器的用户来说也很方便和有用

图像的宽度和高度

<img> 标记标签的 height 和 width 属性可以用于定义图像的高度和宽度

例如

<img src = "boat.jpg" alt = "Big Boa" width = "322" height = "235">

默认单位是像素 px，如果需要，还可以使用 CSS 样式中的 width 和 height 属性设置图像的宽度和高度

例如

<img src = "boat.jpg" alt = "Big Boa" style = "width: 322px; height: 235px;">

这两种方法在 HTML5 中都可以使用，但 W3C 建议在 CSS 样式中使用 width 和 height 属性

注意：设置图像的高度和宽度总是一个好习惯。如果图像指定高度和宽度，页面将在加载时保持指定的大小。如果未指定大小，则在加载页面时可能会破坏 HTML 页面的整体布局

图像可点击区域

我们可以使用 <map> 标签为给定图像创建一系列可点击区域

对于下面的示例，你可以可以点击下图中的电脑，手机和一杯咖啡

<img src = "workplace.jpg" alt = "Workplace" usemap = "# workmap">
<map name = "workmap">
  <area shape = "rect" coords = "34,44,270,350" alt = "电脑" href = "computer.htm">
  <area shape = "rect" coords = "290,172,333,250" alt = "手机" href = "phone.htm">
  <area shape = "circle" coords = "337,300,44" alt = "咖啡" href = "coffee.htm">
</map>

<map> 标记的 name 属性必须与 <img> 标记的 usemap 属性的值保持一致

<map> 标记包含几个 <area> 标记，用于定义图像的可点击区域

背景图像

我们不仅可以在网页中插入图像，还可以为特定的 HTML 标记标签指定一个背景图像

可以使用 CSS 中的 background-image 属性为标签指定背景图像

下面是一个示例

<body style = "background-image: url ('clouds.jpg')">
<h2>背景图像</ h2>
</ body>

有关 background-image 属性的更多信息，请参阅 CSS 参考手册: background-image

<picture> 标记标签

<picture> 标记标签是 HTML5 的新添加的，它允许我们灵活地在不同大小的设备中加载各种图像

下面这个示例，会检查当前窗口是否小于 768px ，如果它小于768px，则会加载较小图像

<picture>
    <source srcset = "smaller.jpg" media = "(max-width: 768px)">
    <source srcset = "default.jpg">
    <img srcset = "default.jpg" alt = "My default image">
</picture>