meta元素內容含義

前言

打開VSCode，輸入html:5，按下tab，一個基本的html結構出來了，卻從未注意過裏面某些元素的含義。今天就來總結總結這些重要卻不起眼的元素標籤meta。

head內各類meta含義

首先meta元素有什麼做用呢？看英文版w3schools

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

<meta> 元素標籤是提供有關HTML文檔的元數據，元數據不會顯示在頁面上，可是可以被機器識別。

總而言之, meta標籤是用來讓機器識別的，同時它對SEO起着重要的做用。

charset

指定了html文檔的編碼格式，經常使用的是utf-8(Unicode的字符編碼)，還有ISO-8859-1(拉丁字母的字符編碼)。固然還有其餘的，可是通常不經常使用也就不介紹了

<meta charset="utf-8">
複製代碼

name & content

指定元數據的名稱(這部分對SEO很是有用)

author——定義了頁面的做者

<meta name="author" content="Tony">
複製代碼

keywords——爲搜索引擎提供關鍵字

<meta name="keywords" content="HTML, CSS, JavaScript">
複製代碼

description——對網頁總體的描述

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">
複製代碼

viewport——對頁面視圖相關進行定義

• width=device-width——將頁面寬度設置爲跟隨屏幕寬度變化而變化
• initial-scale=1.0——設置瀏覽器首次加載頁面時的初始縮放比例(0.0-10.0正數)
• maximum-scale=1.0——容許用戶縮放的最大比例(0.0-10.0正數)，必須大於等於minimum-scale
• minimum-scale=1.0——容許用戶縮放的最小比例(0.0-10.0正數)，必須小於等於maximum-scale
• user-scalable=no——是否容許用戶手動縮放(yes或者no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">
複製代碼

generator——包含生成頁面軟件的標識符

which contains the identifier of the software that generated the page.

<meta name="generator" content="Hexo 3.8.0">
複製代碼

theme-color——定義主題顏色

<meta name="theme-color" content="#222">
複製代碼

http-equiv & content

Provides an HTTP header for the information/value of the content attribute

refresh——每30s刷新一次文檔

<meta http-equiv="refresh" content="30">
複製代碼

X-UA-Compatible——告知瀏覽器以何種版本渲染界面。下面的例子有限使用IE最新版本

<meta http-equiv="X-UA-Compatible" content="ie=edge">
複製代碼

關因而否有必要使用這一條在stack overflow尚且有爭議。我的認爲若是不想兼容低版本的IE，能夠直接忽略這一條。

Cache-Control——請求和響應遵循的緩存機制，能夠聲明緩存的內容，修改過時時間，可屢次聲明

• no-transform——不得對資源進行轉換或轉變。
• no-siteapp——禁止百度進行轉碼

<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
複製代碼

爲何我會介紹這兩個呢？由於個人博客在head內存在，查了一下緣由，正如以前所述，這個是針對百度轉碼的。具體能夠看github的issue

其餘更多內容能夠查看MDN

property & content

可讓網頁成爲一個富媒體對象，贊成網頁內容被其餘網站引用，同時在應用的時候不會只是一個連接，會提取相應的信息展示給用戶。

<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">
複製代碼

具體能夠參照The Open Graph protocal

總結

我只總結了一些經常使用的meta標籤，其餘的不太經常使用的也就暫時不總結了，若是未來用到再進行補充。總算是有了一些瞭解。

參考教程

• w3school
• MDN-meta
• web教程網
• segmentfault-Lxxyx開發筆記
• MDN-Cache-Control
• 首屏圖片