html 超链接之锚点

最新推荐文章于 2023-04-11 21:26:38 发布

初学小白Lu

最新推荐文章于 2023-04-11 21:26:38 发布

阅读量5.8k

点赞数 9

分类专栏：前端文章标签： html 锚点超链接 href

本文链接：https://blog.csdn.net/weixin_43956958/article/details/122052578

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

超链接
HTML 链接 - target 属性
- 属性值
HTML 链接- id 属性
HTML属性列表
不跨页锚点
跨页锚点
添加css样式
链接到的页面在新打开的页面显示

超链接

超链接：HTML 使用超级链接与网络上的另一个文档相连
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

示例：

<a href="url">链接文本</a>

注意：用正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

HTML 链接 - target 属性

注意：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="url" target="_blank" rel="noopener noreferrer">访问!</a>

属性值

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

HTML 链接- id 属性

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

<a id="tips">有用的提示部分</a>

<a href="#tips">访问有用的提示部分</a>
或者：
<a href="url.html#tips">
访问有用的提示部分</a>

HTML属性列表

属性	描述
<!–…-->	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义锚。
<abbr>	定义定义只取首字母的缩写。HTML5 中不支持。请使用 <abbr> 代替。
<address>	定义文档作者或拥有者的联系信息。
<applet>	定义嵌入的 applet。HTML5 中不支持。请使用和 <object> 代替。
<area>	定义图像映射内部的区域。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体字。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文字方向。
<big>	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote>	定义长的引用。
<body>	定义文档的主体。
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	定义居中文本。HTML5 中不支持。请使用 CSS 代替。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。
<command>	定义命令按钮。
<data>	添加给定内容的机器可读翻译。
<datalist>	定义下拉列表。
<dd>	定义定义列表中项目的描述。
<del>	定义被删除文本。
<details>	定义元素的细节。
<dir>	定义目录列表。HTML5 中不支持。请使用 CSS 代替。
<div>	定义文档中的节。
<dfn>	定义定义项目。
<dialog>	定义对话框或窗口。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义围绕表单中元素的边框。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	定义文字的字体、尺寸和颜色。HTML5 中不支持。请使用 CSS 代替。
<footer>	定义 section 或 page 的页脚。
<form>	定义供用户输入的 HTML 表单。
<frame>	定义框架集的窗口或框架。HTML5 中不支持。
<frameset>	定义框架集。HTML5 中不支持。
<h1>	to <h6> 定义 HTML 标题。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<html>	定义 HTML 文档。
<i>	定义斜体字。
<iframe>	定义内联框架。
<img>	定义图像。
<input>	定义输入控件。
<ins>	定义被插入文本。
<isindex>	定义与文档相关的可搜索索引。不赞成使用。
<kbd>	定义键盘文本。
<keygen>	定义生成密钥。
<label>	定义 input 元素的标注。
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目。
<link>	定义文档与外部资源的关系。
<main>	定义文档的主要内容。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义命令的列表或菜单。
<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目。
<meta>	定义关于 HTML 文档的元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象。
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>	定义 section。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>	定义媒介源。
<span>	定义文档中的节。
<strike>	定义加删除线文本。HTML5 中不支持。请使用 <del> 或 <s> 代替。
<strong>	定义强调文本。
<style>	定义文档的样式信息。
<sub>	定义下标文本。
<summary>	为 <details> 元素定义可见的标题。
<sup>	定义上标文本。
<svg>	定义 SVG 图形的容器。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<template>	定义用作容纳页面加载时隐藏内容的容器。
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格中的行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
<u>	定义下划线文本。
<ul>	定义无序列表。
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义可能的换行符。
<xmp>	定义预格式文本。HTML5 中不支持。

锚点就是定位器

不跨页锚点

方法一：

设置一个锚点链接

<a herf="#one">点我跳转第一章 </a>

在页面中需要的位置设置锚点

<a name="one"></a>

name属性值要与1中的href的属性值一样
方法二：

设置一个锚点链接

<a herf="#one">点我跳转第一章 </a>

设置锚点的位置

<h3 id="one">xxx</h3>`

id属性值要与1中的href的属性值一样

跨页锚点

<a herf="要跳转的页面名称.html#one">点我跳转第一章 </a>

添加css样式

设置字体颜色为黑色
去掉点击链接以后的下划线
设置字体大小为xx-large

<a href="#" id="test">超链接</a>
 
 
<style>
	#test{
		color: black;
		text-decoration: none;
		font-size: xx-large;
	}
</style>

链接到的页面在新打开的页面显示

<a href="https://www.baidu.com" id="test" target="_blank">超链接</a>

初学小白Lu

关注

9
点赞
踩
55

收藏

觉得还不错? 一键收藏
0
评论
html 超链接之锚点

文章目录不跨页锚点跨页锚点添加css样式链接到的页面在新打开的页面显示锚点就是定位器不跨页锚点<a herf="#one">点我跳转第一章 </a>跨页锚点<a herf="要跳转的页面名称.html#one">点我跳转第一章 </a>添加css样式设置字体颜色为黑色去掉点击链接以后的下划线设置字体大小为xx-large<a href="#" id="test">超链接</a> <style&g
复制链接

扫一扫