编程笔记 html5cssjs 009 HTML链接

news/2024/11/9 0:30:14/

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

  • 一、HTML 链接
  • 二、文本链接
  • 三、图片链接
  • 四、HTML 链接- id 属性
  • 五、锚点链接
  • 六、HTML 链接 - target 属性
  • 小结

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

一、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.baido.com/" target="_blank" rel="noopener noreferrer">百度</a>

小结

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


http://www.ppmy.cn/news/1287142.html

相关文章

Vue Router的介绍与引入

在这里是记录我引入Vue Router的全过程&#xff0c;引入方面也最好先看官方文档 一.介绍 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成&#xff0c;让用 Vue.js 构建单页应用变得轻而易举。功能包括&#xff1a; 嵌套路由映射动态路由选择模块化、基于组件的…

判断素数的方法大全

质数又称素数。一个大于1的自然数&#xff0c;除了1和它自身外&#xff0c;不能被其他自然数整除的数叫做质数&#xff1b;否则称为合数&#xff08;规定1既不是质数也不是合数&#xff09;。 一、直接暴力法求素数 n的素数的判断&#xff0c;我自己只想到了把2到n-1&#xf…

网络安全(黑客)——自学2024

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

【大模型的前世今生】从自然语言处理说起

自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&#xff09;被誉为人工智能皇冠上的明珠&#xff0c;是计算机科学和人工智能领域的一个重要方向。它主要研究人与计算机之间&#xff0c;使用自然语言进行有效通信的各种理论和方法。简单来说&#xf…

blob文件流前端显示pdf

首先请求需要修改 responseType: ‘blob’, 需要修改 请求头 {responseType: blob,url: url,method: get,}三种方法&#xff1a; 1.直接处理&#xff0c;在新页面打开 const blob new Blob([data],{ type:application/pdf }) let url window.URL.createObjectURL(blob) wi…

TPRI-DMP平台介绍

TPRI-DMP平台介绍 1 TPRI-DMP平台概述 TPRI-DMP为华能集团西安热工院自主产权的工业云PaaS平台&#xff0c;已经过13年的发展和迭代&#xff0c;其具备大规模能源电力行业生产应用软件开发和运行能力。提供TPRI-DMP平台主数据管理、业务系统开发与运行、应用资源管理…

基于SpringBoot的新能源充电系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的新能源充电系统,java项…

Vue模板编译

Vue模板编译 Vue生命周期中&#xff0c;在初始化阶段各项工作做完之后调用了vm.$mount方法&#xff0c;该方法的调用标志着初始化阶段的结束和进入下一个阶段&#xff0c;从官方文档给出的生命周期流程图中可以看到&#xff0c;下一个阶段就进入了模板编译阶段(created和befor…