技術標籤：htmlhtml5

簡介

• <meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
• <meta> 標籤位於文件的頭部，不包含任何內容。<meta>標籤的屬性定義了與文件相關聯的名稱/值對。

屬性

meta共有charset、content、name、http-equiv四個屬性

charset

定義文件的字元編碼

<meta charset="UTF-8">

content

這個屬性包含http-equiv 或name 屬性的值。

content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

<meta name="keywords" content="1,2,3"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">

name

name 和 content 屬性一起使用，以名稱/值對的方式給文件提供元資料，其中 name 作為元資料的名稱，content 作為元資料的值。

<meta name="keywords" content="前端、HTML、meta">
<
 
meta name="description" content="描述">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="beans">
<meta name="generator" content="Visual Studio Code">
<
 
meta name="referrer" content="always">

更多元資料名稱傳送門 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name

http-equiv

翻譯為，相當於http頭部的作用，所有允許的值都是http頭部的名稱，它可以向瀏覽器返回一些有用的資訊，以致瀏覽器可以正確的顯示網頁內容，常用引數有

1.content-type

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> // 舊寫法
<meta charset="UTF-8"> // html5後新寫法

2. content-security-policy

<!-- 網站資源只能使用https方式獲取 -->
<meta http-equiv="Content-Security-Policy" content="default-src https:">

詳細用法傳送門 http://www.ruanyifeng.com/blog/2016/09/csp.html

3.refresh

<!-- 每30秒重新整理一次頁面 -->
<meta http-equiv="refresh" content="30">
<!-- 定時重定向 3秒後跳轉百度-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

4.X-UA-Compatible(瀏覽器採取何種版本渲染當前頁面)

<meta httpequiv="X-UA-Compatible" content="IE=edge">