a 元素 href 属性 VScode代码简写法 id 目录（锚点）的跳转 界面+锚点跳转 功能链接 target属性

---

提示：以下是本篇文章正文内容，下面案例可供参考

a 元素

超链接

href 属性

hyper reference:通常表示跳转地址

1. 跳转地址
2. 跳转到锚点：就像目录，点击某个章节就可以进行跳转

VScode代码简写法

• 用括号把第一部分的内容括起来
• 再用加号进行链接
• 加号表示是两边是兄弟元素

(h1>{第一单元})+p>lorem

<h1>第一单元</h1>
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim molestiae officia ut odit voluptatum? Id ipsa similique modi tempora cumque voluptatibus laudantium magni, perspiciatis inventore, accusamus cupiditate veritatis rem nisi.</p>

• 多段重复写法: 再加一个大括号 并乘以想要的段数

   ((h1>{第一段})+p)*6
   
   <h1>第一段</h1>
   <p></p>
   <h1>第一段</h1>
   <p></p>
   <h1>第一段</h1>
   <p></p>
   <h1>第一段</h1>
   <p></p>
   <h1>第一段</h1>

• 快速生成目录的写法

	 a*6>{章节$}

	<a href="">章节1</a>
	<a href="">章节2</a>
	<a href="">章节3</a>
	<a href="">章节4</a>
	<a href="">章节5</a>
	<a href="">章节6</a>

id 目录（锚点）的跳转

id属性:全局属性，表示元素在文档中的唯─编号

通过id进行锚点的定位 进行跳转

	<a href="#class1">章节1</a>
	<a href="#class2">章节2</a>
	<a href="#class3">章节3</a>
	<a href="#class4">章节4</a>
	<a href="#class5">章节5</a>
	<a href="#class6">章节6</a>

  <h2 id="class1">章节1</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates consequuntur reiciendis dolore nobis obcaecati quae necessitatibus iusto aperiam aspernatur harum, numquam quaerat magni quo ipsum sapiente repellendus voluptatibus molestiae eos ipsa! Placeat minus deserunt id asperiores maxime. Tempore, porro aut pariatur architecto vitae cum placeat quis facilis amet magnam nemo eos sequi iusto rem soluta fugiat enim? Iure quas nihil expedita repellat facere aliquid earum corporis accusantium, omnis doloribus accusamus consequatur neque impedit alias non eum et qui adipisci quasi repudiandae. Iusto alias non voluptate, voluptatem quia iure, sit quo fugit exercitationem, error autem at? Nihil error quia unde fuga.</p>
  <h2 id="class2">章节2</h2>
  <p>In ut, fugit veniam doloremque temporibus excepturi. Ad aspernatur placeat voluptate? Nulla asperiores et, totam commodi accusamus deserunt mollitia nihil tempora voluptatibus explicabo perferendis obcaecati odio illo sapiente quidem minus suscipit sit autem impedit modi accusantium? Temporibus, nesciunt facilis. Dolor illum ad iure molestiae! Magnam numquam, aspernatur iste quidem ipsa dolores officia, cupiditate exercitationem corrupti, nihil dolore. Hic molestiae ea nisi consequuntur sequi. Est tempora eius quasi temporibus dolorum eum iste laboriosam vitae illo. Quisquam dolore impedit culpa voluptates voluptatem quis magni saepe excepturi temporibus quas eos voluptatum aperiam voluptas quae voluptatibus, quibusdam libero ea dolorum nemo obcaecati laudantium cumque.</p>
  <h2 id="class3">章节3</h2>
  <p>Rerum excepturi exercitationem expedita placeat! Voluptatum porro quae laborum labore aliquid atque. Aut repellat delectus amet, eaque fugit voluptas nam velit ducimus obcaecati, laboriosam neque nesciunt rem voluptatem? Hic, dolor tempora saepe nam illo earum est a quisquam, deleniti rem fugiat impedit ipsa aliquam eos laudantium, odit optio ea ullam dolore! At modi reprehenderit amet mollitia esse aliquid. Nam adipisci doloribus hic eum tempore enim veritatis porro quam quaerat, voluptatum quos maxime vitae libero, eveniet fugit! Odit ducimus sint ex, quidem, fugiat qui optio explicabo maxime repellendus illo tempore pariatur nobis molestiae labore. Et a culpa rem dolore ut aperiam?</p>
  <h2 id="class4">章节4</h2>
  <p>Ut, officiis? Quam doloremque deserunt quo magnam aliquid accusamus nostrum sequi, quaerat, praesentium nemo earum a! Sapiente debitis, ullam quis dolore alias similique, minima nostrum officia, nobis in quod tempore sunt a iure repudiandae impedit modi earum saepe porro quibusdam accusamus minus animi? Libero in aliquid dolore quas repellat excepturi inventore soluta, a quibusdam itaque. Eos distinctio quisquam nulla modi ullam ipsa porro totam, doloremque maiores odit nemo quae, voluptatibus delectus! Aspernatur consequuntur soluta, quidem sunt, quod id harum accusantium mollitia earum cum sequi similique reprehenderit suscipit nam voluptatem. Id ex odio adipisci aliquid repudiandae eveniet atque nam, facilis labore?</p>
  <h2 id="class5">章节5</h2>
  <p>Sint suscipit aliquid dicta vitae ab magni ut? Ipsum ea officiis delectus rem perferendis quod dicta veniam vel asperiores. Pariatur nobis, necessitatibus perspiciatis natus, sint consectetur labore amet voluptas nemo quas odit cupiditate nulla quae, repudiandae dolorum ipsam quisquam repellat laudantium aliquam accusantium alias impedit? Voluptates dolor asperiores amet laboriosam, eveniet non magnam? Architecto est quam in autem vitae fugit eius cupiditate id adipisci ab cum quia, nobis maxime accusamus quaerat numquam. Fugit itaque totam voluptatem aut alias dolorum! Labore nemo delectus eveniet ipsum minus placeat blanditiis doloribus aperiam, praesentium architecto quasi cupiditate, numquam modi hic esse sint maiores distinctio!</p>
  <h2 id="class6">章节6</h2>
  <p>Asperiores, magni quibusdam, quis libero molestiae officiis maiores laboriosam deleniti accusamus dolore neque saepe inventore quia aut expedita recusandae velit consequatur qui molestias! Architecto et corrupti veniam rerum sequi ex aperiam ducimus voluptatum, doloribus aut deserunt autem! Aliquid nisi laudantium aut quaerat, quam officiis recusandae eius soluta consequatur tempore modi accusantium! Voluptatibus rerum, expedita quod nostrum dolorem aperiam neque sapiente eligendi excepturi placeat animi, temporibus ad velit voluptatum sint nobis ea in nesciunt libero praesentium! Laboriosam suscipit eligendi nihil ratione voluptas cumque magnam mollitia quis fugiat, corporis nulla magni eveniet cum. Natus, qui non ullam deserunt animi expedita fuga voluptates.</p>

界面+锚点跳转

 <a href="code.html#class3">
        锚点页面的第三章
    </a>

再设置一个界面在href 里添加要跳转的界面与锚点位置
就可以跳转到相应位置

如图所示：

功能链接

点击后，触发某个功能

• 执行js代码, javascript:
• 发送邮件，mailto
  要求用户计算机上安装有邮件发送软件:exchange
• 拨号，tel:要求用户计算机上安装有拨号软件，或使用的是移动端访问

target属性

表示跳转窗口位置

target的取值:

• _self: 在当前页面窗口中打开，默认值
• _blank: 在新窗口中打开

  <a href="https://douyu.com" target="_self" title="斗鱼">斗鱼直播
    </a>

title: 是鼠标移到链接文字上显示的提示