前端常用meta標籤的作用以及全面整理

2021-08-22 16:25:59 字數 1761 閱讀 6798

meta裡的資料是供機器解讀的，告訴機器該如何解析這個頁面，還有乙個用途是可以新增伺服器傳送到瀏覽器的http頭部內容，例如我們為頁面中新增如下meta標籤：

瀏覽器的頭部就會包括這些:

charset:iso-8859-1


expires:31 dec 2008
只有瀏覽器可以接受這些附加的頭部字段，並能以適當的方式使用它們時，這些欄位才有意義。

meta的必需屬性是content，當然並不是說meta標籤裡一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：

這裡面content裡的屬性就是對keywords進行的說明，所以呢也可以理解成乙個鍵值對吧，就是。

在w3school中，對於meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。

http-equiv屬性是新增http頭部內容，對一些自定義的，或者需要額外新增的http頭部內容，需要傳送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那麼現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那麼就可以這樣控制：

在頁面中加入這個後，5秒鐘後就會跳轉到指定頁面啦，效果可看w3school的例子

name

第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對於一些瀏覽器相容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:

這個meta標籤的意思就是告訴瀏覽器，用webkit核心進行解析，當然前提是瀏覽器有webkit核心才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從**冒出來的，我要怎麼知道呢？這個就是在對應的瀏覽器的開發文件裡就會有表明的，例如這個renderer是在360瀏覽器裡說明的。360瀏覽器核心控制meta標籤說明文件

接下來就是常用的meta標籤大總結啦，我會盡可能的做到全

charset是宣告文件使用的字元編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。

charset有兩種寫法

兩個都是等效的。



your title
viewport主要是影響移動端頁面布局的，例如：

content 引數：

microsoft internet explorer
google chrome
360瀏覽器
uc手機瀏覽器

ucbrowser_u3_api

qq手機瀏覽器

google android

 
前端開發常用的meta標籤
1 charset 兩種寫法 2 viewpot content 引數 width viewport 寬度 數值 device width height viewport 高度 數值 device height initial scale 初始縮放比例 maximum scale 最大縮放比例 mi...


meta標籤的作用
前端接觸時間也不小了，但可能很多人對meta標籤依然認識不足 只知道charset utf 8?我們今天來好好分析一下meta標籤的作用以及如何更好的利用meta標籤做網頁的seo。第一方面 meta標籤可以用作http equiv相關資訊的設定。相當於http頭的作用 1.pragma 是用於設定...


常用的Meta標籤寫法和作用
必要屬性 屬性 值描述content some text 定義與http equiv或name屬性相關的元資訊 可選屬性 屬性 值描述http equiv content type expire refresh set cookie 把content屬性關聯到http頭部。name author d...