前端第二章:8.HTML超链接代码写法;id属性

前端第二章:8.HTML超链接代码写法;id属性一、超链接介绍0.超链接是行内元素,但是可以放块元素1.从一个页面跳转到另一个页面2.或者跳转到当前页面的其他位置3.href属性的值可以是外部网站,也可以是同一个目录下的地址文件,如xxx.html二、超链接·代码1.超链接写法:<ahref=”你想要跳转到的网址”>超链接的字样</a>2.示例(外部网站和同一个目录下的html都可以写进href名值对结构中):3.浏览器内显示(紫色字样表示你最近访问过,蓝色代表没有访问过):4.

大家好,又见面了,我是你们的朋友全栈君。

一、超链接介绍

0.超链接 是 行内元素,但是可以放 块元素
1.从一个页面跳转到另一个页面
2.或者跳转到当前页面的其他位置
3.href 属性的值可以是 外部网站,也可以是同一个目录下的地址文件,如 xxx.html

二、超链接·代码

1.超链接写法:

<a href="你想要跳转到的网址"> 超链接的字样 </a>

2.示例(外部网站 和 同一个目录下的html 都可以写进href名值对结构中):
在这里插入图片描述

3.浏览器内显示(紫色字样表示你最近访问过,蓝色代表没有访问过):
在这里插入图片描述
4.访问一下同一目录下的 hello.html 页面吧!
在这里插入图片描述

三、超链接名值对 target · 代码

1.在当前界面打开超链接(target名值对默认值)

<a href="你想要跳转到的网址" target="_self"> 超链接的字样 </a>

2.在新标签页打开超链接

<a href="你想要跳转到的网址" target="_blank"> 超链接的字样 </a>

四、超链接回到当前页面顶部 · 代码

1.当阅览比较长的文章时,可以通过一个超链接直接回到当前页面顶部

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

2.页面效果(点击就会回到顶部)
在这里插入图片描述

五、id属性 · 代码

0.id 应该是字母开头

1.id属性有点类似于 goto,是一个可以定位的 goto

2.我们能够给一个元素添加id属性,但是一个html文件中,id值不能重复(而且id属性区分大小写)

3.我们几乎能给任何一个标签添加 id属性,示例:
在这里插入图片描述

4.跳转到 指定id 的位置(靠这个我们能跳转到当前页面的任何位置!goto万岁):

<a href="#标签名">超链接的名称</a>

六、什么都不会做的超链接 · 代码

1.也许是个有用的功能吧… 也许…
2.下面的代码可以保证你点击超链接之后什么都不会发生:

<a href="javascript:;">超链接的名字</a>

七、超链接·易错点

1.超链接元素内 不能嵌套 超链接本身
2.在写代码时不要忘记超链接中间的 标签体!否则你会在网页中看不见超链接
3.href 名值对的值可以使用 相对路径进行访问,写法和 linux 中一样

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158327.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 活动图求最少时间和松弛时间

    活动图求最少时间和松弛时间一、介绍PERT(Program/ProjectEvaluationandReviewTechnique)即计划评审技术,PERT是利用网络分析制定计划以及对计划予以评价的技术。构造PERT图,需要明确四个概念:事件、活动、松弛时间和关键路线。1、事件(Events)表示主要活动结束的那一点;2、活动(Activities)表示从一个事件到另一个事件之间的过程;3…

    2022年5月30日
    38
  • 【Android XMPP】 学习资料收集贴(持续更新)

    【Android XMPP】 学习资料收集贴(持续更新)

    2021年12月10日
    45
  • sql报错未明确定义列_人的基本定义

    sql报错未明确定义列_人的基本定义当数据库根据字段名无法确定具体哪一列时,就会报未明确定义列的错误。如表中有相同的字段,然后要查询此表的重复的某一字段就会报未明确定义列的错误。有时候,一个sql语句没错,但根据sql语句执行的子表查询,就很有可能报错。selectt1.*fromt1;上例中的“sql语句”,可能会有重复的字段,sql语句没错,但像上例它作为子表查询的时候就会报未明确定义列的错误selectt.*from(selectt1.a,t1.afromt1)t…

    2022年10月5日
    3
  • Dart sdk 安装

    Dart sdk 安装DartSDK安装1、下载DartSDK安装包DartSDK安装包网址:https://gekorm.com/dart-windows/其中有两个可选择项,一个是稳定版本一个是最新的版本,二者选其一我们选择稳定的版本即stable版本下载完成并点击运行安装中点击finish,安装完成2、在控制台中检验是否安装成功若出现版本号则安装成功…

    2025年7月10日
    7
  • 聊天室源码_h5聊天室源码

    聊天室源码_h5聊天室源码http://zhidao.baidu.com/question/33926814.html?fr=qrl&fr2=query

    2025年8月11日
    3
  • Python爬虫从入门到精通——爬虫基础(一):爬虫基本原理[通俗易懂]

    分类目录:《Python爬虫从入门到精通》总目录我们可以把互联网比作一张大网,而爬虫便是在网上爬行的蜘蛛。把网的节点比作一个个网页,爬虫爬到这就相当于访问了该页面,获取了其信息。可以把节点间的连线比作网页与网页之间的链接关系,这样蜘蛛通过一个节点后,可以顺着节点连线继续爬行到达下一个节点,即通过一个网页继续获取后续的网页,这样整个网的节点便可以被蜘蛛全部爬行到,网站的数据就可以被抓取下来了。简单…

    2022年4月16日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号