编程笔记 html5cssjs 009 HTML链接

编程笔记 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.mzph.cn/news/581206.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JMeter逻辑控制器之ForEach控制器

1. 背景 前段时间在对某项目进行测试&#xff0c;存在一个需要遍历所有组织机构后给每个组织下新增部门的场景&#xff0c;其实也可以通过在数据库中直接添加数据这种方式来实现&#xff0c;但是有点风险&#xff0c;可能会生成脏数据&#xff0c;后期也不好排查&#xff0c;最…

linux系统 CentOS Tomcat 部署论坛

jdk安装命令&#xff1a;yum -y install java-1.8.0-openjdk-devel.x86_64 结尾上显示下图为成功 检查jdk环境是否配置成功命令&#xff1a;java -version或javac 显示版本 显示信息 mysql安装&#xff1a; 检查是否存mariadb数据库&#xff1a;rpm -qa | grep mariad 卸载ma…

企业计算机服务器中了360后缀勒索病毒如何处理,勒索病毒应对步骤

网络技术的应用与发展&#xff0c;为企业的生产运营提供了有力保障&#xff0c;但也为网络安全威胁埋下隐患。近期&#xff0c;网络上的勒索病毒非常嚣张&#xff0c;严重影响了企业的生产运营。近日&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服…

嵌入式单片机的存储区域与堆和栈

一、单片机存储区域 如图所示位STM32F103ZET6的参数&#xff1a; 单片机的ROM&#xff08;内部FLASH&#xff09;&#xff1a;512KB&#xff0c;用来存放程序代码的空间。 单片机的RAM&#xff1a;64KB&#xff0c;一般都被分配为堆、栈、变量等的空间。 二、堆和栈的概念 …

HBase 例行灾备方案:快照备份与还原演练

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

秋招复习篇之代码规范

目录 前言 1、变量命名 2、代码空格 1&#xff09;操作符左右一定有空格&#xff0c; 2&#xff09;分隔符&#xff08;, 和;&#xff09;前一位没有空格&#xff0c;后一位保持空格&#xff0c;例如&#xff1a; 3&#xff09;大括号和函数保持同一行&#xff0c;并有一个空格…

Python 网络编程之搭建简易服务器和客户端

用Python搭建简易的CS架构并通信 文章目录 用Python搭建简易的CS架构并通信前言一、基本结构二、代码编写1.服务器端2.客户端 三、效果展示总结 前言 本文主要是用Python写一个CS架构的东西&#xff0c;包括服务器和客户端。程序运行后在客户端输入消息&#xff0c;服务器端会…

虹科方案丨L2进阶L3,数据采集如何助力自动驾驶

来源&#xff1a;康谋自动驾驶 虹科方案丨L2进阶L3&#xff0c;数据采集如何助力自动驾驶 原文链接&#xff1a;https://mp.weixin.qq.com/s/qhWy11x_-b5VmBt86r4OdQ 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 12月14日&#xff0c;宝马集团宣布&#xff0c;搭载…

Java在SpringCloud中自定义Gateway负载均衡策略

Java在SpringCloud中自定义Gateway负载均衡策略 一、前言 spring-cloud-starter-netflix-ribbon已经不再更新了&#xff0c;最新版本是2.2.10.RELEASE&#xff0c;最后更新时间是2021年11月18日&#xff0c;详细信息可以看maven官方仓库&#xff1a;org.springframework.clou…

获取Android和iOS崩溃日志的方法

文章目录 一、Android崩溃日志1、获取方法1.1 通过adb logcat获取1.2 通过adb shell dumpsys dropbox命令获取 2、导出设备Crash日志3、导出设备ANR日志4、常见日志类别 二、iOS崩溃日志1、获取方法1.1 xcode中打开1.2 手机上直接获取 2、Crash 头部信息 一、Android崩溃日志 …

js中深拷贝与浅拷贝的区别?如何实现一个深拷贝?(收藏好,用时好找)

文章目录 一、数据类型存储二、浅拷贝Object.assignslice()concat()拓展运算符 三、深拷贝_.cloneDeep()jQuery.extend()JSON.stringify()循环递归 四、区别小结 一、数据类型存储 前面文章我们讲到&#xff0c;JavaScript中存在两大数据类型&#xff1a; 基本类型引用类型 …

为什么微信小程序不用div而是用自创的view标签?

在官方的《小程序开发指南》中&#xff0c;明确说明了为什么要自定义标签以及这么设计的原因和带来的好处&#xff0c;说明如下&#xff1a; 6.1.2 管控与安全 基于Web 技术来渲染小程序是存在一些不可控因素和安全风险的。这是因为Web技术是非常开放灵活的&#xff0c;我们可以…

多维时序 | MATLAB实现SSA-GRU麻雀算法优化门控循环单元多变量时间序列预测

多维时序 | MATLAB实现SSA-GRU麻雀算法优化门控循环单元多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-GRU麻雀算法优化门控循环单元多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现SSA-GRU麻雀算法优化门控循环单元多变量时间序列预…

[C/C++]排序算法 快速排序 (递归与非递归)

目录 &#x1f6a9;概念: &#x1f6a9;实现: ⚡1.hoare ⚡2.挖坑法 ⚡3.双指针法 &#x1f6a9;快速排序递归实现 &#x1f6a9;快速排序非递归实现 &#x1f6a9;概念: 通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据比另一部分的所有…

C# Lock 解读

C# Lock 解读 一、Lock定义二、简单例子三、简单解释一下执行过程四、Lock的对象选择问题1、为什么不能lock值类型2、Lock字符串3、MSDN推荐的Lock对象4、lock(typeof(Class)) 五、特殊问题&#xff1a;Lock&#xff08;this&#xff09;等的详细解释总结 一、Lock定义 lock 关…

Vue.set 方法原理

function set(target, key, value) {// 判断是否是数组&#xff0c;并且 key 是一个有效的索引值if (Array.isArray(target) && isValidArrayIndex(key)) {target.length Math.max(target.length, key)target.splice(key, 1, value)return value}// 判断 key 是否已经…

JS常见正则表达式写法(附案例)

正则表达式方法示例: 1. test方法解析&#xff0c;test判断正则是否在字符串中出现过&#xff0c;如果出现返回true&#xff0c;如果没出现返回false。 let str hello world; let ret1 /e/.test(str); // true let ret2 /q/.test(str); // false 如&…

Pytorch的讲解及实战·MNIST数据集手写数字识别

目录 一、前言与pytorch的下载 1、前言 2、下载pytorch ①创建虚拟环境 ②下载pytorch&#xff08;cpu版&#xff09; ③测试pytorch是否下载成功 ④使用jupyter notebook 但是使用不了torch的解决方法 二、pytorch的使用 1、Tensor的数据类型 ①torch.FloatTensor …

【nw.js】使用nw.js将html页面打包成exe免安装程序

文章目录 一、批处理zip命令&#xff08;已有可跳过此步骤&#xff09;二、nw.js包三、使用批处理命令打包成exe可执行文件四、使用EnigmaVB打包成免安装可独立运行的exe文件五、结束 一、批处理zip命令&#xff08;已有可跳过此步骤&#xff09; 下载zip&#xff0c;你可以到该…

maven依赖无法传递问题排查

一、背景 在A模块中引入B模块&#xff0c;C服务引入A模块但是B模块没有传递进来。 二、排查 使用mvn clean install -Dmaven.test.skiptrue查看打包日志信息&#xff0c;通过搜索A模块名称&#xff0c;出现如下警告信息&#xff1a; [WARING] The POM for A:jar:0.0.1-SNAP…