怎样使用html网页中的锚点

这次给大家带来怎样使用html网页中的锚点，使用html网页中的锚点的注意事项有哪些，下面就是实战案例，一起来看一下。

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

英文名：anchor

使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

示例代码

在HTML页面中适当位置定义如下的锚点：

这里是TOP部分

这里是CONTENT部分

这里是FOOT部分（您可以使用 id 属性来替代 name 属性，命名锚同样有效。[1]）

对于如上锚点的访问有两种方法

一种是利用超链接标签制作锚点链接，主要用于页面内的锚点访问

另一种方式是直接在页面地址后面加锚点标记，主要用于不同页面之间的锚点访问

假如本页面的地址是文件路径/index.html，要访问foot锚点只要访问如下链接即可

文件路径/index.html#foot

2.html 锚点 到底是干吗的？

通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。

代码：

...文字省略

...文字省略其实锚点只需name就可以可，加id是为了让它兼容性更好.

href的值要跟name \ i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。

因为我们锚点的值为空，为不影响美观我们加个空格就行了,

如以下代码，就可以兼容ie8

...文字省略

...文字省略

另一问题，想显示某页面(如：123.html)的某锚点内容呢？

代码如下

...文字省略

...文字省略这是昨天在做后台时候，想实现“修改定位”，就把锚点标记搬了出来（平常它都被我遗忘）。

但是程序那边说他们要取值，连接中必须要有“?”或“&”，那这样我的锚点就不兼容了...

呵呵！以后会有解决方法的！

虽然在jsp页面中锚点兼容有问题，但是在静态页面中是没有问题的，还是值得学下的！

3.在 WEB 开发中，会使用到页面锚点。HTML 页面锚点用于链接到一个页面的某一章节。W3School 中说到，创建锚点使用 （锚）标签和 name 属性，但这不是创建页面锚点的唯一方法。下面简要说一下制作 HTML 页面锚点的两种方式。

我们可以利用 W3School 的在线测试工具来进行测试。打开链接后的测试代码使用的是 ”改为“ Chapter 4 ” 后进行测试，效果一样。

说明，制作页面锚点除了使用 锚点标签 name 属性之外，还可以使用 id 属性。锚点 标签中 href 属性的值为 # 开头加上目标的 name 或 id 的值：

代码如下:

方法一

使用锚标签的 href 和 name 属性

方法二

使用锚标签和 id 属性

JAVA使用jsoup爬取

前言

随着大数据产业的发展，越来越多的数据需要被采集与挖掘，对于非相关专业的人来说数据采集最多的途径就是下载，但是仍然有一些数据是隐藏在网页中的，只能观看不能下载，这时有人说可以通过复制粘贴的方法进行保存，其实这也是一个方法，但是在庞大的数据量面前，如果单靠手动是及其消耗时间的，所以通过程序来将数据提取出来就可以达到节省时间的目的，从而提高了效率。本文以 为例，运用JAVA爬虫技术，将 下载到本地磁盘中。本文基于JAVA讲述，运用工具为idea，如果没有idea的小伙伴可以先去其他文章学习一下如何下载安装。

1、JAVA爬虫是什么？

通俗一点的讲，JAVA爬虫就是运用特定的技术，将网页上的数据下载到硬盘中，和Python爬虫类似

2、页面分析 2.1、这里我们将要爬取 的网页用来演示：

2.2、按F12进入网页调试页面。

2.3、将小鼠标放到要爬取的文字上点击，会出现如下图所示的界面

3、代码实现 3.1、pom.xml文件中引入Jsoup包

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <groupId>com.naclgroupId>
    <artifactId>demoartifactId>
    <version>1.0-SNAPSHOTversion>
<parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.7.0version>
parent>
    <properties>
        <maven.compiler.source>11maven.compiler.source>
        <maven.compiler.target>11maven.compiler.target>
        <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
        dependency>
        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-mongodbartifactId>
        dependency>
         
        <dependency>
            <groupId>org.jsoupgroupId>
            <artifactId>jsoupartifactId>
            <version>1.14.3version>
        dependency>
        
        <dependency>
            <groupId>junitgroupId>
            <artifactId>junitartifactId>
            <version>4.12version>
        dependency>
    dependencies>
project>

3.2、创建NovelJsoup测试类

package com.nacl;
import org.jsoup.Connection;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
/**
 * @author HAOYANG
 * @create 2023-12-15 14:37
 */
@SpringBootTest
public class NovelJsoup {
    @Test
    public void booktest() throws IOException, InterruptedException {
        //选择要下载      的地址
        String url = "https://www.qb5.ch/book_91025/";
        //获取首页的html内容
        Connection connect= Jsoup.connect(url);
        //这里的header里的参数是为了伪装成浏览器，对于某些有防爬虫的网站必须伪装成浏览器才能进行爬取，这里的参数可以当做常量来使用
        Document document = connect.header("User-Agent","Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36").get();
        //书名
        String FileName = document.selectXpath("//h1").text().replaceAll(" / 净无痕","");
        Elements dd = document.select("dd a");
        for (Element element : dd){
            //获取每章的超链接
            String url_block =url+ element.attr("href");
            //章节名
            String text = element.text().replaceAll("\\?","");
            //获取每章html内容
            Document document1 = Jsoup.connect(url_block).get();
            //获取每章文本内容，去除正文中 ：全本      网 www.qb5.ch，
            String content = document1.getElementById("content").text().replaceAll("全本      网 www.qb5.ch，","").replaceAll("    ", "\n").replaceAll("。","。\n");
            //创建文件夹
            File folder = new File(FileName);
            //判断是否存在这个文件夹，没有就创建
            if (!folder.exists()) folder.mkdirs();
            //完整文件路径
            File file = new File(folder,text+".txt");
            // 创建一个File对象，表示要写入的txt文件
            BufferedWriter writer = new BufferedWriter(new FileWriter(file));
            writer.write(content);
            writer.flush();
            writer.close();
            //做个好人等5秒弄一次,
            Thread.sleep(5000);
        }
    }
}

视频教程

B站：