Base标签

1、Base标签的作用

base标签可以设置当前页面中所有相对路径工作时，参照哪个路径来进行跳转。

2、Base标签的简单说明

<base href=" ">

其中href的属性值就是参照的地址值。

比如：
base标签的使用

3、Base标签的使用举例

3.1、创建html页面

目录结构如下：
在这里插入图片描述

c.html页面中的内容：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>html页面</title>
    <base href="http://localHost:8080/07_servletTest/a/b/">
</head>
<body>
<a href="../../index.html">跳转到首页</a>
</body>
</html>

d.html页面中的内容：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="index.html">跳转回首页</a>
</body>
</html>

f.html页面中的内容：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://localHost:8080/07_servletTest/e/">
</head>
<body>
<a href="../index.html">跳转回首页</a>
</body>
</html>

index.html页面中的内容：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<a href="a/b/c.html">跳转到c.html</a></br>
<a href="http://localHost:8080/07_servletTest/baseServlet2">请求转发:跳转到c.html</a></br>
<a href="http://localHost:8080/07_servletTest/baseServlet">请求转发:跳转到d.html</a></br>
<a href="http://localHost:8080/07_servletTest/baseServlet3">请求转发:跳转到f.html</a></br>
</body>
</html>

3.2、创建Servlet程序

目录结构：
Servlet程序的目录结构

简单说明：在下面的Servlet代码中没有编写doPost部分的原因，因为通过浏览器地址栏的访问请求属于Get请求，所以提交给doGet()方法进行处理。

BaseServlet的内容：

package com.example._07_servletTest;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = request.getRequestDispatcher("/d.html");
        requestDispatcher.forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

BaseServlet2的内容：

package com.example._07_servletTest;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class BaseServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = request.getRequestDispatcher("/a/b/c.html");
        requestDispatcher.forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

BaseServlet3的内容：

package com.example._07_servletTest;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class BaseServlet3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = request.getRequestDispatcher("/e/f.html");
        requestDispatcher.forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

web.xml文件的配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>BaseServlet</servlet-name>
        <servlet-class>com.example._07_servletTest.BaseServlet</servlet-class>
    </servlet>
    <servlet>
        <servlet-name>BaseServlet2</servlet-name>
        <servlet-class>com.example._07_servletTest.BaseServlet2</servlet-class>
    </servlet>
    <servlet>
        <servlet-name>BaseServlet3</servlet-name>
        <servlet-class>com.example._07_servletTest.BaseServlet3</servlet-class>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>BaseServlet</servlet-name>
        <url-pattern>/baseServlet</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>BaseServlet2</servlet-name>
        <url-pattern>/baseServlet2</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>BaseServlet3</servlet-name>
        <url-pattern>/baseServlet3</url-pattern>
    </servlet-mapping>
</web-app>

通过以上配置，当我们启动Tomcat服务器时，即可在首页和c.html、d.html、f.html之间相互跳转。

4、Base标签的原理说明

以c.html与index.html页面之间的相互转化为例。
正常情况下：
当我们点击c.html中的a标签进行跳转的时候，浏览器地址栏中的地址是：
http://localHost:8080/07_servletTest/a/b/c.html
浏览器地址栏地址
c.html页面中跳转回首页的a标签路径是:…/…/index.html

所有相对路径在工作的时候都会参照当前浏览器地址栏中的地址来进行跳转。

那么参照后得到的地址是：http://localHost:8080/07_servletTest/index.html
可以正常跳转。
如何参照？
已知：
浏览器地址栏地址：http://localHost:8080/07_servletTest/a/b/c.html
跳转回首页的相对路径：…/…/index.html
拼接后得到：http://localHost:8080/07_servletTest/a/b/c.html…/…/index.html
我们知道…/表示上一级目录，第一个…/可以去掉浏览器地址栏中地址的目录b，得到http://localHost:8080/07_servletTest/a/index.html，第二个…/可以去掉地址中的目录a,得到http://localHost:8080/07_servletTest/index.html，即我们所要跳转的页面路径。
异常情况：
当我们使用请求转发来进行跳转的时候，浏览器地址栏中的地址是：

跳转回首页的a标签路径是:

那么参照后得到的地址是：
http://localHost:8080/index.html(是错误的路径）
可以知道发生错误的原因是相对路径参照的浏览器地址栏中的地址发生了变化，这时，我们可以通过base标签来固定页面中所有相对路径参照的浏览器地址栏地址，使得通过请求转发进行页面跳转时，能够参照正确的地址。

原文链接：https://blog.csdn.net/m0_52503267/article/details/125950656