QD1-P10 HTML 超链接标签(a)下篇

news2024/11/24 13:33:46

本节学习:HTML a 标签实现大纲跳转(锚点)。


本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=10


本节实现大纲(锚点)跳转

recording

完整 HTML 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P10-a标签实现锚点</title>
	</head>
	<body>
		<h1 align="center">随机文章</h1>
	
		<h2 >大纲</h2>
		<ul>
			<li><a href="#第一章标题">第一章标题</a></li>
			<li><a href="#第二章标题">第二章标题</a></li>
			<li><a href="#第三章标题">第三章标题</a></li>
		</ul>
	
		<h2 id="第一章标题">第一章标题</h2>
		<p>在时光的长河中徘徊,如同漫步于古老的森林小径。阳光透过枝叶的缝隙洒下,斑驳地落在地上,仿佛金色的梦幻碎片。微风轻拂,树叶沙沙作响,似在低吟着岁月的故事。</p>
		<h2 id="第二章标题">第二章标题</h2>
		<p>远处,山峦连绵起伏,如沉默的卫士守护着这片宁静的天地。山顶云雾缭绕,宛如神秘的面纱,让人不禁遐想那背后隐藏着怎样的仙境。而山下的湖泊,宛如一面巨大的镜子,倒映着天空的湛蓝和云朵的洁白。湖水清澈见底,偶尔有鱼儿跃出水面,泛起一圈圈涟漪,如同生命的灵动之舞。</p>
		<h2 id="第三章标题">第三章标题</h2>
		<p>花丛中,五彩斑斓的花朵竞相绽放,散发着迷人的芬芳。蜜蜂在花间忙碌地飞舞,采集着甜蜜的希望;蝴蝶则翩翩起舞,用绚丽的色彩点缀着这个美好的世界。每一朵花都是大自然的杰作,它们用自己的美丽诉说着生命的奇迹。</p>
		<a href="">返回顶部</a>
	</body>
</html>
  • 关键 1

a 标签的 href 属性要这样写

<a href="#id">链接文本</a>

id 是指其他标签的 id,比如填写了某个 h2 标题的 id,那么点击 a 标签时,页面就会跳转到这个 h2 标签的位置。

  • 关键 2

给标签设置 id 属性,id 值可以是中文。

<h2 id="第一章标题">第一章标题</h2>


除了使用其他标签的 id 属性作为锚定点,还有一种锚定方式:使用其他 a 标签的 name 属性来锚定。注意,限定 a 标签。


还有一种特殊情况:a 标签的 href 属性为空时,跳转到页面顶部。

<a href="">返回顶部</a>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2207927.html

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

相关文章

python爬虫--某动漫信息采集

python爬虫--tx动漫 一、采集主页信息二、采集详情页信息三、代码供参考一、采集主页信息 略。 二、采集详情页信息 如上图所示,使用xpath提取详情页的标题、作者、评分、人气、评论人数等数据。 三、代码供参考 import csv import time import random import requests fr…

弧光保护装置的应用

长期以来&#xff0c;人们对中低压母线的保护一直不够重视&#xff0c;没有保护来快速切除配电站所内部发生的故障&#xff0c;往往使故障发展扩大造成开关设备被严重烧毁&#xff0c;有的甚至发展成“火烧连营”的事故。同时&#xff0c;变电站的变压器由于遭受外部短路电流冲…

【harmonyOS开发笔记3】ArkTS中数组的使用

数组的定义 数组&#xff1a;是一个容器&#xff0c;可以存储多个数据 定义数组的格式&#xff1a; let 数组名: 类型[] [数据1&#xff0c; 数据2&#xff0c; ] 示例&#xff1a;let names: string[] [小明, 小红] // 数组 let 数组名: 类型[] [数据1, 数据2, ] let …

【大模型实战教程】Qwen2.5 PyTorch模型微调入门实战

1 引言 Qwen2.5是Qwen大型语言模型系列的最新成果。对于Qwen2.5&#xff0c;通义千问团队发布了从0.5到720亿参数不等的基础语言模型及指令调优语言模型。Qwen2.5相比Qwen2带来了以下改进&#xff1a; 显著增加知识量&#xff0c;在编程与数学领域的能力得到极大提升&#xf…

四种Agent落地方案:Coze、AutoGen、Langchain、llama-index

前言 1. Coze 优势&#xff1a; 模块化设计&#xff1a; 允许开发者灵活地添加或替换组件&#xff0c;适应不同的应用需求。 易于集成&#xff1a; 支持与多种外部系统和服务的集成&#xff0c;方便与现有业务系统对接。 用户友好&#xff1a; 提供图形化界面和命令行工具&…

讯飞与腾讯云:Android 语音识别服务对比选择

目录 一、讯飞语音识别 1.1 讯飞语音识别介绍 1.1.1 功能特点 1.1.2 优势 1.2 接入流程 1.2.1 注册账号并创建应用 1.2.2 下载SDK等相关资料 1.2.3 导入SDK 1.2.4 添加用户权限 1.2.5 初始化讯飞SDK 1.2.6 初始化语音识别对象 1.2.7 显示结果 二、腾讯云语音识别 …

数字人直播带货操作详解,必看!

作为人工智能和直播带货两大热门行业的结合体&#xff0c;数字人直播带货一经出现就引发了众多商家的关注&#xff0c;许多创业者更是因此对数字人直播这一创业项目产生了浓厚的兴趣&#xff0c;连带着对数字人直播带货怎么操作等问题的讨论也日渐热烈了起来。 本期&#xff0…

给图片加文字的软件有哪些?这几种图片编辑文字软件简单好用

一张优秀的图片往往能瞬间抓住人们的眼球&#xff0c;无论是自媒体运营、广告设计还是日常生活分享&#xff0c;给图片添加文字都是提升视觉效果的重要手段。很多小伙伴不清楚该怎样给图片添加上精美的文字&#xff0c;下面给大家分享几种好用编辑文字的方法&#xff0c;一起来…

双语大脑的神经可塑性能力:来自健康和病理个体的见解

摘要 双语经验的神经印记对于理解大脑如何处理优势语言和非优势语言至关重要&#xff0c;但关于它的研究仍然没有定论。不同的研究表明神经处理存在相似性或差异性&#xff0c;这对患有脑肿瘤的双语患者具有重要意义。保留术后的双语功能需要考虑到术前的神经可塑性变化。在这…

【原创】可用于 Android Studio 的翻译插件

在不少讲解Android 开发的老师视频中会出现一个运行在Android Studio 上的翻译插件&#xff0c;感觉挺实用的。 接下来&#xff0c;我们把它安装在我们的Android Studio 上。 设置 点击右上角齿轮按钮&#xff0c;选择Settings 安装 翻译插件 输入Tanslation&#xff0c;选…

jmeter出参保存到文件,保存失败解决

1、添加JSON提取 2、添加beanshell FileWriter writer new FileWriter("C:/Users/xxx/Desktop/signUrl.csv", true); writer.write(vars.get("company_name")"\t"vars.get("signUrl")"\n"); writer.close(); 写文件的两个…

金融大数据平台总体技术

目录 金融大数据平台应用场景风险管理 场景描述解决方案​​​​​​​市场营销 ​​​​​​​场景描述解决方案​​​​​​​金融大数据信息价值链​​​​​​​金融大数据平台总体目标金融大数据平台功能技术要求​​​​​​​ ​​​​​​​概述数据接入功能要求 ​​…

鹦鸣app——服务端项目搭建

文章目录 服务端项目搭建创建启动程序构建全局初始化工厂函数创建app应用对象基于shell脚本启动项目加载项目配置数据库初始化SQLAlchemy初始化Redis数据库初始化mongoDB数据库初始化 日志初始化日志的等级flask日志功能的基本使用构建日志模块 蓝图初始化自动注册蓝图注册蓝图…

【C++】第五节:内存管理

1、C/C内存分布 看下面一段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(s…

Axure PR 9 开关切换 设计交互

大家好&#xff0c;我是大明同学。 这期内容&#xff0c;我们来探讨Axure开关按钮设计与交互技巧​。 创建切换开关所需的元件 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.将“圆形”元件拖到画布上&#xff0c;在样式窗格中将高度和宽度设置为35&#xff0c;线段宽度…

[贪心+搜索] 马走日升级版

题目描述 国际象棋和中国象棋中&#xff0c;马的移动规则相同&#xff0c;都是走“日”字&#xff0c;我们将这种移动方式称为马步移动。如右图所示&#xff0c;从标号为 0 0 0 的点出发&#xff0c;可以经过一步马步移动达到标号为 1 1 1 的点&#xff0c;经过两步马步移动…

Excel中的常识

工作簿Workbook和工作表Worksheet什么关系&#xff1f; 工作簿&#xff1a;Workbook&#xff0c;也就是一个excel文件 工作表&#xff1a;Worksheet&#xff0c;也就是一个工作表&#xff0c;及Sheet文件 一个工作簿可以包含多个工作表。

IDM(Internet Download Manager)下载器的安装激活与换机方法

很多人都知道 Internet Download Manager(以下简称 IDM)是一款非常优秀的下载提速软件。它功能强大&#xff0c;几乎能下载网页中的所有数据&#xff08;包括视频、音频、图片等&#xff09;&#xff0c;且适用于现在市面上几乎所有的浏览器&#xff0c;非常受大家欢迎。IDM 是…

vue-插槽作用域实用场景

vue-插槽作用域实用场景 1.插槽1.1 自定义列表渲染1.2 数据表格组件1.3 树形组件1.4 表单验证组件1.5 无限滚动组件 1.插槽 插槽感觉知道有这个东西&#xff0c;但是挺少用过的&#xff0c;每次看到基本都会再去看一遍用法和概念。但是在项目里&#xff0c;自己还是没有用到过…

QD1-P1 开始学习前端,HTML、CSS与JS三者之间的关系

今天开始学习前端基础&#xff0c;新建专题《前端学习笔记1》保存前端基础学习笔记。 专题文章命名以qd1开头。 源课程 视频教程&#xff1a;【Web前端-最通俗易懂HTML、CSS与JS合集 1天速成】 up&#xff1a;遥遥温柔乡 在B站随便搜索了一个前端课程&#xff0c;共91节&am…