国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML中的meta標簽常用屬性及其作用總結

Keven / 1186人閱讀

摘要：元素父元素屬性中的變化為中新增的，用來聲明字符編碼屬性在中有很多值，在中只有可用具體用途元素出去屬性外，都是屬性或屬性結合來使用指定名值對定義元數據屬性與屬性結合使用用來表示元數據的類型，表示當前標簽的具體作用屬性用來提供值。

文章同步到github

以前沒怎么太注意過meta標簽的作用，只是簡單了解一些常用屬性，現在結合個人了解的進行記錄與總結:

元數據 
首先需要了解一下元數據(metadata)元素的概念，用來構建HTML文檔的基本結構，以及就如何處理文檔向瀏覽器提供信息和指示，它們本身不是文檔內容，但提供了關于后面文檔內容的信息。——出自《html5權威指南》

如title、base、meta都是元數據元素。本文主要介紹。

元素

元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。--W3school

元素可以定義文檔的各種元數據，提供各種文檔信息，通俗點說就是可以理解為提供了關于網站的各種信息。html文檔中可以包含多個元素，每個元素只能用于一種用途，如果想定義多個文檔信息，則需要在head標簽中添加多個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屬性結合content來使用

1. 指定名/值對定義元數據

name屬性與content屬性結合使用, name用來表示元數據的類型，表示當前標簽的具體作用；content屬性用來提供值。

例如:



    
        demo
        
        
        
    
    
        
welcome
元數據名稱(name的值) 說明
application name 當前頁所屬Web應用系統的名稱
keywords 描述網站內容的關鍵詞,以逗號隔開，用于SEO搜索
description 當前頁的說明
author 當前頁的作者名
copyright 版權信息
renderer renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面
viewreport 它提供有關視口初始大小的提示，僅供移動設備使用

viewreport

備注:圖片截取自MDN

主要介紹一個當meta標簽的name屬性值為viewreport時的視口的大小

1.mate標簽name屬性不設置viewreport

如果不設置name的值為viewreport，默認視口寬度為980

2.mate標簽name屬性設置viewreport

1.content內容為空時，默認視口寬度為980

2.content設置width，不設置initail-scale時，視口寬度為設置的width值

3.content不設置width，只設置initail-scale時，是可以根據initail-scale的值計算出視口的寬度

initail-scale = 屏幕寬度 / 視口寬度

4.content同時設置width和initail-scale時，視口寬度為width的值，頁面顯示按照initail-scale比率進行縮放

5.一般都是進行如下設置，來實現視口寬等于設備寬，布局完成后屏幕顯示也不進行縮放

renderer

 //默認webkit內核 
 //默認IE兼容模式 
 //默認IE標準模式
2. 聲明字符編碼

charset屬性為HTML5新增的屬性，用于聲明字符編碼,以下兩種寫法效果一樣

 //HTML5
 //舊的HTML
3. 模擬http標頭字段

http-equiv屬性與content屬性結合使用, http-equiv屬性為指定所要模擬的標頭字段的名稱，content屬性用來提供值。

content-Type 聲明網頁字符編碼:

refresh 指定一個時間間隔(以秒為單位),在此時間過去之后從服務器重新載入當前頁面,也可以另外指定一個頁面.

//2秒后在當前頁跳轉到百度

X-UA-Compatible 瀏覽器采取何種版本渲染當前頁面

 //指定IE和Chrome使用最新版本渲染當前頁面

expires 用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸

catch-control 用于指定所有緩存機制在整個請求/響應鏈中必須服從的指令

//

content有以下值(百度百科):

content的值 說明
public 所有內容都將被緩存(客戶端和代理服務器都可緩存)
private 內容只緩存到私有緩存中(僅客戶端可以緩存，代理服務器不可緩存)
no-cache 必須先與服務器確認返回的響應是否被更改，然后才能使用該響應來滿足后續對同一個網址的請求。因此，如果存在合適的驗證令牌 (ETag)，no-cache 會發起往返通信來驗證緩存的響應，如果資源未被更改，可以避免下載。
no-store 所有內容都不會被緩存到緩存或 Internet 臨時文件中
must-revalidation/proxy-revalidation 如果緩存的內容失效，請求必須發送到服務器/代理以進行重新驗證
max-age=xxx (xxx is numeric) 緩存的內容將在 xxx 秒后失效, 這個選項只在HTTP 1.1可用, 并如果和Last-Modified一起使用時, 優先級較高

由于能力有限，結合demo總結以上元素的常用屬性及其功能，可能有些紕漏，還望大家多多包含和指正，文章參考了《HTML權威指南》及其他相關博客，在我能力外沒有總結的可參考以上博客。后續有時間還會繼續學習和更新此文章，希望能對大家有所幫助

參考文檔:

移動web之viewport詳解
W3school
HTML meta標簽總結與屬性的使用介紹
常用meta整理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51054.html

相關文章

  • 面試知識點總結

    摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

    王晗 評論0 收藏0

  • 面試知識點總結

    摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

    CrazyCodes 評論0 收藏0

  • HTMl

    摘要：表格定義表格以網格形式表示數據。標題一標題二標題三用來創建表格，表格的內容逐行編寫每行單元格表示行列的標題。在中，聲明需引用文檔類型聲明，因為是基于標準通用標記語言。塊級元素有些元素在瀏覽器窗口中顯示總是另起一行，這些元素被稱為塊級元素 結構 Document HTML 代碼由包含在尖括號中的字符組成。這些成為 HTML 代...

    stackfing 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<