html5中頭部head的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“html5中頭部head的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5中頭部head的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)建站 - 綿陽(yáng)服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，綿陽(yáng)服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，服務(wù)器機(jī)柜，四川老牌ＩＤＣ服務(wù)商

移動(dòng)端的工作已經(jīng)越來(lái)越成為前端工作的重要內(nèi)容，除了平常的項(xiàng)目開發(fā)，HTML 頭部標(biāo)簽功能，特別是meta標(biāo)簽顯得非常重要。

HTML文檔的head部分，通常包括指定頁(yè)面標(biāo)題，為搜索引擎提供關(guān)于頁(yè)面本身的信息，加載樣式表，以及加載JavaScript文件（出于性能考慮，多數(shù)時(shí)候放在頁(yè)面底部</body>標(biāo)簽結(jié)束前加載JavaScript）。除了title，head里的內(nèi)容對(duì)頁(yè)面訪問(wèn)者來(lái)說(shuō)都是不可見的.

下面是HTML文檔head部分的一個(gè)例子：

<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 標(biāo)簽之前，此標(biāo)簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。

使用 HTML5 doctype，不區(qū)分大小寫。

title元素

head元素中必須包含一個(gè)title元素，該元素內(nèi)容會(huì)出現(xiàn)在瀏覽器的標(biāo)簽頁(yè)中或者出現(xiàn)在瀏覽器窗口的頂部，作為網(wǎng)頁(yè)標(biāo)題，和瀏覽器相關(guān)。

base元素

base元素用來(lái)設(shè)置一個(gè)基準(zhǔn)URL，讓HTML文檔中的相對(duì)鏈接在此基礎(chǔ)上進(jìn)行解析。如未指定，則使用當(dāng)前加載文檔的URL。base元素還能設(shè)定鏈接在用戶點(diǎn)擊時(shí)的打開方式，以及提交表單時(shí)瀏覽器如何反應(yīng)。

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

1）href即為指定的基準(zhǔn)URL。

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

1）_blank：在新窗口中打開被連接文檔；
2）_self：默認(rèn)，在相同的框架中打開被鏈接文檔；
3）_parent：在父框架打開被鏈接文檔；
4）_top：在整個(gè)窗口中打開被鏈接文檔；
5）framename：在指定框架中打開被鏈接文檔。

meta元素

meta元素用來(lái)定義文檔的各種元數(shù)據(jù)，meta元素可以有多種用途，但每個(gè)meta元素只能用于一種用途，如果需要使用不止一種，就需要在head元素中添加多個(gè)meta元素。

指定名/值元數(shù)據(jù)對(duì)

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

name屬性用來(lái)表示元數(shù)據(jù)的類型，content屬性提供值。name屬性包含以下值：

1）application name：當(dāng)前頁(yè)所屬Web應(yīng)用系統(tǒng)的名稱；
2）author：當(dāng)前頁(yè)的作者名；
3）description：當(dāng)前頁(yè)的說(shuō)明；
4）generator：用來(lái)生成HTML的軟件名稱；
5）keywords：描述頁(yè)面的內(nèi)容。

除了以上5個(gè)預(yù)定義的元數(shù)據(jù)名稱，還可以使用元數(shù)據(jù)擴(kuò)展，這里（http://wiki.whatwg.org/wiki/MetaExtensions）有這些擴(kuò)展的一份時(shí)常更新的清單。有些擴(kuò)展用的比較多，例如robots元數(shù)據(jù)，HTML文檔的作者可以用它告訴搜索引擎該如何對(duì)待該文檔：

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

該屬性有三個(gè)大多數(shù)搜索引擎都認(rèn)識(shí)的值：

1）noindex：不要索引本頁(yè)；
2）noarchive：不要將本頁(yè)存檔或緩存；
3）nofollow：不要順著本頁(yè)中的鏈接繼續(xù)搜索下去.

大多數(shù)搜索引擎都提供了優(yōu)化網(wǎng)頁(yè)或整個(gè)網(wǎng)站的指南，可以查看相應(yīng)搜索引擎提供的網(wǎng)頁(yè)或網(wǎng)站優(yōu)化指南。

聲明字符編碼

<meta charset="utf-8" />

head元素中的meta元素聲明文檔的字符編碼為UTF-8（默認(rèn)）。

模擬HTTP標(biāo)頭字段

meta元素可以用來(lái)模擬或替換三種HTTP標(biāo)頭字段的值。

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

http-equiv屬性的用途是指定所要模擬的標(biāo)頭字段名稱，字段值在content屬性中指定。http-equiv屬性的可選值如下：

1）refresh：以秒為單位指定一個(gè)時(shí)間間隔，在此時(shí)間過(guò)去之后將從服務(wù)器重新載入當(dāng)前頁(yè)面。也可以另行指定一個(gè)URL讓瀏覽器載入，如：

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

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

3）content-type：另一種聲明HTML頁(yè)面所用字符編碼的方法，如：

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

style元素

定義HTML文檔內(nèi)嵌的CSS樣式。

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

上面為a元素設(shè)計(jì)了一個(gè)新樣式。style元素可以出現(xiàn)在HTML文檔中的各個(gè)部分，一個(gè)文檔可以包含多個(gè)style元素，該元素可以用于為模板定義的樣式（link元素導(dǎo)入）提供補(bǔ)充。

可以為style元素指定樣式適用的媒體：

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

media屬性中的screen是設(shè)備類型，可選值的范圍包括：

1）all：將樣式用于所有設(shè)備（默認(rèn)值）；
2）aural：將樣式用于語(yǔ)音合成器；
3）braille：將樣式用于忙問(wèn)設(shè)備；
4）handheld：將樣式用于手持設(shè)備；
5）projection：將樣式用于投影機(jī)；
6）print：將樣式用于打印預(yù)覽和打印頁(yè)面時(shí)；
7）screen：將樣式用于計(jì)算機(jī)顯示器屏幕；
8）tty：將樣式用于電傳打字機(jī)之類的等寬設(shè)備；
9）tv：將樣式用于電視機(jī)。

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

1）width height：指定瀏覽器窗口的寬度和高度，單位px，例如：width:200px
2）device-width device-height：指定整個(gè)設(shè)備（而不僅僅是瀏覽器窗口）的寬度和高度，單位px，例如：min-device-height:200px
3）resolution：指定設(shè)備的像素密度，單位dpi（點(diǎn)/英寸）或dpcm（點(diǎn)/厘米），例如：max-resolution:600dpi
4）orientation：指定設(shè)備的較長(zhǎng)邊朝向，可選值為portrait和landscape
5）aspect-ratio device-aspect-ratio：指定瀏覽器窗口或整個(gè)設(shè)備的像素寬高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白設(shè)備上每個(gè)像素占用的二進(jìn)制位數(shù)，例如：min-monochrome:2
7）color-index：指定設(shè)備所能顯示的顏色數(shù)目，例如：max-color-index:256
8）scan：指定電視的掃描模式，包括值progressive和interlace
9）grid：指定設(shè)備的類型，支持的值為0和1（1代表網(wǎng)格型設(shè)備，使用固定的網(wǎng)格顯示內(nèi)容）

link元素

用來(lái)在HTML文檔和外部資源（如CSS樣式表）之間建立聯(lián)系。link元素包含6個(gè)局部屬性，如下：

1）href：指定link元素指向的資源的URL；
2）hreflang：說(shuō)明所關(guān)聯(lián)資源使用的語(yǔ)言；
3）media：說(shuō)明所關(guān)聯(lián)的內(nèi)容用于哪種設(shè)備，同style中的media屬性；
4）rel：說(shuō)明文檔與所關(guān)聯(lián)資源的關(guān)系類型，值的范圍如下：
---alternate：鏈接到文檔的替代版本，比如另一種語(yǔ)言的譯本；
---author：鏈接到文檔的作者；
---help：連接到當(dāng)前文檔的說(shuō)明文檔；
---icon：指定圖標(biāo)資源；
---license：鏈接到當(dāng)前文檔的相關(guān)許可證；
---pingback：指定一個(gè)回探（pingback）服務(wù)器，從其他網(wǎng)站鏈接到博客的時(shí)候它能自動(dòng)得到通知；
---prefetch：預(yù)先獲取一個(gè)資源；
---stylesheet：載入外部樣式表。
5）sizes：指定圖標(biāo)的大小；
6）type：指定所關(guān)聯(lián)資源的MIME類型，如text/css、image/x-icon。

載入外部樣式表

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

可以使用多個(gè)link元素載入多個(gè)外部資源。

為頁(yè)面定義網(wǎng)站標(biāo)志

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

瀏覽器載入HTML頁(yè)面時(shí)，會(huì)加載并顯示網(wǎng)站標(biāo)志。

注：如果網(wǎng)站標(biāo)志文件位于/favicon.ico（即Web服務(wù)器的根目錄），那就不必用到link元素，大多數(shù)瀏覽器在載入頁(yè)面時(shí)都會(huì)自動(dòng)請(qǐng)求這個(gè)文件，就算沒有l(wèi)ink元素也是如此。
預(yù)先獲取資源

可以要求瀏覽器預(yù)先獲取預(yù)計(jì)很快就要用到的資源。

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

注：目前不是所有瀏覽器都支持該功能。

script元素

用于在頁(yè)面中加入腳本，可以直接在文檔中定義腳本和引用外部文件中的腳本。該元素支持的局部屬性如下：

1）type：表示所引用或定義的腳本的類型，對(duì)于JavaScript腳本這個(gè)屬性可以省略
2）src：指定外部腳本文件的URL
3）defer async（HTML5新增）：設(shè)定腳本的執(zhí)行方式，這兩個(gè)屬性只能與src屬性一同使用
4）charset：說(shuō)明外部腳本文件所用字符編碼，該屬性只能與src屬性一同使用

定義文檔內(nèi)嵌腳本

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

默認(rèn)情況下，瀏覽器在頁(yè)面中一遇到腳本就會(huì)執(zhí)行。

載入外部腳本庫(kù)

可以將腳本放到單獨(dú)的文件中，然后用script元素載入HTML文檔。

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

推遲腳本的執(zhí)行

使用async和defer屬性可以對(duì)腳本的執(zhí)行方式加以控制，defer屬性告訴瀏覽器要等頁(yè)面載入和解析完成后才能執(zhí)行腳本：

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

由于html遇到腳本就會(huì)執(zhí)行，如果你的腳本需要使用到html腳本中的內(nèi)容，通常你需要將腳本放到相應(yīng)的html腳本后，但在html5中，使用defer屬性就能達(dá)到同樣的目的。

瀏覽器遇到script元素時(shí)的默認(rèn)行為是在加載和執(zhí)行腳本的同時(shí)暫停處理頁(yè)面，各個(gè)script元素依次同步執(zhí)行。async屬性可以在瀏覽器解析HTML文檔時(shí)異步加載和執(zhí)行腳本，如果運(yùn)用得當(dāng)，可以大大提高整體加載性能。

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

noscript元素

noscript元素用來(lái)向禁用了JavaScript或?yàn)g覽器不支持JavaScript的用戶顯示一些內(nèi)容。

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

還有一種選擇是在瀏覽器不支持JavaScript時(shí)將其引至另一個(gè)URL。

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

以上是“html5中頭部head的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：html5中頭部head的示例分析-創(chuàng)新互聯(lián)
文章地址：http://bm7419.com/article48/geiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、建站公司、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容