html中meta標籤及用法理解

2022-08-31 07:45:14 字數 2216 閱讀 2994

自己一直想成為高階前端開發工程師,而自學。奈何最近感覺自學收效甚微,一度迷茫。

不破不立,打算改變這樣的狀態。

春節後上班第一天,今年打算好好實現自己的前端夢想。

重新整理、總結前端技術。

廢話,就不多說了,開始今天的主題。

html中meta標籤

一、meta標籤 含義

標籤位於文件的頭部,不包含任何內容。

標籤的屬性定義了與文件相關聯的名稱/值對。

二、meta 中常用屬性

1. charset  (字符集)

說明:規定 html 文件的字元編碼。

用法:

2.  viewport (視區)

說明:是使用者網頁的可視區域。 大家都知道移動裝置的螢幕一般都比pc小很多,webkit瀏覽器會將乙個較大的「虛擬」視窗對映到移動裝置的螢幕上,預設的虛擬視窗為980畫素寬(目前大部分**的標準寬度),然後按一定的比例(3:1或2:1)進行縮放。

也就是說當我們載入乙個普通網頁的時候,webkit會先以980畫素的瀏覽器標準載入網頁,然後再縮小為490畫素的寬度。注意這個縮小是乙個全域性縮小,也就是頁面上的所有元素都會縮小。

用法:(1)  width 

width 控制 viewport 的大小,一般為了自適應設定為device-width

(2) initial-scale

initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。

(3) maximum-scale

maximum-scale 最大縮放。即允許的最大縮放程度。這也是乙個浮點值,用以指出頁面大小與螢幕大小相比的最大乘數。

(4)  minimum-scale

minimum-scale:允許使用者縮放到的最小比例。和 maximum-scale 用法類似。

(5)  user-scalable

user-scalable 使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變,反之為no。

3. keywords (關鍵字)

4. description (描述、簡介)

說明:description用來告訴搜尋引擎你的**主要內容。

用法:5. format-detection (格式檢測)  

說明:format-detection 是用來檢測html裡的一些格式的。

用法:關於meta的format-detection屬性主要是有以下幾個設定:

meta name="format-detection" content="telephone=no"

meta name="format-detection" content="email=no"

meta name="format-detection" content="adress=no" 

也可以連寫:meta name="format-detection" content="telephone=no,email=no,adress=no"

(1)telephone

你明明寫的一串數字沒加鏈結樣式,而iphone會自動把你這個文字加鏈結樣式、並且點選這個數字還會自動撥號!想去掉這個撥號鏈結該如何操作呢?這時我們的meta又該大顯神通了,**如下:

telephone=no就禁止了把數字轉化為撥號鏈結!

telephone=yes就開啟了把數字轉化為撥號鏈結,要開啟轉化功能,這個meta就不用寫了,在預設是情況下就是開啟!

(2)email

告訴裝置不識別郵箱,點選之後不自動傳送

email=no禁止作為郵箱位址!

email=yes就開啟了把文字預設為郵箱位址,這個meta就不用寫了,在預設是情況下就是開啟!

(3)adress

adress=no禁止跳轉至地圖!

adress=yes就開啟了點選

位址直接跳轉至地圖的功能,在預設是情況下就是開啟!

說明:新增到主螢幕後,全屏顯示。

說明: 作用就是刪除預設的蘋果工具欄和選單欄。content有兩個值」yes」和」no」,當我們需要顯示工具欄和選單欄時,這個行meta就不用加了,預設就是顯示。

說明:保留歷史記錄以及動畫效果

說明:點選無高光(高亮)

HTML的meta標籤的用法

meta標籤分為兩部分 頁面描述資訊 name 和http標題資訊 http equiv content http equiv content name是描述網頁的,對應於content 網頁內容 以便於搜尋引擎機械人查詢 分類 目前幾乎所有的搜尋引擎都使用網上機械人自動查詢meta值來給網頁分類 ...

Html中meta標籤的用法和作用

雖然目前搜尋引擎對html頁面中mate標籤的重視程度越來越小,他依舊是不可缺少的一部分。現在我就給大家講講mate標籤的用法和作用 meta標籤一般用於網頁中的 head 與 head 之間,meta標籤的種類有很多。在我們網頁設計中用的比較多的有keywords,description等幾種。m...

html中的meta標籤

meta元素提供頁面的原資訊,位於文件頭部 content屬性 該屬性提供名稱 值對中的值,使用要與http equiv或name屬性一起使用 3.1 http equiv 屬性 對應的值有 content type expires refresh set cookie 該屬性把content屬性關...