Home >Web Front-end >HTML Tutorial >How to write relative path to base tag in HTML? (Instructions for use included)
This article mainly talks about how to use the relative path of the base tag in HTML. There are usage examples in it. Let’s take a look at it next.
First of all, let’s talk about the base in HTML Tags write the content of relative paths:
The base tag in html solves the problem of relative paths.
The problem is that the portal system has always used relative paths. The home page has been rewritten, and the home page has Many links (including css, js, pictures, etc.) are relative paths. I asked the portal system and couldn't solve it, so I could only use relative paths.
The cup is here, href="news/2014/05/25/1234.html" and similar links have become http://www.111cn.net /news/2014/05/25 The full path of /1234.html, and this path cannot be recognized as a portal system in nginx (nginx matches through /portal).
This is because: the browser will extract the URL of the current document to fill in the relative paths in all links in the HTML document.
Suddenly remembered the base tag of HTML, let’s look at the W3C’s explanation:
dde6fb694e6711ae5e6f381704c04ae4 tag specifies the default address or default target for all links on the page.
Normally, the browser will extract the corresponding elements from the URL of the current document to fill in the gaps in the relative URL.
Use the dde6fb694e6711ae5e6f381704c04ae4 tag to change this. The browser will then no longer use the URL of the current document, but will use the specified base URL to resolve all relative URLs. This includes URLs in 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b, 2cdf5bf648cf2f33323966d7f58a7f3f, ff9c23ada1bcecdd1a0fb5d5a0f18437 tags.
Usage example of base tag in html:
<head> <base href="http://www.php.cn/i/" /> <base target="_blank" /> </head> <body> <img src="eg_smile.gif" /> <a href="http://www.php.cn">W3School</a> </body>
The problem is solved.
Note: The domain name used in the article is real, but the path cannot be found.
It is best not to write the base tag dynamically, otherwise there will be a small bug in Firefox and IE, for example, for the page http://localhost/static/test.html:
## Examples of using the base tag in #html:
<html> <head> <script> document.write('<base href="http://localhost/" />'); </script> </head></p> <p><body> <img src="static/1.jpg" /> </body> </html>The base tag is a base link tag and a single tag. Used to change the parameter default value for all link tags in the document. It can only be applied between the tags 93f0f5c25f18dab9d176bd4f6de5d30e and 9c3bca370b5104690d9ef395f2c5f8d1.
Use the dde6fb694e6711ae5e6f381704c04ae4 tag in html to obtain the relative path: (absolute paths are not supported)
The following is the description of dde6fb694e6711ae5e6f381704c04ae4 in html Introduction:
The base element can specify the base URL of all links in the page By default, the links in the page (including the addresses of style sheets, scripts and images) are Relative to the address of the current page (ie: the request URL in the browser address bar). We can use the href attribute in the dde6fb694e6711ae5e6f381704c04ae4 tag to set all "relative base URLs". What does the above mean? Let's take a look at the code and we'll know~~This is the code on the JSP side, the code below (very similar to the JSP code in "Method 1" above) But we didn't use it here ${pageScope.basePath} "relative path address" method,now uses the dde6fb694e6711ae5e6f381704c04ae4 tag in the html file:
<html> <head> <base href="http://localhost:8080/MyApp/"> </head> <!-- // 设置了 <base>后,相对路径,相对于的就是base中的路径,而不再是浏览器 地址的请求路径啦~~~ --> <a href="jsp/login.jsp">Login </a> </html>[Recommended by the editor 】
What does the head tag in HTML mean? An article teaches you how to use the head tag correctly
htmle388a4556c0f65e1904146cc1a846beeWhat element is the tag? Detailed explanation of the definition and function of html p tag
The above is the detailed content of How to write relative path to base tag in HTML? (Instructions for use included). For more information, please follow other related articles on the PHP Chinese website!