美文网首页
7、a标签

7、a标签

作者: 小黄不头秃 | 来源:发表于2022-05-24 00:06 被阅读0次

一、超链接的作用

超链接是一个行内元素
超链接可以从一个界面跳转到另一个界面,也可以跳转到本页面的其他位置
使用a标签来定义超链接,可以嵌套除它本身外的任何元素

(1)属性href 制定跳转的目标路径
  • 可以是外部页面的地址
  • 也可以写一个内部页面的地址
(2)当我们要跳转到项目内部的页面时,一般我们要输入的是相对路径
  • ./(默认)表示当前文件的目录
  • ../表示上一级目录
(3)属性target,用来指定超链接打开的位置
  • _self:默认值,在当前页面中打开
  • _blank:在一个新的页面中打开
(4)超链接跳转到本页面的其他位置。

可以使用id进行页面锚点里面跳转。
例如:<a href="#top">去到id=“top”的标签的位置。</a>

属性id:(唯一不重复的)

  • 每一个标签都可以添加一个id属性
  • id就是一个元素的唯一标识(不能重复)

二、代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>
     <a href="https://www.baidu.com">百度</a>
     <br><br>
     <a href="http://www.2.cn"><span>linda</span></a>
     <br><br>
     <a href="test9_list.html">列表</a>
     <br><br>
     <a href="./test2.html">相对路径超链接</a>
     <br><br>
     <a href="https://www.baidu.com" target="_blank">target属性</a>
     
     <p>锚点测试</p>
     <h1 id="top">神话</h1>
     <h2>百度词条</h2>
     <br><br>
     <a href="#bottom">去到底部</a>
     <br>
     <a href="#mid">去到中间</a>
     <p>
         神话产生于人类远古时代。作为民间文学的源头之一,有力的证明了劳动人民从来就是精神文明的创造者,也揭示了民间文学从一开始就与人民的生活和历史有着密切的联系.
        神话产生于人类远古时代。作为民间文学的源头之一,有力的证明了劳动人民从来就是精神文明的创造者,也揭示了民间文学从一开始就与人民的生活和历史有着密切的联系。
        <a id="mid" href="#top">(返回)</a>
        神话作为民间文学的一种形式,是远古时代的人民所创造的反映自然界、人与自然的关系以及社会形态的具有高度幻想性的故事.
    </p>
    <a id="bottom" href="#top">回到顶部</a>
    <br>
    <p>还可以使用javascript脚本,不做任何响应。</p>
    <a href="javascript:;">nothing</a>

</body>
</html>

相关文章

  • 7、a标签

    一、超链接的作用 超链接是一个行内元素超链接可以从一个界面跳转到另一个界面,也可以跳转到本页面的其他位置使用a标签...

  • 兔子标签7⃣️

    兔子在去父亲那里的时候大约11岁吧,还是12岁记不太清楚了,但是我记得她是去那里上初中吧,那时候她还是挺稚嫩的,看...

  • 7.图片标签

  • 随记7:犯罪标签

    如果把你的案件放在学校的期末考试试卷中,答案一定是无罪。但是,理论和现实也许是有差距的。每一个案件,都是他人的人生...

  • 前端常见兼容性问题及解决方案总结

    1.html5新标签ie6,7兼容性问题 h5新标签如header,footer,section在ie6,7下不能...

  • day1-html

    1.html标签 2.文本标签 3.列表标签 4.图片标签和超链接 5.数据表格 6.复杂表格 7.作业-复杂表格...

  • VirtualBox 部署 CentOS 7

    VirtualBox 部署 CentOS 7 标签(空格分隔): VirtualBox CentOS Linux ...

  • 亲子时间管理

    【姓名】刘小桥 【坐标】苏州 【标签1】时间管理修行者 【标签2】时尚达人 【标签3】7岁宝妈 【我与时间管理】 ...

  • Xamarin.FormsShell基础教程(7)Shell项目

    Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍 轻拍标签栏中的About标签,进入...

  • centos7 安装python3.6以上版本解决openssl

    标签:centos7[https://www.icode9.com/tags-centos7-0.html],1....

网友评论

      本文标题:7、a标签

      本文链接:https://www.haomeiwen.com/subject/vbhdprtx.html