天查Html手冊時，又有了新的發現。也就這機會，好好總結下HTML中Meta的使用。

　　HTML <meta> 標簽，所有瀏覽器都支持 <meta> 標簽。它提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），對搜索引擎和更新頻度的描述和關鍵詞，或其他 web 服務。

　　<meta> 標簽位于文檔的頭部，不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。

　　在 HTML 中，<meta> 標簽沒有結束標簽,在 XHTML 中，<meta> 標簽必須被正確地關閉。

必要屬性

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

可選屬性

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

• SEO優化

　　　　關鍵詞:類似這樣的 meta 標簽可能對于進入搜索引擎的索引有幫助.使用人們可能會搜索，并準確描述網頁上所提供信息的描述性和代表性關鍵字及短語。標記內容太短，則搜索引擎可能不會認為這些內容相關,標記不應超過 874 個字符。

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

　　　　頁面描述，每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽

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

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

　　

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

　　頁面重定向和刷新：content內的數字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。

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

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

• 移動設備

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

　　　　　　content 參數：

　　　　　　　　width viewport 寬度(數值/device-width)
　　　　　　　　height viewport 高度(數值/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` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊 -->

　　各瀏覽器平臺

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

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

<!-- 優先使用最新的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">

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

• 網頁相關

　　網頁編碼：以下兩種charset定義方式均可

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

　　禁止緩存：禁止瀏覽器從本地機的緩存中調閱頁面內容，網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將無法脫機瀏覽

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

　　網頁過期：指定網頁在緩存中的過期時間，一旦網頁過期，必須到服務器上重新調閱。注意：必須使用GMT的時間格式，或直接設為0（數字表示多少時間后過期）

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

　　Cookie設置：注意：必須使用GMT的時間格式

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

　　顯示窗口的設定：強制頁面在當前窗口以獨立頁面顯示，這個屬性是用來防止別人在框架里調用你的頁面。Content選項：_blank、_top、_self、_parent.

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

　　進入與退出：這個是頁面被載入和調出時的一些特效。這個有好多特效，可以查詢Page-Exit去了解更多。

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

• 安全相關

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

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

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

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

部分主要涉及兩個內容：置頂和列表分類。

1. 置頂

一般的論壇都會有帖子置頂功能。現在我們在通知類列表中增加置頂功能。

要求置頂在最上，其他按照發布時間降序排列。因此修改表，增加一個sort字段，表示排序，0表示置頂

2. 排序

修改controller類中的getNotices方法。

• 第一按照sort排序，置頂記錄sort=0，其他記錄sort>0。
• 第二新發表的通知在前，即按照發表時間降序排列。
• 第三按分頁獲取數據，每頁10條記錄，取第1頁。

3. 前端展示

修改NoticeList.vue

4. 字典

上面的例子中，首頁顯示了10條最新通知。這個10是寫在代碼中的，顯然這是不合適的，無法動態修改。解決這個問題的方法是，將這個數據記錄在數據庫中，并可以在程序的后臺管理中（后續開發）動態設置。為此建立一個字典表，記錄這個值。

哪些內容可以放到字典中：

性別。因為性別不會變動，但是用戶信息會用到。

首頁通知條數。每次打開首頁都會用到。允許變動，但很少會變動。

新建dict實體類和jpa接口

新建Constant類，用于記錄數據字典數據的標記，以便在程序各個模塊中保持調用一致。

修改Controller類中的getNotices（）方法

修改數據字典中相應值為5，同時前端界面做了調整

5. 問題列表

展示同學們針對課程的問題和回復。因為課程涉及很多內容，比如Java、Mysql、Tomcat、HTML、JavaScript，還有Spring Boot、VUE、Element UI等，所以對問題，需要進行分類，以便后續的查詢和統計。

• 分類如果需要靈活配置，不限定層次，則需要采用樹形結構，同時可以在后臺設置。
• 首頁列表只顯示一個分類，因此在問題表中設計一個主分類字段。
• 排序按照置頂、回復時間倒序排列

Question表

分類表

分類樹

對照表，首頁用不到

回復表

6. Sql語句

• 顯示4個內容：主分類、題目、發布人全名、發布/回復時間
• 排序按照置頂、回復/發布時間倒序排列
• 因為顯示內容涉及多個表，為提高效率，將所需要的內容用一條sql語句取出。

這里涉及到了兩個技術問題

Jpa中如何使用原生sql

為返回字段單獨建立一個返回值接口 QuestionIndex。

7. 返回的json數據

8. 前端顯示