HTML超链接|青训营笔记

129 阅读2分钟

这是我参与【第五届青训营】伴学笔记创作活动的第二天

  1. 超链接可以让我们从一个页面跳转到其他页面 或者是当前页面的其他位置 使用a 标签来定义超链接
    属性:
    href指定跳转的目标路径
    -值可以是一个外部网站的地址
    -也可以写一个内部页面的地址
    超链接也是一个行内元素,在a标签中可以嵌套出他自身外的任何标签。
  • <a href="http://www.baidu.com">百度</a>
  1. 相对路径 当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径 相对路径都会使用.或者..开头
    ./可以省略不写
    ./表示当前文件所在的目录
    -在这里当前页面就是相对路径.html
    ./就等于相对路径.html 所在的目录path
    ../表示当前文件所在目录的上一级目录
  • <a href="./target3.html">超链接1</a> <br><br> <a href="../列表.html">超链接2</a> <br><br> <a href="./inner/target2.html">超链接3</a> <br><br> <a href="../outer/target4.html">超链接4 </a>
    3.target属性
    target属性,用来指定超链接打开的位置
    可选值:
    _self 默认值,在当前页面中打开超链接
    _blank 在一个新的页面中打开超链接
<a href="../列表.html" target="_blank">超链接5</a>
     <br><br>


     <a href="#bottom">去底部</a>
     <a href="#p3">去第三个自然段</a>

4.补充扩展

  • 可以直接将超链接的herf 属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部位置。
    可以跳转到页面的指定位置,只需将href属性设置#目标元素的id 属性值
  • id 属性(唯一不重复的)
    -每一个标签都可以添加一个id属性
    -id属性就是元素唯一的标识,同一个页面中不能出现重复的id 属性
  • 在开发中可以将#作为超链接的路径占位符使用。
 <a href="#">这是一个新的超链接!</a>

<a id="bottom" href="#">回到顶部</a>