Detailed explanation of HTML page header code example

Knowledge point 1: Set the base URL of the web page in the header information

The essence of the base URL is to uniformly set the attributes of the hyperlink. The base URL tag is </base>, which has two attributes, href and _target. href is used to set the path of the base URL, and _target is used to set how the hyperlink is opened.

By adding the base URL, all relative website root directory addresses in the page can be converted into absolute addresses. When the browser browses the page, the relative website and directory address is appended to the base URL path through the <base> tag, thus converting it into an absolute address. We first create a base.htm and write the HTML code as follows:

The base URL is set through the above code. The address of any hyperlink in the Base.htm page will be preceded by "https://www.jb51.net", that is, it will be converted into an absolute address. In addition, all hyperlinks on the page will be opened in a new window.

Knowledge point 2: Meta information tags of header information

Meta information tags are the basic tags for header information, and professional web page codes have detailed settings for meta information. The meta information tag is </meta>, which is a single tag. The information provided by the Meta element is invisible to browsing users and is generally used to define the name, keywords, author, etc. of the page information. In an HTML page, a meta tag contains a meta content, and there can be multiple meta elements in an HTML head page.

There are two types of meta tag attributes: page description attribute (name) and http title information (http-equiv).

name attribute

The name attribute is mainly used to describe the content of a web page and is used for search engine optimization, so it must be mastered. Correctly set the name attribute so that search engines (such as Google, Baidu) can find and classify it. Search engines generally automatically look for meta values ​​to classify web pages. The value of name is as follows:

<1>keywords. That is, keywords are used to describe the keywords and other information contained in the web page, thereby increasing the probability of being searched by search engines. The writing format is <meta name="keywords" content = "keywords"/>, and the value of the content attribute is the specific keyword set by the user. (Generally, you can set multiple keywords, separated by commas. Search engines limit the number of keywords, so the keyword content should be concise and concise.)

<2>description. The Chinese meaning is "description", which is used to describe the main content, theme, etc. of a web page. Reasonable setting can also increase the probability of being found by search engines. The format is <meta name="description" content = "Description of the page"/>. The content attribute value is the specific description of the page set by the user, which can accommodate up to 1024 characters, but the search engine only displays about the first 175 characters.

<3>author. Author: used to set the name of the website author, and is often used on professional websites. The format is <meta name="author" content = "Author name"/>

<4>generator. Generator, used to set the name of the website editing tool, is often used on professional website pages. Format <meta name="generator" content = "Website editing tool name"/>

<5>robots. Robots, used to restrict how pages are searched. The search engine's search robot continuously retrieves information and builds its own database along the links on the web pages (such as http and src links). This meta tag can prevent some content from being detected by search engines, thereby reducing the publicity of some information. The writing format is <meta name="robots" content="command combination">. The value of this attribute contains 4 commands, namely index, noindex, follow, and nofollow. According to the permutations and combinations, there are 4 combinations. The combination of Index and follow can also be called all, and noindex and nofollow can also be called none.

http-equiv attribute

The values ​​of the http-equiv attribute are as follows:

<1>Content-type, content category, used to set the category and language character set of the page. The writing format is <meta http-equiv="content-type" context="text/html"; charset="gb2312"/>. The value of the content attribute indicates that the page is output in HTML code, and the character set is gb2312 (Simplified Chinese). For international website development, it is recommended to use utf-8 as the charset to unify the characters.

<2>refresh. Refresh is used to set how long a webpage refreshes itself, or automatically jumps to other pages after a period of time. The first format <meta http-equiv="refresh" context="30"/> means refresh every 30 seconds. The second format <meta http-equiv="refresh" context="30;url=www.google.com"/> means the page will automatically jump to www.google.com after 30 seconds.

<3>expires, which means "expiration" in Chinese, is used to set the expiration time of the page. Once a web page expires, it must be called back from the server. The first format is <meta http-equiv="expires" context="Wed,10 Mar 2011 12:00:00 GMT"/>. The content value represents the expiration time of the web page and must use the GMT time format. The second writing format is <meta http-equiv="expires" context="30"/>, which indicates how many seconds it will expire.

<4>cache-control, cache control. Used to prohibit calling web pages in the cache. The writing format is <meta http-equiv="cache-control" context="no-cache"/>, where no-cache means caching is not allowed.

<5>set-cookie, set cookie, used to set how long the cookie of this page will expire. The writing format is <meta http-equiv="set-cookie" context="Wed,10 Mar 2011 12:00:00 GMT"/>, which means that the cookie will be deleted at this time.

Knowledge point 3: Header information implementation and CSS and JavaScript mixing

CSS is responsible for the style of HTML web pages, and JaveScript is responsible for the dynamic behavior of HTML web pages. The most common way to combine CSS and JaveScript is to write them into the header information.
<1>To add CSS, just add the <style type="text/css"></style> tag pair in the header information. The sample code is as follows

<2>To add JavaScript, just add the <script type="text/javascript"></script> tag pair in the header information. The sample code is as follows:

Knowledge point 4: Commonly used header information function recommendations

<1> Page switching effects, one of which is written in the following format:

When the value of the http-equiv attribute is page-enter, it means that special effects are enabled when entering the page. When the value of the http-equiv attribute is page-exit, it means that special effects are enabled when exiting (leaving) the page.

The value of the Content attribute represents the type of special effect, which is also called a dynamic filter. There are many types of filters, such as blendtrans, which is a very common one. The effect is fade-in and fade-out, and the duration value indicates how long the effect lasts (in seconds).

Another filter effect writing format is as follows:

The revealTrans dynamic filter can also be used for page entry and exit effects. Duration indicates the duration of the filter effect (in seconds), and Transition is the filter type, which indicates which effect you want to use. The value range is 0~23.

<2> Force the page to be displayed as an independent page in the current window to prevent the web page from being framed by other websites. The writing format is as follows:

<3>Page icon settings, the writing format is as follows:

The value of the href attribute is the path of the ico icon file, which is the relative root directory path.