一、超链接标签的基本使用

超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的,用户通过点击超链接可以从一个网页跳转到另一个网页。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时,遇到一个不认识的英文,你只要在这个单词上单击一下,即可跳转到它的翻译页面中,看完单词的解释后点一下返回按钮,又可继续阅读,这就是超链接的常见用途。还有经常到购物网站中去,我们都是在百度搜索,然后点击对应的搜索项进入到对应的购物网站的,这也是超链接的作用。超链接的属性:

属性 描述
href 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] 规定链接的跳转目标
title 百度 链接的提示信息
target _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过

1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标。

3、本地链接指的是本地计算机的地址,一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的,不需要经过网络。

4、如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面。

二、超链接的锚点应用

锚点( anchor )是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的链接跳转,运用相当普遍。例如,我们有一个网页,由于内容太多,导致页面很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。又例如,我们页面中,有个链接需要跳转到另一个页面的中间或者脚部去,这时候也可以运用上锚点技术来解决这个问题。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a> <div id="i1">
<p>第一章内容</p>
</div>
<div id="i2">
<p>第二章内容</p>
</div>
<div id="i3">
<p> 第三章内容</p>
</div>
</body>
</html>

  

HTML——超链接标签的更多相关文章

  1. 超链接标签a样式生效,取消下划线,文字垂直(上下)居中

    直接设置超链接标签a的属性时并不会生效, 需要将display属性改为inline-block, 即style="display:inline-block" 添加标签a时,默认是有 ...

  2. html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  3. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  4. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  5. AngularJS <a> 超链接标签不起作用?

    问题描述: Angular JS app中,使用超链接标签<a href='location'>click</a> 不起作用. 解决方法: 如果你不巧配置了$locationP ...

  6. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  7. img图像标签和超链接标签a

    图像标签语法:<img src="" alt="".../> img属性:src=""  显示图像的URLalt="& ...

  8. HTML第四耍 超链接标签

    1.HTML 超链接(链接) 一.HTML 超链接 HTML中使用超级链接与网络上的另一个文档相连.几乎可以在所有的网页中找到链接.点击链接可以从一张页面跳转到另一张页面. 超链接可以是一个字,一个词 ...

  9. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  10. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

随机推荐

  1. ODBC批量merge中出现主键冲突的分析

    ODBC 批量 merge 中出现主键冲突的分析 一. 文档概括 客户某个 merge 语句运行时,发生主键冲突报错. 经分析,其原因如下: 由于 merge 语句中,ON 里的判断条件(谓词)中存在 ...

  2. docker 应用篇————容器卷[十一]

    前言 简单介绍一下容器卷. 正文 我们发现一个文件,就是什么呢? 就是说因为我们的容器一但删除那么什么都没有了. 那么如何能够不删除呢?那么可以使用容器卷. 比如说系统我们容器内的/usr 使用我们的 ...

  3. docker 应用篇————docker基本命令[四]

    前言 介绍一下一些docker的基本命令. 正文 帮助命令: 首先要学的肯定是docker --help 命令了,因为这样我们就不用经常去查官网. docker version docker info ...

  4. centos 虚拟机修改mac和ip地址

    前言 因为网上过于零散,故而整理.在此我用的是vm虚拟机. 正文 在我们安装好vm虚拟机后,我们会获得两个虚拟网卡. 那么我们获得两个虚拟网卡后,这两个网卡到底是什么呢?那么我们打开vm的虚拟网络编辑 ...

  5. lattice的ip不显示,如何解决

    最近ip服务器可能会遇到问题,建议客户把更新检查关掉.我们有对应的IP下载链接.   diamond在     https://www.latticesemi.com/ispupdate/ipexpr ...

  6. 有用的JavaScript技巧

    首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和 ...

  7. 力扣162(java&python)-寻找峰值(中等)

    题目: 峰值元素是指其值严格大于左右相邻值的元素. 给你一个整数数组 nums,找到峰值元素并返回其索引.数组可能包含多个峰值,在这种情况下,返回 任何一个峰值 所在位置即可. 你可以假设 nums[ ...

  8. 直播回顾:准确性提升到 5 秒级,ssar 独创的 load5s 指标有多硬核?| 龙蜥技术

    ​简介: 你还在为分析机器负载高而苦恼?这款 ssar 工具独创 load5s 指标精准定位超硬核. 编者按:本文整理自龙蜥SIG技术周会,作者闻茂泉,阿里云计算平台事业部SRE运维专家,是龙蜥社区跟 ...

  9. 5G 和云原生时代的技术下半场,视频化是最大最新的确定性

    ------------恢复内容开始------------ null ------------恢复内容结束------------

  10. 使用 Arthas 排查开源 Excel 组件问题

    简介: 有了实际的使用之后,不免会想到,Arthas 是如何做到在程序运行时,动态监测我们的代码的呢?带着这样的问题,我们一起来看下 Java Agent 技术实现原理. ​ 背景介绍 ​ 项目中有使 ...