HTML5的WEB介面中meta實列詳解

這次帶給大家HTML5的WEB介面中meta實列詳解，使用HTML5的WEB介面中meta的注意事項有哪些，下面就是實戰案例，一起來看一下。

簡介

meta標籤是HTML語言HEAD區的輔助性標籤。

meta常用於定義頁面的說明，關鍵字，最後修改日期，和其它的元資料。這些元資料將服務於瀏覽器（如何佈局或重載頁面），搜尋引擎和其它網路服務。

mata 標籤包含全域屬性

charset

#聲明網頁的字元編碼：

content

content屬性的內容是htp-equiv或name屬性的值，取決於你用哪一個。

http-equiv

此屬性可以包含HTTP頭的名稱，屬性的英文全稱為 http-equivalent。它定義了可以改變 server和 user-agent行為的指令。該指令的值在content屬性內定義，可以是以下之一：

content-language（已過時）

定義頁面的預設語言。它可以被任何元素上的lang屬性所覆蓋。

Pragma

禁止瀏覽器從本機電腦的快取中存取頁面內容。如：

expires

可以用來設定網頁的到期時間。一旦網頁過期，必須到伺服器重新傳輸。

cache-control

指定請求和回應遵循的快取機制。共有以下幾種用法：

no-cache: 先發送請求，與伺服器確認該資源是否已更改，如果未被更改，則使用快取。
no-store: 不允許緩存，每次都要去伺服器上，下載完整的回應。 （安全措施）
public : 快取所有回應，但並非必須。因為max-age也可以做到相同效果
private : 只為單一使用者緩存，因此不允許任何中繼進行快取。 （比如說CDN就不允許快取private的回應）
max-age : 表示目前請求開始，該回應在多久內能被快取和重複使用，而不去伺服器重新請求。例如：max-age=60表示回應可以再快取和重複使用 60 秒。

content-security-policy

允許頁面作者定義目前頁面的內容策略。內容策略主要指定允許的伺服器位址和腳本端點，這有助於防止 cross-site scripting 攻擊。

CSP 的實質就是白名單制度，開發者明確告訴客戶端，哪些外部資源可以載入和執行，等同於提供白名單。它的實作和執行全部由瀏覽器完成，開發者只需提供配置。

CSP 大大增強了網頁的安全性。攻擊者即使發現了漏洞，也沒辦法注入腳本，除非還控制了一台列入了白名單的可信主機。 兩種方法可以啟用 CSP。一種是透過 HTTP 頭資訊的 Content-Security-Policy的字段。

Content-Security-Policy: script-src 'self'; object-src 'none';

style-src cdn.example.org third-party.org;child-src https :

   

##上面程式碼中，CSP 做瞭如下設定:

腳本：只信任目前網域

標籤：不信任任何URL，即不載入任何資源
樣式表：只信任cdn.example.org和third-party.org
框架（frame）：必須使用HTTPS協定來載入
其他資源：沒有限制
啟用後，不符合CSP 的外部資源就會被阻止載入。

更多介紹可見：Content Security Policy 入門教學

content-type（已過時）

定義文件的MIME類型，後面接著其字元編碼。

不要使用這個值，因為它已經過時了。建議使用元素上的charset屬性。

由於無法在XHTML或HTML5的XHTML序列化中變更文件類型，因此不要使用將MIME類型設定為 XHTML MIME類型。
refresh

此指令指定：

如果content屬性只包含一個正整數，則表示該頁面重新載入的秒數。

如果content屬性包含一個正整數，後面跟著
字串'; url ='，那麼表示當前頁面XX秒後重定向到另一個有效的URL。

robots

robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。

值

#Used By

index    允許robot索引本頁（預設）    All    

noindex    不允許robot索引本頁   All    

follow    允許搜尋引擎繼續透過此網頁的連結索引

nofollow    搜尋引擎不繼續透過此網頁的連結索引搜尋其它的網頁   All    

none    相當於noindex，nofollow    Google ）作為搜尋引擎結果中的頁面描述。    Google, Yahoo, Bing    

noarchive    要求搜尋引擎無法快取頁面內容    Google, Yahoo, Bing    

nosnippet    禁止搜尋引擎結果中顯示該頁面的任何說明。    Google, Bing    

noimageindex    要求此頁面不作為

引用

頁面的索引影像的顯示。    Google    nocache    與noarchive同義    Bing    

viewport

#提供了關於viewport初始大小的大小的提示。僅供行動裝置使用。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼在HTML網頁中插入影片

#怎麼做出HTML文字方塊唯讀效果

怎麼讓前端介面自動清理js、css檔案的快取

#

以上是HTML5的WEB介面中meta實列詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！