`

HTML <img> 标签的 alt 属性

 
阅读更多

HTML <img> 标签的 alt 属性

定义和用法

alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:

  • 网速太慢
  • src 属性中的错误
  • 浏览器禁用图像
  • 用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。

我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说,alt 属性通常是他们了解图像内容的唯一方式。

实例

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

亲自试一试

如果无法显示图像,浏览器将显示替代文本,就像这样:

上海鲜花港 - 郁金香

此外,当用户把鼠标移到图像上方,最新的浏览器会在一个文本框中显示描述性文本。下面的代码在 alt 属性中为图像添加了描述性文本:

您可以把鼠标移动到下面的照片上,看看相应的效果:

上海鲜花港 - 郁金香

红圈中的文本框是用户把鼠标移动到图像上时,IE7 浏览器所显示的效果:

上海鲜花港 - 郁金香

提示和注释:

注释:alt 属性的值是一个最多可以包含 1024 个字符的字符串,其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用,但它不允许包含其他类别的标记,尤其是不允许有任何样式标签。

注释:当用户把鼠标移动到 img 元素上时,Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢,只要当图像无法显示时,才会显示出替代文本。

提示:如果需要为图像创建工具提示,请使用 title 属性。

语法

<a alt="value">

属性值

值 描述
text

规定图像的替代文本

alt 文本的使用原则:

  • 如果图像包含信息 - 使用 alt 描述图像
  • 如果图像在 a 元素中 - 使用 alt 描述目标链接
  • 如果图像仅供装饰 - 使用 alt=""

TIY 实例

<img> 标签的 alt 属性
本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
分享到:
评论

相关推荐

    HTML标签属性大全

    &lt;img&gt;标签的src属性用于指定图片的地址,width和height属性用于设定图片的尺寸,alt属性用于提供图片的替换文本。图片边框的设置可以通过border属性来完成。bgsound标签用于在网页中插入背景音乐,其src属性用于指定...

    web开发设计教程,常用指令讲解,实际案例资源代码详细讲解并附注释.txt

    标签:如&lt;html&gt;、&lt;head&gt;、&lt;body&gt;、&lt;h1&gt;到&lt;h6&gt;(标题)、&lt;p&gt;(段落)、&lt;a&gt;(链接)、&lt;img&gt;(图像)等。 示例代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;我的网页&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;欢迎来到我的网页&lt;/...

    dl dd dt实现的图文混排效果

    我们可以通过设置`&lt;img&gt;`标签在`&lt;dt&gt;`中,然后指定图片的`src`属性指向所需的图片文件,例如: ```html &lt;dt&gt;&lt;img src="images/image_name.jpg" alt="图片描述"&gt;&lt;/dt&gt; ``` 这里的`image_name.jpg`应当替换为实际的...

    HTML标签大全简介

    例如:&lt;img&gt; 标签用于添加图像:&lt;img src="image.jpg" alt="图像描述" /&gt;。 其他标签 除了上述标签外,HTML 还有许多其他的标签,例如:&lt;address&gt; 标签用于创建地址信息、&lt;blockquote&gt; 标签用于创建引用块、&lt;code&gt;...

    爱淘课html网页属性.pdf

    2. &lt;img&gt;标签:用于在网页中插入图片。src属性指定图片的路径,alt属性提供图片的文字说明。width和height属性定义图片的显示尺寸,border属性设置图片边框的宽度。 3. &lt;a&gt;标签:用于创建超链接。href属性指定链接...

    html标签和属性总结

    * 图像超链接:&lt;a href=”访问的网站” target=”” title=””&gt;&lt;img src=”图片的路径/图片名” alt=”图像显示错误显示的文本”&gt;&lt;/a&gt; * 锚链接:&lt;a href=”#链接名”&gt;锚点名称&lt;/a&gt;&lt;a name=”链接名”&gt; 四、表单...

    HTML测试题归类.pdf

    签&lt;img&gt;的src属性用于指定图像的路径,可以是相对路径或绝对路径,它告诉浏览器在哪里找到图像资源。...最后,关于图像,&lt;img&gt;标签没有结束标签,而是自闭合的,正确形式是:&lt;img src="image.jpg" /&gt;。

    html 标签 及其 属性 大全

    img标签的属性 * `src`:图片的 URL * `width`:设定图片宽度 * `height`:设定图片高度 * `alt`:设定图片提示文字 * `border`:设定图片边框 table标签的属性 * `aling`:表格位置,包括left、center * `...

    正则获取html中的 <img src = 图片地址

    在本场景中,我们关注的是如何利用正则表达式从HTML文档中提取`&lt;img&gt;`标签内的`src`属性,即图片链接地址。这在网页抓取、数据挖掘或内容分析等任务中非常常见。 首先,我们需要了解HTML的基本结构。HTML...

    HTML5 标签属性大全

    * &lt;img&gt; 图片标签:用于在 HTML 文档中添加图片 + src 属性:指定图片的路径 + alt 属性:指定图片无法显示时的替代文字 + title 属性:指定鼠标悬浮时的文字 + width 属性:指定图片的宽度 + height 属性:...

    青鸟S1HTMl项目

    - 图像:&lt;img&gt;标签插入图片,src属性指定图像源,alt属性提供替代文字,有助于无障碍访问。 3. **HTML列表**: - 无序列表:&lt;ul&gt;标签创建无序列表,&lt;li&gt;标签定义列表项。 - 有序列表:&lt;ol&gt;标签创建有序列表,...

    html.zip_html教程

    9. **图像**:&lt;img&gt;标签插入图像,src属性指定图像源,alt属性提供替代文本,对于无法显示图像的用户很有用。 10. **HTML5新特性**:HTML5引入了许多新元素,如&lt;header&gt;、&lt;footer&gt;、&lt;nav&gt;、&lt;section&gt;、&lt;article&gt;等...

    html标签及用法

    &lt;img&gt;标签插入图像,src属性指向图片URL,alt属性提供替代文本;&lt;audio&gt;和&lt;video&gt;用于嵌入音频和视频,可设置controls属性以显示播放控件。 七、表格标签 &lt;table&gt;创建表格,&lt;tr&gt;定义行,&lt;th&gt;定义表头单元格,&lt;td&gt;...

    关于html标签的使用

    &lt;img&gt;标签插入图像,src属性指定图片路径,alt属性提供图片无法显示时的文字替代。 7. 列表: &lt;ul&gt;和&lt;ol&gt;分别用于无序和有序列表,&lt;li&gt;定义列表项。嵌套列表可以通过在&lt;li&gt;内再次使用&lt;ul&gt;或&lt;ol&gt;实现。 8. 引用和...

    一个简单的HTML演示稿

    标签可以有属性,以指定特定的行为或样式,例如&lt;IMG&gt;标签用于插入图像,其src属性指定图像的URL,alt属性提供替代文本。&lt;A&gt;标签用于创建超链接,href属性定义链接的目标地址,target属性可以设定链接打开的方式(新...

    超炫酷代码,HTML格式

    图片标签&lt;img&gt;的src属性指定了图片的路径,alt属性提供了当图片无法显示时的替代文本。 HTML还支持表格(&lt;table&gt;)、表单(&lt;form&gt;)和框架(&lt;frameset&gt;)等复杂布局。表格由&lt;table&gt;、&lt;tr&gt;(行)、&lt;td&gt;(单元格)和&lt;th&gt;...

    2020html基础笔记

    HTML元素可以有属性,例如&lt;a&gt;标签的href属性指定链接地址,&lt;img&gt;标签的src属性指定图片源,alt属性提供替代文本,&lt;input&gt;标签的type属性定义输入字段类型,如文本、密码、提交按钮等。 4. CSS样式: 虽然不是HTML...

    HTML教程完整版

    图像处理是网页设计的重要组成部分,HTML使用&lt;img&gt;标签来引入和显示图像,并支持多种属性如alt(用于描述图像的替代文本)、width和height(用于定义图像的尺寸)。 超链接是HTML的关键特性,允许用户通过点击链接...

    HTML1.rar_html

    例如,&lt;a&gt;标签的href属性定义链接地址,&lt;img&gt;的src属性指定图片路径,alt属性提供图片无法显示时的文字描述。 4. **表格**:HTML中的&lt;table&gt;元素用于创建表格,&lt;tr&gt;表示行,&lt;th&gt;表示表头,&lt;td&gt;表示数据单元格。 5....

    HTML语法

    8. **图像**:&lt;img&gt;标签用于插入图像,src属性指定图像路径,alt属性提供替代文本,用于屏幕阅读器和图片加载失败时。 9. **区块元素与内联元素**:HTML元素分为区块元素(如&lt;div&gt;)和内联元素(如&lt;span&gt;)。区块...

Global site tag (gtag.js) - Google Analytics