您的位置：首页 > 编程技术 > html  >  html中base标签解决相对路径问题

html中base标签解决相对路径问题

 更新时间：2016年9月20日 18:58  点击：1851
网站是由两套独立的系统组合而来，一套门户，一套自定义开发，分别位于不同的服务器。 域名只能有一个，于是使用nginx做了代理，根据location做了转发，比如/portal就转发到门户系统。

问题是门户系统一直使用的是相对路径，首页做了rewrite，而首页的很多链接(包括css、js、图片等)都是相对路径，问了门户系统那边的没法解决，只能用相对路径。

杯具来了，href="news/2014/05/25/1234.html"类似这样的链接都成了http://www.111cn.net /news/2014/05/25/1234.html的全路径，而这个路径在nginx中是没法识别成门户系统的(nginx是通过/portal来匹配的)。
这是因为：HTML文档所有链接中的相对路径，浏览器都会提取当前文档的URL来填充。
突然想起了HTML的base标签，来看W3C的解释：


<base> 标签为页面上的所有链接规定默认地址或默认目标。
 
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
 
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
 
注释：<base> 标签必须位于 head 元素内部。
`(*∩_∩*)′尝试一下，在head标签中加入base标签
?

实例

 代码如下 复制代码

<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>

问题果然解决！

注：文中使用的域名和路径非真实场景中的域名和路径。

一个BUG

base标签最好不要动态写入，否则在Firefox和IE中会有一个小bug，比如对于页面http://localhost/static/test.html：

 

 代码如下 复制代码
<html>
<head>
<script>
document.write('<base href="http://localhost/" />');
</script>
</head></p> <p><body>
<img src="static/1.jpg" />
</body>
</html>

Firefox和IE中会先加载http://localhost/static/static/1.jpg，然后再加载http://localhost/static/1.jpg。也就是说，他们都先尝试用相对于当前页面的路径进行加载，然后再通过base标签设置的默认路径加载。

当我们保存一个以UTF-8编码的文件时，会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即BOM），而这个bom头可能导致一些不必要的问题，下面我整理了一些关于删除uft-8文件bom头信息一些常用方法，有兴趣的朋友可进入参考。

如果您在修改任何PHP文件发生：

* 不能登入或者不能登出； * 页顶出现一条空白； * 页顶出现错误警告； * 其它不正常的情况。

bom文件是怎么产生呢?

window编辑器如果保存为utf8文件就会帮你加上BOM头，以告诉其他编辑器以utf8来显示字符
但是在网页上并不需要添加BOM头识别，因为网页上可以使用 head头 指定charset=utf8告诉浏览器用utf8来解释.但是你用window自动的编辑器，编辑,然后有显示在网页上这样就会显示出0xEF 0xBB 0xBF这3个字符。
这样网页上就需要去除0xEF 0xBB 0xBF，可以使用editplus 选择不带BOM的编码，这样就可以去除了

bom文件头信息删除

我最常用的方法来处理php文件处理

 代码如下 复制代码

<?php
/**
 * 用法：复制以下代码至新建的php文件中，将该php文件放置项目目录，运行即可。代码来源于网络。
 * chenwei 注。
 */
header('content-Type: text/html; charset=utf-8');
$auto=1;/* 设置为1标示检测BOM并去除，设置为0标示只进行BOM检测，不去除 */
$basedir='.';
$loop=true;
echo '当前查找的目录为：'.$basedir.'当前的设置是：';
echo '（1）',$loop?'检查当前目录以及当前目录的子目录':'只针对当前目录进行检测';
echo '（2）',$auto?'检测文件BOM同时去除检测到BOM文件的BOM<br />':'只检测文件BOM不执行去除BOM操作<br />';

checkdir($basedir,$loop);
function checkdir($basedir='',$loop=true){
    $basedir=empty($basedir)?'.':$basedir;
    if($dh=opendir($basedir)){
        while (($file=readdir($dh))!==false){
            if($file!='.'&&$file!='..'){
                if(!is_dir($basedir.'/'.$file)){
                    echo '文件: '.$basedir.'/'.$file .checkBOM($basedir.'/'.$file).' <br>';
                }else{
                    if(!$loop) continue;
                    $dirname=$basedir.'/'.$file;
                    checkdir($dirname);
                }
            }
        }
        closedir($dh);
    }
}
function checkBOM($filename){
    global $auto;
    $contents=file_get_contents($filename);
    $charset[1]=substr($contents,0,1);
    $charset[2]=substr($contents,1,1);
    $charset[3]=substr($contents,2,1);
    if(ord($charset[1])==239&&ord($charset[2])==187&&ord($charset[3])==191){
        if($auto==1){
            $rest=substr($contents,3);
            rewrite($filename,$rest);
            return (' <font color=red>找到BOM并已自动去除</font>');
        }else{
            return (' <font color=red>找到BOM</font>');
        }
    }else{
        return (' 没有找到BOM');
    }
}
function rewrite($filename,$data){
    $filenum=fopen($filename,'w');
    flock($filenum,LOCK_EX);
    fwrite($filenum,$data);
    fclose($filenum);
}

利用Dreamweaver 中去除bom方法

打开Dreamweaver->选择编辑->首选参数->新建文档标签->右边->"包括Unicode 签名(BOM)" 前面的对钩去掉即可

删除uft-8文件bom头信息的方法


editplus等编程工具时UTF-8编码去掉BOM头方法

编辑器调整为UTF8编码格式后，保存的文件前面会多出一串隐藏的字符（也即是BOM），用于编辑器识别这个文件是否是以UTF8编码。一般的文本文件会忽略这一串隐藏的字符，但对于PHP等文件会解析这一串字符，这样会导致出错。

运行Editplus，点击工具，选择首选项，如下图：

删除uft-8文件bom头信息的方法


选中文件，UTF-8标识选择 总是删除签名，如下图：
 

删除uft-8文件bom头信息的方法

然后对PHP文件编辑和保存后的PHP文件就是不带BOM的了


linux下查找包含BOM头的文件和清除BOM头命令

查找包含BOM头的文件，命令如下：

grep -r -I -l $'^＼xEF＼xBB＼xBF' ./

这条命令会查找当前目录及子目录下所有包含BOM头的文件，并把文件名在屏幕上输出。

但是，删除BOM头，网上找到的命令大多不能用，比较常见的命令是：

grep -r -I -l $'^＼xEF＼xBB＼xBF' /path | xargs sed -i 's/^＼xEF＼xBB＼xBF//;q'
但这条命令会把除了首行之外所有的行删除，所以毫无意义。

经测试如下命令是可行的：

 find . -type f   -exec  sed -i 's/＼xEF＼xBB＼xBF//' {} ＼;

这个命令会把当前目录及所有子目录下的BOM头删除掉。

每天紧张的生活过程中，总是忘记了记录了生活。既然创建了这个博客，就是想给自己的工作生活留下记忆，同意也希望能分享给跟我有同样生活经历的电子商务从业者。沈军就分享一下这几天在学习零基础学PHP+MYSQL过程中，关于HTML基础知识的一些问题和感想。

毕业也快一年，一直从事网络推广工作，工作中经常接触到HTML代码，虽然大学里学过一些，但是自己仍然对HTML基础知识不够顽固，对于HTML没有系统性的概念。在这几天的HTML基础知识学习当中，主要有以下几点感悟。

1、看似熟悉，具体用法不懂

对于HTML基础知识，只能说大部分都是认识，知道代码是什么意思，可是详细的细分，具体代码怎么用，自己有不知道，对一些标记的属性根本不知道。比如说基本蚊子标记符<SUB>下角标和<SUP>上角标，网页标记<meta>网页的语言，之前的具体用法都不知道，我想之前网页的一些乱码可能和<meta>有一定的关系吧。

2、<p>和<br>标记的具体区别

经常在文字编辑当中，<p>的最基本的段落标记。<p>标记不需要成对出现，单个的<p>只需要加在段落末尾即可。<p>和<br>具体有什么关系呢，<p>标记的每个段落使段落与段落之间有一行空格。<br>换行标记责不会产生一行空格，只是普通的换行，<br>可以单独使用，也可以成对使用。

3、HTML基础知识需继续学习

发现问题才懂得去解决问题，自己对HTML基础知识不熟悉，就要不断的加强学习。空余时间多看看，遇到不懂的代码多查阅记录，养成良好的使用注释标记的习惯，这样对我们学习代码更快迅速。一句话，越是小问题，就是越仔细，面对大问题，我们才有足够的信心和实力!

[!--infotagslink--]

相关文章

  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24

  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31

  • linux中PHP dirname(__FILE__)路径问题解决

    在php 中dirname() 函数返回路径中的目录部分，__FILE__而当前运行文件的完整路径和文件名。如果用在被包含文件中，则返回被包含的文件名。这是一个魔法变量（预定义常量），在...2016-11-25

  • C#路径,文件,目录及IO常见操作汇总

    这篇文章主要介绍了C#路径,文件,目录及IO常见操作,较为详细的分析并汇总了C#关于路径,文件,目录及IO常见操作,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15

  • 使用C#获取系统特殊文件夹路径的解决方法

    本篇文章是对使用C#获取系统特殊文件夹路径的解决方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • C# 如何设置label（标签）控件的背景颜色为透明

    这篇文章主要介绍了C# 如何设置label（标签）控件的背景颜色为透明，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2020-12-08

  • matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())

    这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • C#删除UL LI中指定标签里文字的方法

    这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25

  • 帝国CMS用灵动标签调用实现各种幻灯（焦点图）效果

    用灵动标签(e:loop)可以实现各种幻灯效果，本节讲解制作幻灯的基本方法。 如本站JS焦点图频道里的大部分幻灯图片效果都可以用灵动标签调用的。 ...2015-12-30

  • Java实现将图片上传到webapp路径下 路径获取方式

    这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-11-12

  • C#使用浏览按钮获得文件路径和文件夹路径的方法

    这篇文章主要介绍了C#使用浏览按钮获得文件路径和文件夹路径的方法,结合实例形式分析了C#浏览器事件响应及文件操作相关技巧,需要的朋友可以参考下...2020-06-25

  • 如何改变R语言默认存储包的路径

    这篇文章主要介绍了改变R语言默认存储包的路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06

  • IOS获取各种文件目录路径的方法

    ios获取文件路径的方法，iphone沙箱模型的四个文件夹，通过documents，tmp，app，Library得到模拟器路径的简单方式，下面小编整理相关资料，把IOS获取各种文件目录路径的方式总结如下，需要的朋友可以参考下...2020-06-30

  • 探讨JavaScript标签位置的存放与功能有无关系

    在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。一般来说，<script>元素放在哪里与其的功能作用是紧密相关的，通过本文我们一起学习下...2016-01-18

  • 帝国CMS灵动标签调用新闻正文内容第一张图片的方法

    有时候我们在建站的过程当中需要调用内容页中正文的第一张图片（并不是缩略图），这样就会无从下手，但其实对不懂开发的站长是太难了，往往是会用标题图片来取代，下面分享网友们贡献出...2015-12-30

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动，滚动到底部带信息提示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...2015-03-15

  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容，实用性非常，感兴趣的朋友参考下吧...2016-05-06

  • C#使用正则表达式过滤html标签

    最近在开发一个项目，其中有需求要求我们把一段html转换为一般文本返回，使用正则表达式是明智的选择，下面小编给介绍下C#使用正则表达式过滤html标签，需要的朋友参考下...2020-06-25

  • c# 获得当前绝对路径的方法(超简单)

    下面小编就为大家分享一篇c# 获得当前绝对路径的方法(超简单)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25