HTML5: Understanding head
The head section of an HTML document usually includes specifying the page title, providing search engines with information about the page itself, loading style sheets, and loading JavaScript files (for performance considerations, most of the time at the bottom of the pageLoad JavaScript before the Tag ends ). Except title, the content in head is invisible to page visitors.
The following is an example of the head section of the HTML document:
Your page title
Title Element
The head element must contain a title element. The content of this element appears on the tab of the browser or on the top of the browser window as the webpage title, which is related to the browser.
Base Element
The base element is used to set a Reference URL for parsing relative links in HTML documents. If not specified, the URL of the currently loaded document is used. The base element can also set how the link is opened when the user clicks and how the browser responds when the form is submitted.
1) href is the specified Reference URL.
2) The target attribute specifies where to open all links on the page, including values:
1) _ blank: Open the connected document in a new window;
2) _ self: by default, the linked document is opened in the same framework;
3) _ parent: Open the linked document in the parent framework;
4) _ top: Open the linked document throughout the window;
5) framename: Open the linked document in the specified framework.
Meta Element
Meta elements are used to define various metadata of a document. meta elements can be used for multiple purposes, but each meta element can only be used for one purpose, add multiple meta elements to the head element.
Specified name/value metadata pair
The name attribute is used to indicate the type of metadata. The content attribute provides the value. The name attribute contains the following values:
1) application name: name of the Web application system to which the current page belongs;
2) author: name of the author of the current page;
3) description: description on the current page;
4) generator: The software name used to generate HTML;
5) keywords: describes the content of the page.
In addition to the above five predefined metadata names, you can also use metadata extensions where (http://wiki.whatwg.org/wiki/MetaExtensions) has a frequently updated list of these extensions. Some extensions use a lot, such as robots metadata. The author of an HTML document can use it to tell the search engine how to treat the document:
This attribute has three values that most search engines recognize:
1) noindex: Do not index this page;
2) noarchive: Do not archive or cache this page;
3) nofollow: Do not continue searching along the links on this page.
Most search engines provide guidelines for optimizing webpages or the entire website. You can view the webpage or website optimization guidelines provided by the corresponding search engine.
Declare character encoding
The meta element in the head element declares that the character encoding of the document is UTF-8 (default ).
Simulate HTTP header fields
The meta element can be used to simulate or replace the values of three HTTP header fields.
The http-equiv attribute is used to specify the name of the header field to be simulated, and the field value is specified in the content attribute. The optional values of the http-equiv attribute are as follows:
1) refresh: specify a time interval in seconds. After this time, the server will be reloaded to the current page. You can also specify a URL for the browser to load, such:
2) default-style: Specifies the style table that is preferentially used on the page. The value of the content attribute must be the title attribute value of a style element or link element in the same document;
3) content-type: another method for declaring the character encoding used by HTML pages, for example:
Style element
Defines CSS styles embedded in HTML documents.
A new style is designed for element a above. A style element can appear in all parts of an HTML document. A document can contain multiple style elements, which can be used to supplement a template-defined style (link element import.
You can specify the media suitable for the style element:
The screen in the media attribute is of the device type. The optional values include:
1) all: Apply the style to all devices (default );
2) aural: Apply a style to a speech synthesizer;
3) braille: Use the style to ask devices;
4) handheld: Apply the style to a handheld device;
5) projection: Apply the style to the projector;
6) print: used to print the preview and page;
7) screen: Apply the style to the computer display screen;
8) tty: Apply the style to an equal-width device, such as a telex typewriter;
9) TV: Use the style on the TV.
(Min-width: 500px) in the media attribute, including:
1) width height: Specify the width and height of the browser window, in px, for example, width: 200px
2) device-width device-height: Specify the width and height of the entire device (not just the browser window), in px, for example, min-device-height: 200px
3) resolution: Specify the pixel density of the device, in dpi (point/inch) or dpcm (point/centimeter), for example: max-resolution: 600 dpi
4) orientation: Specifies the Long Edge orientation of the device. Optional values: portrait and landscape.
5) aspect-ratio device-aspect-ratio: Specify the pixel aspect ratio of the browser window or the entire device, for example, min-aspect-ratio: 16/9
6) color monochrome: Specify the binary digits occupied by each pixel on a color or black/white device, for example, min-monochrome: 2
7) color-index: specify the number of colors that a device can display, for example, max-color-index: 256.
8) scan: Specifies the scanning mode of the TV, including value progressive and interlace
9) grid: Specify the device type. The supported values are 0 and 1. (1 indicates a grid-type device and uses a fixed grid to display the content)
Link Element
It is used to establish a connection between HTML documents and external resources (such as CSS style sheets. The link element contains six local attributes as follows:
1) href: Specifies the URL of the resource to which the link element points;
2) hreflang: indicates the language of the associated resource;
3) media: indicates the device used for the associated content, which is the same as the media attribute in the style;
4) rel: describes the relationship between the document and the associated resources. The value range is as follows:
--- Alternate: Link to the alternative version of the document, for example, the translation of another language;
--- Author: the author of the link to the document;
--- Help: connect to the instruction document of the current document;
--- Icon: Specifies the icon resource;
--- License: The license linked to the current document;
--- Pingback: Specifies a pingback server, which is automatically notified when it is linked to a blog from another website;
--- Prefetch: obtains a resource in advance;
--- Stylesheet: loads an external style sheet.
5) sizes: Specify the Icon size;
6) type: Specify the MIME type of the associated resource, such as text/css and image/x-icon.
Load External Style Sheets
Multiple link elements can be used to load multiple external resources.
Define website logos for pages
When the browser loads an HTML page, it loads and displays the Website Logo.
Note: If the Website Logo file is located in/favicon. ico (the root directory of the Web server) does not need to use the link element. Most browsers automatically request this file when loading the page, even if there is no link element.
Obtain resources in advance
You can ask the browser to obtain the resources that are expected to be used soon in advance.
Note: not all browsers currently support this function.
Script Element
It is used to add scripts to the page. You can define scripts in the document and reference scripts in external files. This element supports the following local attributes:
1) type: indicates the type of the referenced or defined script. The JavaScript Script Attribute can be omitted.
2) src: Specifies the URL of the external script file
3) defer async (New in HTML5): sets the script execution mode. These two attributes can only be used with the src attribute.
4) charset: character encoding used by the external script file. This attribute can only be used with the src attribute.
Define embedded scripts in documents
<script>document.write("This is from the script");</script>By default, the Browser executes a script on the page.
Load External script Library
You can put the script into a separate file and then load the HTML document with the script element.
<script src="simple.js"></script>
Postpone Script Execution
The async and defer attributes can be used to control the script execution mode. The defer attribute tells the browser to execute the script after the page is loaded and parsed:
<script defer src="simple2.js"></script>
The html Script will be executed when it encounters. If your script needs to use the content in the html Script, you usually need to put the script in the corresponding html Script, but in html5, using the defer attribute can achieve the same purpose.
When the browser encounters a script element, the default behavior is to pause the processing page while loading and executing the script, and each script element is executed synchronously. The async attribute can asynchronously load and execute scripts when parsing HTML documents in the browser. if used properly, the overall loading performance can be greatly improved.
<script async src="simple2.js"></script>
Noscript Element
The noscript element is used to display some content to users who have disabled JavaScript or the browser does not support JavaScript.
JavaScript is required!
You cannot use this page without JavaScript
Another option is to direct the browser to another URL when it does not support JavaScript.
