HTML——超链接与＜a＞标签的使用

本人所用编辑器：vscode；使用浏览器为chrome

---

目录

关于a标签

 基础知识

 标签属性的实现

   添加属性

   属性效果展示

  书签效果实现

---

关于a标签

 基础知识

    超链接要能准确的进行跳转，需要同时设定源端点和目标端点。

• 源端点指提供链接单击的对象，如链接文本或图像。
• 目标端点指跳转到的页面或位置，如某网页、书签等。

  <a>标签既可以用来做超链接，也可以用来设置书签。<a>标签的属性如下表所示；

<a>标签常用属性

属性	属性值	描述
href	超链接文件路径	必设属性，设置超链接的目标端点。
name/id	书签名	HTML5中使用id设置书签名，之前用name设置书签名
target	目标窗口名称	_self(默认属性)在本窗口打开链接文件，_blank在新窗口打开链接文件
title	提示文字	设置链接提示文字

href属于必设属性，其取值可以是绝对路径，相对路径和锚点等多种值。设置锚点就是使用超链接实现书签标签的方法。

 标签属性的实现

   添加属性

  href属性：

  <!-- 绝对路径 -->
  <a href="http://baidu.com">百度</a>
  <!-- 相对路径 -->
  <a href="./demo1/demo1.html">古诗</a>
  <!-- 锚点 -->
  <!-- #代表链接到当前网址 -->
  <a href="#">锚点链接</a>

添加target属性：

  <!-- 绝对路径 -->
  <!-- 新的页面打开百度页面 -->
  <a href="http://baidu.com" target="_blank">百度</a>
  <!-- 相对路径 -->
  <!-- 当前页面打开古诗页面 -->
  <a href="./demo1/demo1.html" target="_self">古诗</a>
  <!-- 锚点 -->
  <!-- #代表链接到当前网址 -->
  <!-- 不设置target属性，默认在当前页面打开 -->
  <a href="#">锚点链接</a>

添加title属性：

  <!-- 绝对路径 -->
  <!-- 新的页面打开百度页面 -->
  <a href="http://baidu.com" target="_blank" title="将会在新的页面打开百度页面">百度</a>
  <!-- 相对路径 -->
  <!-- 当前页面打开古诗页面 -->
  <a href="./demo1/demo1.html" target="_self" title="将会在当前页面打开古诗页面">古诗</a>
  <!-- 锚点 -->
  <!-- #代表链接到当前网址 -->
  <!-- 不设置target属性，默认在当前页面打开 -->
  <a href="#" title="锚点链接，链接到自身">锚点链接</a>

对于相对路径的部分，各位可以根据自己制作的内容进行更改。

   属性效果展示

  三个链接的效果大同小异，效果图只展示绝对路径的效果。

href设置正确成功跳转，并在单击文本之后在新的标签页打开了目标端点。

 title属性效果的展示如上

  书签效果实现

设置id和添加锚点链接。

   <!-- 标题部分设置id -->
  <h2 id="top">我的笔记</h2>
   <!-- 底部设置锚点 实现书签效果 -->
  <a href="#top">回到顶部</a>

效果展示如下；

 单击回到顶部，直接链接到网页顶部部分。