1.3 链接、图片与属性

到目前为止，我们的标签都只是“包住文字”。但网页之所以叫“网”，是因为它能链接到别处，还能嵌入图片。这两样都离不开一个新概念：属性（attribute）。

什么是属性

属性是写在开标签里的“设置项”，用来配置这个元素。格式永远是 名字="值"：

<img src="cat.jpg" alt="一只橙色的猫" width="200">

这里 <img> 有三个属性：src、alt、width，它们之间用空格隔开。属性让同一个标签能有不同的行为——同样是 <img>，src 不同就显示不同的图片。

下面的“属性编辑器”让你切换 <img>、<a>、<input> 三种元素，修改它们的属性，实时看到代码和效果的变化。

链接：<a> 标签

<a>（anchor，锚）用来做超链接。最重要的属性是 href，它指定“点击后去哪里”：

<a href="https://example.com">访问示例网站</a>
<a href="about.html">本站的关于页</a>
<a href="https://example.com" target="_blank">在新标签打开</a>

• href 可以是完整网址，也可以是站内的相对路径。

• 加上 target="_blank" 会在新标签页打开链接。

图片：<img> 标签

<img> 用来嵌入图片。它是自闭合的（没有 </img>），关键属性有：

<img src="photo.jpg" alt="海边日落" width="300" height="200">

• src（source）：图片的来源地址，必填。

• alt（alternative text）：图片的替代文本。当图片加载失败时显示它，屏幕阅读器也会读它。

• width / height：宽和高（像素）。

属性的通用规则

• 属性总是写在开标签里，闭标签里不写属性。

• 多个属性用空格分开，顺序无所谓。

• 值用引号包起来（单双引号都行，习惯上用双引号）。

• 有些属性是“布尔属性”，写上名字就生效，比如 <input disabled>。