A13. 元素的属性 超链接与图片元素
3.1 元素属性为元素添加额外的信息
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started#属性
之前我们学的元素只能将一个文档分为两部分：元素内、元素外。
A <b>bold</b> element.这样表示格式元素尚且够用，只需要知道哪里开始和结束就行了。
然而，HTML作为“超”文本，很重要的一部分是“超”链接。
超链接除了显示的文本，还有指向其他页面的链接。文本和链接的指向并不总是一样。
文本可以放到内容中，链接便需要一个单独的存储地——属性。属性可以附加到链接上，添加更多的信息。
3.2 元素属性的基本语法
因此，我们引出元素属性的基本语法：
<a href="https://www.example.com">Example Domain</a>
<img src="https://www.example.com/image.jpg" alt="Example Image">在上面两个例子中：
- 元素表示超链接，是非空元素；
- 元素表示图片，是空元素。
我们得到了属性的基本语法：
<tag name="value"></tag>
<tag name1="value1" name2="value2"></tag>
<tag name="value">
<tag name1="value1" name2="value2">
<tag name="value" />
<tag name1="value1" name2="value2" />所有的都放置在开始标签中。
每个属性为name="value"形式，属性名和属性值之间以等号分隔。
属性值需用引号包裹，以防其中的空格等特殊字符干扰解析。
多个属性间以空格分隔。若以自闭合标签形式，斜杠仍需紧贴>。
3.3 title属性为元素添加悬停提示
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/title
我们经常为了界面的简洁，将冗长的内容简化为很短的文本。
但这会导致信息的损耗，因此有时我们允许用户鼠标来查看完整内容。
B站就有这样的操作：
它在HTML中的实现也并不复杂（鼠标悬停在右侧方框内查看效果）：
<span title="2,591,989">259.2w</span>259.2w
title属于全局属性，对每个元素都适用。属性值为鼠标悬停时弹出的提示文本。
3.3 练习：为元素添加title属性
请将下列元素各添加一个title属性。要求：将括号中的内容作为title的提示文本，被解释的元素用<u>标签。
Python boasts an extensive standard library. (Python: A popular programming language)
RFID is a technology that allows for the identification of objects. (RFID: Radio-frequency identification)
The land area of India is approximately 3.3 million squared kilometers. (approximately 3.3 million: 3,287.3 kilo)示例：
<u title="A popular programming language">Python</u> boasts an extensive standard library.效果：
Python boasts an extensive standard library.
RFID is a technology that allows for the identification of objects.
The land area of India is approximately 3.3 million squared kilometers.
3.4 超链接a元素的href和target属性
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
超链接，原义为“锚点”，是指向其他页面的链接。
它有两个常见的属性：
- ：指向的页面的URL，。
target：在何处打开链接，。主要有_self（当前窗口，默认值）、_blank（新窗口）。
例如：
<a href="https://www.example.com">Example Domain</a>
Press <a href="https://www.bing.com" target="_blank">here</a> to search Bing in a new tab.此处
href不能省略https://或http://名。平时我们作为用户使用浏览器时即使只输入（如www.baidu.com）时，浏览器会自动补全协议名；现在我们作为网页开发者，必须显式指定协议名。
3.4 练习：超链接元素
请修改下列代码，在适当位置添加超链接元素，且1、2在新窗口打开，3在当前窗口打开。
For more information, see https://www.example.com
MDN Web Docs is a great resource for learning web development, whose URL is https://developer.mozilla.org
Press here to go to Baidu.效果：
- For more information, see https://www.example.com
- MDN Web Docs is a great resource for learning web development.
- Press here to go to Baidu in a new tab.
3.5 图片img元素的src、alt和width属性
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
图片元素，是空元素（毕竟不太会在图片内加文字），表示插入图片。
它有三个常见的属性：
- ：图片的源URL，必需，其他要求与
a元素的href属性一致。 - ：图片的替代文本，强烈建议添加。当图片无法显示时，显示替代文本。
width：图片的宽度，单位为，可选。
示例：
<img src="./A13-example.png" alt="Example Image">
<img src="./A13-example.png" alt="Example Image" width="40">
<img src="./not-exist.png" alt="This image does not exist.">
图片从 Freepik 上选取。
3.5 练习：图片元素
请按照要求写出下列图片对应的HTML代码：
| 序号 | 图片源 | 代替文字 | 宽度 |
|---|---|---|---|
| 1 | https://static.hdslb.com/mobile/img/512.png | Bilibili Favicon | 128px |
| 2 | 域名：i2.hdslb.com路径： /bfs/face/8c8062b063092e72b49d4af4f55f4b61af48c151.jpg | 3B1B Avatar | 默认 |
| 3 | 随意找一张图片 | 图片加载失败 | 自己设定 |
参考答案：
1. <img src="https://static.hdslb.com/mobile/img/512.png" alt="Bilibili Favicon" width="128">
2. <img src="https://i2.hdslb.com/bfs/face/8c8062b063092e72b49d4af4f55f4b61af48c151.jpg" alt="3B1B Avatar">我们现在所列举的，不过是常见的属性，事实上之后学的每一个元素都有多得多的属性可以设置。
这些不常用的属性，需要用的时候再查阅文档即可。
网页开发的文档一般都在MDN Web Docs上查询。
当然，其他教程和各博客平台的文章也有很多有用的信息。
知识回顾
- 元素的属性可以为元素添加额外的信息，常见格式为
<tag name1="value1" name2="value2"></tag>：- 属性均加在起始标签中；
- 多个属性间以空格分隔；
- 属性名和属性值之间以等号分隔；
- 属性值需用双引号包裹。
title属性可以为几乎所有元素添加悬停提示。- 元素表示超链接：
href属性表示指向的页面的URL，必需；target属性表示在何处打开链接，可选，默认在当前窗口打开_self；也可选在新窗口打开_blank。
- 元素表示图片：
src属性表示图片的源URL，必需；alt属性表示图片的替代文本，强烈建议添加；width属性表示图片的宽度，单位为像素px。
- 所有URL都不能省略
https://或http://协议名。
课堂练习
请写一个带有
title属性的超链接，鼠标悬停时提示文本为“进入示例网站”，链接地址为https://www.example.com，链接文本为“示例网站”。请指出代码的两处错误：
<a href="www.baidu.com">进入百度。请对以下代码进行修改，实现效果图：
htmlIt is NFC technology that allows for the identification of objects. Go to baike.baidu.com to learn more.