meta標籤含義詳細解釋!

2021-09-12 12:34:42 字數 1980 閱讀 4603

下面介紹一些有關標記的例子及解釋。

一、meta 標籤分兩大部分:http 標題資訊(http-equiv)和頁面描述資訊(name)。

1、http-equiv 屬性的 content-type 值(顯示字符集的設定)

說明:設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應的字符集顯示 page 內容。

用法:<metahttp-equiv="content-type" content="text/html; charset=utf-8" />

注意:該 meta 標籤定義了 html 頁面所使用的字符集為 utf-8 ,就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言(如日文,韓文)等。

2、name 屬性的 viewport 值(移動螢幕的縮放)

也就是可視區域。對於桌面瀏覽器,我們都很清楚 viewport 是什麼,就是除去了所有工具欄、狀態列、滾動條等等之後用於看網頁的區域,這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統 web,因此我們需要改變 viewport 值。

實際上我們可以操作的屬性有 4 個:

width – // viewport 的寬度 (範圍從 200 到 10,000,預設為 980 畫素)

height – // viewport 的高度 (範圍從 223 到 10,000 )

initial-scale – // 初始的縮放比例 (範圍從 > 0 到 10)

minimum-scale – // 允許使用者縮放到的最小比例

maximum-scale – // 允許使用者縮放到的最大比例

user-scalable – // 使用者是否可以手動縮放 (no,yes)

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

說明:注意:實際測試中發現,有些安卓系統自帶的瀏覽器並不支援這一條規則,能夠對頁面進行放大,一旦放大響應的 box 也隨之放大,導致頁面出現錯亂問題,解決方法:定義頁面的最小寬度

body

3、name 屬性的 format-detection 值(忽略頁面中的數字識別為**號碼)

<metaname="format-detection" content="telephone=no" />

說明:

<meta

說明:該 meta 可以看出內容為「蘋果裝置 web 應用程式 xx」,就是說該 meta 是專門定義 web 應用的。

<meta

說明:預設值為 default(白色),可以定為 black(黑色)和 black-translucent(灰色半透明);

注意:若值為「black-translucent」將會佔據頁面位置,浮在頁面上方(會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 retina 螢幕為 40px )。

6、name 屬性設定作者姓名及****

<metaname="author" contect="kevin.yang,[email protected]" />

<link

使用:<link

說明:這個 link 就是設定啟動時候的介面。

使用:

**自  

Meta標籤屬性及含義

1 宣告文件使用的字元編碼 2 頁面描述 3 4 網頁作者 5 移動端的介面設定,初始比例,最大比例,最小比例,網頁是否可縮放 content有兩個值 yes 和 no 當我們需要顯示工具欄和選單欄時,這個行meta就不用加了,預設就是顯示。控制狀態列顯示樣式 content的值是status ba...

Meta標籤詳解

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

Meta標籤詳解

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