Explain the Meta tags of Html page in detail

1. Cause

Because in the https address, if the http resource is loaded, the browser will consider it as an insecure resource and will block it by default. Later, <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> was added to the document to solve it perfectly.

At this time, I realized that I don’t know anything about meta. This article mainly introduces meta, and by the way, I will also mention other tags in head. If there is something wrong, please point it out, and finally welcome to like + favorite.

2. head tag

The head tag, like the html tag and the body tag, is an essential element of a document.

The head tag is used to define the head information of the document. It is a container for all head elements. Elements in the head can refer to scripts, instruct the browser where to find style sheets, provide meta-information, and so on.

The head of the document describes various attributes and information of the document, including the title of the document, its position on the Web, and the relationship with other documents. Most of the data contained in the document header will not be displayed to readers as content.

The following tags can be used in the head section: base, link, meta, script, style, and title.

Note: You should put the head tag at the beginning of the document, immediately after the html, and before the body tag or the frameset tag.

3. title tag

title defines the title of the document, it is the only required element in the head section. The browser will use the title in a special way. The set content will not be displayed on the page. It is usually placed on the title bar or status bar of the browser window. For example, it is set to an empty title to display the address information of the current page.

When a document is added to the user's link list or favorites or bookmark list, the title will become the default name of the document link.

1. dir attribute

Specifies the text direction rtl, ltr of the content in the element.

2. lang attribute

Specifies the language code of the content in the element.

4. meta tag

The meta element often does not attract the user's attention, but the meta has an impact on the entire webpage, which plays a key role in whether the webpage can be retrieved by search engines and its ranking in the search.

meta has a required attribute content to indicate the value of the item that needs to be set.

There are two non-essential attributes of meta, http-equiv and name, which are used to indicate the item to be set.

For example, <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">, the item set is Content-Security-Policy and the value set is upgrade-insecure-requests.

1. http-equiv attribute

http-equiv generally sets information related to the http request header, and the set value will be associated with the http header. That is to say, when the browser requests the server to obtain the html, the server will put the meta set in the html in the response header and return it to the browser. Common types such as content-type, expires, refresh, set-cookie, window-target, charset, pragma, etc.

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 character set. Almost all the attributes of content-type can be set in Set in meta.

In this way, the header information of the browser will contain:

content-type: text/html charset=utf8
Copy code

2. expires

It is used to set the expiration time of the browser, which is actually the expires attribute in the response header.

<meta http-equiv="expires" content="31 Dec 2021">

expires:31 Dec 2008
Copy code

3. refresh

This setting means that it will refresh automatically in 5 seconds and jump to the specified webpage. If the value of url is not set, then the browser will refresh this webpage.

<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">

4. window-target

Forcing the page to be displayed as a separate page in the current window can prevent others from calling your own page in the frame.

<meta http-equiv="window-target" content="_top'>

5. pragma

Prevent the browser from accessing the content of the page from the local computer's cache

<meta http-equiv="pragma" content="no-cache">

2. name attribute

The name attribute is mainly used to describe web pages, and the content in the corresponding content is mainly used for search engines to find and classify information. The usage is the same as that of http-equiv, name sets the attribute name, contentSet the attribute value.

1. author

Author is used to mark the author of a web page

<meta name="aaa" content="aaa@mail.abc.com">

2. description

description is used to tell the search engine the main content of the current webpage, which is a description of the website.

<meta name="description" content="This is my HTML">

3. keywords

keywords sets the keywords of the webpage to tell the browser what the keywords are. Is a frequently used name. It defines a set of keywords for the document. When some search engines encounter these keywords, they will use these keywords to classify documents.

<meta name="keywords" content="Hello world">

4. generator

Indicates what tool is currently used to write and generate html, which has no practical effect, and is usually created automatically by the editor.

<meta name="generator" content="vscode">

5. revised

The latest version of the specified page

<meta name="revised" content="V2, 2015/10/1">

6. robots

Tell the search engine which pages the robot crawls, all / none / index / noindex / follow / nofollow.

<meta name="robots" content="all">

all: the file will be retrieved, and the link on the page can be queried; none: the file will not be retrieved, and the link on the page cannot be queried; index: the file will be retrieved; follow : The link on the page can be queried; noindex: the file will not be retrieved, but the link on the page can be queried; nofollow: the file will not be retrieved, and the link on the page can be queried.

3. scheme attribute

The scheme attribute is used to specify the scheme to be used to translate the attribute value. This scheme should be defined in the profile specified by the profile attribute of the head tag.

5. base tag

The base tag defines the base url address of the document. All the relative address forms of url in the document are relative to the url defined here. Specify the default address or destination for the link on the page.

The attributes contained in the base tag.

1. href

href is a required attribute, which specifies the base url address of the document. For example, if you want to define the base URL of the document as https://www.abc.com, you can use the following statement: <base href="http://www.abc.com">If the document’s The hyperlink points to welcom.html, then it actually points to the following url address: https://www.abc.com/welocme.html.

target

Defines the way to open when the link in the document is clicked. _blank, _self, _parrent, _top.

6. link tag

link is used to import external style sheets. Any number of link can be included in the head of html. The link tag has the following common attributes.

1. type

Define the type of document included, such as text/css

2. rel

Define the link relationship between the html document and the resources to be included. There are many possible values. The most commonly used is stylesheet, which is used to contain a form with a fixed preferred style.

3. href

Represents the url address that points to the contained resource.

7. style tag

Write the label for the internal style sheet.

8. script tag

Load the tag of the javascript script. The loaded script will be executed by default. By default, when the browser parses the script tag, it will stop the html parsing and start to load the script code and execute it.

<script src="script.js"></script>

1. type

Indicates the MIME type of the script. <script type="text/javascript">.

2. async

Specifies to execute scripts asynchronously, and only applies to external scripts imported through src. The loading and execution of the script of the set async attribute will not affect the parsing of the subsequent html. The loading and execution happen at the same time as the document parsing.

<script async src="script.js"></script>

3. charset

Specifies the character encoding used in the external script file.

4. defer

Specifies whether to delay script execution until the page loads. The script with the defer attribute set will not prevent the subsequent analysis of html. Loading and parsing are performed together, but the execution of script must be completed after all elements are parsed and before the DOMContentLoaded event is triggered.

<script defer src="myscript.js"></script>

5. language

Specifies the script language, similar to the function of ``type```, it is not recommended to use this field.

6. src

The address of the external script.

9. bgsound

Website background music.

<bgsound src="" autostart="" loop="">

1. src

Represents the url value of background music.

2. autostart

Whether to automatically play ture automatically play, false does not play, the default is false.

3. loop

Whether to repeat the playback, the value is a number or infinite, which means to repeat a specific number of times or an unlimited number of times.