Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "example analysis of the head head in html5", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and study the "example analysis of the head head in html5".

The work of the mobile side has increasingly become an important part of the front-end work, in addition to the usual project development, the HTML header tag function, especially the meta tag is very important.

The head section of an HTML document usually includes specifying a page title, providing search engines with information about the page itself, loading stylesheets, and loading JavaScript files (for performance reasons, JavaScript is loaded most of the time before the end of the tag at the bottom of the page). Except for the content in title,head, it is invisible to page visitors.

Here is an example of the head section of an HTML document:

Your page title a {background-color: grey; color: white; padding: 0.5em;}

DOCTYPE (Document Type), which is at the front of the document, before the html tag, which tells the browser which HTML or XHTML specification the document uses.

Use HTML5 doctype, case-insensitive.

Title element

The head element must contain a title element that appears in the browser's tab or at the top of the browser window as the page title and related to the browser.

Base element

The base element is used to set a benchmark URL based on which the relative links in the HTML document are resolved. If not specified, the URL from which the document is currently loaded is used. The base element also sets how the link opens when the user clicks, and how the browser reacts when the form is submitted.

1) href is the specified benchmark 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, open the linked document in the same frame

3) _ parent: open the linked document in the parent frame

4) _ top: open the linked document in the entire window

5) framename: opens the linked document in the specified frame.

Meta element

The meta element is used to define the various metadata of the document. The meta element can have multiple uses, but each meta element can only be used for one purpose. If you need to use more than one, you need to add multiple meta elements to the head element.

Specify name / value metadata pair

The name attribute is used to represent the type of metadata, and the content attribute provides a value. The name property contains the following values:

1) application name: the name of the Web application system to which the current page belongs

2) author: the author name of the current page

3) description: description of the current page

4) generator: the name of the software 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, and here (http://wiki.whatwg.org/wiki/MetaExtensions) is a frequently updated list of these extensions. Some extensions use more, such as robots metadata, which authors of HTML documents can use to tell search engines what to do with the document:

This property 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: don't continue your search by following the links on this page.

Most search engines provide guidelines for optimizing pages or the entire site, and you can view the pages or site optimization guides provided by the corresponding search engines.

Declaration character encoding

The meta element in the head element declares that the character encoding of the document is UTF-8 (the default).

Analog HTTP header field

The meta element can be used to simulate or replace the values of three HTTP header fields.

The purpose of the http-equiv property is to specify the name of the header field to be simulated, and the field value is specified in the content property. The optional values for the http-equiv property are as follows:

1) refresh: specify an interval in seconds after which the current page will be reloaded from the server. You can also specify another URL for the browser to load, such as:

2) default-style: specifies the stylesheet that the page takes precedence. 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 way to declare the character encoding used in HTML pages, such as:

Style element

Defines the CSS style embedded in the HTML document.

A {background-color: grey; color: white; padding: 0.5em;}

A new style is designed for the an element. Style elements can appear in various parts of an HTML document, and a document can contain multiple style elements that can be used to complement template-defined styles (link element imports).

You can specify the media for which the style applies to the style element:

.

The screen in the media attribute is the device type, and the range of optional values include:

1) all: use style for all devices (default)

2) aural: use styles for speech synthesizer

3) braille: use styles for busy devices

4) handheld: use styles for handheld devices

5) projection: use styles for projectors

6) print: when using styles for print preview and print pages

7) screen: use styles for computer monitor screens

8) tty: use styles for devices of equal width such as teletypewriters

9) tv: apply styles to televisions.

The (min-width:500px) in the media property specifies the properties, including:

1) width height: specify the width and height of the browser window, in px, for example: width:200px

2) device-width device-height: specifies the width and height of the entire device (not just the browser window), in px, for example: min-device-height:200px

3) resolution: specifies the pixel density of the device, in dpi (dots per inch) or dpcm (dots per centimeter), for example: max-resolution:600dpi

4) orientation: specifies that the longer side of the device is facing. Available values are 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: specifies the number of binary bits per pixel on a color or black-and-white device, for example: min-monochrome:2

7) color-index: specifies the number of colors that can be displayed by the device, for example: max-color-index:256

8) scan: specifies the scanning mode of the TV, including the values progressive and interlace

9) grid: specifies the type of device. The supported values are 0 and 1 (1 represents a grid device that uses a fixed grid to display content).

Link element

Used to establish connections between HTML documents and external resources, such as CSS stylesheets. 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 used by the associated resources

3) media: indicates which device the associated content is used for, which is the same as the media attribute in style

4) rel: describes the type of relationship between the document and the associated resource. The range of values is as follows:

-alternate: link to an alternative version of a document, such as a translation in another language

-author: link to the author of the document

-help: the documentation that connects to the current document

-icon: specify icon resources

-license: relevant license linked to the current document

-pingback: specify a pingback server that automatically notifies you when you link to a blog from another website

-prefetch: get a resource in advance

-stylesheet: loads external stylesheets.

5) sizes: specify the size of the icon

6) type: specify the MIME type of the associated resource, such as text/css and image/x-icon.

Load external style sheet

You can use multiple link elements to load multiple external resources.

Define a site logo for a page

When the browser loads the HTML page, the site logo is loaded and displayed.

Note: if the site logo file is located in / favicon.ico (that is, the root directory of the Web server), you don't need to use the link element, and most browsers automatically request this file when they load the page, even if there is no link element.

Get resources in advance

Browsers can be asked to obtain resources that are expected to be used soon.

Note: not all browsers currently support this feature.

Script element

Used to add scripts to the page, you can define scripts directly in the document and reference scripts in external files. The local attributes supported by this element are as follows:

1) type: indicates the type of script referenced or defined. This attribute can be omitted for JavaScript scripts.

2) src: specify the URL of the external script file

3) defer async (added to HTML5): sets the execution mode of the script. These two attributes can only be used with the src attribute.

4) charset: indicates the character encoding used in external script files. This attribute can only be used with the src attribute.

Define document embedded scripts

[xss_clean] ("This is from the script")

By default, the browser executes as soon as it encounters a script on the page.

Load external script library

You can put the script in a separate file and then load the HTML document with the script element.

Delay the execution of the script

You can control how the script is executed using the async and defer properties, and the defer property tells the browser to wait until the page is loaded and parsed before executing the script:

Because html will execute when it encounters a script, if your script needs to use the contents of the html script, you usually need to put the script after the corresponding html script, but in html5, you can achieve the same goal by using the defer attribute.

The default behavior of a browser when it encounters a script element is to pause the processing of the page while loading and executing the script, and each script element executes synchronously in turn. The async property can load and execute scripts asynchronously when the browser parses HTML documents, and if used properly, the overall loading performance can be greatly improved.

Noscript element

The noscript element is used to display something to users who have JavaScript disabled or whose browsers do not support JavaScript.

JavaScript is required!

You cannot use this page without JavaScript

Another option is to direct it to another URL when the browser does not support JavaScript.

The above is all the contents of the article "sample Analysis of header head in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.