HTML与CSS基础第七课—HTML 中的a标签（跳转链接）

1、简单示例（a、href、文件名、.../、/、https://、#id、target）

四个 a，点开的结果各不一样。把下面存成 index.html，用浏览器打开。页面要能往下滚，第四个链接的效果才看得出来。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接</title>
</head>
<body>
  <h1>前端从零到架构师</h1>
  <h2>a标签的用法</h2>
  <!-- 默认情况下，a标签会直接在当前页面跳转。 -->
  <p><a href="https://www.baidu.com">点击跳转到百度</a></p>
  <!-- 如果href属性没有加链接，则点击跳转不生效。 -->
  <p><a>点击跳转不生效，因为href属性没有加链接</a></p>
  <!-- a标签的target属性可以指定跳转方式，_blank表示在新窗口打开。 -->
  <p><a href="https://www.baidu.com" target="_blank">点击跳转到百度（新窗口打开）</a></p>
  <!-- 如果href属性加了#，则点击跳转会跳到本页的指定位置。 -->
  <p><a href="#practice">跳到本页练习</a></p>
  <p style="height: 1000px;">空白占位1000px高度</p>
  <h2 id="practice">练习</h2>
  <p style="height: 1000px;">这一节在页面下方。点上面的链接会滚到这里。（占位1000px高度）</p>
</body>
</html>

两处 style="height: 1000px" 只是把那两段撑高，让「练习」落在第一屏下面。样式以后再讲，这里只为了腾出高度。

2、标签介绍（概念和特征）

<a href="地址">链接文字</a>。链接文字放在开始标签和结束标签之间，写成点开以后能去的地方。a 放在 p 里面，它不自己另起一段。

2.1、有 href 才跳转

href 里是点开以后去的地址。示例里第一个写成 href="https://www.baidu.com"，点开就去百度。

开始标签里不写 href，a 只是包住几个字，点了不跳转。示例里第二个就是这样。把第一个的 href="https://www.baidu.com" 整段删掉，保存刷新，它会变得和第二个一样。看完把 href 加回去。

2.2、当前页和新窗口

不写 target，链接在当前页打开，这一页被换成目的地。示例里第一个是这种。

target="_blank" 写在开始标签里，和 href 并列。点开后新窗口去那个地址，原来这一页留着。示例里第三个是这种。_blank 表示新窗口。

2.3、地址怎么写

href 按要去的地方来写。示例里站外用的是完整地址 https://www.baidu.com。

去的是一个文件时，按这个文件和当前页的位置来拼：

写法	去哪里
`note.html`	和当前文件同一个文件夹
`images/cover.png`	当前文件夹下的 `images` 子文件夹
`../note.html`	上一级文件夹
`/note.html`	网站上的根目录。本地直接打开文件时，`/` 从磁盘根目录算起
`https://...`	另一台服务器上的完整地址

这一阶段练习，用文件名、images/... 和 ../。页面还放在自己电脑上、用浏览器直接打开时，找项目里的文件用这三种。/ 留给以后真正放到网站上的地址。

2.4、跳到本页某一段

先给要到达的那个元素一个 id。示例里是 <h2 id="practice">练习</h2>。链接写成 href="#practice"。# 表示还在这一页，后面的名字是要滚到的那个 id。

# 后面的名字和 id 必须完全一致，包括大小写。把示例改成 href="#Practice"，保存刷新再点，就到不了「练习」。看完改回 #practice。

同一个 id，这一页只写一次。名字里用连续的字母和数字，不要空格。id 也可以加在 h1、p 上。这一篇加在要跳到的标题上。

3、要点总结

a 写上 href 才是能点的链接。不写 href，字还在，点了不跳转。
不写 target，在当前页打开。target="_blank" 在新窗口打开，原来这一页留着。
https:// 是另一台服务器。同一文件夹写文件名，子文件夹写 images/cover.png，上一级写 ../。本地直接打开文件时，/ 从磁盘根目录算起。
页内跳转先给目标一个唯一的 id，链接写成 href="#这个id"。名字对不上，就到不了。

下一篇：图片地址和链接地址是同一套写法。图没加载出来时，读者该看到什么？