指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。
Specifies an explicit URL used to resolve links and references to external sources such as images and style sheets.
元素说明
当使用时，base 元素必须出现在文档的 head 内，在任何用于引用外部资源的元素之前。
此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。
此元素不改变内容的显示格式。
此元素不需要关闭标签。
When used, the base element must appear within the head of the document, before any elements that refer to an external source.
This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.
This element is not rendered.
This element does not require a closing tag.
示例代码
下面的例子设置了文档的基础 URL 到一个引用文件夹。Internet Explorer 使用 base 元素来解析指向 http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/href_2.html 的链接。
This example sets the base URL of the document to a reference folder. Internet Explorer uses the base element to resolve the link to http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/href_2.asp.
<HTML>
<HEAD>
<BASE HREF="http://msdn.microsoft.com/workshop/author/dhtml/reference/"/>
</HEAD>
<BODY>
Click <A HREF="properties/href_2.asp">here</A>to learn about the
href property.
</BODY>
</HTML>
下面的例子表示，如在文档中指定了合法的 base 元素，则从文档中获取基础 URL；反之，返回 null。
This example retrieves the base URL from the document if a valid base element is specified in the document. Otherwise, the function returns null.
<SCRIPT>
function GetBase()
{
var oBaseColl = document.all.tags('BASE')
return ( (oBaseColl &&oBaseColl.length) ? oBaseColl[0].href :
null )
}
</SCRIPT>
这是基本的HTML语言。用<base target=_××>来设置这个网页所有链接的目标窗口。也就是说，网页中只要添加<base target=_××>这句，那么所有的超链接就无须单独设置。最好将这句写在<head>和</head>之间。例如<base target=_blank>表示网页中所有的超链接的目标地址都在新建窗口中打开
参考资料：http://www.blabla.cn/html_tag_ref/base.html
在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发。如何使用requirejs加载html
Reuqirejs有一个text的插件，它可以读取指定文件的内容，读取到的内容就是文本。
如何下载text插件
第一种方法，可以通过npm下载：
npm install requirejs/text
第二种方法，也可以直接去官方github上面直接下载。
直接拷贝内容到text.js中即可。
如何安装text插件
在requirejs的main.js中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。
requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
})
也可以直接放在baseUrl里面。
如何使用text
在目标模块中，按照下面的语法即可：
define(function(require){
var html = require("text!html/test.html")
console.log(html)
})
或者
define(["text!html/test.html"],function(html){
console.log(html)
})
如何进行html的模块化开发？
看过上面你已经会使用text了，但是仍然不知道怎么组织前端代码。
举个栗子：
博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中，很容易想到原始的做法是，导航的按钮对应不同的div，点击那个按钮，就显示与之对应的div；其他的div则隐藏掉。
那么，前端的代码可能会这样：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>
</body>
</html>
这样的代码会很杂乱...而且前端Html会很长...不利于维护。
那么有了reuqirejs的text插件以后，就可以这样了：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div id="target"></div>
</body>
</html>
然后在对应的模块中：
$('#target').html(require("text!目标按钮对应的页面.html"))
这样就随性多了吧！前端代码也可以跟着模块一起有效的管理了！
不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。
最近做了一个项目，有个需求是加载本地html页面，后台给的资源包含了图片文件夹、js页面以及html页面。刚开始做的时候我觉得很简单，认为只要用UIWebView加载html字符串就可以了，结果试了很多种办法，图片就是一直显示不出来。查了很多资料，都是说图片的路径不对，然后按着度娘的方法去修改，结果还是一样。
在这里说明一下图片加载不出来的原因：因为我拿不到图片文件夹的绝对路径，只能拿到具体某张图片的相对路径（解释一下，在Xcode中，所有的资源文件夹都是虚拟的，只是相对于Xcode存在，但实际上是不存在的，所以在项目里是无法获取到某个文件夹的绝对路径的），但是在html页面里的图片路径写的是文件夹的绝对路径，所以当UIWebView加载html页面时，找不到html页面里所指的图片文件夹资源，故而图片显示不出来。
基于这个思路，我就想试着更改html页面的图片路径看看效果，结果试了很多种方法还是不行，最后都要放弃了。我知道是图片路径的问题导致图片不显示，但就是想不出办法去获取文件夹的绝对路径，我思考了一个星期都不得要领，最后问了一下同做该项目的安卓同事，终于完美的解决了这个让我头痛许久的问题。具体的解决思路是：将资源压缩添加到项目中，然后拷贝到沙盒目录里，项目启动后解压资源压缩包，并将存到沙盒目录的文件夹路径作为UIWebView的baseURL，这样图片的绝对路径就可以获取到了。
在这里解压资源包我用的是SSZipArchive这个三方库，解压只需要调用它的方法并设置代理即可，其他什么都不用做，非常简单方便。但是值得注意的是，我们解压成功之后，应该将沙盒里的资源包删除，否则每次运行项目都会解压一遍，容易造成内存的浪费，且效率不高。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）