源码类型

站长工具

营销软件
开发软件

小飞兔下载仿站小工具 Navicat 15
软件分享
在线工具



关键词组合织梦工具箱 AI算法软件

教程-营销

会员中心

HTML中的base标签使用详解

2021-02-08 作者：匿名阅读：1761次

前言

本文重点解决HTML中的base标签使用详解问题,希望能够帮助到你

在requireJS中，有一个属性叫baseURL，通过设置baseURL，我们可以将需要加载的文件路径写成相对于项目的，而不是相对于当前页面的。

例如：假设我们的项目目录是/myproject/，里面有两个页面，一个是/myproject/one.html，另一个是/myproject/html/other.html，他们都要加载/myproject/js/some.js。如果我们将baseURL设置成/myproject/，则我们在加载该js的时候，这两个页面都可以使用相对于项目的路径./js/some，而不是因为页面的路径不同而使用不同的相对路径。

但是如果不使用requireJS，我们能不能实现类似于baseURL的功能呢？

base标签
其实，HTML中有一个base标签，可以产生类似的功能。举个例子：

复制代码

代码如下:
<html>
<head>
<base href="http://static.cnblogs.com/" />
</head>
<body>
<img src="./images/logo_gray.gif" />
</body>
</html>

我们会发现，我们用相对路径./images/logo_gray.gif加载的图片，却变成了http://static.cnblogs.com/images/logo_gray.gif的图片。

base标签可以给页面的链接加上默认的路径，或者默认的打开方式。

下面是一个设置默认打开方式的例子：

复制代码

代码如下:
<html>
<head>
<base target="_blank" />
</head></p> <p><body>
<a href="http://www.cnblogs.com">这个页面会在新窗口打开</a>
<a href="http://justany.cnblogs.com">这个页面也会在新窗口打开</a>
</body>
</html>

一个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标签设置的默认路径加载。

Chrome的加载正常。

Firefox的加载不正常。

Why？

这个我们并没有找到很好的解释，我们的分析是浏览器对资源加载进行了优化，导致动态插入base标签并未生效时，就预先去加载了，结果出错，然后base标签生效于是又加载正确的资源。

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/html/3535.html

W 导出为.doc文档

标签标签设置使用默认路径相对标签使用标签使用

上一篇HTML中的标签和元素的区别详解

下一篇html中select optgroup标签使用介绍

以上内容由本站整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

点赞

相关内容

dedecms 织梦后台系统配置参数空白的解决方法

织梦dedecms安装完后如何重装

dedecms专题节点内容列表默认没有分页该怎么办呢

DEDECMS调用DISCUZ论坛置顶贴子，版块名称

CSS Sprite雪碧图应用

dedecms织梦模板标签{dede:type}调用父级栏目

JavaScript 中的 this 全面解析

织梦dedeCMS软件频道防盗链设置

帝国CMS的采集常用小技巧介绍

关于织梦友情链接的标签问题

值得分享和收藏的Bootstrap学习教程

dedecms织梦手机站内容页图片自适应标签

基于HTML5上使用iScroll实现下拉刷新，上拉加载更

linux服务器wdcp面板做301域名重定向设置

织梦教程：DEDECMS中MYSQL修复表的两个小技巧

dedecms中tags页面显示错位的解决方法

使用织梦dede模板建下载站的必备下载类标签调用方法

dedecms织梦dede:channel标签里面调用文章列表

帝国CMS各种调用标签使用中的一些小技巧

帝国CMS会员中心调用当前会员提交过的信息反馈列表

星联网络

星联网络是中国最具实战的互联网创业者的知识服务商，这里有互联网行业动态,网络推广,SEO优化,SEM优化,ESC配置,行业经验分型,互联网项目，微信营销、淘宝客赚钱、新媒体营销、京东运营、跨境电商等众多互联网营销知识分享

站长运营站长必备网站运营之道才能长久发展

【05-30】 新手如何入门做短视频，这几个方法一定要学