Detailed explanation of the head of html5-H5 Tutorial-php.cn

Mobile terminal work has increasingly become an important part of front-end work. In addition to ordinary project development, the HTML header tag function, especially the meta tag, is very important.

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

The following is an example of the head part of an HTML document:

<head>  
    <meta charset="utf-8" />  
    <meta name="author" content="Adam Freeman"/>  
    <title>Your page title</title>  
    <base href="http://titan/listings/" target="_blank"/>  
    <style type="text/css">  
        a{  
            background-color: grey;  
            color: white;  
            padding: 0.5em;  
        }  
    </style>  
</head>

Copy after login

DOCTYPE (Document Type) , this declaration is located at the very beginning of the document, before the html tag. This tag 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. The content of this element will appear in the browser's tab page or in The top of the browser window, used as the page title, is related to the browser.

base element

The base element is used to set a base URL on which relative links in HTML documents are parsed. If not specified, the URL of the currently loaded document is used. The base element can also set how the link opens when the user clicks it, and how the browser reacts when the form is submitted.

<base href="http://bjpowernode/listings/" target="_blank"/>

Copy after login

1) href is the specified base URL.

2) The target attribute specifies where to open all links on the page, including the value:

1) _blank: Open the connected document in a new window;
2) _self: By default, the linked document is opened 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 various metadata of the document. The meta element can be used for multiple purposes, but each meta element can only be used for one If you need to use more than one, you need to add multiple meta elements to the head element.

Specify name/value metadata pair

<meta name="author" content="Adam Freeman"/>

Copy after login

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

1) application name: the name of the Web application system to which the current page belongs;
2) author: the name of the author 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 5 predefined metadata names, you can also use metadata extensions. Here (http://wiki.whatwg.org/wiki/MetaExtensions) there is a frequently updated list of these extensions . Some extensions are used more often, such as robots metadata, which the author of an HTML document can use to tell search engines how to treat the document:

<meta name="robots" content="noindex"/>

Copy after login

This attribute has three majorities Values recognized by search engines:

1) noindex: Do not index this page;
2) noarchive: Do not archive or cache this page;
3) nofollow: Do not follow the content of this page Link to continue searching.

Most search engines provide guides for optimizing web pages or entire websites. You can view the web page or website optimization guides provided by the corresponding search engines.

Declare character encoding

<meta charset="utf-8" />

Copy after login

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

Simulate HTTP header fields

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

<meta http-equiv="refresh" content="5"/>

Copy after login

The purpose of the http-equiv attribute is 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 which the current page will be reloaded from the server. You can also specify a URL for the browser to load, such as:

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

Copy after login

2) default-style: Specify the style sheet to be used first 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 way to declare the character encoding used in the HTML page, such as:

<meta http-equiv="content-type" content="text/html charset=UTF-8"/>

Copy after login

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>

Copy after login

A new style is designed for the a element above. The style element can appear in various parts of the HTML document. A document can contain multiple style elements. This element can be used to supplement the style defined by the template (link element import).

可以为style元素指定样式适用的媒体：

<style media="screen AND (min-width:500px)" type="text/css">  
    ......   
</style>

Copy after login

media属性中的screen是设备类型，可选值的范围包括：

1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。

media属性中的(min-width:500px)指定特性，包括：

1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

link元素

用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：

1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

载入外部样式表

<link rel="stylesheet" type="text/css" href="styles.css"/>

Copy after login

可以使用多个link元素载入多个外部资源。

为页面定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Copy after login

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。

<link rel="prefetch" href="/page2.html"/>

Copy after login

注：目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：

1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

定义文档内嵌脚本

<script>  
    document.write("This is from the script");  
</script>

Copy after login

默认情况下，浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。

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

Copy after login

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：

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

Copy after login

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。

浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

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

Copy after login

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

<noscript>  
    <h1>JavaScript is required!</h1>  
    <p>You cannot use this page without JavaScript</p>  
</noscript>

Copy after login

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

<noscript>  
    <meta http-equiv="refresh" content="0;www.apress.com"/>  
</noscript>

Copy after login

The above is the detailed content of Detailed explanation of the head of html5. For more information, please follow other related articles on the PHP Chinese website!