HTML学习笔记6----链接
随笔记录方便自己和同路人查阅。
#------------------------------------------------我是可耻的分割线-------------------------------------------
如何做链接？
做链接也是通过元素（element）实现的。 做链接只需一个元素和一个属性就行了。下面是一个例子，它是一个指向 chinahtml.com 的链接：
例1：
<a href="http://url.cn/OHnOmN/">这是一个指向 url.cn/OHnOmN的链接</a>
该例在浏览器中将显示如下：
这是一个指向 url.cn/OHnOmN 的链接
元素 a 代表“链接（anchor）”；属性 href 代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。
在上例中，属性 href 的值为“http://url.cn/OHnOmN”，这是url.cn/OHnOmN 网站的完整地址，也被称作URL（统一资源定位符）。注意，在URL 里必须包含“http://” 。 “这是一个指向chinahtml.com 的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上 </。
如何在同一网站的网页之间添加相互链接？
如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整 URL 。举个例子，假如你有两个网页（比如说 page1.htm 和 page2.htm ），而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样，page1.htm 到 page2.htm 的链接将。如下所示：
例2：
<a href="page2.htm">点击这里转到第2页</a>
如果 page2.htm 被放在下一级文件夹中（比如“subfolder”），那么链接将是这样：
例3 3：
<a href="subfolder/page2.htm">点击这里转到第2页</a>
反过来，从 page2.htm（在下级文件夹中）到 page1.htm 的链接将是这样：
例4：
<a href="../page1.htm">转到第1页</a>
“../”代表当前位置（即该链接所在文件所处的文件夹）的上一级文件夹。同理，当前位置的上上级文件夹可用“../../”表示。明白其中的规则了吗？当然，如果给出完整 URL 也行。
如果要在一个网页内做链接怎么办呢？
你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录，在其中列出指向下面各章的链接。这可以通过使用 id 属性和“#”符号来实现。用 id 属性标出要被指向的元素。例如：
<h1 id="heading1">标题1</h1>
然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个 id 属性的值，表明链接指向该 id 属性被定义的地方。例如：
<a href="#heading1">转到标题1</a>
来看一个例子就明白了：
例5：
<html>
<head>
</head>
<body>
<p><a href="#heading1">转到标题1</a></p>
<p><a href="#heading2">转到标题2</a></p>
<h1 id="heading1">标题1</h1>
<p> 一 些 文 字 。。。。 </p>
<h1 id="heading2">标题2</h1>
<p> 一 些 文 字 。。。。 </p>
</body>
</html>
该例在浏览器中将显示如下（你可以试试看点击这两个链接）：
除了网页，链接还能指向什么？
你还可以为 e-mail 地址做链接，方法跟为网页做链接差不多：
例6：
<a href="mailto:nobody@chinahtml.com">给 nobody@chinahtml.com 发电子邮件</a>
该例在浏览器中将显示如下：
与指向网页的链接的唯一区别在于：指向 e-mail 地址的链接必须以 mailto: 开头，然后紧接着写 e-mail 地址。当点击这个链接的时候，缺省的 e-mail 程序将新建一封邮件，其中的收件人地址为链接中指定的 e-mail 地址。注意：这一功能仅当你的计算机安装了 e-mail 程序后才起作用。试试看吧！
有其他我需要知道的属性吗？
创建链接总要用到 href 属性。另外，你也可以在链接上使用 title 属性：
例7：
<a href="https://www.cnblogs.com/lirongyang/" title="上博乐园学习 HTML">博乐园</a>
该例在浏览器中将显示如下：
#------------------------------------------------我是可耻的分割线-------------------------------------------
title 属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上（别点击它）时 ， 提示文字“上博乐园学习 HTML”便会出现。
HTML学习笔记6----链接的更多相关文章
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- nodejs学习笔记二——链接mongodb
a.安装mongoose库用来链接mongodb数据库 安装mongodb数据库参考mongodb安装 前言(怨言) 本来是想安装mongodb库来链接mongodb的,命令行到nodejs工程目录: ...
- 3.3html学习笔记之链接
iframe 元素会创建包含另外一个文档的内联框架 <iframe src=""/> 跳转链接 <a href="#here" target= ...
- Python学习笔记9-Python 链接MySql数据库
Python 链接MySql数据库,方法很简单: 首先需要先 安装一个MySql链接插件:MySQL-python-1.2.3.win-amd64-py2.7.exe 下载地址:http://dev. ...
- JZ2440学习笔记之链接文件lds
如果在Linux环境下用arm-linux-gcc来编译arm程序,需要编写链接文件lds: 1. 运行地址=链接地址,表示代码在SDRAM中执行的地址,如果程序中有对某部分代码执行过搬运,需要在ld ...
- Linux运维学习笔记-软硬链接知识总结
文件链接 硬链接,通过索引节点来进行链接 硬链接原理图 硬链接的创建: 直接执行命令“ln 源文件 硬链接文件”,即可完成创建硬链接. 硬链接知识小结: 1.具有相同Inode节点号的多个文件是互 ...
- Linux学习笔记 -- 硬链接与软连接（转）
原文地址: http://www.cnblogs.com/itech/archive/2009/04/10/1433052.html Linux链接概念 Linux链接分两种,一种被称为硬链接(Har ...
- HTML学习笔记——锚链接、pre标签、实体
1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- EF学习笔记（八）：更新关联数据
学习笔记主目录链接:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上一篇链接:EF学习笔记(七):读取关联数据 本篇原文链接:Updating Related Data 本篇主要考 ...
- Cocos2d-x 学习笔记(19) Control Invocation
[Cocos2d-x 学习笔记 目录链接] 1. 简介 control为其子类提供了touch回调函数,当子类触发EventType相关事件时,会调用相关的回调函数. control对象接收到的事件类 ...
随机推荐
- 06 RDD编程
总共有多少学生?map(), distinct(), count() 开设了多少门课程? 每个学生选修了多少门课?map(), countByKey() 每门课程有多少个学生选?map(), coun ...
- How to Use Arrays and Vectors
array it needs a constant value const int seq_size = 18; int pell_seql[seql_size]; //defined a const ...
- 微信小程序tabBar不显示的问题
刚刚入门 随便试吧了几个小功能.在用到tabBar时,在未出现代码错误的情况下,tabBar不显示 后来改了改发现是打开的首页并没有包含在tabBar列表里.
- elements-plus 自动导入
elements-plus 自动导入(官网推荐导入方式) 根据官网安装依赖 npm install -D unplugin-vue-components unplugin-auto-import 配置 ...
- csp201503-2（数字排序）
问题描述 给定n个整数,请统计出每个整数出现的次数,按出现次数从多到少的顺序输出. 输入格式 输入的第一行包含一个整数n,表示给定数字的个数. 第二行包含n个整数,相邻的整数之间用一个空格分隔,表示所 ...
- e-flow归档流程如何修改附件
OQ有时候要把CRB流程中已结束的单子替换一个附件,来应付客户的Audit.到后台CRB库中的admin for change,找到那张单子替换其中的值,变成在流转中的状态,就可以替换附件了. 其他流 ...
- 浅谈flume
flume做日志收集的工具,将数据源导入到指定目标中.flume之间可以相互连接组件 source:如何从数据源中取数据,可以认为是两种主动source(主动取数据)和被动source(推给so ...
- python调用golang代码
一.调用步骤: 将go代码编译成so库 -> python中通过ctypes引用so库并指定需要调用的函数(同时可指定传入参数类型和返回值类型) -> 指定后按python使用函数方式调用 ...
- CentOS 7 忘记root密码的解决方法
这是自己忘记密码root密码第二次了,可以再一再二但是不能再三.因此在此记录在网上找的 如何更换root密码的方法. (这篇文章是参考https://blog.csdn.net/q290994/art ...
- 使用vue渲染大量数据时应该怎么优化？
Object.freeze 适合一些 big data的业务场景.尤其是做管理后台的时候,经常会有一些超大数据量的 table,或者一个含有 n 多数据的图表,这种数据量很大的东西使用起来最明显的感受 ...