WEB 工程路径专题--base 标签的使用和建议示意图

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: WEB 工程路径专题--base 标签的使用和建议示意图


WEB 工程路径专题

工程路径解决方案

 

解决方案:相对路径

1. 说明: 使用相对路径来解决,一个非常重要的规则:页面所有的相对路径,在默认情

况下,都会参考当前浏览器地址栏的路径 http://ip:port/工程名/ + 资源来进行跳转。所以

我们可以直接这样写

2. 相对路径带来的问题举例 => 示意图

3. 如果需要指定页面相对路径参考的的路径,可以使用 base 标签来指定

解决方案:base 标签

base 基本介绍

1. base 标签是 HTML 语言中的基准网址标记,它是一个单标签,位于网页头部文件的 head

标签内

2. 一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标,是一种表达路

径和连接网址的标记。

3. 常见的 url 路径形式分别有相对路径与绝对路径,如果 base 标签指定了目标,浏览器

将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form)

4. 也就是说,浏览器解析时会在路径前加上 base 给的目标,而页面中的相对路径也都转

换成了绝对路径。使用了 base 标签就应带上 href 属性和 target 属性

base 应用实例

1、需求: 演示 base 标签的使用, 说明: 先演示和 html 相关的路径跳转,再演示和Servlet路径转发, 一步步来

a.html

1. <!DOCTYPE html>
2. <html lang="en">
3. 
4. <head>
5. <meta charset="UTF-8">
6. <title>a.html</title>
7. </head>
8. 
9. <body>
10. <h1>这是 a.html</h1>
11. <a href="d1/d2/b.html">跳转到/d1/d2/b.html</a>
12. <br /><br />
13. <a href="servlet03">转发到/d1/d2/b.html</a>
14. </body>
15. 
16. </html>

b.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>b.html</title>
6. <!-- 解读
7. 1. 如果没有<base href="http://localhost:10000/_servlet/">
8. 2. 当点击 返回 a.html 超链接,将会以当前浏览器的地址为路径来确定 路径
9. 3. 如果增加了<base href="http://localhost:10000/_servlet/">
10. 4. 将以 base 指定的 href 的地址为路径,来确定 超链接的路径
11. -->
12. <!--<base href="http://localhost:10000/_servlet/">-->
13. <!--简写形式-->
14. </head>
15. 
16. <body>
17. <h1>这是/d1/d2/b.html</h1>
18. <a>返回 a.html~</a>
19. </body>
20. 
21. </html>

Servlet03.java

1. public class Servlet03 extends HttpServlet {
2. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
3. 
4. //这里我们希望通过转发来定位b.html
5. 
6. //1. 在服务器端 解析第一个 /时,会被解析成 http://ip:port/项目名[application context]
7. //   补充: 项目名=> 说成 application context
8. //2. "/d1/d2/b.html" => 被解析 http://ip:port/项目名/d1/d2/b.html
9.         System.out.println("Servlet03 进行转发~~~ ....");
10.         request.getRequestDispatcher("/d1/d2/b.html").forward(request,response);
11. //3. 在服务器进行转发时, 没有 / 就按照默认的方式参考定位 http://ip:port/项目名/
12. //  仍然使用上面的
13. //request.getRequestDispatcher("d1/d2/b.html").forward(request,response);
14.     }
15. 
16. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17.         doPost(request, response);
18.     }
19. }

练习

login.HTML

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>登录</title>
6. </head>
7. <body>
8. <h1>用户登录</h1>
9. <!--
10. 请写出 login.html 在不通过Servlet转发情况下, 如何 通过表单提交, 找到 user.html, 把所有的写法列出来
11. 1. 完整的url  http://localhost:8080/webpath/views/user/user.html
12. 2. 使用相对路径 action="views/user/user.html" => 使用当前浏览器的 地址栏 ip:port/工程路径/ + ...
13. 3. action="/webpath/views/user/user.html"
14.    浏览器对第一个 / 进行解析 为 http://localhost:8080/ + webpath/views/user/user.html
15.    同样是一个完整url
16. -->
17. <!--<form action="/webpath/hi" method="post">-->
18. <form action="/webpath/redirect" method="post">
19.     u: <input type="text" name="username"><br/>
20. <input type="submit" value="登录">
21. </form>
22. </body>
23. </html>

user.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>用户页面</title>
6. <!--
7.         1. 使用相对路径: <a href="../../login.html">点击返回登录</a>
8.         2. 使用相对路径是比较麻烦,即使成功,还需要考虑是直接定位到这个资源还是请求转发到这个资源
9.         3. 使用base 标签给一个固定的相对路径
10.         4. <base href="/webpath/"> 该标签是浏览器解析 http://localhost:8080/webpath/
11.         5. 在 base 得到的url 路径基础上 <a href="login.html">点击返回登录</a> =>
12.            http://localhost:8080/webpath/login.html通.
13.     -->
14. <base href="/webpath/">
15. </head>
16. <body>
17. <h1>用户页面</h1>
18. <a href="login.html">点击返回登录</a>
19. </body>
20. </html>

WEB 工程路径注意事项和细节

注意事项和细节说明

1. Web 工程的相对路径和绝对路径

               ● 相对路径是:

               ● .表示当前目录

               ● ..表示上一级目录

               ● 资源名 表示当前目录/资源名

               ● 绝对路径: http://ip:port/工程路径/资源路径

2. 在实际开发中,路径都使用绝对路径,而不是相对路径

3. 在 web 中 / 斜杠 如果被浏览器解析,得到的地址是:

               http://ip[域名]:port/比如: <a href="/">斜杠</a>

4. 在 web 中 / 斜杠 如果被服务器解析,得到的地址是:http://ip[域名]:port/工程路径/,

你也可以理解成 /工程路径/ 下面的几种情况就是如此:

               ● <url-pattern>/servelturl</url-pattern>

               ● servletContext.getRealPath("/"); ==> 是得到执行路径/工作路径

               ● request.getRequestDispatcher("/");

5. 在 javaWeb 中 路径最后带 / 和 不带 / 含义不同, 一定要小心,

  • 比如 <a href="/a/servlet03">网址</a> : servlet03 表示资源
  • <a href="/a/servlet03/">网址</a> : servlet03 表示路径

6. 特别说明:重定向 response.sendRediect("/"); 这条语句虽然是在服务器执行的,但是,

服务器是把斜杠 / 发送给浏览器解析。因此得到地址 http://ip[域名]:port/

小结:

在编写资源路径时: , 考虑这么几点.....

(1) 这个路径 前面有没有 /

(2) 这个路径 在哪里被解析 [服务器还是浏览器] , 如果前面有 / , 并且是在 浏览器被解析的 被解析成 http://ip:port/ , 如果在服务器端被解析 , 被解析成 / 工程路径 /

(3) 如果这个路径,前面没有 / , 并且在浏览器被解析,则以浏览器当前的地址栏去掉资源部分,作为一个相对路径.

(4) 这个路径,最后有没有 / , 如果最后有 / 表示路径, 如果没有 / 表示资源

练习

在通过 Servlet 重定向情况下, 如何 通过表单提交, 找到user.html, 把所有的写法列出来

前面页面代码  a.html  b.html以及完成这里就是server代码

server代码

1. package com.hspedu.servlet;
2. 
3. import javax.servlet.ServletException;
4. import javax.servlet.http.HttpServlet;
5. import javax.servlet.http.HttpServletRequest;
6. import javax.servlet.http.HttpServletResponse;
7. import java.io.IOException;
8. 
9. public class Servlet03 extends HttpServlet {
10. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
11. 
12. //这里我们希望通过转发来定位b.html
13. //1. 在服务器端 解析第一个 /时,会被解析成 http://ip:port/项目名[application context]
14. //   再补充: 项目名=> 说成 application context
15. //2. "/d1/d2/b.html" => 被解析 http://ip:port/项目名/d1/d2/b.html
16.         System.out.println("Servlet03 进行转发~~~ ....");
17.         request.getRequestDispatcher("/d1/d2/b.html").forward(request,response);
18. //3. 在服务器进行转发时, 没有 / 就按照默认的方式参考定位 http://ip:port/项目名/
19. //   建议,仍然使用上面的
20. //request.getRequestDispatcher("d1/d2/b.html").forward(request,response);
21.     }
22. 
23. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
24.         doPost(request, response);
25.     }
26. }


目录
相关文章
|
6月前
|
Java 应用服务中间件 Apache
Maven程序 tomcat插件安装与web工程启动
Maven程序 tomcat插件安装与web工程启动
62 0
|
7月前
|
网络协议 Shell 网络安全
实验目的1.编译安装httpd2.优化路径3.并将鲜花网站上传到web服务器为网页目录4.在客户机访问网站http://www.bdqn.com
实验目的1.编译安装httpd2.优化路径3.并将鲜花网站上传到web服务器为网页目录4.在客户机访问网站http://www.bdqn.com
216 0
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
52 13
|
4月前
|
Java 应用服务中间件 Apache
使用IDEA修改Web项目访问路径,以及解决Apache Tomcat控制台中文乱码问题
本文介绍了在IntelliJ IDEA中修改Web项目访问路径的步骤,包括修改项目、模块、Artifacts的配置,编辑Tomcat服务器设置,以及解决Apache Tomcat控制台中文乱码问题的方法。
234 0
使用IDEA修改Web项目访问路径,以及解决Apache Tomcat控制台中文乱码问题
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
52 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
79 1
|
6月前
|
Java 应用服务中间件 API
eclipse创建 maven-web工程
eclipse创建 maven-web工程
|
6月前
|
Java 应用服务中间件 程序员
JavaWeb基础第四章(SpringBootWeb工程,HTTP协议与Web服务器-Tomcat)
JavaWeb基础第四章(SpringBootWeb工程,HTTP协议与Web服务器-Tomcat)
|
6月前
|
移动开发 前端开发 数据安全/隐私保护
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
43 0
下一篇
无影云桌面