1. Background
Recently, our department has been pushing for micro frontends, which requires splitting multiple sub-applications by functionality. During the loading process of the main application, loading failures often occur. When an HTTPS address loads HTTP resources, the browser considers them insecure and blocks them by default. Later, we added <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to the documentation, which perfectly solved the issue.
It was then that I realized how little I knew about the meta tag. This article primarily introduces meta, and also touches on other tags within the head. Please point out any mistakes. Finally, welcome to like and bookmark.
2. The head tag
The head tag, along with the html tag and body tag, is a required element of any document.
The head tag is used to define the document's header information and acts as a container for all header elements. Elements within head can reference scripts, tell the browser where to find style sheets, provide meta information, etc.
The document's header describes various attributes and information about the document, including its title, location on the web, and relationships with other documents. Most of the data contained in a document's header is not actually displayed as content to the reader.
The following tags can be used in the head section: base, link, meta, script, style, and title.
Note: The head tag should be placed at the beginning of the document, immediately after html, and before the body tag or frameset tag.
3. The title tag
title defines the document's title, and it is the only required element in the head section. Browsers use the title in a special way. The content set here is not displayed on the page itself; it is usually placed in the browser window's title bar or status bar. For example, an empty title will display the current page's address information.
When a document is added to a user's link list, favorites, or bookmarks, the title becomes the default name for that document link.
3.1. dir attribute
Specifies the text direction of the content within the element: rtl or ltr.
3.2. lang attribute
Specifies the language code for the content within the element.
4. The meta tag
The meta element often goes unnoticed by users, but it has a significant impact on the entire webpage. It plays a crucial role in whether a webpage can be indexed by search engines and in its ranking in search results.
meta has a required attribute, content, which indicates the value of the item to be set.
meta also has two optional attributes: http-equiv and name, which indicate the item to be set.
For example, <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> sets the item Content-Security-Policy to the value upgrade-insecure-requests.
4.1. The http-equiv attribute
http-equiv generally sets information related to HTTP request headers. The set value is associated with the HTTP header. That is, when a browser requests the HTML from the server, the server will include the meta settings from the HTML in the response headers sent back to the browser. Common types include content-type, expires, refresh, set-cookie, window-target, charset, pragma, etc.
4.1.1. content-type
For example: <meta http-equiv="content-type" content="text/html charset=utf8"> can be used to declare the document type and set the charset. Currently, content-type can only be used in HTML documents.
This sets the browser's header information to include:
content-type: text/html charset=utf8
4.1.2. expires
Used to set the browser's expiration time, which is essentially the expires attribute in the response header.
<meta http-equiv="expires" content="31 Dec 2021" />
expires:31 Dec 2008
4.1.3. refresh
This setting indicates that the page will automatically refresh after 5 seconds and redirect to the specified URL. If the url value is not set, the browser will refresh the current page.
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com" />
4.1.4. window-target
Forces the page to be displayed as an independent page in the current window, preventing others from calling your page within a frame.
<meta http-equiv="window-target" content="_top">
4.1.5. pragma
Prevents the browser from accessing the page's content from the local computer's cache.
<meta http-equiv="pragma" content="no-cache" />
4.2. The name attribute
The name attribute is primarily used to describe the webpage. Along with the corresponding content, it facilitates search engines in finding and categorizing information. Its usage is the same as http-equiv: name sets the attribute name, and content sets the attribute value.
4.2.1. author
author is used to indicate the author of the webpage.
<meta name="author" content="aaa@mail.abc.com" />
4.2.2. description
description is used to tell search engines the main content of the current webpage. It is a short description of the website.
<meta name="description" content="This is my HTML" />
4.2.3. keywords
keywords sets the keywords for the webpage to tell the browser what the keywords are. It is a frequently used name. It defines a set of keywords for the document. Some search engines use these keywords to classify the document when they encounter them.
<meta name="keywords" content="Hello world" />
4.2.4. generator
Indicates which tool was used to generate the current HTML. It has no practical function and is usually automatically created by an editor.
<meta name="generator" content="vscode" />
4.2.5. revised
Specifies the latest version of the page.
<meta name="revised" content="V2，2015/10/1" />
4.2.6. robots
Tells search engine robots which pages to crawl: all / none / index / noindex / follow / nofollow.
<meta name="robots" content="all" />
all: The file will be indexed, and links on the page can be followed.none: The file will not be indexed, and links on the page cannot be followed.index: The file will be indexed.follow: Links on the page can be followed.noindex: The file will not be indexed, but links on the page can be followed.nofollow: The file will not be indexed, and links on the page can be followed.
4.3. The scheme attribute
The scheme attribute is used to specify a scheme for translating the attribute value. This scheme should be defined in a profile file specified by the profile attribute of the head tag. HTML5 does not support this attribute.
5. The base tag
The base tag defines the base URL for the document. All relative URLs in the document are relative to this base URL. It sets the default address or target for links on the page.
<base href="http://www.w3school.com.cn/i/" target="_blank" />
Attributes of the base tag:
5.1. href
href is a required attribute that specifies the base URL of the document. For example, if you want to set the base URL to https://www.abc.com, you can use: <base href="http://www.abc.com">. If a hyperlink in the document points to welcome.html, it actually points to https://www.abc.com/welcome.html.
5.2. target
Defines how links in the document open when clicked: _blank, _self, _parent, _top.
6. The link tag
link is used to import external style sheets. Any number of link tags can be included in the head of an HTML document. Common attributes are:
<link type="text/css" rel="stylesheet" href="github-markdown.css" />
6.1. type
Defines the document type being included, e.g., text/css.
6.2. rel
Defines the relationship between the HTML document and the resource to be included. Possible values are numerous; the most common is stylesheet, used to include a fixed preferred style sheet.
6.3. href
Indicates the URL of the resource to include.
7. The style tag
A tag for writing internal style sheets.
<style>
body {
background: #f3f5f9;
}
</style>
8. The script tag
A tag for loading JavaScript scripts. The loaded script is executed by default. By default, when the browser encounters a script tag, it stops parsing the HTML and begins loading and executing the script code.
<script src="script.js"></script>
8.1. type
Indicates the MIME type of the script.
<script type="text/javascript">
8.2. async
Specifies that the script should be executed asynchronously. Only applies to external scripts loaded via src. A script with the async attribute does not affect parsing of subsequent HTML; loading occurs simultaneously with document parsing. Execution begins immediately after loading, and during execution, HTML parsing is paused.
<script async src="script.js"></script>
8.3. charset
Specifies the character encoding used in the external script file.
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
8.4. defer
Specifies whether script execution should be delayed until the page has finished loading. A script with the defer attribute does not block parsing of subsequent HTML; loading and parsing occur concurrently, but execution of the script occurs after all elements have been parsed and before the DOMContentLoaded event fires.
<script defer src="script.js"></script>
8.5. language
Specifies the scripting language. Similar in function to type, but this attribute is not recommended.
8.6. src
The URL of the external script.
<script src="script.js"></script>
9. bgsound
Website background music.
<bgsound src="music.mp4" autostart="true" loop="5"></bgsound>
9.1. src
Indicates the URL of the background music.
9.2. autostart
Whether to play automatically: true to auto-play, false not to play. Default is false.
9.3. loop
Whether to repeat playback: a number or infinite, indicating a specific number of repetitions or infinite looping.
References
Author: Yin Dong
Link: https://juejin.cn/post/6987919006468407309
Source: Juejin