The HEAD part of the HTML document usually includes the designated page title, which provides information about the page itself, loads the style table, and loads the JavaScript file (for performance considerations, most of the time is placed at the bottom of the page </body> Load before the end of the label ends JavaScript). Except for Title, the content in Head is not visible for page visitors.
The following is an example of the HEAD part of the HTML document:
<head> <meta charset = utf-8/> <meta name = author content = adam Freeman/> <Title> Your Page Title </Title> <Base Href = Http: // Titings/Target = _ Blank/> <Style Type = Text/CSS> A {Background-COLOR: GREY; Color: White; Padding: 0.5em;} </style> </head> Title elementThe Head element must contain a title element, which will appear in the browser's tab or the top of the browser window, as the title of the webpage and related to the browser.
base elementBase element is used to set a benchmark URL to analyze the relative links in the HTML document on this basis. If it is not specified, use the URL of the current loading document. The base element can also set the way to open the link when the user clicks, and how the browser reacts when submitting the form.
<base href = http:// bjpowerNode/listings/target = _blank/>
1) HREF is the specified benchmark URL.
2) Where to open all the links on the page, including where the target attribute is opened, including the value:
1) _blank: Open the connected document in the new window;
2) _Self: By default, open the link document in the same framework;
3) _Parent: Open the linked document in the parent frame;
4) _top: Open the link document in the entire window;
5) Framename: Open the link document in the specified framework.
Meta elementMeta elements are used to define various metadata of documentation. Meta elements can have multiple uses, but each META element can only be used for one purpose. If there is more than one type, you need to add multiple Meta to the Head element to the HEAD element. element.
Specify the name/value metadata pair<meta name = Author Content = Adam Freeman/>
The name attribute is used to represent the type of metadata, which provides the value of the content attribute. The name attribute contains the following values:
1) Application name: the name of the web application system that belongs to the current page;
2) Author: The author name of the current page;
3) Description: Instructions of the current page;
4) Generator: The software name used to generate HTML;
5) Keywords: Describe the content of the page.
In addition to the above five pre -defined metadata names, you can also use metadata expansion. Here (http://wiki.whatwg.org/wiki/metaextensions) have these expansion lists that are often updated. Some extensions are used more, such as Robots metadata. The author of the HTML document can use it to tell the search engine how to treat the document:
<meta name = robots content = noindex/>
This attribute has values that most search engines are recognized:
1) Nondex: Do not index this page;
2) Noarchive: Do not archive or cache this page;
3) NOFOLLOW: Do not continue searching along the link on this page.
Most search engines provide guidelines for optimizing web pages or entire websites, and you can view web pages or website optimization guidelines provided by the corresponding search engine.
Declaration character code<meta charset = UTF-8 />
The character coding of the META element declaration document in the Head element is UTF-8 (default).
Simulation http header fieldMeta elements can be used to simulate or replace the value of three HTTP header fields.
<meta http-equiv = refresh content = 5/>
The use of the http-equiv attribute is the name of the header field name that specifies the simulated header, and the field value is specified in the Content property. The optional value of the http-equiv property is as follows:
1) Refresh: Specify a time interval in seconds in seconds. After this time passes, re -load the current page from the server. You can also specify a URL separately for the browser to load, such as:
<meta http-equiv = refressh content = 5; http://www.apress.com/>
2) DEFAULT-Style: Specify the style table that is preferred by the page. The value of the Content attribute must be the title property value of a style element or link element in the same document;
3) Content-Type: Another method to declare the character coding used in the HTML page, such as::
<meta http-equiv = content-type content = text/html charset = utf-8/>Style element
Define the CSS style embedded in the HTML document.
<STYLE TYPE = Text/CSS> A {Background-COLOR: GREY; Color: White; Padding: 0.5em;} </style>A new style is designed for the A element. Style elements can appear in various parts of HTML documents. One document can contain multiple style elements. This element can be used to supplement the style (LINK element introduction) defined by templates.
Media that can specify style for style elements:
<Style Media = Screen and (Min-Width: 500px) Type = Text/CSS> ...... </STYLE>
The Screen in the Media attribute is a device type, and the range of optional value includes:
1) ALL: Use the style for all devices (default values);
2) AURAL: use the style for voice synthesizer;
3) Braille: Use the style to ask the device;
4) Handheld: Use the style for handheld device;
5) Project: Use styles for projectors;
6) Print: When using the style to print preview and print page;
7) SCREEN: Use the style for the computer display screen;
8) TTY: Use the style for equal width equipment such as electric passing machines;
9) TV: Use style for TV.
(MIN-WIDTH: 500px) specified features in the media attribution, including:
1) Width Height: Specify the width and height of the browser window, unit PX, for example: width: 200px
2) Device-Width Device-Height: Specify the width and height of the entire device (not just the browser window), unit PX, for example: min-device-height: 200px
3) Resolution: The pixel density of the device, the unit DPI (point/inch) or DPCM (point/cm), for example: Max-Resolution: 600DPI
4) Orientation: The long -border direction of the specified device, the optional value is Portrait and LandScape
5) Aspect -Ratio Device-Aspect-RATIO: Specify the pixel width 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 each pixel on the color or black and white device, for example: Min-Monochrome: 2
7) COLOR-Index: The number of colors that can be displayed by the designated device, for example: Max-Color-IDEX: 256
8) SCAN: Specify the scanning mode of TV, including value Progressive and Interlation
9) GRID: The type of specified device, the support value is 0 and 1 (1 represents a grid -type device, using a fixed grid display content)
Link elementIt is used to establish a connection between HTML documents and external resources (such as CSS style tables). Link element contains 6 local attributes, as follows:
1) HREF: Specify the URL of the resource pointed to the link element;
2) HREFLANG: Explain the language used in the associated resources;
3) Media: Explain which device is used in the related content, and the MEDIA attributes in the style;
4) REL: The range of the relationship between the document and the associated resources is as follows:
--- Alternate: The alternative version of the link to the document, such as the translation of another language;
--- Author: Author of the link to the document;
--- Help: The description document connected to the current document;
--- icon: Specify icon resources;
--- License: Link to the relevant license to the current document;
--- Pingback: Specify a pingback server, which can be automatically notified when linking from other websites to blogs;
--- PreFETCH: Get a resource in advance;
--- Stylesheet: Load the external style table.
5) Sizes: Specify the size of the icon;
6) Type: Specify the MIME type of the associated resources, such as Text/CSS, Image/X-ICon.
Load the external style table<link rel = styleSheet type = text/css href = styles.css/>
You can use multiple Link elements to load multiple external resources.
Define the website logo for the page<link REL = Shortcut Icon Href = Favicon.ico Type = Image /X-ICON />
When the browser is loaded with the HTML page, it will load and display the website logo.
Note: If the website logo file is located in /favicon.ico (the root directory of the web server), there is no need to use the LINK element. Most browsers will automatically request this file when loading the page, even if there is no LINK element.
Pre -obtain resource
The browser can be required to obtain the resources that are expected to be used soon.
<link rel = prefetch href =/page2.html/>
Note: Not all browsers currently support this function.
Script elementUsed to add scripts on the page, you can define the script and reference the script in the document directly. The local attributes supported by this element are as follows:
1) Type: The type of the script referenced or defined, for the attribute of the JavaScript script, can omit
2) SRC: Specify the URL of the external script file
3) DEFER AsYNC (HTML5 new addition): Set the execution method of the script, these two attributes can only be used with the SRC attributes
4) Charset: Explain the character encoding used in the external script file, which can only be used with the SRC attribute
Define the document in the embedded script<script> Document.write (this is from the script); </script>
By default, the browser will be executed as soon as the script encounters the page.
Load the external script libraryYou can put the script into a separate file, and then load the HTML document with Script elements.
<script src = Simple.js> </Script>Exhaust the execution of the script
Use ASYNC and DEFER attributes to control the execution method of the script. DEFER property tells the browser to wait for the page to be loaded and parsed before the script can be executed:
<Script Defer SRC = Simple2.js> </Script>
Because HTML will be executed when it encounters a script, if your script needs to use the content in the HTML script, you usually need to put the script into the corresponding HTML script, but in HTML5, the same purpose can be achieved with the Defer property.
When the browser encounters Script elements, the default behavior is to suspend the processing page while loading and executing the script, and each SCRIPT element is executed in turn. Async attributes can be asynchronous loading and executing scripts during the browser parsing HTML document. If it is used properly, it can greatly improve the overall loading performance.
<script Async SRC = Simple2.js> </Script>noScript element
The Noscript element is used to display some content to users who disable JavaScript or browsers do not support JavaScript.
<noscript> <H1> javascript is required! </h1> <p> You cannot use this page with javascript </p> </noScript>
Another choice is to lead it to another URL when the browser does not support JavaScript.
<noscript> <meta http-equiv = refresh content = 0; http://www.apress.com/> </noScript>