图片与超链接
图片
图片标签
任何网页都少不了图片，一个图文并茂的页面，可以使得用户体验更好。如果想让网站获得更多的流量，也需要从“图文并茂”这个角度挖掘一下。
在 HTML 中，可以使用 img 标签来显示一张图片。对于 img 标签，有 3 个属性需要注意：src、alt 和 title。
<img src="" alt="" title="" />src 属性
src 用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。。
<img src="图片路径" />任何一个图片必须指定 src 属性才可以显示。也就是说， src 是 img 标签必不可少的属性。
举例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="img/haizei.png" alt="" />
</body>
</html>浏览器预览效果如下图所示。
分析：
“img/haizei.png” 就是这个图片的路径。如果把 “img/haizei.png” 去掉后，图片就不会显示出来了。
alt 属性和 title 属性
alt 和 title 都是用于指定图片的提示文字。一般情况下， alt 和 title 的值是相同的。不过两者也有很大的不同。
举例：alt 属性
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="img/haizei.png" alt="海贼王之索隆" />
</body>
</html>浏览器预览效果如下图所示。
分析：
当把 “img/haizei.png” 去掉（也就是图片无法显示）后，此时可以看到浏览器会显示 alt 的提示文字，如下图所示。如果没有加上 alt 属性值，图片不显示时，就不会有提示文字。
举例：title属性
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="img/haizei.png" title="海贼王之索隆" />
</body>
</html>浏览器预览效果如下图所示。
当把鼠标移到图片上时，就会显示 title 中的提示文字，如下图所示。
在实际开发中，对于 img 标签， src 和 alt 这两个是必选属性，一定要添加；而 title 是可选属性，可加可不加。
超链接
超链接随处可见，可以说是网页中最常见的元素了，例如百度的导航、图片列表等都用到超链接。只要我们轻轻一点，就会跳转到其他页面。
超链接，英文名是 hyperlink 。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
a 标签
在 HTML 中，我们可以使用 a 标签来实现超链接。
语法：
<a href="链接地址">文本或图片</a>说明：
href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。
超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。
举例：文本超链接
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>分析：
当我们点击“百度一下”这个文字，就会跳转到百度首页。
举例：图片超链接
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="https://www.baidu.com">
<img
src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
alt="百度一下"
/></a>
</body>
</html>浏览器预览效果如下图所示。
分析：
当我们点击图片后，就会跳转到绿叶首页。不管是哪种超链接，我们都是把文字或图片放到 a 标签内部来实现的。
target 属性
默认情况下，超链接都是在当前浏览器窗口打开新页面的。在 HTML 中，我们可以使用 target 属性来定义超链接打开窗口的方式。
语法：
<a href="链接地址" target="打开方式"></a>说明：
a 标签的 target 属性取值有 4 种，如下表所示。
| 属性值 | 说明 |
|---|---|
_self | 默认值，在原来窗口打开链接 |
_blank | 在新窗口打开链接 |
_parent | 在父窗口打开链接 |
_top | 在顶层窗口打开超链接 |
一般情况下，我们只会用到 _blank 这一个值，也只要记住这一个就够了，其他三个值不需要去深究。
举例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="https://www.zhengxinonly.com/" target="_blank">正心全栈编程</a>
</body>
</html>浏览器预览效果如下图所示。
这个例子跟之前那个例子在浏览器效果上看不出什么区别，不过当我们点击超链接后，就会发现它们的窗口打开方式是不一样的，小伙伴们先自己试一下。
最后有一点要特别注意的， _blank 属性是以下划线（_）开头，而不是中划线（-）开头。
内部链接
在 HTML 中，超链接有两种：一种是外部链接；另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。上一节我们接触的就是外部链接，这一节我们来学习一下内部链接。
对于图中的 3 个页面，如果我们在其中 page1.html 点击超链接跳转到 page2.html 或者 page3.html ，其实这就是内部链接。这是因为 3 个页面都是位于同一个网站根目录下的。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="page2.html">跳转到页面 2</a>
<a href="page3.html">跳转到页面 3</a>
</body>
</html><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>这是页面2</h1>
</body>
</html><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>这是页面3</h1>
</body>
</html>可以自己实践一下，就知道内部链接是怎样一回事了。此外，内部链接使用的都是相对路径，而不是绝对路径，这个跟图片路径是一样的。
锚点链接
有些页面内容比较多，导致页面过长，此时用户需要不停拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。
在 HTML 中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。
举例：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<a href="#article">推荐文章</a><br />
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿 `Q` 正传</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的夏天</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
</body>
</html>浏览器预览效果如下图所示：
当点击“推荐文章”“推荐音乐”“推荐电影”这 3 个超链接后，页面就会自动滚动到相应的部分。
想要实现锚点链接，需要定义以下 2 个参数。
其中， id 属性就是元素的名称，这个 id 名是随便起的（一般是英文）。不过在同一个页面中， id 是唯一的，也就是说一个页面不允许出现相同的 id 。道理很简单，你见过哪两个人的身份证号码是相同的吗？
最后要注意一点， a 标签的 href 属性取值时，需要在 id 前面加上“#”（井号），以表示这是一个锚点链接。