当前位置：首页 > news >正文

编程笔记 html5cssjs 009 HTML链接

news 文章来源：https://blog.csdn.net/qq_40071585/article/details/135240263 2024/11/6 18:21:49

编程笔记 html5&css&js 009 HTML链接

一、HTML 链接
二、文本链接
三、图片链接
四、HTML 链接- id 属性
五、锚点链接
六、HTML 链接 - target 属性
七、属性
- `download`
- `href`
- `ping`
- `referrerpolicy`
- `rel`
- `target`
- `type`
八、操作
小结

网页有了链接，就可根据需要进行跳转。纸质读物只能根据指示的页码翻页，而网页则可以通过链接直接打开新的页面，这是网页展示信息更为便捷的一个特点。

一、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

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

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。使用 href 属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

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

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

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
链接的 HTML 代码很简单，它类似这样：

<a href="url">链接文本</a>
href 属性描述了链接的目标。

二、文本链接

<a href="https://www.baido.com/">百度</a>

三、图片链接

<a href="https://www.example.com"><img src="example.jpg" alt="示例图片">
</a>

四、HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

五、锚点链接

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用元素定义一个标记，并使用#符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

六、HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">百度</a>

七、属性

该元素的属性包含全局属性。

`download`

导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：
如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
Content-Disposition HTTP 标头。
URL 路径的最后一段。
媒体类型。来自 Content-Type 标头，data: URL 的开头，或 blob: URL 的 Blob.type。
filename：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
备注：download 只在同源 URL 或 blob:、data: 协议起作用。
浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。
如果 Content-Disposition 标头的信息与 download 属性不同，产生的行为可能不同：
如果文件头指定了一个 filename，它将优先于 download 属性中指定的文件名。
如果标头指定了 inline 的处置方式，Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器（版本 82 之前）优先考虑该标头，并将内联显示内容。

`href`

超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
使用文档片段链接到页面的某一段
使用文本片段链接到某一段文字
使用媒体片段链接到某个媒体文件
使用 tel: URL 链接到一个电话号码
使用 mailto: URL 链接到一个邮箱地址
如果 web 浏览器不能支持其他 URL 协议，网站可以使用 registerProtocolHandler()

`ping`

包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪。

`referrerpolicy`

在跟随链接时，referrer 需要发送多少内容：
no-referrer：Referer 标头将不会被发送。
no-referrer-when-downgrade：如果没有 TLS（HTTPS），Referer 头将不会被发送到源上。
origin：发送的 referrer 将被限制在其页面的来源：协议、主机和端口。
origin-when-cross-origin：发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径。
same-origin：将向同源地址发送 referrer，但跨源请求不包含 referrer 信息。
strict-origin：当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
strict-origin-when-cross-origin（默认）：在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS→HTTPS），对安全性较低的目的地不发送标头（HTTPS→HTTP）。
unsafe-url：表示 referrer 将会包含源和路径（但是不包含片段、密码或用户名）。此值是不安全的，因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。

`rel`

该属性指定了目标对象到链接对象的关系。

`target`

该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或<iframe>）。以下关键词对加载 URL 的位置有特殊含义：
_self：当前页面加载。（默认）
_blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
_parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
_top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。
备注：在 <a> 元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" (en-US) 相同的 rel 行为，即不会设置 window.opener。

`type`

该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。

八、操作

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js HTML图片</title><meta charset="utf-8"><style>/* 选择你喜欢的颜色吧 */body {color: cyan;background-color: teal;}a {display: block;/* 设置链接为块级元素 */margin: 0 auto;/* 设置左右边距为auto，上下边距为0 */}</style>
</head>
<body><h1 align="center">这是一个链接</h1><a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer" align="center">点这里一下，进入百度首页</a>
</body>
</html>

小结

链接可以跳转到不同的网页或同一网页的不同位置，更可以跳转到其他的网站，使用互联网名副其实。
练习各种链接的使用。

编程笔记 html5&css&js 009 HTML链接

一、HTML 链接

二、文本链接

三、图片链接

四、HTML 链接- id 属性

五、锚点链接

六、HTML 链接 - target 属性

七、属性

download

href

ping

referrerpolicy

rel

target

type