Kodokon kodokon.com

链接与图片

用 a 和 img 标签创建指向其他页面的链接并显示图片。

7 分钟 · 3 题

在 Kodokon 中打开本课

HTML 中的 “HyperText(超文本)” 指的正是用链接把页面彼此连接起来的能力。链接用 <a> 标签创建(是 anchor(锚) 的缩写)。它的目标由 href 属性(hypertext reference,超文本引用)给出,其中包含一个 URL:网页的地址,比如 https://en.wikipedia.org。放在 <a></a> 之间的文字将变为可点击。

HTML
<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>
一个指向其他网站的链接,然后是一个指向你自己网站某个页面的链接。

要显示一张图片,你使用 <img> 标签。它是一个自闭合标签:它没有内容,也没有结束标签——所有内容都放在标签本身里面。有两个属性是必不可少的。srcsource,来源)指出图片文件的位置。altalternative text,替代文本)用文字描述图片:当图片加载失败时会显示这段文字,视障人士使用的屏幕阅读器也会把它朗读出来。

HTML
<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">
三张图片:src 给出文件,alt 用文字描述它。

你可以把两者结合起来:放在 <a> 元素里面的图片就变得可点击。网站的 logo 正是这么做的——点击它们就会带你回到主页。

HTML
<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>
一张可点击的图片:img 元素放在 a 元素里面。

知识检测

确认你已牢记本课的重点内容。

  1. 哪个属性包含链接的目标地址?
    • src
    • href
    • alt
    • lang
  2. 图片的 alt 属性有什么用?
    • 在图片无法显示时描述图片
    • 设置图片的大小
    • 给出图片文件的地址
  3. <img> 标签有结束标签吗?
    • 有,必须总是写 </img>
    • 没有,它是一个自闭合标签
    • 只有图片很大时才有