html5的頭部head的詳解

零下一度原創: 2017-07-16 15:39:144297瀏覽

行動端的工作已經越來越成為前端工作的重要內容，除了平常的專案開發，HTML 頭部標籤功能，特別是meta標籤顯得非常重要。

HTML文件的head部分，通常包括指定頁面標題，為搜尋引擎提供關於頁面本身的信息，載入樣式表，以及載入JavaScript」檔案（出在效能考慮，多數時候放在頁面底部36cc49f0c466276486e50c850b7e4956標籤結束前載入JavaScript）。除了title，head裡的內容對頁面訪客來說都是不可見的.

下面是HTML文檔head部分的一個例子：

<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>

DOCTYPE(Document Type) ，該聲明位於文件中最前面的位置，處於 html 標籤之前，此標籤告知瀏覽器文件使用哪種HTML 或XHTML 規格。

使用 HTML5 doctype，不區分大小寫。

title元素

head元素中必須包含一個title元素，該元素內容會出現在瀏覽器的標籤頁中或出現在瀏覽器視窗的頂部，作為網頁標題，和瀏覽器相關。

base元素

base元素用來設定一個基準URL，讓HTML文件中的相對連結在此基礎上進行解析。如未指定，則使用目前載入文件的URL。 base元素還能設定連結在使用者點擊時的開啟方式，以及提交表單時瀏覽器如何反應。

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

1）href即為指定的基準URL。

2）target屬性規定在何處打開頁面上的所有鏈接，包括值：

1）_blank：在新視窗中打開被連接文檔；
2）_self：默認，在相同的框架中開啟被連結文件；
3）_parent：在父框架中開啟被連結文件；
4）_top：在整個視窗中開啟被連結文件;
5）framename：在指定框架中開啟被連結文件。

meta元素

meta元素用來定義文件的各種元數據，meta元素可以有多種用途，但每個meta元素只能用於一種用途，如果需要使用不只一種，就需要在head元素中添加多個meta元素。

指定名稱/值元資料對

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

name屬性用來表示元資料的類型，content屬性提供值。 name屬性包含以下值：

1）application name：目前頁所屬Web應用系統的名稱；
2）author：目前頁面的作者名稱;
3）description：目前頁面的說明;
4）generator：用來產生HTML的軟體名稱；
5）keywords：描述頁面的內容。

除了以上5個預先定義的元資料名稱，還可以使用元資料擴展，這裡（http://wiki.whatwg.org/wiki/MetaExtensions）有這些擴展的一份時常更新的清單。有些擴充用的比較多，例如robots元數據，HTML文檔的作者可以用它告訴搜尋引擎該如何對待該文件：

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

該屬性有三個大多數搜尋引擎都認識的值：

1）noindex：不要索引本頁；
2）noarchive：不要將本頁存檔或快取；
3）nofollow：不要順著本頁中的連結繼續搜尋下去.

大多數搜尋引擎都提供了優化網頁或整個網站的指南，可以查看相應搜尋引擎提供的網頁或網站優化指南。

宣告字元編碼

<meta charset="utf-8" />

head元素中的meta元素宣告文件的字元編碼為UTF-8（預設）。

模擬HTTP標頭欄位

meta元素可以用來模擬或取代三種HTTP標頭欄位的值。

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

http-equiv屬性的用途是指定要模擬的標頭欄位名稱，欄位值在content屬性中指定。 http-equiv屬性的選用值如下：

1）refresh：以秒為單位指定一個時間間隔，在此時間過去之後將從伺服器重新載入目前頁面。也可以另行指定一個URL讓瀏覽器載入，如：

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

2）default-style：指定頁面優先使用的樣式表，content屬性的值必須是同一文檔中某個style元素或link元素的title屬性值；

3）content-type：另一種宣告HTML頁面所用字元編碼的方法，如：

############### ###

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

######style元素### ######定義HTML文檔內嵌的CSS樣式。 ############

<style type="text/css">  
    a{  
        background-color: grey;  
        color: white;  
        padding: 0.5em;  
    }  
</style>

###上面為a元素設計了一個新樣式。 style元素可以出現在HTML文件中的各個部分，一個文件可以包含多個style元素，該元素可以用於為模板定義的樣式（link元素導入）提供補充。 ###

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

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

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"/>

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

为页面定义网站标志

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

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

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

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

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

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

script元素

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

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

定义文档内嵌脚本

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

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

载入外部脚本库

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

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

推迟脚本的执行

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

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

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

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

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

noscript元素

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

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

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

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

以上是html5的頭部head的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解HTML5拖放功能實例下一篇：詳解HTML5拖放功能實例

看更多