1. 程式人生 > 實用技巧 >你不一定知道的head標籤

你不一定知道的head標籤

先來梳理一下本文的目錄結構

現在我將詳解head標籤和它六個子標籤的屬性和作用,請耐心看完,會有很大的收穫哦!

一、 head標籤

可選屬性:

屬性描述
profile URL 一個由空格分隔的 URL 列表,這些 URL 包含著有關頁面的元資料資訊。

說明:

·文件的頭部經常會包含一些 meta 標籤,用來告訴瀏覽器關於文件的附加資訊。在將來,創作者可能會利用預先定義好的標準文件的元資料配置檔案(metadata profile),以便更好地描述它們的文件。profile 屬性提供了與當前文件相關聯的配置檔案的 URL。

·配置檔案的格式以及瀏覽器使用它們的方式都還沒有進行定義,這個屬性主要是為將來的開發而保留的佔位符。

二、 title標籤

可選屬性

屬性描述
dir
  • rtl
  • ltr
規定元素中內容的文字方向。
lang language_code 規定元素中內容的語言程式碼。
xml:lang language_code 規定 Xhtml文件中元素內容的語言程式碼。

說明:

·用於定義瀏覽器工具欄的標題

·用於提供頁面被新增到收藏夾時顯示的標題

·用於顯示在搜尋引擎結果中的頁面標題

·title 標籤是 head 標籤中唯一要求包含的東西。

三、 base標籤

該標籤為頁面上的所有連結規定預設地址或預設目標

必選屬性:

屬性描述

href

URL 規定頁面中所有相對連結的基準 URL。

可選屬性:

屬性描述

target

  • _blank
  • _parent
  • _self
  • _top
  • framename
在何處開啟頁面中所有的連結。

說明:

·base標籤只能在head標籤中使用;

·base標籤全域性地址(href指定的地址)是針對相對連結的a、img、link、form 標籤起作用;

·base標籤全域性屬性(target屬性)是針對所有沒有設定該屬性(target屬性)的a標籤起作用;

·base標籤全域性地址(href指定的地址)也可以是相對地址;

·在html中,base 標籤沒有結束標籤;在 XHTML 中,base 標籤必須被正確地關閉。

四、 link標籤

定義文件與外部資源的關係,最常見的用途是連結樣式表。

必選屬性:

屬性描述

href

URL 規定被連結文件的位置

可選屬性:

屬性描述

href

URL 規定被連結文件的位置。

hreflang

language_code 規定被連結文件中文字的語言。

media

media_query 規定被連結文件將被顯示在什麼裝置上。

rel

  • alternate
  • author
  • help
  • icon
  • licence
  • next
  • pingback
  • prefetch
  • prev
  • search
  • sidebar
  • stylesheet
  • tag
規定當前文件與被連結文件之間的關係。

sizes

  • heightxwidth
  • any
規定被連結資源的尺寸。僅適用於 rel="icon"。

type

MIME_type 規定被連結文件的 MIME 型別。

說明:

·該標籤只能存在於 head 部分,不過它可出現任何次數。

·在 HTML 中,<link> 標籤沒有結束標籤

五、style標籤

該標籤用於為 HTML 文件定義樣式資訊。

必選屬性:

屬性描述

type

text/css 規定樣式表的 MIME 型別。

可選屬性:

屬性描述

media

  • screen
  • tty
  • tv
  • projection
  • handheld
  • print
  • braille
  • aural
  • all
為樣式表規定不同的媒介型別。

六、 meta標籤

該標籤http-equiv屬性和name屬性還有很多有用且好玩的值,持續關注我,後面將出這兩個屬性更多的值詳解。

必選屬性:

屬性描述

content

some_text 定義與 http-equiv 或 name 屬性相關的元資訊

必選屬性:

屬性描述

http-equiv

  • content-type
  • expires
  • refresh
  • set-cookie
把 content 屬性關聯到 HTTP 頭部。

name

  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 content 屬性關聯到一個名稱。

scheme

some_text 定義用於翻譯 content 屬性值的格式。

說明:

http-equiv屬性:相當於http的頭部,它向瀏覽器傳回一些資訊 ,用來幫助正確的顯示網頁內容。

1、content-type(顯示字符集的設定)

說明:設定頁面使用的字符集。

用法:

<meta http-equiv="content-Type" content="text/html; charset=gb2312">

2、expires(期限)

說明:可以用於設定網頁 到期時間,一旦網頁到期,必須到伺服器上重新傳輸。

例項:

<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

注意:必須使用gmt的時間格式

3、refresh(重新整理)

說明:自動重新整理並指向新的頁面,常用於網站域名搬遷,搬遷後老域名會在一段時間內指向新域名,以減少流量的丟失。或者設定時隔多少重新整理頁面,設定重新整理頁面不用指定URL

例項

<meta http-equiv="Refresh" content="2;URL=http://www.uaoie.top/">

4、set-ookie(設定cookie)

說明:如果網頁過期就刪除cookie

例項:

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">

注意:必須使用gmt的時間格式

name屬性:用來幫助別人閱讀源文件的一些資訊,也可以用來優化搜尋引擎對文件的分類

1、author

說明:用來表示改文件的作者

2、description

說明:用來描述該文件

3、keywords

說明:可以幫助搜尋引擎對文件進行分類

例項:

<meta name="keywords" content="HTML,ASP,php,SQL">

4、generator

說明:編輯此程式碼的軟體

例項:

<Meta name="Generator" Content="PCDATA|FrontPage|">

5、revised

說明:定義頁面最新版本

例項:

<meta name="revised" content="bu, 2016/5/10/" />

scheme屬性: 用於指定要用來翻譯屬性值的方案。此方案應該在由 head 標籤的 profile 屬性指定的概況檔案中進行了定義。

七、script標籤

標籤用於定義客戶端指令碼,比如JavaScript。

必選屬性

屬性描述

type

MIME-type(一般就是"text/JavaScript") 指示指令碼的 MIME 型別。

可選屬性

屬性描述

async

async 規定非同步執行指令碼(僅適用於外部指令碼,也就是使用src時候)。

charset

charset 規定在外部指令碼檔案中使用的字元編碼。

defer

defer 規定是否對指令碼執行進行延遲,直到頁面載入為止。

src

URL 規定外部指令碼檔案的 URL。
xml:space preserve 規定是否保留程式碼中的空白。

說明:

1、async

·如果 async="async":指令碼相對於頁面的其餘部分非同步地執行(當頁面繼續進行解析時,指令碼將被執行)

·如果不使用 async 且 defer="defer":指令碼將在頁面完成解析時執行

·如果既不使用 async 也不使用 defer:在瀏覽器繼續解析頁面之前,立即讀取並執行指令碼

2、charset

·charset 屬性規定在外部指令碼檔案中使用的字元編碼。

·如果外部檔案中的字元編碼與主檔案中的編碼方式不同,就要用到 charset 屬性。

·預設的字元編碼是 ISO-8859-1。

3、defer

·defer 屬性規定是否對指令碼執行進行延遲,直到頁面載入為止。

·有的 javascript 指令碼 document.write 方法來建立當前的文件內容,其他指令碼就不一定是了。

·如果您的指令碼不會改變文件的內容,可將 defer 屬性加入到 script 標籤中,以便加快處理文件的速度。因為瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行指令碼,它將推遲對指令碼的解釋,直到文件已經顯示給使用者為止。

·只有 Internet Explorer 支援 defer 屬性。

4、src

·src 屬性規定外部指令碼檔案的 URL。

·有時,我們需要在網站的多個頁面中執行 JavaScript。不需要重複編寫相同的指令碼,只需在單獨的檔案中建立 JavaScript,並以 .js為字尾儲存,然後使用 script 標籤中的 src 屬性引用該檔案即可。

·外部檔案不能包含 script 標籤!

廣州VI設計公司https://www.houdianzi.com

八、彩蛋

<!DOCTYPE>

·<!DOCTYPE> 宣告必須是 HTML 文件的第一行,位於 html 標籤之前。
·<!DOCTYPE> 宣告不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
·在 HTML 4.01 中,<!DOCTYPE> 宣告引用 DTD,因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。
·HTML5 不基於 SGML,所以不需要引用 DTD。
·在 HTML 4.01 中有三種 <!DOCTYPE> 宣告。在 HTML5 中只有一種
·<!DOCTYPE> 宣告對大小寫不敏感。
·<!DOCTYPE> 宣告沒有結束標籤。

SGML是一種在Web發明之前就早已存在的用標記來描述文件資料的通用語言。但SGML十分龐大且難於學習和使用。鑑於此,人們提出了HTML語言。但近年來,隨著Web應用的不斷深入,HTML在需求廣泛的應用中已顯得捉襟見肘,有人建議直接使用SGML作為Web語言。但SGML太龐大了,學用兩難尚且不說,就是全面實現SGML的瀏覽器也非常困難。於是Web標準化組織W3C建議使用一種精簡的SGML版本——XML。XML與SGML一樣,是一個用來定義其他語言的元語言。與SGML相比,XML規範不到SGML規範的1/10,簡單易懂,是一門既無標籤集也無語法的新一代標記語言。

html 5

<!DOCTYPE html>