web前端入門到實戰：Html頭部meta標籤

時間 2020-01-20

標籤 web 前端入門實戰 html 頭部 meta 標籤欄目 HTML 简体版

原文原文鏈接

meta元素有4個屬性：name、http-equiv、content、charset.meta標籤經過name屬性來表述頁面文檔的元信息，經過http-equiv屬性設置http請求指令，經過charset設置頁面的字符編碼。按照屬性設置分類，meta能夠分爲三類:html

name屬性和content屬性組合,構成名稱/值對，用於描述網站信息.前端

標準的meta名稱包括application-name、author、description、generator等。示例代碼：html5

<meta name="keywords" content="british,typeface,font,fonts"/>

其中keywords和description這兩個名稱的使用率最高，是搜索引擎優化的主要手段之一，推薦讀者使用。chrome

http-equiv屬性和content屬性組合，設置特定的http指令;瀏覽器

其中content-type、default-style和refresh已經肯定,content-language和set-cookie還未正式肯定.cookie

此類型meta應該謹慎使用。不推薦使用<meta http-equiv="refresh" content="300"/>,某些搜索引擎遇到此meta時會中止解析頁面剩餘的部分。<meta http-equiv="default-style">在實際的場景中不多使用app

charset屬性,設置頁面字符編碼。ide

此屬性提供了保存和傳輸文檔的編碼格式。工具

<meta charset="utf-8">

等價於學習

<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>

可是第一種形式更簡潔好記，而且獲得了全部主流瀏覽器的支持，全部不存在瀏覽器兼容問題。爲了讓瀏覽器能準確識別編碼格式，務必在<title>標籤以前設置charset,保證標題能正確顯示。

除了W3C定義的規範中定義的這些meta以外，還有大量的自定義meta類型。這些meta類型主要是由互聯網公司或者瀏覽器廠商爲了實現特定的功能而定製的。這些自定義的meta不能經過W3C提供的標準校驗，但並非說這些meta不標準。介紹一些經常使用的meta

設置IE瀏覽器的兼容模式

從IE8瀏覽器開始支持一種設置頁面兼容模式的meta類型，示例代碼以下:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

根據html規範，瀏覽器是按照頁面開頭定義的文檔類型來解析頁面的。例如，使用html5的文檔類型聲明：

<!DOCTYPE html>

IE就會以標準模式解析HTML文檔。可是某些已有頁面因爲各類緣由不能在最新標準模式下正確顯示，只支持特定的標準。針對這種狀況，IE瀏覽器提供了一種兼容的方案，經過設置X-UA-Compatible指定頁面在IE瀏覽器中渲染時執行的標準。

此外還有一種很常見的設置值，即:

<meta http-equiv="X-UA-Compatible" content="chrome=1"/>

IE定義的meta爲何會出現chrome呢？其實設置爲chrome=1時，則會在IE9及如下瀏覽器中激活Chrome Frame,強制IE使用Chrome Frame渲染頁面。

相關標籤/搜索

前端入門

前端實戰

HTML標籤