超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其它位置。

语法：使用 a 标签定义超链接

href属性，指定跳转的目标路径

  • 值可以是一个外部网站的地址
  • 也可以是一个内部页面的地址

target属性，指定超链接打开的位置

  • self 默认值，在当前页面中打开超链接
  • blank 在一个新的页面中打开超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 
        超链接也是一个行内元素，在 a 标签内可以嵌套除它自身外的任何元素
        蓝色的超链接指已经访问过的超链接，紫色的超链接指未访问过的超链接 
    -->
    <a href="https://www.baidu.com" target="blank">百度</a>
    <a href="path/相对路径.html">相对路径</a>
    <!-- 可以使用javascrip:;作为超链接的属性，此时点击这个超链接什么都不会发生 -->
    <a href="javascrip:;">这是一个新的超链接</a>
    <a href="#bottom">去底部</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus accusamus aut enim ullam rerum dolorum recusandae veritatis. Culpa, consectetur repellendus aut suscipit illo similique libero soluta nostrum nihil molestiae!</p>
    
    <!-- 
        可以将超链接的href属性设置为#，点击后页面不会跳转，而是转到当前页面的顶部
        可以跳转到页面的指定位置，只需将href属性设置为 #目标元素的id属性值
        id属性(唯一不重复的)，区分大小写，应以字母开头
            - 每一个标签都可以添加一个id属性
            - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
     -->
    <a href="#" id="bottom">回顶部</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对路径</title>
</head>
<body>
    <!-- 
        相对路径一般都会使用.或..开头
            ./  表示当前文件所在的目录，一般可以省略不写
            ../ 表示上级目录
     -->
    <a href="../超链接.html">超链接</a>
</body>
</html>

注意：相对路径.html位于path文件夹下，而path文件夹与超链接.html处于同一级文件夹中