HTML学习笔记4——超链接

最新推荐文章于 2024-08-17 14:58:02 发布

松光鱼

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量366

点赞数 9

分类专栏： HTML 文章标签： html 学习笔记前端

本文链接：https://blog.csdn.net/qq_68268403/article/details/136806157

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了超文本的概念，重点讲解了超链接的语法，包括文本链接和锚链接的使用方法，以及HTML代码示例，展示了如何在网页中实现超链接功能。

摘要由CSDN通过智能技术生成

超链接

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以连接到其他位置或者文档的链接，允许从当前阅读位置直接切换到超文本链接所指向的位置。

语法

<a href="跳转到的地方（可以直接复制相应页面的网址）">文字图片等</a>
<!-- “文字图片等”在网页中被点击后可以跳转到相应的地方，也就是超链接跳转的入口 -->
<!-- 文字直接输入就可以，图片要将整个图片标签放进去 -->

示例

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 点击文字 -->
    <a href="https://baike.baidu.com/item/HTML/97049?fr=ge_ala">点我跳转</a>
    <!-- 点击图片（图片所对应路径一定要正确） -->
    <a href="https://baike.baidu.com/item/HTML/97049?fr=ge_ala"><img src="img\2024-03-11 190559.png" alt="草莓熊" width="450" height="300"/></a>
</body>
</html>

锚链接

锚链接实际上就是链接文本，又叫锚文本。可以理解为：带有文本的超链接，就叫锚链接。锚文本可以作为文本链接所在的页面的内容的评估。从当前页点击内容可以跳转到指定位置。例如浏览页面中的回到首页之类的。

语法

<p id="1234">要跳转到的点</p>
<a href="#1234">点击点</a>

代码示例

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>666</h1>
    <!-- 要跳转到的如下 (777)-->
    <h1 id="1234">777</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <h1>666</h1>
    <a href="#1234">点击点</a>
</body>
</html>

效果展示

松光鱼

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML学习笔记4——超链接

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以连接到其他位置或者文档的链接，允许从当前阅读位置直接切换到超文本链接所指向的位置。锚链接实际上就是链接文本，又叫锚文本。可以理解为：带有文本的超链接，就叫锚链接。锚文本可以作为文本链接所在的页面的内容的评估。从当前页点击内容可以跳转到指定位置。例如浏览页面中的回到首页之类的。
复制链接

扫一扫