meta標簽的作用及整理

来源:https://www.cnblogs.com/sunny-Fung/archive/2018/03/28/8665540.html
-Advertisement-
Play Games

[轉載] meta的標簽的使用是我在前端學習中曾經困惑過一段時間的問題。一方面不是很瞭解meta標簽的用途，另一方面是對於meta標簽里的屬性和值不是懂，也不知道從哪裡冒出來的，所以這篇文章專門整理下meta標簽，一個必用且關鍵的標簽。 什麼是meta標簽？引自下W3school的定義說明一下。元數 ...


[轉載]

meta的標簽的使用是我在前端學習中曾經困惑過一段時間的問題。一方面不是很瞭解meta標簽的用途，另一方面是對於meta標簽里的屬性和值不是懂，也不知道從哪裡冒出來的，所以這篇文章專門整理下meta標簽，一個必用且關鍵的標簽。

什麼是meta標簽？
引自下W3school的定義說明一下。
元數據（metadata）是關於數據的信息。

標簽提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對於機器是可讀的。

典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。

標簽始終位於 head 元素中。

元數據可用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 web 服務。

其實對上面的概念簡單總結下就是：<meta> 標簽提供關於 HTML 文檔的元數據。它不會顯示在頁面上，但是對於機器是可讀的。可用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 web 服務。

meta的作用
meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加伺服器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
那麼瀏覽器的頭部就會包括這些:
charset:iso-8859-1
expires:31 Dec 2008
當然，只有瀏覽器可以接受這些附加的頭部欄位，並能以適當的方式使用它們時，這些欄位才有意義。

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

<meta name="keywords" content="HTML,ASP,PHP,SQL">

這裡面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

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

http-equiv
http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那麼現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那麼就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個後，5秒鐘後就會跳轉到指定頁面啦，效果可看W3school的例子

name
第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對於一些瀏覽器相容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪裡冒出來的，我要怎麼知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔

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

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

charset有兩種寫法
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
兩個都是等效的。

百度禁止轉碼
百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
<!-- 頁面標題<title>標簽(head 頭部必須) -->
<title>your title</title>
<!-- 頁面關鍵詞 keywords -->
<meta name="keywords" content="your keywords">
<!-- 頁面描述內容 description -->
<meta name="description" content="your description">
<!-- 定義網頁作者 author -->
<meta name="author" content="author,email address">
<!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
viewport
viewport主要是影響移動端頁面佈局的，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
各瀏覽器平臺
Microsoft Internet Explorer
<!-- 優先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否開啟cleartype顯示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">


<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">
Google Chrome
<!-- 優先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate">
360瀏覽器
<!-- 選擇使用的瀏覽器解析內核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
UC手機瀏覽器
<!-- 將屏幕鎖定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏顯示頁面 -->
<meta name="full-screen" content="yes">
<!-- 強製圖片顯示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 應用模式，預設將全屏，禁止長按菜單，禁止手勢，標準排版，強製圖片顯示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">
<!-- 使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 當頁面有太多文字時禁止縮放 -->
<meta name="wap-font-scale" content="no">
UCBrowser_U3_API

QQ手機瀏覽器
<!-- 鎖定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏顯示 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁面將以應用模式顯示 -->
<meta name="x5-page-mode" content="app">
Apple iOS
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<!-- 禁止自動探測並格式化手機號碼 -->
<meta name="format-detection" content="telephone=no">


<!-- Add to Home Screen添加到主屏 -->
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏後的標題 -->
<meta name="apple-mobile-web-app-title" content="App Title">
Google Android
<meta name="theme-color" content="#E64545">
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
App Links
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->
最後——移動端常用的meta
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果預設的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應移動端end -->


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Chrome Inspect不顯示Webview頁面的問題總結
    首先，確保手機打開了USB調試。如果還是出現檢測不到WebView頁面，主要有一下幾種情況。 反應慢，稍等一會 華為手機，請安裝華為手機助手，插上手機後會提示安裝的。不安裝的話，會出現不穩定的情況 要調試的APP沒有打開WebView的調試模式。會出現有的App能Inspect，有的不能。可參考Co ...
  • 【讀書筆記】iOS-訪問網路
    iOS平臺是按照一直有網路連接的思路來設計的，開發者利用這一特點創造了很多優秀的第三方應用。大多數的iOS應用都需要聯網，甚至有些應用嚴重依賴網路，沒有網路就無法正常工作。 "在訪問網路失敗的時候 ，應用沒有做出適當的提示“是蘋果的iOS審核團隊拒絕一個應用的常見理由。蘋果要求你必須先檢測網路連接狀 ...
  • 後端自動構建前端css和js
    引子： 別的複雜前端開發技術不會，用得多的還是手寫代碼，手動處理。 3年前手寫合併壓縮js和css文件的asp腳本代碼目前還能正常運行，也就沒有多大使用別的技術的動力。 直到近期被一個問題糾結著，今天花了一天時間摸索完成了一個後端構建功能。 目前接觸到的項目前端開發模式基本上是一樣的 1. 項目不會 ...
  • 2018.3.28html學習筆記
    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <b>加粗</b> <u>下劃線</u> <i>傾斜</i> <p>一個段落</p> <a name="here">回到此處</a> <ol typ ...
  • Sublime Text 3 Mac常用快捷鍵與註意事項
    大多數情況下容易忘記的快捷鍵，在此整理了一下。 編輯快捷鍵：cmd+L：選擇行（重覆按下將下一行加入選擇）；cmd+D：選擇詞（重覆按下時多重選擇相同的詞進行多重編輯）；cmd+shift+D 複製游標所在整行，插入到下一行control+shift+M：選擇括弧的內容； cmd+shift+ent ...
  • form&input
    H5中新增的表單屬性：autofocus（獲得焦點）、placeholder（給出提示信息）、list（類似下拉列表）、autocomplete（有記錄的話會自動出現記錄信息）input元素：color（顏色選擇器） date（日期選擇器） time（時間選擇器） datetime-local（本地 ...
  • css中background-clip屬性的作用
    background-clip屬性的通俗作用就是指定元素背景所在的區域,有四種取值 1、border-box border-box是預設值，表示元素的背景從border區域（包括border）以內開始保留背景。 簡單代碼如下： 效果如下： 從上圖我們可以看出，元素背景預設是存在於邊框及以內的區域，但 ...
  • setInterval與setTimeout的區別
    在製作網頁動態效果時，一定會遇到某些需求，要求某段程式等待多時時間後再開始執行，就像在我們的生活中一樣，待會兒再開始做一件事。在JavaScript中主要通過定時器實現此類需求，本文將對定時器做一個概括，正對setTimeout()做一個詳細用法總結。 一.setInterval與setTimeou ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類