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”便会出现。
最新文章
- yii 初步安装
- 遮罩、警告框/弹框 - EasyUI
- sql compact 使用EF无法更新的问题?
- iOS学习之UITableView
- 图解向hadoop分布式文件系统写文件的工作流程
- Linux 中 sudo、su命令
- mac 安装Beautiful Soup
- “一切都是消息”--MSF(消息服务框架)之【请求-响应】模式
- DRC错误解决办法
- 使用ML.NET + ASP.NET Core + Docker + Azure Container Instances部署.NET机器学习模型
- 深入理解Java虚拟机(第二版)中《长期存活对象将进入老年代》的实践
- Linux官方源、镜像源汇总
- C#设计模式之十九策略模式(Stragety Pattern)【行为型】
- wsdl 生成 java 代码 java 使用CXF将wsdl文件生成客户端代码命令java调用第三方的webservice应用实例 推荐使用, 并且设置了 utf8
- 《ProgrammingHive》阅读笔记-第二章
- 分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计
- 在HashTable上下文中,同步指的是什么?
- 脱壳系列—— 揭开so section加密的美丽外衣
- 如何学好Java大数据并快速提升
- wxpython 窗口排版- proportion/flag/border参数说明