How to write relative path to base tag in HTML? (Instructions for use included)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to write relative path to base tag in HTML? (Instructions for use included)

寻∝梦

Aug 27, 2018 pm 07:12 PM

basehtml

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:

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 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 , How to write relative path to base tag in HTML? (Instructions for use included) , ,

Usage example of base tag in html:

<head>
<base href="http://www.php.cn/i/" />
<base target="_blank" />
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="eg_smile.gif"  class="lazy"   / alt="How to write relative path to base tag in HTML? (Instructions for use included)" >
<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(&#39;<base href="http://localhost/" />&#39;);
</script>
</head></p> <p><body>
<img  src="/static/imghwm/default1.png"  data-src="static/1.jpg"  class="lazy"   / alt="How to write relative path to base tag in HTML? (Instructions for use included)" >
</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 and .

Use the tag in html to obtain the relative path: (absolute paths are not supported)

The following is the description of 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 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 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

html

What 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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

See all articles