站長(zhǎng)資訊網(wǎng)
html5頭部?jī)?nèi)容通常包括：1、title標(biāo)簽定義的網(wǎng)頁(yè)標(biāo)題；2、Favicon（網(wǎng)站小圖標(biāo)）；3、編碼方式；4、網(wǎng)站描述；5、頁(yè)面關(guān)鍵字；6、頁(yè)面作者；7、Viewport（移動(dòng)端適配）；8、CSS樣式表；9、JavaScript腳本。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
根據(jù)我們的需求，可以在 HTML 頭部定義大量的元數(shù)據(jù)，也可以定義很少或者根本就不定義。雖然頭部標(biāo)簽是 HTML 文檔的一部分，但其中的內(nèi)容并不會(huì)顯示在瀏覽器中。
html5頭部?jī)?nèi)容
1、網(wǎng)頁(yè)標(biāo)題–<title> 標(biāo)簽
<title> 標(biāo)簽用來(lái)定義 HTML 文檔的標(biāo)題，只有包含 <title> 標(biāo)簽的文檔才算是一個(gè)有效的 HTML 文檔。另外，一個(gè) HTML 文檔中僅允許存在一個(gè) <title> 標(biāo)簽，并且 <title> 標(biāo)簽必須放置在 <head> 標(biāo)簽中。
注意，在 <title> 標(biāo)簽內(nèi)部?jī)H允許包含純文本內(nèi)容，不能包含其他 HTML 標(biāo)簽。
示例：
<head> <title>PHP中文網(wǎng)</title> </head>
2、Favicon
網(wǎng)頁(yè)標(biāo)題左邊的小圖標(biāo)，指定他的路徑，如果沒(méi)有指定，瀏覽器會(huì)在根目錄下尋找
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
3、編碼方式
編碼方式的規(guī)范是放在head的最前面，如果不指定，瀏覽器也會(huì)根據(jù)服務(wù)器的header進(jìn)行判定，但是不一定準(zhǔn)確。
<head> <meta charset="UTF-8"> </head>
<meta> 標(biāo)簽用于提供有關(guān) HTML 文檔的元數(shù)據(jù)，例如頁(yè)面有效期、頁(yè)面作者、關(guān)鍵字列表、頁(yè)面描述等信息。<meta> 標(biāo)簽定義的數(shù)據(jù)并不會(huì)顯示在頁(yè)面上，但卻會(huì)被瀏覽器解析。
charset 屬性用來(lái)指定 HTML 文檔的字符編碼，上面的示例中，我們將文檔的字符編碼設(shè)置為了“UTF-8”。
4、網(wǎng)站描述
<meta name="description" content="這里是對(duì)網(wǎng)站的描述">
定義頁(yè)面的描述信息有利于搜索引擎的搜索。
5、頁(yè)面關(guān)鍵字
<meta name="keywords" content="HTML, HTML教程, HTML入門">
關(guān)鍵字用于為搜索引擎提供與頁(yè)面有關(guān)的信息。
6、頁(yè)面作者
<meta name="author" content="作者名">
通過(guò)某些內(nèi)容管理系統(tǒng)可以自動(dòng)提取作者信息。
7、Viewport（移動(dòng)端適配）
這個(gè)就很常見(jiàn)了，viewport一般是做移動(dòng)端適配，將頁(yè)面放在一個(gè)虛擬的窗口中-viewport中，如果網(wǎng)頁(yè)沒(méi)有用viewport就會(huì)出現(xiàn)我們?cè)谑謾C(jī)瀏覽器打開(kāi)時(shí)很小，而且還可以移動(dòng)縮放，low爆了，viewport就是讓網(wǎng)頁(yè)開(kāi)發(fā)者通過(guò)其大小,動(dòng)態(tài)的設(shè)置其網(wǎng)頁(yè)內(nèi)容中控件元素的大小,從而使得在瀏覽器上實(shí)現(xiàn)和web網(wǎng)頁(yè)中相同的效果(比例縮小)。，用來(lái)更好支持響應(yīng)式網(wǎng)站。
<meta name="viewport" content="width=device-width, initial-scale=1">
-
width:控制viewport的大小，一般情況下指定為device-width(單位為縮放為100%的CSS像素),也可以指定一個(gè)固定的值例如600.
-
height:和width相應(yīng),指定高度。
-
initial-scal:初始縮放比例,頁(yè)面第一次load的時(shí)候的縮放比例。
-
maximum-scale:允許用戶縮放到的最大比例。
-
minimum-scale:允許用戶縮放到的最小比例。
-
user-scalable:用戶是否可以手動(dòng)縮放。
8、內(nèi)嵌CSS樣式–<style>標(biāo)簽
使用 <style> 標(biāo)簽可以在 HTML 文檔中嵌入 CSS 樣式，需要注意的是在 <style> 標(biāo)簽中定義的樣式僅對(duì)當(dāng)前 HTML 文檔有效。示例代碼如下：
<head> <title>此處書(shū)寫(xiě)標(biāo)題</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head>
注意：對(duì)于文檔中的唯一樣式可以使用 <style> 標(biāo)簽，但對(duì)于在多個(gè)文檔中通用的樣式，使用外部樣式表更為合適。
9、外部css樣式表–<link> 標(biāo)簽
<link> 標(biāo)簽經(jīng)常用于引用外部 CSS 樣式表，<link> 標(biāo)簽中包含兩個(gè)主要的屬性，分別是 rel 和 href。rel 屬性用來(lái)指示引用文件的類型，href 屬性用來(lái)設(shè)置外部文件的路徑。示例代碼如下：
<head> <title>此處書(shū)寫(xiě)標(biāo)題</title> <link rel="stylesheet" href="common.css"> </head>
HTML <head> 標(biāo)簽中可以包含任意數(shù)量的 <link> 標(biāo)簽。
10、JavaScript 腳本
通過(guò)script標(biāo)簽嵌入JavaScript 腳本代碼或鏈入腳本文件
<head> <script> document.write("PHP中文網(wǎng)") </script> </head>
<head> <script src="js/test.js"></script> </head>
