'alt' 属性的描述如下。

备注：为了更容易理解下面的内容，建议你阅读 URL 和路径简明入门来复习一下相对和绝对 URL 的概念。

例如，如果你的图像叫做 dinosaur.jpg，并且它位于与 HTML 页面相同的目录中，你可以这样嵌入图像：

html

如果图像在名为 images 的子目录中，该子目录位于与 HTML 页面相同的目录中，你可以这样嵌入它：

html

以此类推。

备注：搜索引擎还会读取图像文件名并将其计入 SEO。因此，你应该为图像起一个描述性的文件名；dinosaur.jpg 比 img835.png 更好。

你也可以使用图像的绝对 URL 进行嵌入，例如：

html

然而，不建议使用绝对 URL 进行链接。你需要托管你想要在网站上使用的图像，在比较简单的情况下，通常我们会把网站的图像保存在与 HTML 相同的服务器上。此外，从维护的角度来说，使用相对 URL 比绝对 URL 更有效率（当你将网站迁移到不同的域名时，你不需要更新所有 URL，使其包含新域名）。在更高级的设置中，你可能会使用内容分发网络（CDN）来传递图像。

如果这些图像并非由你创建，你应该查看它们发布的许可证条款，确保自己有使用它们的权限（有关更多信息，请参阅下面的媒体资源和许可证）。

警告：未经许可，绝不要将 src 属性指向其他网站上的图像。这被称为“热链接（hotlinking）”。大多数人认为这是不道德的，因为这会导致每当有人访问你的页面，都会有另一些不知情的人为图像交付带宽费用。这也导致你无法掌控图像，图像有可能在你不知情的情况下，被删除或替换为尴尬的内容。

无论是使用绝对 URL 还是相对 URL，上述代码片段将会得到以下结果：

备注：像 和

备注：你也可以在 GitHub 仓库中找到本节的完整示例（请参阅源代码）。

备选文本

我们接下来要看的属性是 alt。它的值应该是图片的文本描述，用于在图片无法显示或者因为网速慢而加载缓慢的情况下使用。例如，我们可以把上面的代码修改成这样：

html

src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth" />

测试 alt 文本的最简单方法是故意拼错文件名。如果我们的图片名字拼成 dinosooooor.jpg，浏览器就不会显示图片，而会显示 alt 文本：

那么，为什么我们需要备选文本呢？它可以派上用场的地方有很多：

用户有视力障碍，需要通过屏幕阅读器来浏览网页。事实上，图片备选描述文本对大多数用户都很有用。

就像上面所说的，你也许会把图片的路径或文件名拼错。

浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 Lynx，这些浏览器会把图片替换为备选文本。

这些文字描述可以提供给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。

用户可能会关闭图片显示以减少数据的传输，这在手机上是十分普遍的，因为在一些国家带宽有限且昂贵。

到底应该在 alt 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么：

装饰：如果图片仅用于装饰，你应该使用 CSS 背景图片，但如果必须使用 HTML，请添加空的 alt=""。如果图片不是内容的一部分，那么屏幕阅读器不应该浪费时间读取它。

内容：如果你的图片提供了重要的信息，就要在 alt 文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写 alt="" 就好。

文本：你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以用 CSS 来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到 alt 里。

本质上，关键在于即使图片无法被看见，也能提供可用的体验，这确保了所有人都不会错失某部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了，你会很快意识到在图片无法显示时备选文本能帮上多大忙。

备注：如需了解更多信息，请参阅我们的替代文本指南。

宽度和高度

你可以用 width 和 height 属性来指定你的图片的宽度和高度。它们的值是不带单位的整数，以像素为单位表示图像的宽度和高度。

你可以用多种方式了解你的图片的宽度和高度，例如在 Mac 上，你可以用 Cmd + I 来得到显示的图片文件的信息。回到我们的例子，你可以这样做：

html

src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth"

width="400"

height="341" />

这样做有一个好处。你页面的 HTML 和图片是分开的资源，由浏览器用相互独立的 HTTP(S) 请求来获取。一旦浏览器接收到 HTML，它就会开始将其显示给用户。如果图片尚未接收到（通常会是这种情况，因为图片文件的大小通常比 HTML 文件大得多），那么浏览器将只渲染 HTML，并在图片接收到后立即更新页面。

例如，假设在图片之后有一些文本：

html

Images in HTML

src="dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"

title="A T-Rex on display in the Manchester University Museum" />

But down there it would be dark now, and not the lovely lighted aquarium she

imagined it to be during the daylight hours, eddying with schools of tiny,

delicate animals floating and dancing slowly to their own serene currents

and creating the look of a living painting. That was wrong, in any case. The

ocean was different from an aquarium, which was an artificial environment.

The ocean was a world. And a world is not art. Dorothy thought about the

living things that moved in that world: large, ruthless and hungry. Like us

up here.

一旦浏览器下载了 HTML，它就开始显示页面。

当图片加载完成时，浏览器会将图片添加到页面中。由于图片占据空间，浏览器必须将文本向下移动，以适应图片的位置：

这样移动文本对用户来说非常分散注意力，尤其是如果他们已经开始阅读文本的情况下。

如果你在 HTML 中使用 width 和 height 属性来指定图片的实际大小，那么在下载图片之前，浏览器就知道需要为其留出多少空间。

这样的话，当图片下载完成时，浏览器不需要移动周围的内容。

设置图像的高度和宽度再次变得重要是关于该特性的历史的一篇优秀文章。

备注：虽然如我们所说，使用 HTML 属性来指定图片的实际大小是一个好的实践，但你不应该使用它们来调整图片的大小。

如果设置的图片大小过大，你的图片将看起来粗糙、模糊或太小，不仅浪费带宽而且图片还不符合用户需求。如果长宽比不正确，图片也可能会变形。在将图片放到网页上之前，你应使用图像编辑器将其设置为正确的大小。

如果确实需要更改图片的大小，应该使用 CSS 来实现。

图像标题

类似于超链接，你可以通过给图片增加 title 属性来提供更多的信息。在我们的例子中，可以这样做：

html

src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth"

width="400"

height="341"

title="A T-Rex on display in the Manchester University Museum" />

这会给我们一个鼠标悬停提示，和链接标题一样：

然而，我们并不推荐它——title 有很多无障碍问题，这些问题主要是基于这样一个事实，即屏幕阅读器的支持并不完善，除此之外大多数浏览器都不会显示它，除非你将鼠标悬停在上面（例如：无法使用键盘的用户），如果你对更多的信息感兴趣，请阅读 Scott O'Hara 写的 title 属性的考验与磨难。

更好的做法是将这样的支持信息包含在主要文章文本中，而不是附加在图片上。

动手练习：嵌入一张图片

好，轮到你了！在这个动手练习中，我们希望你可以做一个简单的嵌入图片练习。你有一个基本的 标签；我们希望你可以把下面这个 URL 所指向的图片嵌入到 HTML 中：

urlhttps://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

早些时候我们说过不要热链接到其他服务器上的图片，但这张图片只是为了学习目的，所以这一次不用太担心。

我们还希望你可以：

添加一些备选文字，添加完成后，可以故意把图片 URL 写错，来检查该属性的效果。

正确设置图片的 width 和 height 属性（提示：宽为 200px，高为 171px），然后再改变宽和高的值，看看会有什么影响。

在图片上设置 title 属性。

如果你遇到了错误，你可以按重置按钮来重置。如果你遇到了困难无法完成，按下显示答案按钮来看一下答案。

实时输出

可编辑代码

按 ESC 退出编辑区域（按 Tab 可插入制表符）

</p> <p><img></p> <p>

html {

font-family: sans-serif;

}

h2 {

font-size: 16px;

}

.a11y-label {

margin: 0;

text-align: right;

font-size: 0.7rem;

width: 98%;

}

body {

margin: 10px;

background: #f5f9fa;

}

const textarea = document.getElementById("code");

const reset = document.getElementById("reset");

const solution = document.getElementById("solution");

const output = document.querySelector(".output");

const code = textarea.value;

let userEntry = textarea.value;

function updateCode() {

output.innerHTML = textarea.value;

}

const htmlSolution =

'';

let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {

textarea.value = code;

userEntry = textarea.value;

solutionEntry = htmlSolution;

solution.value = "显示答案";

updateCode();

});

solution.addEventListener("click", () => {

if (solution.value === "显示答案") {

textarea.value = solutionEntry;

solution.value = "隐藏答案";

} else {

textarea.value = userEntry;

solution.value = "显示答案";

}

updateCode();

});

textarea.addEventListener("input", updateCode);

window.addEventListener("load", updateCode);

// 阻止 Tab 键使 textarea 失去焦点，

// 而是在当前光标位置插入一个制表符

textarea.onkeydown = (e) => {

if (e.code === "Tab") {

e.preventDefault();

insertAtCaret("\t");

}

if (e.code === "Escape") {

textarea.blur();

}

};

function insertAtCaret(text) {

const scrollPos = textarea.scrollTop;

let caretPos = textarea.selectionStart;

const front = textarea.value.substring(0, caretPos);

const back = textarea.value.substring(

textarea.selectionEnd,

textarea.value.length,

);

textarea.value = front + text + back;

caretPos += text.length;

textarea.selectionStart = caretPos;

textarea.selectionEnd = caretPos;

textarea.focus();

textarea.scrollTop = scrollPos;

}

// 每当用户更新文本区域的代码时，更新保存的 userCode

textarea.onkeyup = function () {

// 我们只希望在显示用户代码时保存状态，

// 而不保存答案，以防止答案覆盖用户代码

if (solution.value === "显示答案") {

userEntry = textarea.value;

} else {

solutionEntry = textarea.value;

}

updateCode();

};

媒体资源和许可

你在网络上找到的图像（以及其他媒体资源类型）都以不同的许可类型发布。在你构建的网站上使用图像之前，请确保你拥有该图像的所有权、获得使用许可或遵守所有者的许可条件。

了解许可类型

让我们来看看你在网络上可能会遇到的一些常见许可类别。

版权所有

原创作品（例如歌曲、书籍或软件），其所有者通常以封闭的版权保护方式发布他们的作品。这意味着，默认情况下，他们（或他们的出版商）拥有独家使用（例如展示或分发）其作品的权利。如果你想使用带有版权所有许可的受版权保护的图像，你需要执行以下操作之一：

从版权持有人获得明确的书面许可。

支付许可费用以使用它们。这可以是一次性费用，用于无限制使用（“免版税”），或者可能是“按照时间段、地理区域、行业或媒体类型等特定费用”的“权利管理”方式。

仅将使用限制在你所在司法辖区中被视为合理使用或合理交易的用途。

作者不必在其作品中包含版权声明或许可条款。一旦原创作品在有形媒介上创建出来，版权就会自动存在。因此，如果你在网上找到一张图像，没有版权声明或许可条款，最安全的做法是假定它受到版权保护，所有权保留。

自由许可

如果图像是根据自由许可发布的，例如 MIT、BSD 或适当的知识共享（CC）许可，你无需支付许可费用或寻求许可即可使用它。但是，你仍需履行各种许可条件，这些条件因许可而异。

例如，你可能需要：

提供指向图像原始来源的链接，并标明创作者。

指示是否对其进行了任何更改。

使用相同许可证分享使用该图像创建的任何派生作品。

不分享任何派生作品。

不将该图像用于任何商业作品。

在使用该图像的任何发布中包含许可证的副本。

你应该查阅适用的许可证以了解你需要遵循的具体条款。

备注：你可能会在自由许可的上下文中遇到“copyleft”一词。Copyleft 许可（例如 GNU 通用公共许可证（GPL） 或“相同方式共享”创作共用许可证）规定派生作品需要按照原始许可证发布。

Copyleft 许可在软件界中很常见。其基本思想是使用 copyleft 许可的代码构建的新项目（这被称为原始软件的“分支”）也需要根据相同的 copyleft 许可进行许可。这确保新项目的源代码也可供他人学习和修改。请注意，一般来说，为软件起草的许可证（例如 GPL）并不适合非软件作品，因为它们并不考虑非软件作品。

请查阅本节提供的链接，了解不同许可类型及其规定的条件。

公共领域/CC0

进入公共领域的作品有时被称为“无版权保留”——它们不受版权保护，可以在未经许可且无需履行任何许可条件的情况下使用。作品可以因为版权到期或特定放弃权利等方式进入公共领域。

将作品置于公共领域的最有效方法之一是将其许可为 CC0，这是一种特定的创作共用许可，为此目的提供了清晰明确的法律工具。

在使用公共领域图像时，请获取证明该图像属于公共领域的证据，并将该证据保存记录。例如，使用截图记录原始来源（该来源需要清晰显示许可状态），并考虑在你的网站上添加一个页面，列出所获得的图像及其许可要求。

搜索适用于自由许可的图像

你可以使用图像搜索引擎或直接从图像存储库中找到适用于你的项目的自由许可图像。

使用图像描述以及相关的许可条款搜索图像。例如，当搜索“黄色恐龙”时，可以添加“公共领域图像”、“公共领域图像库”、“开放许可图像”或类似的词语到搜索查询中。

某些搜索引擎会提供工具，帮助你查找具有自由许可的图像。例如，使用 Google 时，转到“图片”选项卡搜索图像，然后单击“工具”。在结果工具栏中有一个“使用权限”下拉菜单，你可以选择专门搜索根据创作共用许可授权的图像。

图像存储库网站，例如 Flickr、ShutterStock 和 Pixabay，具有搜索选项，允许你仅搜索具有自由许可的图像。一些网站专门分发具有自由许可的图像和图标，例如 Picryl 和 The Noun Project。

要想遵守图像发布的许可条件，你需要找到许可详细信息，阅读来源提供的许可证或指示页面，然后按照这些说明操作。值得信赖的图像存储库会清楚地列出其许可条件，并且易于查找。

通过为图片搭配说明文字的方式来解说图片

说到说明文字，有很多种方法可以添加一段说明文字来搭配图片。比如，你可以这么做：

html

这没有问题，它包含了你需要的内容，并且很方便使用 CSS 调整样式。但是这里有一个问题，从语义的角度上来讲，图片和说明文字并没有什么联系，这会给使用屏幕阅读器的人造成麻烦，比如如果有 50 张图片和其搭配的 50 段说明文字，那么哪段说明文字是和哪张图片有关联的呢？

更好的做法是使用 HTML 的