吴裕雄--天生自然HTML学习笔记:HTML 链接
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接(链接)
HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下,链接将以以下形式出现在浏览器中: 一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样: <a href="url">链接文本</a>
href 属性描述了链接的目标。
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档: 实例
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。 提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。 实例
在HTML文档中插入ID: <a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")": <a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")": <a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a> 基本的注意事项 - 有用的提示
注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="https://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="https://www.runoob.com/html/"。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>
<a href="#C4">查看章节 4</a>
</p> <h2>章节 1</h2>
<p>这边显示该章节的内容……</p> <h2>章节 2</h2>
<p>这边显示该章节的内容……</p> <h2>章节 3</h2>
<p>这边显示该章节的内容……</p> <h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p> <h2>章节 5</h2>
<p>这边显示该章节的内容……</p> <h2>章节 6</h2>
<p>这边显示该章节的内容……</p> <h2>章节 7</h2>
<p>这边显示该章节的内容……</p> <h2>章节 8</h2>
<p>这边显示该章节的内容……</p> <h2>章节 9</h2>
<p>这边显示该章节的内容……</p> <h2>章节 10</h2>
<p>这边显示该章节的内容……</p> <h2>章节 11</h2>
<p>这边显示该章节的内容……</p> <h2>章节 12</h2>
<p>这边显示该章节的内容……</p> <h2>章节 13</h2>
<p>这边显示该章节的内容……</p> <h2>章节 14</h2>
<p>这边显示该章节的内容……</p> <h2>章节 15</h2>
<p>这边显示该章节的内容……</p> <h2>章节 16</h2>
<p>这边显示该章节的内容……</p> <h2>章节 17</h2>
<p>这边显示该章节的内容……</p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>跳出框架?</p>
<a href="//www.runoob.com/" target="_top">点击这里!</a> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p> <p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>
这是另一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p> <p>
<b>注意:</b> 单词之间的空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p> </body>
</html>
吴裕雄--天生自然HTML学习笔记:HTML 链接的更多相关文章
- 吴裕雄--天生自然HADOOP学习笔记:hadoop集群实现PageRank算法实验报告
实验课程名称:大数据处理技术 实验项目名称:hadoop集群实现PageRank算法 实验类型:综合性 实验日期:2018年 6 月4日-6月14日 学生姓名 吴裕雄 学号 15210120331 班 ...
- 吴裕雄--天生自然 oracle学习笔记:oracle理论学习详解及各种简单操作例子
1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...
- 吴裕雄--天生自然HADOOP学习笔记:基本环境配置
实验目的 学习安装Java 学习配置环境变量 学习设置免密码登陆的方法 掌握Linux环境下时间同步的配置 实验原理 1.Java的安装 java是大数据的黄金语言,这和java跨平台的特性是密不可分 ...
- 吴裕雄--天生自然HADOOP学习笔记:使用yum安装更新软件
实验目的 了解yum的原理及配置 学习软件的更新与安装 学习源代码编译安装 实验原理 1.编译安装 前面我们讲到了安装软件的方式,因为linux是开放源码的,我们可以直接获得源码,自己编译安装.例如: ...
- 吴裕雄--天生自然HADOOP学习笔记:Shell工具使用
实验目的 学习使用xshell工具连接Linux服务器 在连上的服务器中进入用户目录 熟悉简单的文件操作命令 实验原理 熟悉shell命令是熟悉使用linux环境进行开发的第一步,我们在linux的交 ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL UPDATE 更新
如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL 插入数据
MySQL 表中使用 INSERT INTO SQL语句来插入数据. 可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 以下为向MySQL数据表插入数据通 ...
- 吴裕雄--天生自然python学习笔记:python 用pyInstaller模块打包文件
要想在没有安装 Python 集成环境的电脑上运行开发的 Python 程序,必须把 Python 文件打包成 .exe 格式的可执行 文件. Python 的打包工作 PyInstaller 提供了 ...
- 吴裕雄--天生自然python学习笔记:python 用pygame模块动画一让图片动起来
动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...
- 吴裕雄--天生自然python学习笔记:python 文件批量查找
在多个文本文件中查找 我们首先来学习文本文件的查找字符 . 我们通过 os.walk 扩大查找范围, 查找指定目录和子目录下的文件. 应用程序总览 读取 当 前目录及子目录下的所有 PY 和 txt ...
随机推荐
- TF利用分布式队列控制线程
假设分布式任务包含n个ps节点, m个worker节点. m, n>0. 希望所有worker的任务结束后,所有节点才终止. 方法: 借助队列tf.FIFOQueue实现. 原理: tf.FIF ...
- 半监督的GAN算法
ImprovedGAN $ Loss = Loss_{supervised} + \lambda * Loss_{unsupervised} $ 第二项形式与原始的GAN模型类似. 参考: Imp ...
- spring-boot 如何加载rsources下面的自定义配置文件
spring-boot 如何加载resources下面的自定义配置文件 https://segmentfault.com/q/1010000006828771?_ea=1144561
- nginx中rewrite flag
rewrite 正则表达式 新URI [flag]; [flag] 选项用于调控重写的行为,它的取值可能是: last:重写完成后,会停止继续处理当前区块所有属于ngx_http_rewrite ...
- luffy项目:基于vue与drf前后台分离项目(1)
""" 1.业务逻辑:登录注册 - 主页(基础信息展示) - 课程页(复杂信息展示)- 课程订单生产与支付 - 上线订单生成 2.实际项目开发的技术点: git版本控制 ...
- IDEA 安装破解
打开IntelliJ IDEA的官网. https://www.jetbrains.com/idea/download/#section=windows 开始安装吧!傻瓜式安装,不多说 激活 ...
- StartDT AI Lab | 需求预测引擎如何助力线下零售业降本增效?
在当下经济明显进入存量博弈的阶段,大到各经济体,小到企业,粗放的增长模式已不适宜持续,以往高增长的时代已经成为过去,亟需通过变革发掘新的增长点.对于竞争激烈的线下零售行业而言,则更需如此. 零售行业一 ...
- maven中scope属性有哪些
compile,缺省值,适用于所有阶段,会随着项目一起发布. provided,类似compile,期望JDK.容器或使用者会提供这个依赖.如servlet.jar. runtime,只在运行时使用, ...
- 16)PHP, set_include_path
代码展示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 吴裕雄--天生自然 pythonTensorFlow图形数据处理:将MNIST手写图片数据写入TFRecord文件
import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_dat ...