Web前端速成(Html+Css+JavaScript+jQuery)-6.链接

乐地课堂

已于 2023-06-11 00:54:36 修改

阅读量98

点赞数

分类专栏：前端开发文章标签：前端 html css javascript jquery

于 2023-05-05 22:08:55 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130516079

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

内容摘要：
- 详细介绍超文本链接标签 a。

6.链接

知识点：

HTML使用标签 <a>来设置超文本链接。

属性	描述	实例
href	描述链接的地址	<a href=“https://www.baidu.com/”>跳转到百度</a>
target	定义被链接的文档在何处显示	属性值: _self: 本窗口中打开，是默认目标 _blank: 新窗口中打开 _parent: 父窗口。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。 _top: 将会清除所有被包含的框架并将文档载入整个浏览器窗口例如: <a href=“https://www.baidu.com/” target=“_blank” >在新窗口打开文档</a>
id	创建一个 HTML 文档书签	<a id=“go”>创建一个 HTML 文档书签</a> <a href=“#go”>访问文档书签</a> <a href=“https://www.baidu.com/html/test.html#go”>访问有用的提示部分</a>

运用例子：

备注：请亲自动手模仿着输入代码，在反复练习熟悉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 链接标签</title>
</head>
<body>
    <p>创建图片链接:
        <a href="https://www.baidu.com">
        <img  border="10" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="HTML 教程" width="32" height="32"></a>
    </p>

    <p>无边框的图片链接:
        <a href="https://www.baidu.com">
        <img border="0" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="HTML 教程" width="32" height="32"></a>
    </p>

    <p>
        在当前页面链接到指定位置:
        <a href="#P6">查看段落 6</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><a id="P6">段落 6</a></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>

    <p>跳出框架</p> 
        <a href="https://www.baidu.com/" target="_top">点击这里!</a> 
    <p>
        一个电子邮件链接：
        <a href="mailto:demo@example.com?Subject=Hello" target="_top">
        发送邮件</a>
    </p>

    <p>
        另一个电子邮件链接：
        <a href="mailto:demo@example.com?cc=demoelse@example.com&bcc=anddemoelse@example.com&subject=My%20mothery&body=I%20hope%20you%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
    </p> 

    <p>
        <b>备注:</b> 空格使用 %20 代替。
    </p>

</body>
</html>