前面说过 HTML 是超文本标记语言，到目前为止，还没有涉及至超文本内容，这一节就来讲讲能体现超文本的图片和超链接。

图片 元素

图片元素用于在网页中显示图片，使用<img>实现。

img 属性

img 是空标签，它有如下属性：

src 中的图片地址，可以是与网站在相同服务器的某个路径下，也可以是在互联网其它服务器上的，这时就需要使用它的 http 地址。

示意代码

<img src="../img/2-6-1.png" alt="这是本地的图片" width="400" /> <img   src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"   alt="这是来自百度的logo图片"   width="300" /> 

效果

超链接元素

超链接常用于导航和链接其它资源。

标签 <a> 用于设置超文本链接。链接的内容可以是文字（一个或多个词）或图像。

当鼠标光标停留在链接上方时，鼠标会从箭头变成小手的形状态。

当点击链接时，网页会跳转到对应的内容上。这是通过 <a> 标签的 href 属性实现的。

<a> 标签的属性

链接有几个不同的状态，不同的状态下样式会不一样，这些样式也可以通过 CSS 进行自定义。此处不作详细描述。

<a   href="https://www.baidu.com/"   target="_blank"   title="这是一个会在新窗口打开的百度搜索链接。"   rel="nofollow"   >百度搜索</a > 

<a> 标签的应用：导航

导航在网站里指的是，当一个网站的网页数量众多时，通过统一的链接区域，让用户对该网站有一个全局的认知，并方便用户随时进入想要看到内容页。

我们可以把网页的导航理解为一本书的目录。

书的目录里最重要的信息除了目录的结构，就是每个目录对应的页码。通过页码我们能快速找到我们想要读的内容。

类似的，在一个网站中，我们能过导航实现和书的目录相同功能。

<a> 标签的应用：链接其它资源

除了文本链接，还能链接的资源有图片，锚点链接。

<a   href="https://www.baidu.com/"   target="_blank"   title="这是一个会在新窗口打开的百度搜索链接。"   rel="nofollow"   ><img     src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"     alt="这是来自百度的logo图片"     width="300" /></a> 

当鼠标经过时，会显示的 title 信息，如下：

书签

想要把链接的内容用于书签，就要搭配使用 id 属性。它就是一个锚点链接。

现代很多网页设计使用 single page，也就是单页模式，常见展示页。

这种网页，只有一个主页，所有的内容都在主页上，那这时如何导航呢？

大家记录，我们使用 a 标签做导航时，在 href 里填的都是链接地址或页面地址，还能定位到更细的部分，比如，页面上的某个区域吗？

答案是可以，这里就使用 id 属性进行锚点定位。

锚点链接在 href 属性中使用 # 加目标元素的 id 属性实现，如下。

<div>   <a href="#introduce">产品介绍</a>   <a href="#proudct">产品展示</a>   <a href="#price">产品价格</a> </div>  <div id="introduce">这里是产品介绍区</div> <div id="proudct">这里是产品展示区</div> <div id="price">这里是产品价格区</div> 

当上面示意代码中的三个区的内容很多，多到电脑一屏显示不下，这时通过上面的导航链接，就能直接定位到想要去的区域。

总结

• 🍑 图片标签 img 可以在网页上显示图片，图片可以是本地的，也可以是互联网上的。

• 🍑 超链接标签 a 用于链接资源，常用于网页导航和链接文件。

• 🍑 通过元素的 id 标签，可以使用锚点链接达成标签功能，快速定位到想要浏览的区域。