HTML中使用base标签设置URL访问基准

简介: 本文目录1. 背景2. base标签的作用3. 示例4. 意义

1. 背景

一般我写网页是不使用base标签的,但是经常会在看别人的网页时使用base标签,对其含义也一直不甚清楚。


其实base标签还是很常见的,如果使用得当也能让我们的HTML代码更加清晰规范。


2. base标签的作用

base标签用于设置当前HTML页面的访问基准,也就是说使用了base标签后,其他标签的URL在解析时会加上base标签设置的基准。


3. 示例

有两个网页处于同一文件夹下,分别为main.html和test.html。main.html代码如下:

<html>
  <head>
    <title>base tag demo</title>
  </head>
  <body>
      <a href="test.html">正常访问</a>
  </body>
</html>

此时点击链接,就会跳到test.html页,非常好理解。


当将代码修改如下:


<html>

 <head>

   <title>base tag demo</title>

   <base href="http://www.baidu.com/"/>

 </head>

 <body>

     <a href="test.html">基于基准访问</a>

 </body>

</html>


此时点击链接,则会跳转到http://www.baidu.com/test.html,也就是说a指向的URL在解析是会加上base标签设置的基准URL。


4. 意义

base标签的意义比较好理解,如果网页中有很多个URL,其基准URL都是一样的,那不如直接设置一个base标签,这样多个URL都可以省略基准URL部分了。


代码更加干净清晰。

相关文章
|
3天前
|
PHP Apache
【ThinkPHP框架教程·Part-04】URL访问模式
本章节介绍 ThinkPHP6.0 的 URL 访问模式,解析其访问方法。ThinkPHP 框架通过 URL 实现多种操作,默认为单应用模式。
【ThinkPHP框架教程·Part-04】URL访问模式
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
HTML URL可以有多少种写法
URL有多种类型,包括绝对URL,其包含完整路径;相对URL,则基于当前文档位置。此外有协议相对URL,不指定协议;锚点URL用于定位页面内特定位置;邮政URL用于创建邮件链接;电话URL用于拨打电话;文件URL指向本地文件;数据URL则直接在HTML中嵌入小文件,如图片。
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3月前
|
数据安全/隐私保护
自定义密码访问单页HTML源码
自定义密码访问单页HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
63 1
|
4月前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
63 0
自定义密码访问跳转页面HTML源码
|
4月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
4月前
|
网络协议
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
|
4月前
|
Web App开发 编解码 移动开发
HTML页面关于高分屏的设置
HTML页面关于高分屏的设置
66 0
|
4月前
|
Web App开发 编解码 移动开发
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式