用好href的target, base href

@航空母舰

已于 2024-12-18 23:53:19 修改

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏： UI设计文章标签： html5

于 2011-07-06 10:29:39 首次发布

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540378

UI设计专栏收录该内容

30 篇文章

订阅专栏

本文介绍了<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>";