超链接
来源:互联网 发布:seo编辑器 编辑:程序博客网 时间:2024/05/01 11:59
概念
超链接是网页互连的核心,网页之间通过超链接连接在一起。
我们使用<a> 标签定义超链接。
一个简单的例子如下:
- <ahref="https://baidu.com>百度搜索</a>
点击a元素内容后打开百度搜索网页。
其中,href属性指定了超链接的目标,本例中即跳转到百度。
属性
href 属性
href 属性是超链接最重要的属性,它用于指定超链接目标的 URL。
典型的超链接格式如下:
- <ahref="URL">
其中,目标URL有三种类型:
- 锚 URL (anchor URL):指向同一页面内某一位置;
- 相对 URL (relative URL):指向同一网站的不同文件;
- 绝对 URL (absolute URL):指向另一个网站。
提示:
- URL:Uniform Resource Locator,统一资源定位器。
- 为什么叫作锚 URL呢?
锚的含义取于船上的锚,船把锚沉在水底后,如果船随水飘移了,只要一拉锚的锁链就会回到抛锚的位置。同样的,在html中点锚链接就能回到指定位置。这三种链接实际效果是如何的呢?下面让我们通过三组实例来加深理解。
锚 URL 实例:创建网页内导航
- <body>
- <h1>HTML 入门</h1>
- <h2>本页目录</h2>
- <ul>
- <li><ahref="#toc1">简介</a></li>
- <li><ahref="#toc2">第1关</a></li>
- <li><ahref="#toc3">第2关</a></li>
- </ul>
- <h2id="toc1">简介</h2>
- <p>HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
- 在CSS(Cascading Style Sheets,级联样式表单)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
- <h2id="toc2">第1关</h2>
- <p>初识HTML:简单的Hello World网页</p>
- <h2id="toc3">第2关</h2>
- <p>HTML链接:带超链接的网页</p>
- <hr>
- <p><ahref="#">回到顶部</a></p>
- </body>
显示和操作效果如下:
其中第5行:
- <ahref="#toc1">简介</a>
定义了一个指向#toc1目标的锚链接。所以,点击之后会定位到第10行:
- <h2id="toc1">简介</h2>
id属性值为toc1的位置。
所以,完整的一对页面内导航的写法为:
<a href="#id值内容">简介</a>
<开始标签 id="id值内容">内容<结束标签>
此外,当href="#"时,默认回到网页顶部位置。
相对 URL 实例:跳转到同一网站的另一个网页
- <body>
- <h2>主页</h2>
- <h3>网站导航:</h3>
- <ul>
- <li><ahref="./home.html">主页</a></li>
- <li><ahref="./blog.html">博客</a></li>
- <li><ahref="./project.html">项目</a></li>
- <li><ahref="./about.html">关于我</a></li>
- </ul>
- </body>
显示和操作效果如下:
在上述例子中,因为home.html、blog.html、project.html和about.html均在同一文件夹中;所以第6行:
- <ahref="./blog.html">博客</a>
./blog.html链接到了同一文件夹中的blog.html页面。
我们说的相对URL是相对于什么呢?
是相对于当前网页home.html路径的URL。.代表当前路径,所以./blog.html代表当前路径下的blog.html网页。绝对 URL 实例:跳转到另一网页
- <body>
- <p>你可以使用搜索引擎,例如
- <ahref="https://www.google.cn"title="google搜索">Google</a>、
- <ahref="https://www.baidu.com"title="Baidu搜索">Baidu</a>、
- <ahref="https://www.bing.com"title="bing搜索">Bing</a>等,搜索网络信息。</p>
- </body>
显示和操作效果如下:
绝对URL即指定了完整的网页路径。
发送电子邮件
我们还可以将href属性值设置为mailto:邮箱地址,这样做可以调起邮箱应用,发送邮件到对应地址。
例如:
- <p>发送邮件到:<ahref="mailto:someone@email.com">someone</a>
target 属性:在何处打开链接
target属性规定了在何处打开超链接。
一个常用的例子如下:
- <p><ahref="https://en.wikipedia.org/wiki/HTML"target="_blank">HTML</a>
其中,我们指定了target="_blank",所以在点击之后,将在新标签中打开链接。
任务要求
请在右侧的编辑器中直接编辑修改HTML页面,具体要求是:
- 补全第17行href属性值和第27行id属性值,使得点击第一关和第2关之后,可以导航到相应内容位置;
- 为第22、23和24行的的三个<a>标签添加target属性,使得链接在新标签中打开;
- 完善第32行<a>标签,使得邮箱链接起作用;
- 完善第33行<a>标签,使得点击回到顶部之后,可以导航到页面顶部。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML链接</title>
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML, Link">
</head>
<body>
<h1>HTML 入门</h1>
<h2>本页目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
<li><a href="#toc2">第1关</a></li>
<li><a href="#toc3">第2关</a></li>
</ul>
<h2 id="toc1">简介</h2>
<p>
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets,级联样式表单)和
<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
<p>自1995年HTML2.0面世,HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准,2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升,使HTML迎来了新的爆发式发展。</p>
<h2 id="toc2">第1关</h2>
<p>初识HTML:简单的Hello World网页</p>
<h2 id="toc3">第2关</h2>
<p>HTML链接:带超链接的网页</p>
<hr>
<p>若需帮助,请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
<p><a href="#">回到顶部</a></p>
</body>
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 超链接
- 什么是超链接?超链接是什么意思?
- 解决no model named:cv2
- 欢迎使用CSDN-markdown编辑器
- 新架构数据库.db查看方式(原创) 及Linux sqlite3基本命令(转载)
- 【离散数学】1.3集合的运算
- pinyin4j汉字转拼音处理多音字的问题【重庆(zhongqing)】
- 超链接
- [水文]FCIS : Fully Convolutional Instance-aware Semantic Segmentation
- Sticks
- zookeeper
- Heartbeat和Keepalived创建VIP的区别
- 牦牛王项目第一步
- 如何根据不同运营商情况或者数据状态默认不同的主页
- transient关键字
- List集合简单总结