用好href的target, base href

本文介绍了<base href>标签在Web编程中的作用,特别是如何解决相对路径问题,包括如何使用它来保持CSS样式和图片显示,并通过实例展示了常见用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

base href

`base href` 是 HTML 中的一个重要属性,用于指定文档中所有相对 URL 的基础 URL。使用 `<base>` 标签可以确保页面中的相对路径链接正确解析。以下是关于 `base href` 的几个要点:

**作用**:

  •   设置页面中所有相对路径的基准 URL。
  •   适用于 `<a>`, `<img>`, `<link>`, `<script>` 等标签中的相对路径。

- **示例**:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    <base href="https://example.com/">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <img src="images/logo.png" alt="Logo">
    <a href="about.html">About Us</a>
  </body>
  </html>

在这个例子中,<base href="https://example.com/"> 设置了基础 URL,因此:
<link rel="stylesheet" href="styles.css"> 实际上会指向 https://example.com/styles.css
<img src="images/logo.png"> 实际上会指向 https://example.com/images/logo.png
<a href="about.html"> 实际上会指向 https://example.com/about.html

注意事项:

<base> 标签必须放在 <head> 部分。
页面中只能有一个 <base> 标签。
使用 <base> 标签可能会影响页面性能,因为浏览器需要重新解析所有相对路径。
希望这些信息对你有帮助!如果你有更多问题或需要进一步的解释,请随时提问。

`target`

`target` 属性可以设置为以下几种值之一:

- `_self`: 在当前窗口或标签页中打开链接(默认值)。
- `_blank`: 在新窗口或标签页中打开链接。
- `_parent`: 在父框架中打开链接。如果没有父框架,则与 `_self` 行为相同。
- `_top`: 在顶层窗口中打开链接。如果没有框架,则与 `_self` 行为相同。

target特殊用法1

有一个链接的 `target` 属性设置为 "user"(非上面4个都可以),这并不是一个标准的 `target` 值。他的作用是新开一个窗口,只要新开的窗口存在没有关闭,点击后只会盖刷新

form表单target的用法 替代window.open

 
framename 在指定的框架中打开。

为了实现当前页表单提交而不进行跳转刷新,我们在页面底部增加了一个隐藏得frame

<iframe id="upload_target" name="upload_target" style="display:none;"></iframe>

在把form中的target属性改成隐藏iframe的name。这样就看不到页面的跳转了。

<form enctype="multipart/form-data" target="upload_target" action="UploadExcel" method="post">
<input type="file" name="repair_attached_file1" onchange="clearMsg('upload_repairinfo_success1')"/>

回调函数

<script type='text/javascript'>
//回调失败
function stopUpload(responseText){
	// 提示
	var spanObj = document.getElementById("upload_repairinfo_success1");
	spanObj.innerHTML = responseText;
}

//清空提示信息
function clearMsg(id){
    document.getElementById("upload_repairinfo_success1").innerHTML = "";
}
</script>

 后台

header("Content-type:text/html;charset=utf-8");
echo "<script type='text/javascript'>window.parent.window.stopUpload('导入成功!')</script>";

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值