html-超链接

a标签：超链接

1. 没有href属性的a标签不起作用
2. .常用属性：href（目标链接的地址）、target（在哪里打开目标链接，值：_blank:在新窗口打开，常用、_self:在当前窗口打开，默认）
3. 四种状态（默认）：
   未被访问的链接：link状态，文字为蓝色，有下划线
   已被访问的链接：visited状态，文字为紫色，有下划线
   鼠标移动到链接上：hover状态，鼠标变成手型
   正在点击的链接：active状态，文字变为红色，有下划线
   默认的四种状态在平常并不使用，而是通过css对这四种状态进行重置
4. 绝对路径（完整的地址,添加https://或http://）：带有域名的完整路径eg:https://www.baidu.com，主要用来链接外部资源
5. 相对路径

以当前文档所在的目录作为参考
eg:当前页面和目标链接的地址在同一个目录下
以下为目录结构

链接代码

    <a href="b.html" target="_blank">同级目录b</a>
    <a href="last/c.html" target="_blank" >同级目录下的子文档c</a>
    <a href="last/last/d.html" target="_blank" >同级目录下的子目录下的子文档d</a>
    <a href="htnl/d.html" target="_blank">d文档</a>

以下为跳转成功拼接截图

注：以当前文档的目录为参考，跟当前目录同级或者在同一级目录下的字目录中的文档也是可以找到的，举个通俗易懂的例子，我有大门的钥匙，我在家里的任何一个房间显然能随意进出家里其他任何房间（不要较真哈，不考虑家人允不允许你随意进入他们的房间），只要有一个前提：一个家，而家的范围扩大一点就是小区，显然你和邻居同样是屋子，但是你就不能随意进出邻居家吧。以下就是不能访问的例子。

下图为在a.html中访问d.html(注：不是在同一目录中)

如上图所示，浏览器寻找的地址是和a.html在同一目录下的目标链接才有效，浏览器会去找/html/htnl而我们的目录结构html和htnl是同一级别的目录，因此找不到
eg:当前页面和目标链接不在同一目录
目录结构

代码片段

   <a href="b.html" target="_blank">同级目录b</a>
    <a href="last/c.html" target="_blank" >同级目录下的子文档c</a>
    <a href="last/last/d.html" target="_blank" >同级目录下的子目录下的子文档d</a>
    <a href="../htnl/e.html" target="_blank">e文档</a>
    <a href="../hf.html" target="_blank">h文档</a>

以下为访问成功拼接截图

上述例子中展示的是当不在同一目录中是用"…/"(两点一斜杠)退出一级目录，及表示当前目录的上一级目录eg:

 <a href="../htnl/e.html" target="_blank">e文档</a>
 

该语句出现在a.html中，要找到e文档，需要退出当前目录，返回到上一级目录，才能找到与html平级的htnl目录，从而找到e.html

注意 :"…/"表示退出一级，到依照自己的上一层，下图所示的目录结构，对于a.html来说就要退出两级即下述代码才能成功访问

 <a href="../../hf.html" target="_blank">h文档</a>

目录结构如下

应用

1. 文件下载：
   href:文件下载路径：路径的相关概念参考上述绝对路径/相对路径
   download属性:指定下载文件名称，不添加该属性时，如果浏览器不能识别文件，可以直接下载eg:xx.rar，如果浏览器可以识别会直接打开而不是下载。注：添加该属性时，不管浏览器是否可以识别文件，都会直接下载！！！

2. 锚链接和空链接
   锚链接：当网页内容太长，需要跳转到具体位置是，可以使用锚链接

     <!-- 当前页面跳到锚链接 -->
    <a href="#one">跳到试一试</a>
    <p id="one">试一试</p>

目标页面具体位置要设置锚点，用a标签中的href属性指定目标页面的路径+指定位置的id，书写 href="xx.html?#id值"

 <!-- 跳转到其他页面的锚链接 -->
    <a href="a.html?#one1">跳转到其他页面的试一试</a>

空链接：返回顶部 书写：href="#"

<!-- 回到页面的顶部 -->
    <a href="#" title="返回到顶部"><button class="icon ion-arrow-up-a"></button></a>

注：button标签是行内块元素，可以嵌套行内元素。但是不推荐嵌套a标签

相关概念

标准属性：几乎所有的元素都可以有的属性
特殊属性：元素特有的属性
自定义属性：

标准属性(常用):

1. id:元素唯一标识。元素和id的关系：1对1。同一个页面中不能有相同id值，无论元素是否一样，eg:超链接和单选按钮元素不同，id也不能相同!!!
2. class:跟元素无关，元素和class的关系：多对多 。一个元素的多个class表示：class=“a b”(空格隔开)。主要用来选择多个元素来定义样式。规定类名时不能以数字开头！！！
3. title:规定额外属性，鼠标移动到元素上时提示文字。
4. style:规定行内样式只对当前元素生效。样式优先级：行内样式>内部样式>外部样式

自定义属性(不常用)：自定义属性名、属性值
自定义数据属性(微信小程序常用):

1. 用于存储页面、应用程序的私有自定义数据
2. 书写：data-xxx(xxx:自定的属性名，至少包含一个字符，data-为必须)
3. 属性值：任何字符串