HTML文檔頭部

時間 2019-11-11

標籤 html 文檔頭部欄目 HTML 简体版

原文原文鏈接

前面的話

在聲明文檔類型以後，HTML文檔的下一部分爲<html>標籤，告知瀏覽器應將括在<html>...</html>內的全部內容解析爲HTML。而後是HTML文檔的兩個主要部分：<head>和<body>。<head>將包含有關頁面的常規信息和元數據，本文將詳細介紹HTML的文檔頭部<head>javascript

概述

<head>大部分不可見，描述了文檔的一些基本的屬性和信息(能夠呈現的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>、<link>、<style>和<script>這六個元素css

meta

<meta>標籤(meta-information)用於提供頁面有關的元數據，除了提供文檔字符集、使用語言、做者等基本信息外，還涉及對關鍵詞和網頁等級的設定。經過設置不一樣的屬性，元數據能夠分爲如下幾種:html

若是設置了charset，即將對網頁使用的字符集做出聲明HTML5java

若是設置了name，它是一個文檔級的元數據，將附着在整個頁面上web

若是設置了http-equiv，它是一個編譯指令，即由服務器提供的來指示頁面應如何加載chrome

若是設置了itemprop，將定義一個用戶自定義的元數據(未實現)windows

一、charset瀏覽器

charset聲明聲明當前文檔所使用的字符編碼，但該聲明能夠被任何一個元素的lang特性的值覆蓋。文檔的編碼必定要與文件自己的編碼保持一致，不然會出現亂碼，推薦使用UTF-8編碼緩存

[注意]字符編碼必須寫在<head>元素的最開始，若是位於<title>標籤以後，那麼<title>標籤極可能會亂碼服務器

<meta charset="utf-8"/>

二、name

【關鍵詞】

<meta name="keywords" content="HTML, CSS, XML" />

【描述】

<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />

【做者】

<meta name="author" content="littlematch">

【版權】

<meta name="copyright" content="本頁版權歸小火柴全部">

【視口(移動端使用)】　

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

【IE瀏覽器渲染】

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

若是安裝了GCF(Google Chrome Frame谷歌內嵌瀏覽器框架GCF)，則使用GCF來渲染頁面，若是沒有安裝，則使用最高版本的IE內核進行渲染

【雙核瀏覽器渲染】

<meta name="renderer" content="webkit">

若是是雙核瀏覽器，則使用webkit內核渲染

三、http-equiv

【定時跳轉】

讓網頁多少秒刷新，或跳轉到其餘網頁

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

【緩存過時時間】

能夠用於設定網頁的到期時間，一旦過時則必須到服務器上從新調用。須要注意的是必須使用GMT時間格式

<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">

【禁止緩存】

用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，用戶沒法脫機瀏覽

<meta http-equiv="Pragma" Content="No-cach">

【獨立頁面】

強制頁面在當前窗口中以獨立頁面顯示，能夠防止本身的網頁被別人看成一個frame頁調用

<meta http-equiv="windows-Target" content="_top">

【兼容模式】

Edge模式告訴IE以最高級模式渲染文檔，也就是說，什麼版本IE就用什麼版本的標準模式渲染；chrome模式表示強制IE使用Chrome Frame渲染。Google官方提供了對Google Frame插件安裝狀況的檢測，這裏直接調用方法便可，若是檢測到IE並未安裝Google Frame，則彈出對話框提示安裝。使用此插件，用戶能夠經過IE的用戶界面，以Chrome內核的渲染方式瀏覽網頁

下面表示若是當前瀏覽器版本是小於等於IE8的，則使用chrome，若是不是，則使用IE標準模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">

[注意]關於<meta>元素的更多信息移步至此

title

<title>元素定義文檔的標題，顯示在瀏覽器的標題欄或標籤頁上。它只能夠包含文本，如果包含有標籤，則包含的任何標籤都不會被解釋

<title>元素詳細來講，有如下三個做用：一、定義瀏覽器工具欄中的標題；二、提供頁面被添加到收藏夾時顯示的標題；三、顯示在搜索引擎結果中的頁面標題

[注意]在全部HTML文檔中，<title>都是必須的

<title>About Me</title>

base

<base>用於指定文檔裏全部相對URL地址的基礎URL，爲頁面上全部連接規定默認地址和默認打開方式。文檔中的基礎URL可使用document.baseURI進行查詢

[注意]一份文檔最多一個<base>元素。若是指定了多個<base>`元素，只會使用第一個href和target值，其他都會被忽略

<base href="http://cnblogs.com" target="_blank">

link

<link>指定了外部資源與當前文檔的關係，具備屬性href、rel、media、hreflang、type和sizes。其中href和rel是經常使用的，href指定了連接的資源的地址(url)，而rel指定了資源的類型

【rel屬性】

alternate   指示連接到該文檔的另外一個版本
author      指示連接到當前文檔的做者主頁
help        指向一個跟網站或頁面相關的幫助文檔
icon        引入表明當前文檔的圖標，新的sized屬性與這個屬性結合使用，指定連接圖片的寬高
license     連接到當前的文檔的版權聲明
next        指示連接到文檔是一組文檔中的下一份
pingback    處理當前文檔被引用狀況的服務器地址
prefetch    指明須要緩存的目標資源
prev        標明瞭上一個文檔
search      連接到能夠用於搜索當前頁面和相關頁面的資源
sidebar     連接到能夠做爲附屬上下文的文檔
stylesheet  引入樣式表
tag         建立應用於當前文檔的標籤

【media屬性】

screen      計算機屏幕
tty         終端
tv          電視
projection  投影儀
handheld    手持設備
print       打印的頁面
braille     盲文設備
aural       語音合成器
all         全部

【sizes屬性】

sizes屬性規定被連接資源的尺寸，且只有當被連接資源是圖標時，纔可以使用該屬性

<link rel="icon" href="demo.gif" type="image/gif" sizes="16x16" />

【引入圖標】　　　　

<link rel="shortcut icon" href="ico.ico"/>

【引入外部樣式表】

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

[注意]關於<link>元素的更多信息移步至此

style

<style>元素包含了文檔的樣式化信息或者文檔的一部分，經常使用於引入內部CSS樣式

<style>
　　body{background-color: red;}
</style>

<style>主要包含如下屬性

【type】

該屬性以MIME類型(不該該指定字符集)定義樣式語言。若是該屬性未指定，則默認爲‘text/css'

【media】

指定哪一個媒體應該應用該樣式

【title】

指定可選的樣式表

【disabled】

若是指定該屬性，關閉(不該用)樣式規則到文檔中的元素。

【scoped】

使用scoped屬性，能夠在頁面任意位置添加CSS樣式。可是這樣就違背告終構與樣式分離的原則，要當心使用。若是該屬性存在，則樣式應用於其父元素；若是不存在，則應用於整個文檔。該屬性只有chrome和firefox支持

<article>
  <div>The scoped attribute</div>
  <p>This text should be black</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

script

<script>的做用是在HTML或XHTML文檔中嵌入或引用可執行的腳本。沒有async或defer屬性的腳本和內聯腳本會在瀏覽器繼續解析剩餘文檔前被獲取並馬上執行

【src】

這個屬性定義引用外部腳本的URI，這能夠用來代替直接在文檔中嵌入腳本。有src屬性的script元素標籤內不該該再有嵌入的腳本

【type】

該屬性定義script元素包含或src引用的腳本語言。屬性的值爲MIME類型，支持的MIME類型包括text/javascript, text/ecmascript, application/javascript和application/ecmascript。若是沒有定義這個屬性，腳本會被視做JavaScript。若是MIME類型不是JavaScript類型(上述支持的類型)，則該元素所包含的內容會被看成數據塊而不會被瀏覽器執行

若是type屬性爲module，代碼會被看成JavaScript模塊

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

【defer】

這個布爾屬性定義該腳本是否會延遲到文檔解析完畢後才執行

【async】

async屬性是HTML5新增的屬性，IE9-瀏覽器不支持。該布爾屬性指示瀏覽器是否在容許的狀況下異步執行該腳本。該屬性對於內聯腳本無做用(即沒有src屬性的腳本）

javascript加載

正常狀況下，當瀏覽器在解析HTML源文件時若是遇到外部的script，那麼解析過程會暫停，併發送請求來下載script文件，只有script徹底下載並執行後纔會繼續執行DOM解析

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

在下載過程當中瀏覽器是被阻止作其餘有用的工做的，包括解析HTML，執行其餘腳本，以及展現CSS佈局。雖然Webkit預加載掃描程序能夠探測性地在下載階段進行多線程下載，可是某些頁面仍然存在很大的網絡延遲

當前有不少技術來提高頁面顯示速度，但都須要額外的代碼以及針對特定瀏覽器的技巧。如今，script能夠經過添加async或者defer屬性來讓腳本沒必要同步執行

<script async src="myAsyncScript.js" onload="myInit()"></script>  
<script defer src="myDeferScript.js" onload="myInit()"></script>

async和defer標註的script都不會暫停HTML解析就馬上被下載，二者都支持onload事件回調來解決須要該腳原本執行的初始化

二者的區別在於執行時的不一樣：async腳本在script文件下載完成後會當即執行，而且其執行時間必定在window的load事件觸發以前。這意味着多個async腳本極可能不會按其在頁面中的出現次序順序執行；與此相對，瀏覽器確保多個defer腳本按其在HTML頁面中的出現順序依次執行，且執行時機爲DOM解析完成後，document的DOMContentLoaded事件觸發以前

[注意]若是同時設置async和defer，和只設置async屬性的效果一致

下面展現的是一個須要1秒來下載，以及1秒來解析執行其餘操做的例子，整個頁面載入花了大約2秒鐘