有趣的base href

本文介绍了HTML中的base标记,解释了如何使用它来设置页面中所有链接的默认目标位置及路径前缀。通过一个实例展示了如何简化框架结构中链接的管理。
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd>

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>

当点了链接后,跳出的文件是
常在框架结构中用,如左右两个框架,把左边的框架中文件里的连接都显示在右边的框架里。只要用base标记,把其target属性值写为右框架名称,这就不用再为左框架里的文件中的每一个连接都指定target属性。

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

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

此元素不会被渲染。

此元素不需要关闭标签。

### Angular 中 `APP_BASE_HREF` 的用法 在 Angular 应用程序中,路由模块依赖于基础路径来解析相对 URL。为了配置应用程序的基础路径,可以使用 `APP_BASE_HREF` 注入令牌[^1]。 当部署应用到服务器上的子目录而不是根目录时,需要指定该子目录作为应用的基础路径。通过提供 `APP_BASE_HREF`,可以在启动期间告诉 Angular 路由器这个基础路径是什么: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, APP_BASE_HREF } from '@angular/router'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, RouterModule.forRoot([ // 定义路由配置... ]), ], providers: [{ provide: APP_BASE_HREF, useValue: '/my-subdir/' }], bootstrap: [AppComponent], }) export class AppModule {} ``` 在这个例子中,假设应用被部署到了 `/my-subdir/` 子目录下,则应将 `useValue` 设置为对应值。这会告知路由器所有链接都相对于此路径构建。 如果未正确设置 `APP_BASE_HREF` 或者完全忽略了它,在某些情况下可能会遇到页面刷新后找不到资源的问题,因为浏览器尝试访问错误的位置去加载组件或其他静态文件[^2]。 对于开发环境中的本地测试,默认情况下不需要显式设定 `APP_BASE_HREF`,因为它通常会被设为 `'/'` 表示根目录。但在生产环境中特别是非根路径部署的情况下,合理配置这一参数非常重要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值