文章目录
一丶 跳转
错误的
<a href="www.baidu.com/">百度</a>
正确的
<a href="https://www.baidu.com/">百度</a>
二丶 href属性
1.普通链接 — 跳转地址
2.锚链接 — 跳转某个锚点（锚链接）
3.功能链接
-执行JS代码，javascript：
-发送邮件,mailto：
-拨号，tel
二丶 锚点链接
【1】
在当前页面中，地址栏不会转动，只是跳转到当前页面对应位置
【2】
<a href="#chapter2">章节2</a>
<h2>章节1</h2>
<p></p>
<h2 id="chapter2">章节2</h2>
<p></p>
<h2>章节3</h2>
<p></p>
<h2>章节4</h2>
<p></p>
<h2>章节5</h2>
<p></p>
<h2>章节6</h2>
<p></p>
这样就可以使得 h2 与 a元素产生关联
适合用在：目录功能上
【3】虽然锚点也会改变地址，但是锚点与链接本质上都是一样的，都是跳转。
三丶 如何快速回到网页顶部
<a href="#">回到顶部</a>
当浏览器发现#号后，就会自动回到顶部，这是浏览器的规则
四丶 锚点地址分析
【1】链接对比
原地址：file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html
先地址：
file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html#chapter2
多了#chapter2，那么这个就是锚点链接的唯一标识
【2】直接使用锚点地址：
file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html#chapter2
不仅可以跳到该链接页面，还可以直接转移到章节2这个锚点！
五丶 快速跳链接并转义到锚点位置《高级方法》
题目：
现在有一种需求，就是：在别的页面要求你点击链接会调抓到那个页面，并且还会自动转移到章节2，怎么做到？
高级方法：
index.html
<body>
<a href="#chapter2">章节2</a>
<h2 id="chapter1">章节1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus hic eum tenetur repellat necessitatibus nulla, distinctio minus pariatur, porro natus consectetur eos! Incidunt ea ut, unde at sed laudantium et.</p>
<h2 id="chapter2">章节2</h2>
<p>Quo culpa, commodi inventore natus, voluptas enim harum non illum vel dolore tempora facere officia minus facilis sapiente optio amet doloremque distinctio quidem fugiat nesciunt deleniti nisi, nulla debitis. Maxime.</p>
<h2 id="chapter3">章节3</h2>
<p>Architecto expedita sit deleniti ab veritatis, ullam illo velit, suscipit sed natus nulla doloremque consequatur assumenda. Consequatur aperiam labore voluptatibus, dolorum vero error voluptate officiis repellendus ullam, modi itaque quo.</p>
<h2 id="chapter4">章节4</h2>
<p>Reiciendis quae, soluta culpa eveniet praesentium veritatis minima laudantium quasi, libero provident. Minus dignissimos aut molestias, molestiae error iure repudiandae nihil maxime sed, nam saepe nesciunt quisquam, facilis doloribus ex.</p>
<h2 id="chapter5">章节5</h2>
<p>Consequuntur, vitae deleniti praesentium illum molestiae itaque impedit fugit ea tenetur. Est laborum corporis doloremque obcaecati inventore maxime ipsum, maiores enim, tempore ad cupiditate voluptatibus pariatur qui eos sint, necessitatibus.</p>
<h2 id="chapter6">章节6</h2>
<p>Necessitatibus consequatur totam dolore consequuntur ut vero quibusdam odio nihil? Praesentium eum nisi eaque non facilis necessitatibus illo quam animi unde fugit voluptate ipsum voluptatum ab dicta, quis suscipit iusto.</p>
</body>
那么就会跳转到 文件名.html 网页的第三章目录下，为什么能直接写文件名呢？第一点！这两个网页都是在同一个根目录下，也就是相对路径下，否则注意要转移到对应目录在写文件名**
one.html
<body>
<a href="indexone.html#chapter2">点我跳到第二章</a>
</body>
这里用了相对路径的方法，因为这两个网页都在同一个工程里，所以可以直接用
文件名.html#chapter2，这种相对路径的链接，直接快速转移
六丶 锚点链接的感悟
不是说锚链接他一定不刷新页面，而是你要看这个锚点是不是在它自己的页面内！如果是自己的页面就不会刷新，如果是别的页面就会刷新，那么这种情况就跟链接跳转是一样的了
七丶 功能链接
【1】弹出对话框
点击后，触发某个功能，执行JS代码，如下：
<a href="javascript:alert('你好！')">
弹出：你好！
</a>
【2】发送邮件
要求：
发送邮件虽然要下载exchange软件，但是还是有用的
场景：
联系我们就可以用到
<a href="mailto:2345679879@qq.com">
点击给我发送邮件
</a>
【3】拨打电话
要求：
PC端需要安装拨号软件，手机端点击可以直接触发功能
场景：
联系我们就可以用上
<a href="tel:17897545688">
点击给我拨打电话
</a>
八丶 target 属性
-self：在当前页面窗口中打开，
-blank：在新窗口中打开 (默认值)
【1】跳转并且覆盖掉当前网页，也就是说不会打开新的网页进行跳转，而是覆盖掉当前页面
<a href="https：//douyu.com" target="_self"> 覆盖掉当前页面
斗鱼直播
</a>
九丶 title属性
在元素中插入title属性，会有提示的效果，意思就是说，鼠标指着链接按钮，会提示用户 斗鱼，每个人的直播平台，这样的文字
<a href="https：//douyu.com" target="_blank" title="斗鱼，每个人的直播平台"> 不会覆盖会打开新建一个窗口
斗鱼直播
</a>
效果：
十丶 快速开发
h2>{章节1} = <h2>章节1</h2>
(h2>{章节1})+p>lorem = <h2>章节1</h2>
<p>
lorem..........（乱数假文）
</p>
‘+’号表示兄弟的意思，对兄弟元素（拥有同一个父元素）有作用
**如果不假括号：h2>{章节1}+p>lorem**
<h2>章节1
<p> lorem..........（乱数假文） </p>
</h2>
((h2>{章节1})+p>lorem)*6
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
<h2>章节1</h2>
<p> lorem..........（乱数假文）</p>
((h2>{章节$})+p>lorem*1000)*6
<h2>章节1</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2>章节2</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2>章节3</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2>章节4</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2>章节5</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2>章节6</h2>
<p> lorem..........（乱数假文1000个单词）</p>
((h2[id="chapter$"]>{章节$})+p>lorem*1000)*6 ，这里的' [ ] '，表示添加属性，里面放入要添加的属性值就可以了
<h2 id="chapter1">章节1</h2>
<p > lorem..........（乱数假文1000个单词）</p>
<h2 id="chapter2">章节2</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2 id="chapter3">章节3</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2 id="chapter4">章节4</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2 id="chapter5">章节5</h2>
<p> lorem..........（乱数假文1000个单词）</p>
<h2 id="chapter6">章节6</h2>
<p> lorem..........（乱数假文1000个单词）</p>
a[href="chapter$"]*6>{章节$}
<a href="chapter1">章节1</a>
<a href="chapter2">章节2</a>
<a href="chapter3">章节3</a>
<a href="chapter4">章节4</a>
<a href="chapter5">章节5</a>
<a href="chapter6">章节6</a>
这时候会发现，还少了一个' # '号，那要如何解决呢？
按住鼠标的滚轮键，从顶一直盖到低，光标就会锁定6个位置，在打一个' # ' 号，
就会同时添加6个元素的属性
