資訊專欄INFORMATION COLUMN
摘要：元素父元素屬性中的變化為中新增的，用來聲明字符編碼屬性在中有很多值，在中只有可用具體用途元素出去屬性外，都是屬性或?qū)傩越Y(jié)合來使用指定名值對定義元數(shù)據(jù)屬性與屬性結(jié)合使用用來表示元數(shù)據(jù)的類型，表示當(dāng)前標(biāo)簽的具體作用屬性用來提供值。
文章同步到github
以前沒怎么太注意過meta標(biāo)簽的作用，只是簡單了解一些常用屬性，現(xiàn)在結(jié)合個人了解的進行記錄與總結(jié):
元數(shù)據(jù)首先需要了解一下元數(shù)據(jù)(metadata)元素的概念，用來構(gòu)建HTML文檔的基本結(jié)構(gòu)，以及就如何處理文檔向瀏覽器提供信息和指示，它們本身不是文檔內(nèi)容，但提供了關(guān)于后面文檔內(nèi)容的信息。——出自《html5權(quán)威指南》
如title、base、meta都是元數(shù)據(jù)元素。本文主要介紹。
元素元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。--W3school
元素可以定義文檔的各種元數(shù)據(jù)，提供各種文檔信息，通俗點說就是可以理解為提供了關(guān)于網(wǎng)站的各種信息。html文檔中可以包含多個元素，每個元素只能用于一種用途，如果想定義多個文檔信息，則需要在head標(biāo)簽中添加多個meta元素。
| 元素 | meta |
|---|---|
| 父元素 | head |
| 屬性 | http-equiv、name、content、charset |
| HTML5中的變化 | 1. charset為HTML5中新增的，用來聲明字符編碼;2. http-equiv屬性在HTML4中有很多值，在HTML5中只有refresh、default-style、content-type可用 |
元素出去charset屬性外，都是http-equiv屬性或name屬性結(jié)合content來使用
1. 指定名/值對定義元數(shù)據(jù)name屬性與content屬性結(jié)合使用, name用來表示元數(shù)據(jù)的類型，表示當(dāng)前標(biāo)簽的具體作用；content屬性用來提供值。
例如:
demo
welcome
| 元數(shù)據(jù)名稱(name的值) | 說明 |
|---|---|
| application name | 當(dāng)前頁所屬Web應(yīng)用系統(tǒng)的名稱 |
| keywords | 描述網(wǎng)站內(nèi)容的關(guān)鍵詞,以逗號隔開，用于SEO搜索 |
| description | 當(dāng)前頁的說明 |
| author | 當(dāng)前頁的作者名 |
| copyright | 版權(quán)信息 |
| renderer | renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面 |
| viewreport | 它提供有關(guān)視口初始大小的提示，僅供移動設(shè)備使用 |
viewreport
備注:圖片截取自MDN
主要介紹一個當(dāng)meta標(biāo)簽的name屬性值為viewreport時的視口的大小
1.mate標(biāo)簽name屬性不設(shè)置viewreport
如果不設(shè)置name的值為viewreport，默認(rèn)視口寬度為980
2.mate標(biāo)簽name屬性設(shè)置viewreport
1.content內(nèi)容為空時，默認(rèn)視口寬度為980
2.content設(shè)置width，不設(shè)置initail-scale時，視口寬度為設(shè)置的width值
3.content不設(shè)置width，只設(shè)置initail-scale時，是可以根據(jù)initail-scale的值計算出視口的寬度
initail-scale = 屏幕寬度 / 視口寬度
4.content同時設(shè)置width和initail-scale時，視口寬度為width的值，頁面顯示按照initail-scale比率進行縮放
5.一般都是進行如下設(shè)置，來實現(xiàn)視口寬等于設(shè)備寬，布局完成后屏幕顯示也不進行縮放
renderer
//默認(rèn)webkit內(nèi)核 //默認(rèn)IE兼容模式 //默認(rèn)IE標(biāo)準(zhǔn)模式2. 聲明字符編碼
charset屬性為HTML5新增的屬性，用于聲明字符編碼,以下兩種寫法效果一樣
//HTML5
//舊的HTML3. 模擬http標(biāo)頭字段
http-equiv屬性與content屬性結(jié)合使用, http-equiv屬性為指定所要模擬的標(biāo)頭字段的名稱，content屬性用來提供值。
content-Type 聲明網(wǎng)頁字符編碼:
refresh 指定一個時間間隔(以秒為單位),在此時間過去之后從服務(wù)器重新載入當(dāng)前頁面,也可以另外指定一個頁面.
//2秒后在當(dāng)前頁跳轉(zhuǎn)到百度
X-UA-Compatible 瀏覽器采取何種版本渲染當(dāng)前頁面
//指定IE和Chrome使用最新版本渲染當(dāng)前頁面
expires 用于設(shè)定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸
catch-control 用于指定所有緩存機制在整個請求/響應(yīng)鏈中必須服從的指令
//
content有以下值(百度百科):
| content的值 | 說明 |
|---|---|
| public | 所有內(nèi)容都將被緩存(客戶端和代理服務(wù)器都可緩存) |
| private | 內(nèi)容只緩存到私有緩存中(僅客戶端可以緩存，代理服務(wù)器不可緩存) |
| no-cache | 必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，然后才能使用該響應(yīng)來滿足后續(xù)對同一個網(wǎng)址的請求。因此，如果存在合適的驗證令牌 (ETag)，no-cache 會發(fā)起往返通信來驗證緩存的響應(yīng)，如果資源未被更改，可以避免下載。 |
| no-store | 所有內(nèi)容都不會被緩存到緩存或 Internet 臨時文件中 |
| must-revalidation/proxy-revalidation | 如果緩存的內(nèi)容失效，請求必須發(fā)送到服務(wù)器/代理以進行重新驗證 |
| max-age=xxx (xxx is numeric) | 緩存的內(nèi)容將在 xxx 秒后失效, 這個選項只在HTTP 1.1可用, 并如果和Last-Modified一起使用時, 優(yōu)先級較高 |
由于能力有限，結(jié)合demo總結(jié)以上元素的常用屬性及其功能，可能有些紕漏，還望大家多多包含和指正，文章參考了《HTML權(quán)威指南》及其他相關(guān)博客，在我能力外沒有總結(jié)的可參考以上博客。后續(xù)有時間還會繼續(xù)學(xué)習(xí)和更新此文章，希望能對大家有所幫助
參考文檔:
移動web之viewport詳解
W3school
HTML meta標(biāo)簽總結(jié)與屬性的使用介紹
常用meta整理
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51054.html
摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網(wǎng)站面試題圖片過多的時候如何優(yōu)化圖標(biāo)很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...
摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網(wǎng)站面試題圖片過多的時候如何優(yōu)化圖標(biāo)很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...
閱讀 2013·2021-09-22 16:05
閱讀 9335·2021-09-22 15:03
閱讀 2893·2019-08-30 15:53
閱讀 1706·2019-08-29 11:15
閱讀 916·2019-08-26 13:52
閱讀 2360·2019-08-26 11:32
閱讀 1810·2019-08-26 10:38
閱讀 2576·2019-08-23 17:19
