• 技术文章 >web前端 >html教程

    关于html中<base> 标签的作用及使用介绍

    黄舟黄舟2017-06-19 17:57:25原创1408
    描述看不懂,所以请高人解答

    通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白
    这句话,也有点不懂

    制定一个url地址,比如你用base制定了,某个文件夹
    下面你调用图片、音乐什么的,不用填写完整的文件夹地址,写上图片名、歌名就行了,它会自动从上面你指定的文件夹里面找。

    <base> 标签为页面上的所有链接规定默认地址或默认目标。
    通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
    使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

    测试:

    1:放在base标签前面的link路径可以使用相对路径且是相对于当前路径,
    但是放在其后面的link使用相对路径将是相对于base指定的路径。
    2:使用了base标签后body中的链接的相对路径将是相对于base指定的路径。
    3:使用了base默认目标后,之后的打开方式将采取base指定的方式打开,除非后面又显示定义了打开方式。
    总结:base其实就是定义一个默认的地址和默认目标。在其后的链接元素都将起作用。

    base标记是一个基链接标记,是一个单标记。用以改变文件中所有连结标记的参数内定值。它只能应用于标记<head>与</head>之间。
    你网页上的所有相对路径在链接时都将在前面加上基链接指向的地址。

    base 元素可规定页面中所有链接的基准 URL
    我们可以使用 <base>标签中的href属性来设置,所有的“相对基准 URL”。

    这是JSP端的代码
    采用了html文件中的 <base>标签:

    <%
    String path = request.getContextPath();
    // 获得项目完全路径(假设你的项目叫myWork,那么获得到的地址就是 http://localhost:8080/myWork/):
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    // 将 "项目路径basePath" 放入pageContext中
    %>
    <html>
    <head>
    <base href=" <%=basePath%>">
    //base只能应用于标记<head>与</head>之间
    </head>
    // 这里我们就可以直接使用相对路径(即: 相对于base标签)
    <a href="jsp/login.jsp">Login </a>
    </html>
    当我们去执行上面的那段JSP代码后,我们可以在浏览器中可以查看,他所返回给客户端的html代码:
    执行完上述JSP后,所返回的html代码如下:
    <html>
    <head>
    <base href="http://localhost:8080/myWork/">
    </head>
    // 设置了 <base>后,相对路径,相对于的就是base中的路径,而不再是浏览器地址的请求路径啦~~~
    <a href="jsp/login.jsp">Login </a>
    </html>

    我们可以看到JSP返回的html代码中,包含了 <base href="http://localhost:8080/myWork/">内容。
    也就是说,在本html文件中,遇到的所有 “相对链接(例如: <a href="jsp/login.jsp">)”,都是相对于base
    的路径(即:http://localhost:8080/myWork/)

    以上就是关于html中<base> 标签的作用及使用介绍的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html base 作用 标签 关于
    上一篇:<!DOCTYPE>标签是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ExtJs教程16(上)• 18、HTML_html/css_WEB-ITnose• html+css知识整理_html/css_WEB-ITnose• div+css初学者的理想起步_html/css_WEB-ITnose• 实现主页_实现内容的第一部分
    1/1

    PHP中文网