meta元素詳解

2021-09-02 19:48:03 字數 1604 閱讀 9402

html meta的使用詳解

1 介紹:

meta標記看似是html語言head區的乙個輔助性標籤,其實它的作用很大。meta標籤共有兩個屬性,它們分別是http-equiv屬性和name屬性。

2 name=viewport

eg:引數解釋:

1)、width : 控制viewport的大小,可以指定乙個值,如600, 或者特殊的值,如device-width為裝置的寬度(單位為縮放為100%的css的畫素)

2)、height : 和width相對應,指定高度

3)、initial-scale : 初始縮放比例,頁面第一次載入時的縮放比例

4)、maximum-scale : 允許使用者縮放到的最大比例,範圍從0到10.0

5)、minimum-scale : 允許使用者縮放到的最小比例,範圍從0到10.0

6)、user-scalable : 使用者是否可以手動縮放,值可以是:①yes、 true允許使用者縮放;②no、false不允許使用者縮放

3 meta中的name屬性

name屬性語法格式是:

4  meta中的 http-equiv屬性

相當於http的檔案頭作用,它可以向瀏覽器傳回一些有用的資訊,以幫助正確顯示網頁內容.

http-equiv屬性語法格式是:

注意:其中的"2"是指停留2秒鐘後自動重新整理到url**,可以更改,但建議不要改得太大。

//告訴瀏覽器不要快取頁面

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

#以上**告訴ie瀏覽器,無論是否用dtd宣告文件標準,ie8/9都會以ie7引擎來渲染頁面。  

#以上**告訴ie瀏覽器,ie8/9都會以ie8引擎來渲染頁面。  

#以上**告訴ie瀏覽器,ie8/9及以後的版本都會以最高版本ie來渲染頁面。  

#以上**ie=edge告訴ie使用最新的引擎渲染網頁,chrome=1則可以啟用chrome frame.

注意:必須顯示在網頁中除 title 元素和其他 meta 元素以外的所有其他元素之前

5  更多的meta和link

content的取值為webkit,ie-comp,ie-stand之一,區分大小寫,分別代表用webkit核心,ie相容核心,ie標準核心。

若頁面需預設用極速核,增加標籤:

若頁面需預設用ie相容核心,增加標籤:

若頁面需預設用ie標準核心,增加標籤:

頁面標題

6 國產瀏覽器高速模式

國內瀏覽器廠商一般都支援相容模式(即 ie 核心)和高速模式(即 webkit 核心),不幸的是,所有國產瀏覽器都是預設使用相容模式,

這就造成由於低版本 ie (ie8 及以下)核心讓基於 bootstrap 構建的**展現效果很糟糕的情況。

幸運的是,國內瀏覽器廠商逐漸意識到了這一點,某些廠商已經開始有所作為了!

將下面的 標籤加入到頁面中,可以讓部分國產瀏覽器預設採用高速模式渲染頁面:

目前只有360瀏覽器支援此 標籤。希望更多國內瀏覽器盡快採取行動、盡快進入高速時代!

Meta標籤詳解

引言 您的個人 即使做得再精彩,在 浩瀚如海 的網路空間中,也如一葉扁舟不易為人發現,如何推廣 個人 人們首先想到的方法無外乎以下幾種 在搜尋引擎中登入自己的個人 在知名 加入你個人 的鏈結 在論壇中發帖子宣傳你的個人 很多人卻忽視了html標籤meta的強大功效,乙個好的meta標籤設計可以大大提...

Meta標籤詳解

引言 您的個人 即使做得再精彩,在 浩瀚如海 的網路空間中,也如一葉扁舟不易為人發現,如何推廣 個人 人們首先想到的方法無外乎以下幾種 在搜尋引擎中登入自己的個人 在知名 加入你個人 的鏈結 在論壇中發帖子宣傳你的個人 很多人卻忽視了html標籤meta的強大功效,乙個好的meta標籤設計可以大大提...

Meta標籤詳解

meta標籤詳解 引言 您的個人 即使做得再精彩,在 浩瀚如海 的網路空間中,也如一葉扁舟不易為人發現,如何推廣 個人 人們首先想到的方法無外乎以下幾種 在搜尋引擎中登入自己的個人 在知名 加入你個人 的鏈結 在論壇中發帖子宣傳你的個人 很多人卻忽視了html標籤meta的強大功效,乙個好的meta...