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

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

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

一、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>

小结

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

练习各种链接的使用。

相关文章
|
9月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
9月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
9月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
750 7
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
358 6
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
639 4
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
582 3
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
732 2
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
347 2
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。
387 2