吴裕雄--天生自然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 ...
随机推荐
- C++构造函数概念作用
作用: 对对象进行初始化,如给成员变量赋初值,而不用专门再写初始化函数. 防止有些对象没被初始化就使用,导致程序出错. 要求: 名字与类名相同,可以有参数,但不能有返回值(void也不行) 编译时: ...
- share团队冲刺3
团队冲刺第三天 昨天:完成了对输出文字,按钮控件的添加,能够将其在模拟器上运行 今天:学习输入的添加方式 问题:Android resource linking failed 在改变按钮样式的时候,出 ...
- jq监控滑动
$(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height( ...
- 集成通用Mapper
通用Mapper集成 1.引入jar包 <mapper.version>3.0.1</mapper.version><persistence-api.version> ...
- MyBatis从入门到精通(第9章):Spring集成MyBatis(上)
MyBatis从入门到精通(第9章):Spring集成MyBatis(上) Spring是一个为了解决企业级Web应用开发过程中面临的复杂性,而被创建的一个非常流行的轻量级框架. mybatis-sp ...
- sqlserver 数据库分组后取第一条数据
分享一个朋友的人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助,点击查看教程. 比如查询用户某一天最后一笔交易后的账户余额 SELECT *( SELECT *, row_num ...
- UVa202
刚刚开始写的适合感觉是转换成字符然后开始遍历一遍,后面发现各种不行,就回去看了看题目,重新构思,写了好久还是WA,最后只能看下大神的操作(我太菜了). 先简单梳理下题目意思:首先给出两个数,然后这两个 ...
- maven 设置pom 指定jdk版本
<profile> <id>jdk-1.8</id> <activation> <activeByDefault>true</acti ...
- iOS之input file调用相册控制器消失跳转到登陆页
最近在做一个app要用到H5,其中有一个需求是要点击H5的的控件弹出系统相册,通过在H5的input file 中定义<input type="file" class=&qu ...
- DRF认证、自定义认证和权限、自定义权限
源码分析 """ 1)APIView的dispath(self, request, *args, **kwargs) 2)dispath方法内 self.initial( ...