HTML中的链接:
HTML 可以使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签 <a>
来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。在标签<a>
中使用href
属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
备注:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
链接的 HTML 代码,类似这样:<a href="url">链接文本</a>
,
“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的超链接示例</title>
</head>
<body>
<p>
<a href="https://blog.csdn.net/qq_51735681?spm=1000.2115.3001.5343">尤里卡的CSDN主页</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="//www.baidu.com/">百度主页</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
以上代码运行以后产生的结果如下图:
以上的“尤里卡的CSDN主页”和“百度主页”都是超链接的入口,鼠标点击就可以进入相应的页面。
(-----------------------------------分割线------------------------------------)
超链接中 target 属性:
使用 target 属性,你可以定义被链接的文档在何处显示。
例如,以下这个案例会在新窗口打开文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试target属性</title>
</head>
<body>
<a href="https://www.taobao.com/" target="_blank">访问淘宝网!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
以上代码运行以后产生的结果如下图:
出现上述界面以后,当用鼠标点击“访问淘宝网!”这个按钮的时候,浏览器会在新窗口打开淘宝网主页。
(-----------------------------------分割线------------------------------------)
链接中的id
属性:
id
属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示,对于读者来说是隐藏的。
使用id进行定位的代码格式如下:
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id=“tips”)":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id=“tips”)":
<a href="https://blog.csdn.net/qq_51735681?spm=1011.2124.3001.5343#tips">
访问有用的提示部分</a>
例如,以下案例会在网页中通过id定位一个文档书签标记:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在当前页面链接到指定位置</title>
</head>
<body>
<p>
<a href="#C8">查看章节 8</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 4</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C8">章节 8</a></h2>
<p>这边显示该章节的内容……</p>
</body>
</html>
以上代码运行结果如下图所示:
当鼠标点击“查看章节8”的时候,页面位置会自动跳转到’章节8‘ 。
(-----------------------------------分割线------------------------------------)
通过链接跳出框架:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跳出框架示例</title>
</head>
<body>
<p>跳出框架?</p>
<a href="https://www.csdn.net/?spm=1018.2226.3001.5359"_top">点击这里!</a>
</body>
</html>
以上代码运行结果如下图:
用鼠标点击”点击这里!“就可以让当下的页面直接跳转到CSDN主页。
(-----------------------------------分割线------------------------------------)
创建电子邮件链接方式1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建电子邮件链接</title>
</head>
<body>
<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
</body>
</html>
以上代码运行结果如下图:
点击”发送邮件“便可以打开邮件编辑界面。
(-----------------------------------分割线------------------------------------)
创建电子邮件链接方式2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建电子邮件链接</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>
</body>
</html>
以上代码运行结果如下图:
点击”发送邮件“便可以打开邮件编辑界面。
备注:以上提供了两个创建电子邮件链接的方法,两个方法,功能一样,只是第二个相对复杂一些。