青少年编程与数学 01（青少年编程培训）

青少年编程与数学 01-005 超文本标记语言（HTML）10课题、链接2_1

主题概述主题要求1. HTML 链接2. URL 3. 文本链接4. 图像链接5. 锚链接6. HTML 链接- 目标属性7. HTML 链接属性

本文详细介绍了设置和使用超文本链接，包括HTML 链接中URL 的基本语法、属性和组件。解释了文本和图像链接的概念，并讨论了它们在网页设计和搜索引擎优化中的作用。还介绍了锚链接的创建和使用以及HTML链接的各种属性，例如href、target、title和rel。最后，两个实际示例展示了如何应用这些知识来创建有吸引力且实用的Web 链接。

“互联网是信息的海洋，但并不是每个人都能成为领航员。

互联网是信息的海洋，但并不是每个人都能成为领航员。

—— Tim Berners-Lee | 英国计算机科学家和万维网发明者| 1955

“在信息爆炸的时代，寻找真正有价值的知识是一门艺术。

在信息爆炸的时代，寻找真正有价值的知识是一门艺术。

—— 彼得·德鲁克| 1909-2005

“知识就是力量，但这种力量只有在分享时才会增长。

知识就是力量，但这种力量只有在分享时才会增长。

—— 史蒂夫·乔布斯| 苹果联合创始人1955-2011

“在数字时代，链接不仅是页面之间的桥梁，也是思想之间的联系。

在数字时代，链接不仅是页面之间的桥梁，也是思想之间的纽带。

—— 埃里克·施密特| 1955 年

课题摘要

本文详细介绍了设置和使用超文本链接，包括HTML 链接中URL 的基本语法、属性和组件。解释文本和图像链接的概念，并探讨它们在网页设计和搜索引擎优化中的作用。还介绍了锚链接的创建和使用以及HTML链接的各种属性，如href、target、title和rel。最后，两个实际示例演示了如何应用这些知识来创建有吸引力且实用的Web 链接。

课题要求

掌握如何使用链接元素。了解链接元素的主要属性。

如果您愿意，网页上的链接允许您跳转到它们。与纸质阅读材料只能按照指定页码翻页不同，网页可以通过链接直接打开新页面，这一功能可以让您更方便地查看网页信息。

一、HTML 链接

HTML 使用超链接连接到网络上的其他文档。

HTML 中的链接是用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一网页或资源（例如文档、图像或音频文件）相关联。

链接允许用户在查看网页时单击文本或图像跳转到不同位置，从而实现网页之间的互连。

在HTML 中，使用a 标签来设置超文本链接。

超链接是一个单词、单词、单词组或图像。单击这些内容可跳转到新文档或当前文档的特定部分。当您将鼠标指针移到网页上的链接上时，箭头会变成一只小手。使用href 属性写入链接的地址。默认情况下，链接在浏览器中显示如下：

未访问的链接以蓝色字体显示并带有下划线。

您访问的链接显示为紫色并带有下划线。

当您单击链接时，该链接将显示为红色下划线。

如果这些超链接设置了CSS 样式，则显示样式将根据CSS 设置进行显示。

HTML 链接语法

以下是在HTML 中创建链接的基本语法和属性。

a 元素：创建链接的主要HTML 元素是a（锚点）元素。 a 元素具有以下属性：

href：指定链接目标的URL。这是链接最重要的属性。这可以是另一个网页、文件或其他资源的URL。

target（可选）：指定链接在浏览器中打开的方式。常见值包括_blank（在新选项卡或窗口中打开链接）和_self（在当前选项卡或窗口中打开链接）。

标题（可选）：提供有关链接的附加信息。当您将鼠标悬停在链接上时，它通常会显示为工具提示。

rel（可选）：指定与目标的关系，例如nofollow 或noopener。

该链接的HTML 代码很简单，如下所示：

a href=\’url\’ 链接文本/a

href 属性描述了链接的目标。

二、URL

统一资源定位符(URL) 是一种标准地址格式，用于识别和定位Internet 上的资源。 URL 提供了访问Internet 上任何资源（例如网页、图像、视频或文档）的完整路径和位置信息，并指定了如何访问这些资源。

URL 的组成部分通常包括：

协议：定义数据传输的规则，例如HTTP（超文本传输协议）、HTTPS（安全HTTP）和FTP（文件传输协议）。

主机名：通常是资源所在服务器的域名（例如www.example.com），有时也可以是IP地址。

端口：可选。用于指定将接收连接的服务器的端口号。例如，HTTP 的默认端口为80，HTTPS 的默认端口为443。如果您使用默认端口以外的端口，则必须在URL 中明确指定它。

路径：指向服务器上特定资源的路径。类似于文件系统中的目录路径。

查询字符串：可选。用于向服务器发送附加参数。它通常以问号“？”开头，后跟一系列用于搜索或过滤的键值对。

片段标识符：可选。用于标识页面中的特定位置，通常以井号“#”开头。

一个典型的URL 示例是：

https://www.example.com:8080/path/to/resource?query=string#fragment

在这个例子中：

https 是协议，www.example.com 是主机名，8080 是端口号，/path/to/resource 是路径，query=string 是查询字符串，#fragment 是片段标识符。

URL 是网络通信的基础，允许用户和应用程序通过Internet 准确定位和访问所需的信息资源。

三、文本链接

文本链接是网页上以纯文本形式表示的链接。该链接通常不具有可点击的超链接属性。文本链接可以采用以下格式：

纯文本链接：此类链接仅包含文字，没有超链接属性，因此无法直接点击。示例：“http://www.example.com”。用户必须手动复制链接并将其粘贴到浏览器的地址栏中才能访问目标网站。

锚文本链接：这是最常见的链接类型，其中的文本（锚文本）具有超链接属性，可以让用户直接点击文本跳转到目标网页。例如，要链接到“http://www.example.com”，请使用“示例网站”作为锚文本。

超链接：在HTML 中，超链接是通过标签创建的，可以包含锚文本和目标URL。例如：

a href=\’http://www.example.com\’网站示例/a

在搜索引擎优化（SEO）的背景下，文本链接通常指不具有超链接属性的链接。尽管它们不像超链接那样对网站排名产生直接影响，但有时也会产生影响。还是很珍贵的。例如，文本链接可以增加品牌曝光度，提供额外的引用来源，并且在某些情况下是间接的，因为即使没有直接的超链接归属，它们也会被搜索引擎识别和抓取。

文本链接和纯文本链接在SEO中的作用可能不如锚文本链接那么明显。锚文本链接向搜索引擎传达更多上下文信息，并帮助它们理解链接页面的内容主题。然而，文本链接仍然可以在建立网站的外部可见性和可信度方面发挥作用。

四、图片链接

图像链接通常是指网页上显示的图像，当用户单击该图像时，该图像将用户带到另一个网页或特定的在线资源。在HTML 中，图像链接是通过组合a 和img 标签创建的。

以下是简单图像链接的HTML 代码示例。

a href=\’http://www.example.com\’

img src=\’图片.jpg\’ alt=\’描述\’

/A

在此代码中：

a href=\’http://www.example.com\’ 是定义指向http://www.example.com 的超链接的锚标记。 img src=\’image.jpg\’ alt=\’description text\’ 为图像标签，src 属性指定图像源文件的位置（可以是相对路径或绝对URL），alt 属性指定图像的替代方案提供文本。这对于无法查看图像的用户（例如使用屏幕阅读器的视力障碍用户）非常重要。

当用户浏览网页并单击图像时，他们会被重定向到URL http://www.example.com。图片链接在网页设计中非常常见，常用于广告、产品展示、导航菜单等场景，为用户提供直观、交互的访问方式。

此外，图像链接还可用于社交媒体共享和电子邮件营销等领域，使其成为吸引用户注意力并鼓励采取行动的有效方式。

五、锚点链接

锚链接也称为片段标识符链接，是同一网页内的链接或跳转到另一个网页上特定位置的链接。这使得用户无需滚动即可直接进入长网页的特定部分，极大地提高了用户体验和效率。

锚链接基于HTML a 标记和id 属性工作。以下是具体步骤：

将ID 添加到目标位置。

h2 id=\’section1\’ 第1 节/h2

在上面的代码中，id=\’section1\’ 为标题分配了唯一标识符。

创建指向该ID 的链接。

a href=\’#section1\’跳转到第1/a 节

在这段代码中，href=\’#section1\’表示链接指向同一页面上ID为Section1的位置。

当用户单击此链接时，浏览器会滚动到页面上ID 部分为1 的元素并将其显示在视口的顶部。如果该链接位于其他网页，则点击该链接将跳转到目标网页的相应位置。

锚链接在长篇文章、文档、教程、常见问题解答页面、目录导航等中特别有用。这使得用户能够快速找到感兴趣的部分，避免不必要的滚动，提高信息检索的效率。

此外，锚链接在SEO（搜索引擎优化）中也有一定的价值，因为它们可以让搜索引擎更好地理解页面结构和内容层次结构，从而提高页面的搜索排名。

六、HTML 链接 – target 属性

目标属性允许您定义链接文档的显示位置。

以下行在新窗口中打开文档。

a href=\’https://www.baidu.com/\’ target=\’_blank\’ rel=\’noopener noreferrer\’Baidu/a

七、HTML 链接属性

HTML 中的链接主要通过a（锚）标签创建。该标签可以包含定义链接的行为和外观的各种属性。以下是一些常用的标签属性。

链接：

这是a标签最基本、最重要的属性，用于指定链接的目标URL。它可以指向另一个网页、文件、电子邮件地址、书签位置等。目标：

用于指定如何在浏览器中打开链接。共同的价值观包括：

_self：在当前窗口或选项卡中打开（默认行为）。 _blank：在新窗口或选项卡中打开。 _parent：在父框架集中打开。适用于嵌套框架。 _top：在顶部窗口中打开并删除所有框架。标题：

提供可选的描述性标题，将鼠标悬停在链接上时显示为工具提示。 rel:

描述当前文档和链接文档之间的关系。例子：

nofollow：告诉搜索引擎不要跟踪或索引链接。 noopener：与_blank 目标一起使用，以防止新窗口或选项卡访问原始页面的文档对象模型(DOM)。 noreferrer：当您单击链接时，浏览器不会向目标页面发送HTTP Referrer 标头。型

指定链接资源的MIME 类型。在现代HTML 中不常用，但可能在某些旧版本的HTML 中使用。下载：

如果存在此属性，将下载链接而不是导航到资源。您可以指定一个文件名，以建议浏览器使用该名称来保存文件。字符集：

用于指定链接文档的字符集，但不再常用，因为现代浏览器会自动检测字符集。 hreflang:

用于指定链接文档的语言，并帮助搜索引擎和其他工具确定链接页面的区域设置。姓名：

用于在文档中创建书签或锚点，以便其他链接可以指向该位置。标签索引：

定义使用Tab 键移动焦点时链接的顺序。访问密钥：

定义一个键盘快捷键，允许用户按下某个键来激活链接。

除了上面列出的属性之外，a标签还可以使用CSS样式属性来改变链接的外观，例如颜色、下划线、背景颜色等。此外，还有：link、visited、hover和：active等伪类可用于控制不同状态下链接的样式。

以上#青春编程与数学01相关内容摘自网络，仅供参考。相关信息请参见官方公告。