html5游戏 画面简单,HTML 简明教程 ( HTML5 标准 ) - 图像 ( image )

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

下面是一个范例

图像语法

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

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

定义图像的语法如下

图像的 src 属性

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

相对 URL

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

绝对 URL

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

图像的 alt 属性

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

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

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

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

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

图像的宽度和高度

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

例如

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

例如

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

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

图像可点击区域

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

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

标记的 name 属性必须与 标记的 usemap 属性的值保持一致

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

背景图像

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

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

下面是一个示例

背景图像 h2>

body>

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

标记标签

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

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