天查Html手冊(cè)時(shí)，又有了新的發(fā)現(xiàn)。也就這機(jī)會(huì)，好好總結(jié)下HTML中Meta的使用。

　　HTML <meta> 標(biāo)簽，所有瀏覽器都支持 <meta> 標(biāo)簽。它提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞，或其他 web 服務(wù)。

　　<meta> 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。

　　在 HTML 中，<meta> 標(biāo)簽沒有結(jié)束標(biāo)簽,在 XHTML 中，<meta> 標(biāo)簽必須被正確地關(guān)閉。

必要屬性

屬性值描述contentsome text定義與http-equiv或name屬性相關(guān)的元信息

可選屬性

屬性值描述http-equivcontent-type / expire / refresh / set-cookie把content屬性關(guān)聯(lián)到HTTP頭部。nameauthor / description / keywords / generator / revised / others把 content 屬性關(guān)聯(lián)到一個(gè)名稱。contentsome text定義用于翻譯 content 屬性值的格式。

• SEO優(yōu)化

　　　　關(guān)鍵詞:類似這樣的 meta 標(biāo)簽可能對(duì)于進(jìn)入搜索引擎的索引有幫助.使用人們可能會(huì)搜索，并準(zhǔn)確描述網(wǎng)頁(yè)上所提供信息的描述性和代表性關(guān)鍵字及短語(yǔ)。標(biāo)記內(nèi)容太短，則搜索引擎可能不會(huì)認(rèn)為這些內(nèi)容相關(guān),標(biāo)記不應(yīng)超過 874 個(gè)字符。

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

　　　　頁(yè)面描述，每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)不超過 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的描述標(biāo)簽

　　<meta name="description" content="your description">

　　　　搜索引擎索引方式，robotterms是一組使用逗號(hào)(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確保正確使用nofollow和noindex屬性值。

　　

<meta name="robots" content="index,follow" />
<!--
all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢；
none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢；
index：文件將被檢索；
follow：頁(yè)面上的鏈接可以被查詢；
noindex：文件將不被檢索；
nofollow：頁(yè)面上的鏈接不可以被查詢。
-->

　　頁(yè)面重定向和刷新：content內(nèi)的數(shù)字代表時(shí)間（秒），既多少時(shí)間后刷新。如果加url,則會(huì)重定向到指定網(wǎng)頁(yè)（搜索引擎能夠自動(dòng)檢測(cè)，也很容易被引擎視作誤導(dǎo)而受到懲罰）。

　　<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--5秒鐘后跳轉(zhuǎn)到http://www.w3school.com.cn-->

　　<meta http-equiv="Refresh" content="5;" /><!--每5秒鐘刷新一下頁(yè)面-->

• 移動(dòng)設(shè)備

　　 viewport：能優(yōu)化移動(dòng)瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站，不要使用initial-scale或者禁用縮放。大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px；5.5寸設(shè)備設(shè)為400px；iphone6設(shè)為375px；ipone6 plus設(shè)為414px。很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上，這會(huì)讓網(wǎng)站以100%寬度渲染，用戶需要手動(dòng)移動(dòng)頁(yè)面或者縮放。如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網(wǎng)頁(yè)來(lái)看到全部的內(nèi)容。

　　　　　　content 參數(shù)：

　　　　　　　　width viewport 寬度(數(shù)值/device-width)
　　　　　　　　height viewport 高度(數(shù)值/device-height)
　　　　　　　　initial-scale 初始縮放比例
　　　　　　　　maximum-scale 最大縮放比例
　　　　　　　　minimum-scale 最小縮放比例
　　　　　　　　user-scalable 是否允許用戶縮放(yes/no)

　　

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁(yè)面時(shí)出現(xiàn)黑邊 -->

　　各瀏覽器平臺(tái)

　　Microsoft Internet Explorer

<!-- 優(yōu)先使用最新的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">

<!-- 關(guān)于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

<!-- 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

<!-- 優(yōu)先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自動(dòng)翻譯 -->
<meta name="google" value="notranslate">　

　　360瀏覽器

　　<!-- 選擇使用的瀏覽器解析內(nèi)核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

　　UC手機(jī)瀏覽器

　　<!-- 將屏幕鎖定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏顯示頁(yè)面 -->
<meta name="full-screen" content="yes">
<!-- 強(qiáng)制圖片顯示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 應(yīng)用模式，默認(rèn)將全屏，禁止長(zhǎng)按菜單，禁止手勢(shì)，標(biāo)準(zhǔn)排版，強(qiáng)制圖片顯示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">
<!-- 使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 當(dāng)頁(yè)面有太多文字時(shí)禁止縮放 -->
<meta name="wap-font-scale" content="no">

　　QQ手機(jī)瀏覽器

<!-- 鎖定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏顯示 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁(yè)面將以應(yīng)用模式顯示 -->
<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">
<!-- 禁止自動(dòng)探測(cè)并格式化手機(jī)號(hào)碼 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設(shè)置狀態(tài)欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時(shí)生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的標(biāo)題 -->
<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" /><!-- 刪除蘋果默認(rèn)的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設(shè)置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁(yè)面中的數(shù)字識(shí)別為電話，忽略email識(shí)別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點(diǎn)擊無(wú)高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應(yīng)移動(dòng)端end -->

• 網(wǎng)頁(yè)相關(guān)

　　網(wǎng)頁(yè)編碼：以下兩種charset定義方式均可

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

　　禁止緩存：禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，網(wǎng)頁(yè)不保存在緩存中，每次訪問都刷新頁(yè)面。這樣設(shè)定，訪問者將無(wú)法脫機(jī)瀏覽

<meta http-equiv="Pragma" content="no-cache">

　　網(wǎng)頁(yè)過期：指定網(wǎng)頁(yè)在緩存中的過期時(shí)間，一旦網(wǎng)頁(yè)過期，必須到服務(wù)器上重新調(diào)閱。注意：必須使用GMT的時(shí)間格式，或直接設(shè)為0（數(shù)字表示多少時(shí)間后過期）

<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

　　Cookie設(shè)置：注意：必須使用GMT的時(shí)間格式

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

　　顯示窗口的設(shè)定：強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示，這個(gè)屬性是用來(lái)防止別人在框架里調(diào)用你的頁(yè)面。Content選項(xiàng)：_blank、_top、_self、_parent.

<Meta http-equiv="Widow-target" Content="_top">

　　進(jìn)入與退出：這個(gè)是頁(yè)面被載入和調(diào)出時(shí)的一些特效。這個(gè)有好多特效，可以查詢Page-Exit去了解更多。

　　<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

• 安全相關(guān)

　　內(nèi)容安全策略CSP（Content-Security-Policy）,可以參考https://blog.csdn.net/u014465934/article/details/84199171

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

喜歡小編的可以點(diǎn)個(gè)贊關(guān)注小編哦，小編每天都會(huì)給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準(zhǔn)備了新出的前端編程學(xué)習(xí)資料，免費(fèi)分享給大家！

如果你也想學(xué)習(xí)前端，可以觀看【置頂】文章。也可以私信【1】拿

然是各種AI網(wǎng)站了。第9個(gè)自動(dòng)生成各種美女俊男照片，顏值黨的春天來(lái)了。

1、AI寫論文-小論文神器

https://essay.1ts.fun/

小論文神器可在一分鐘內(nèi)生成你需要的論文，基于大數(shù)據(jù)和人工智能，代替手動(dòng)搜索復(fù)制粘貼，系統(tǒng)偶爾冒傻，用詞越精準(zhǔn)，嘗試越多效果越好，高級(jí)版字?jǐn)?shù)無(wú)限，段落更新無(wú)限，關(guān)鍵詞無(wú)限量添加，還有標(biāo)準(zhǔn)的word文檔下載，更平穩(wěn)的風(fēng)格控制。

2.AI檢查英語(yǔ)作文-微軟小英愛寫作

https://aimwriting.mtutor.engkoo.com/#more

寫英語(yǔ)作文，怎樣寫的更地道，寫英語(yǔ)郵件，怎樣別出現(xiàn)硬傷，用這個(gè)網(wǎng)站就可以檢查。

覆蓋從小學(xué)到雅思的各類考試范圍，AI技術(shù)自動(dòng)檢查拼寫和語(yǔ)法錯(cuò)誤，提供修改建議，無(wú)須輸入文字，可一鍵上傳照片，自動(dòng)識(shí)別作文內(nèi)容，還有查詞助手和短語(yǔ)助手兩個(gè)新功能。簡(jiǎn)直就是學(xué)習(xí)英語(yǔ)的法寶。比如下面這篇高考作文，給出了23分的高分。好句子，好的詞匯都給標(biāo)記出來(lái)了。

3.AI智能原創(chuàng)-5118大數(shù)據(jù)平臺(tái)

https://wyc.5118.com/

近期大熱的一款智能寫作工具， 5118智能原創(chuàng)讓文案人省了不少事兒，給它一段話，機(jī)器輔助人腦，即時(shí)搜索出互聯(lián)網(wǎng)數(shù)十億文章素材提高創(chuàng)作靈感，創(chuàng)出一個(gè)小宇宙，簡(jiǎn)直是文案人的救星。

這AI寫作功能可不是一般的齊全：

• 自動(dòng)匹配素材
• 多種句式指紋重構(gòu)模式
• 多個(gè)形近詞供選
• 原創(chuàng)度檢測(cè)
• 通順度、錯(cuò)別字檢測(cè)
• 自動(dòng)提取核心詞、摘要
• 生成多個(gè)爆款標(biāo)題參考
• 各大熱點(diǎn)追溯

4.AI寫自媒體稿子-Giiso寫作機(jī)器人

https://www.giiso.com/#/

不同于知乎上大火的狗屁不通文章生成器，這個(gè)文章生成器絕對(duì)是有邏輯的。一款內(nèi)容AI輔助創(chuàng)作網(wǎng)站， 只要輸入幾個(gè)關(guān)鍵詞，然后幾篇同類型的文章就瞬間出來(lái)了。還有智能推薦素材，稿件改寫，稿件查重，稿件糾錯(cuò)等功能，是自媒體，新媒體的寫作好幫手。不過貌似一天只有一次的使用機(jī)會(huì)。比如我輸入新冠肺炎，美國(guó)，確診三個(gè)關(guān)鍵詞，立即出來(lái)15篇稿子。莫有感情的寫作機(jī)器人。

5.AI寫詩(shī)-九歌

http://jiuge.thunlp.cn/fengge.html

九歌是清華大學(xué)自然語(yǔ)言處理與社會(huì)人文計(jì)算實(shí)驗(yàn)室研發(fā)的人工智能詩(shī)歌寫作系統(tǒng)。該系統(tǒng)采用最新的深度學(xué)習(xí)技術(shù)，結(jié)合多個(gè)為詩(shī)歌生成專門設(shè)計(jì)的模型，基于超過80萬(wàn)首人類詩(shī)人創(chuàng)作的詩(shī)歌進(jìn)行訓(xùn)練學(xué)習(xí)。輸入幾個(gè)關(guān)鍵詞，一首詩(shī)立馬出來(lái)。比如我輸入，江畔，月，寫一首憶舊感喟的七言絕句。3秒后就出來(lái)了，還有那么點(diǎn)意思。

6.AI作畫-自動(dòng)給畫上色

https://petalica-paint.pixiv.dev/index_zh.html

簡(jiǎn)單來(lái)講，就是對(duì)你的線稿進(jìn)行上色， 可以選擇自動(dòng)上色， 也可以自己指定某部分的顏色來(lái)自定義。

7.AI無(wú)損放大圖片

https://bigjpg.com/

使用最新人工智能深度學(xué)習(xí)技術(shù)——深度卷積神經(jīng)網(wǎng)絡(luò)。它會(huì)將噪點(diǎn)和鋸齒的部分進(jìn)行補(bǔ)充，實(shí)現(xiàn)圖片的無(wú)損放大。只要上傳圖片就可以了。

8.AI寫對(duì)聯(lián)-微軟對(duì)對(duì)聯(lián)

http://duilian.msra.cn/app/couplet.aspx

再有人考你對(duì)聯(lián)，再也不怕了！

9.AI生成照片-高顏值人臉AI生成器

http://www.seeprettyface.com/index.html

聽名字就感覺這網(wǎng)站特別厲害，各種類型的照片都有。顏值黨的福利來(lái)了！

比如我選了中國(guó)網(wǎng)紅和中國(guó)明星這兩個(gè)選項(xiàng)，然后各種照片就出來(lái)了，關(guān)鍵是這不是真人，程序員真是太厲害了，所有代碼都開源了。

中國(guó)網(wǎng)紅-虛擬