<del id="nnjnj"></del><track id="nnjnj"></track>

<p id="nnjnj"></p>

<address id="nnjnj"></address>

    <pre id="nnjnj"><pre id="nnjnj"></pre></pre>

      <noframes id="nnjnj"><ruby id="nnjnj"><ruby id="nnjnj"></ruby></ruby>

      • 自動秒收錄
      • 軟件:1973
      • 資訊:57811|
      • 收錄網站:279872|

      IT精英團

      作為前端 一定要了解meta標簽知識

      作為前端 一定要了解meta標簽知識

      瀏覽次數:
      評論次數:
      編輯: 陽煦
      信息來源: ITPUB
      更新日期: 2022-06-20 21:26:43
      摘要

      前言前幾天面試baidu的時候,面試官問:你都知道什么meta標簽?用處是什么?盡可能多的說出來。我:嗯……嗯……我一般都自動生成…面試官:……后來俺找資料好好學了下,再看了taobao和頭條的

      • 正文開始
      • 相關閱讀
      • 推薦作品

      前言

      前幾天面試百度的時候,面試官問:你知道哪些meta標簽?有什么用?能說多少就說多少。我:嗯.良好的.我通常會自動生成它.面試官:

      后來我找資料好好研究了一下,然后看了淘寶和頭條。我才知道:meta標簽很有用!今天就來簡單總結一下。

      對了,字節適配真的很好。

      概覽

      Meta標簽一般放在整個html頁面的頭部,在MDN中定義如下:

      文檔級元數據元素用于表示任何無法由其他HTML元相關元素(基礎、鏈接、腳本、樣式或標題)表示的元數據。

      感覺抽象嗎?說白了就是傳遞信息。

      讓我們首先看看由元元素定義的元數據的類型:

      如果設置了name屬性,meta元素將提供文檔級元數據,應用于整個頁面。

      如果設置了HTTP-equiv屬性,則meta元素是一個編譯指令,并提供與名稱相似的HTTP頭相同的信息。

      如果設置了charset屬性,meta元素是一個字符集聲明,它告訴文檔要使用哪種字符編碼。

      如果設置了itemprop屬性,則meta元素提供用戶定義的元數據。

      name屬性

      Name和content一起使用,前者表示要表示的元數據的名稱,后者是元數據的值。

      author

      用于表示網頁作者的姓名,如組織或機構。

      meta name=' author ' content=' AAA @ mail . ABC.com '

      復制代碼

      description

      它是對頁面內容的簡短而精確的描述。以頭條和淘寶的描述標簽為例:

      keywords

      與頁面內容相關的關鍵字,用逗號分隔。當一些搜索引擎遇到這些關鍵詞時,就會用它們來對文檔進行分類。還是頭條和淘吧

      o為例

      viewpoint

      為 viewport(視口)的初始大小提供指示。目前僅用于移動設備。

      可能你也發現了,我們在vscode中自動生成html的代碼片段時,會自動生成:

      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      復制代碼

      width用來設置 viewport 的寬度為設備寬度;

      initial-scale為設備寬度與 viewport 大小之間的縮放比例。

      robots

      表示爬蟲對此頁面的處理行為,或者說,應當遵守的規則,是用來做搜索引擎抓取的。

      它的content可以為:

      1. all:搜索引擎將索引此網頁,并繼續通過此網頁的鏈接索引文件將被檢索
      2. none:搜索引擎講忽略此網頁
      3. index:搜索引擎索引此網頁
      4. follow:搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁

      renderer

      用來指定雙核瀏覽器的渲染方式,比如360瀏覽器,我們可以通過這個設置來指定360瀏覽器的渲染方式

      <meta name="renderer" content="webkit"> //默認webkit內核
      <meta name="renderer" content="ie-comp"> //默認IE兼容模式
      <meta name="renderer" content="ie-stand"> //默認IE標準模式
      復制代碼

      http-equiv

      http-equiv也是和content一起使用,前者表示要表示的元數據的名稱,后者是元數據的。

      http-equiv所有允許的值都是特定 HTTP 頭部的名稱,

      X-UA-Compatible

      我們最常見的http-equiv值可能就是X-UA-Compatible了,它常常長這個樣子:

      它是用來是做IE瀏覽器適配的。

      IE=edge告訴瀏覽器,以當前瀏覽器支持的最新版本來渲染,IE9就以IE9版本來渲染。

      chrome=1告訴瀏覽器,如果當前IE瀏覽器安裝了Google Chrome Frame插件,就以chrome內核來渲染頁面。

      像上圖這種兩者都存在的情況:如果有chrome插件,就以chrome內核渲染,如果沒有,就以當前瀏覽器支持的最高版本渲染。

      另外,這個屬性支持的范圍是IE8-IE11

      你可能注意到了,如果在我們的http頭部中也設置了這個屬性,并且和meta中設置的有沖突,那么哪一個優先呢?答案是:開發者偏好(meta元素)優先于Web服務器設置(HTTP頭)。

      content-type

      用來聲明文檔類型和字符集

      x-dns-prefetch-control

      一般來說,HTML頁面中的a標簽會自動啟用DNS提前解析來提升網站性能,但是在使用https協議的網站中失效了,我們可以設置:

      來打開dns對a標簽的提前解析

      cache-control、Pragma、Expires

      和緩存相關的設置,但是遺憾的是這些往往不生效,我們一般都通過http headers來設置緩存策略

      總結

      常用了就是這些啦~實際使用時還有很多新的需要學習,這就需要俺們平時多看看其他網站是怎么設置meta的~ 一起加油叭


      關于本文

      Kubernetes日志收集例程 能正確使用嗎?
      ? 上一篇 2022-06-20
      寫在前端的Docker入門終極指南 不要再說不能用Docker了!
      下一篇 ? 2022-06-20
      • 如何在Ubuntu中保留文件系統并備份當前開發板鏡像
        0閱讀 0條評論 個贊
        在Ubuntu保留文件系統或者說備份當前開發板鏡像的需求在不斷增加。比如Ubuntu文件系統需要安裝庫文件的話直接使用apt-get工具就可以下載,但由于需要下載的核心板較多,比較費時間,這時需要將安……
      • 國產核心板全志T507助力消防系統升級
        0閱讀 0條評論 個贊
        9月16日下午,位于湖南長沙市區內的中國電信大樓發生火災,建筑高度218米,現場濃煙滾滾,數十層樓體燃燒劇烈。消防救援人員趕到現場后很快將火勢控制住,目前大樓火勢已被撲滅,所幸未發現人員傷亡。湖南電信……
      • 教大家如何處理Spring Boot易流中的用戶和群體!
        0閱讀 0條評論 個贊
        1.準備工作2.用戶操作2.1添加用戶2.2修改用戶2.3刪除用戶2.4查詢用戶3.組操作3.1添加組3.2修改組3.3刪除組3.4查詢組4.查看表詳情雖然說我們在實際開發中,……
      • 從PG15開始WAL壓縮優化
        0閱讀 0條評論 個贊
        PG15傳聞中的超級令人激動的功能大多數跳票了,年初我也寫過一個關于PG15新功能跳票的文章。PG15BETA已經發出幾個月了,似乎PG15里令人激動人心的功能不多,不過從長長的新功能列表里,……
      • 深入了解美團葉子發射器開源方案
        0閱讀 0條評論 個贊
        大家好,我是樹哥。之前我們有聊過「如何設計一個分布式ID發號器」,其中有講過4種解決方案,分別是:UUID類雪花算法數據庫自增主鍵Redis原子自增美團以第2、3種解決方案為基礎,開發出……
      發表評論 共有條評論
      用戶名: 密碼:
      驗證碼: 匿名發表
      • 國產超級大腦———rk 3568核心板!
        13閱讀 0條評論 個贊
        從1956年麥卡錫首次提出“人工智能(AI)”的概念至今,人工智能已有66年的歷史,而人工智能真正的崛起卻是在最近的10年。隨著消費電子行業的快速發展和激烈競爭,人工智能再度流行起來,盡管許多企業對A……
      • 基于 網絡6的輕量級Webapi框架緊固點
        0閱讀 0條評論 個贊
        大家好,我是等天黑。FastEndpoints是一個基于.NET6開發的開源webapi框架,它可以很好地替代.NETMinimalAPIs和MVC,專門為開發效率而生,帶來了全……
      • Java開源數據庫引擎 數據庫計算封閉的一站式解決方案
        0閱讀 0條評論 個贊
        目錄前言引入一、數據庫封閉性帶來的問題?問題1:ETL變成ELT甚至LETETL:ELT:問題2:中間表帶來的資源消耗和耦合問題3:多樣性數據源問題4:存儲過程帶來的安全和耦合問題問題5:大……
      • 國產核心板全志T507助力消防系統升級
        0閱讀 0條評論 個贊
        9月16日下午,位于湖南長沙市區內的中國電信大樓發生火災,建筑高度218米,現場濃煙滾滾,數十層樓體燃燒劇烈。消防救援人員趕到現場后很快將火勢控制住,目前大樓火勢已被撲滅,所幸未發現人員傷亡。湖南電信……
      • 深入了解春季交易:介紹 使用 原則
        8閱讀 0條評論 個贊
        大家好,我是樹哥。Spring事務是復雜一致性業務必備的知識點,掌握好Spring事務可以讓我們寫出更好地代碼。這篇文章我們將介紹Spring事務的誕生背景,從而讓我們可以更清晰地了解Sp……
      • SQL Server操作系統的任務調度機制
        0閱讀 0條評論 個贊
        簡介SQLServerOS是在Windows之上,用于服務SQLServer的一個用戶級別的操作系統層次。它將操作系統部分的功能從整個SQLServer引擎中抽象出來,單獨形成一層,以便為存……
      • Oracle服務器遷移的一些經驗
        3閱讀 0條評論 個贊
        前言通過此文章來分享一下Oracle服務器遷移過程中的一些經驗,希望對大家有些許幫助。本文旨在幫助更多的同學,會提及一些基本命令或技巧,但不贅述,后續有機會再進一步分享各個細節。背景之前因機房遷移……
      • 如何優雅地轉換Bean對象
        0閱讀 0條評論 個贊
        背景我們的故事要從一個風和日麗的下午開始說起!這天,外包韓在位置上寫代碼~外包韓根據如下定義PO(persistantobject):持久化對象,可以看成是與數據庫中的表相映射的java對象。最……
      • SQL Server表變量和臨時表的區別
        0閱讀 0條評論 個贊
        一、表變量表變量在SQLServer2000中首次被引入。表變量的具體定義包括列定義,列名,數據類型和約束。而在表變量中可以使用的約束包括主鍵約束,唯一約束,NULL約束和CHECK約束(外鍵……
      • SpringMVC 03: 請求和響應的亂碼解決 + SpringMVC響應Ajax請求
        1閱讀 0條評論 個贊
        請求或響應的中文亂碼問題tomcat9解決了get請求和響應的中文亂碼問題,但是沒有解決post請求或響應的中文亂碼問題tomcat10解決了get和post請求以及響應的中文亂碼問題考慮到實際項目中……
      • 2022數字技能職業教育生態研討會
        9閱讀 0條評論 個贊
        職業教育是國民教育體系和人力資源開發的重要組成部分。發展職業教育,已經成為世界各國應對經濟、社會、人口、環境、就業等方面挑戰,實現可持續發展的重要戰略選擇。中國職業教育源遠流長,師徒制教學有著悠久的……
      • 面試問題:Java序列化和反序列化
        0閱讀 0條評論 個贊
        目錄序列化和反序列化的概念應用場景?序列化實現的方式繼承Serializable接口,普通序列化繼承Externalizable接口,強制自定義序列化serialVersionUID的作用靜態變量不會……
      • 網純原生實現時間單位定時任務執行,未依賴第三方組件
        0閱讀 0條評論 個贊
        常用的定時任務組件有Quartz.Net和Hangfire兩種,這兩種是使用人數比較多的定時任務組件,個人以前也是使用的Hangfire,慢慢的發現自己想要的其實只是一個能夠根據Cron……
      • Linux環境程序如何運行?
        0閱讀 0條評論 個贊
        .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
      • 當我們在并行學習的時候 我們到底在學習什么?
        0閱讀 0條評論 個贊
        大家好,我是鲏。前段時間,星球里一位朋友問我:魚皮,高并發項目牽扯的知識有哪些?之前看到的一個回答:既要解決性能的問題又要考慮業務完整性,還有網絡資源、服務器資源等,我不太能理解,希望魚皮細說。我就簡……
      • 基于ASP.NET核心6.0的簡潔架構
        0閱讀 0條評論 個贊
        背景最近嘗試錄制了一個系列視頻:《ASP.NETCore6.0+Vue.js3實戰開發》,本節是視頻內部整潔架構的理論和實戰的文字稿。因為在錄制之前,我通常會編寫完整的文字內容作為視頻文案,這……
      • 拓撲嶺CEO雷鵬:創業不只是技術
        0閱讀 0條評論 個贊
        云計算的出現,加速了企業信息技術的發展。數據庫是最常用的基礎軟件之一,它通常能提供計算和存儲的能力。雖然分布式數據庫也做到了很好的擴展性,但它不能算是「云原生」?!冈圃鷶祿臁沟暮诵?,是要設計一種更……
      • Java接口自動測試框架系列(1)自動測試框架
        0閱讀 0條評論 個贊
        一、什么是自動化測試自動化測試是把以人為驅動的測試行為轉化為機器執行的一種過程。通常,在設計了測試用例并通過評審之后,由測試人員根據測試用例一步步執行測試,得到實際結果與期望結果的比較。為了節省人力、……
      • 卡夫卡詳解(一)——卡夫卡是什么 怎么用
        0閱讀 0條評論 個贊
        kafka是什么在回答這個問題之前,我們需要先了解另一個東西--eventstreaming。什么是eventstreaming我覺得,eventstreaming是一個動態的概念,它描述了一……
      • SQL Server 2005分區模板和實例
        0閱讀 0條評論 個贊
        一、場景這一段時間使用SQLServer2005對幾個系統進行表分區,這幾個系統都有一些特點,比如數據庫某張表持續增長,給數據庫帶來了很大的壓力?,F在假如提供一臺新的服務器,那么我們應該如何規劃……
      最近發布資訊
      更多
      警花高潮嗷嗷叫
      <del id="nnjnj"></del><track id="nnjnj"></track>

      <p id="nnjnj"></p>

      <address id="nnjnj"></address>

        <pre id="nnjnj"><pre id="nnjnj"></pre></pre>

          <noframes id="nnjnj"><ruby id="nnjnj"><ruby id="nnjnj"></ruby></ruby>