<base href="basepath"> 的理解

"base href "

今天在写一个JSP网页的时候,href不能用了,所有href鼠标放上去前面现实的都是“http:///”,竟然有三个“/”,而且前面也没有显示“localhost:8080”找了大半天找不出来,最后才发现不小心将Eclipse自动生成的下面两行代码误删了,
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
我一直没有使用path 和 basepath ,为什么会这样呢,最后终于发现,原来在 <head></head>中,有一句 <base href="<%=basePath%>"> 使用了basepath,就是因为这句,所有的链接才不能使用了。看来问题就出在base href 上了,顾名思义,base href不是就是基链接嘛。
上网搜索了一下,原来base href 不单单只有这么点作用,尤其在框架中。

资料如下:

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

重要属性:
href
设定前缀的链接地址

target
设定文件显示的窗口,同a标记中的target

简单例子:

<html> 
<head> 
<base href="http://www.baidu.com" target="_blank"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>base标记</title> 
<link rel="Shortcut Icon" href="ani.CUR"> 
</head> 
<body> 
<a href="77.htm" target="_self">77</a> 
<a href="88.htm">88</a> 
</body> 
</html>
当点了链接后,跳出的文件是http://www.baidu.com/77.htm或http://www.baidu.com/88.htm,它就是在这些相对路径的文件前加上基链接指向的地址。如果目标文件中的链接没有指定target属性,就用base标记中的target属性。
常在框架结构中用,如左右两个框架,把左边的框架中文件里的连接都显示在右边的框架里。只要用base标记,把其target属性值写为右框架名称,这就不用再为左框架里的文件中的每一个连接都指定target属性。

当使用时,BASE 元素必须出现在文档的 HEAD 内,在任何对外部源的引用之前。

此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素不会被渲染。

此元素不需要关闭标签。

这个标签的用处是解决编程时候的相对路径问题,比如有的cms,因为每页路径不一样,他就给你生成<a href="/sdsd/dsd.html">sddsds</a>之类的,如果我在本地调试,肯定会在本地开一个目录的,这样就乱了,你可以把它生成相对路径,如<a href="sdsd/dsd.html">sddsds</a>,只要在head部分加上<base href=http://localhost/abc/>即可。

所以说,这个标签主要为了解决web编程的时候一些相对路径的问题。

当然,这个base还有一个用法,如在head部分加上这么一行: <base href="_blank"> ,就是默认所有链接在新窗口打开。

还可以这么理解:
这是设置基础路径的,basepath为变量 
简单的静态网页的话你设置比如:<base href="http://www.baidu.com">,那你下面的href属性就会以你上面设的为基准,如:<a href="http://www.baidu.com/xxx.htm"></a>你现在就只需要写<a href="xxx.htm"></a>

原文博客地址:http://316325524.blog.163.com/blog/static/6652052320111118111620897/

时间: 2024-10-29 19:12:02

<base href="basepath"> 的理解的相关文章

&lt;!DOCTYPE&gt; 的理解

[[ from <!DOCTYPE> 标签的深入理解 ]] 前言: 今天被问道“有没有仔细了解过<!DOCTYPE>标签?”,愣了一下,因为一开始在W3cschool上看到过建议使用XHTML Transitional DTD,之后就很听话地把Dreamweaver的HTML文档类型默认设置为XHTML 1.0 Transitional.之后就理所当然地一直用到现在了.人这东西还真是,越长大就越懒了,很多东西都被潜意识地当成了理所当然.既然已经被问及,就去找了找资料,总结了一下,权

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

一套名企WEB前端面试题,不提供答案

1.说说你对Doctype的理解 2.web产品开发的流程 3.说说你对盒子模型的理解 4.前端页面有哪三层构成,分别是什么?作用是什么? 5.行内元素有哪些?块级元素有哪些?他们如何相互转化? 7.CSS的引入方式有哪些? 8.请用CSS来定义<p>标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色. 9.谈谈CSS Sprites技术 10.你做的页面在哪些浏览器下测试过?这些浏览器的内核分别是什么?这些浏览器的兼容性有哪些. 11.谈谈你

XML相关的安全漏洞-XXE,XPATH小结

0x00前言: 本文主要小结以下php下的xpath查询xml结构的漏洞利用和XXE漏洞利用 xml是可扩展标记语言,它被设计出来是为了存储传输数据的. 它的结构是树形结构,并且标签要成对出现比如下面这个例子 <?xml version="1.0" encoding="utf-8"?> <root> <name>sijidou</name> <from> <country>China</c

正确理解HTML,XHTML页面的头部doctype定义

摘自http://www.west263.com/info/html/wangyezhizuo/css/20080225/42390.html 当我们制作页面的时候,总会在它的源码头部看到一串声明,比如最常见的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 如

如何理解DocType? 什么是严格模式与混杂模式?如何触发这两种模式?

1.Doctype声明位于文档中的最前面的位置,处于标签之前,此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范,该标签可声明三种DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档.2.当浏览器厂商开始创建与标准兼容的浏览器时,为了确保向后兼容性,他们把浏览器的工作模式(渲染模式)分为标准模式和混杂模式.在标准模式中,浏览器根据规范呈现页面:在混杂模式中,页面以一种比较宽松的向后兼容的方式显示,混杂模式通常模拟老式浏览器的行为以防止老站点无法工作.3.如何触发这两

&lt;!DOCTYPE html&gt;声明下div高度100%的问题

在使用HTML代码创建网页,如果声明了<!DOCTYPE html>,并且在代码中有div设置了高度为100%,可能会出现显示不正常的情况.比如下面这个代码: <!DOCTYPE HTML> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type=&q

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

vue.js中$emit的理解

官网介绍比较简单 例子:$emit('increment1',[12,'kkk']),直接看是懵逼的有没有,可以先告诉你,就是触发自定义事件increment1(或者函数名吧),[]为参数 上案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id=&qu

理解Selection对象

Selection对象的属性如下: var selection = window.getSelection(); console.log(selection); 通过上面的代码在控制台查看: anchorNode: {node} 节点: 包含了用户选取内容的起点的节点. anchorOffset {int} 整型值: 用户选取内容的起点与anchorNode属性值所返回的节点的起点之间的距离. focusNode {node} 节点: 包含了用户选取内容的终点的节点. focusOffset {