重學前端學習筆記(十六)--HTML元信息類標籤

筆記說明

重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄, 天天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的能夠加入winter的專欄學習【原文有winter的語音】,若有侵權請聯繫我,郵箱:kaimo313@foxmail.com。

1、什麼是元信息類標籤

元信息,是指描述自身的信息。 元信息類標籤,就是 HTML 用於描述文檔自身的一類標籤。

2、head 標籤

做爲盛放其它語義類標籤的容器使用。

2.一、注意

一、head 標籤規定了自身必須是 html 標籤中的第一個標籤,它的內容必須包含一個 title,而且最多隻能包含一個 basehtml

二、若是文檔做爲 iframe,或者有其餘方式指定了文檔標題時,能夠容許不包含 title 標籤前端

3、title 標籤

title 標籤表示文檔的標題, title 應該完整地歸納整個網頁內容的。

4、base 標籤

base 標籤做用是給頁面上 全部的 URL 相對地址提供一個基礎。
<html>
    <head>
        <base href="https://time.geekbang.org" target="_blank"/>
    </head>
    <body>
        <a href="">極客時間</a>
    </body>
</html>

上面的代碼裏面a標籤的屬性href沒有值,可是當你點擊極客時間,它就會新開一個頁面打開base標籤裏的hrefweb

5、meta 標籤

meta 標籤是一組鍵值對,它是一種通用的元信息表示標籤。

5.一、具備 charset 屬性的 meta

HTML5開始 meta標籤新增 charset 屬性的 meta 標籤無需再有 name 和 content

charset 型 meta 標籤很是關鍵,它描述了 HTML 文檔自身的編碼形式。建議放在 head 的第一個。chrome

<html>
    <head>
        <meta charset="UTF-8">
……

5.二、具備 http-equiv 屬性的 meta

具備 http-equiv 屬性的 meta 標籤,表示執行一個命令,能夠不須要 name 屬性。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

其餘命令:瀏覽器

  • content-language:指定內容的語言
  • default-style:指定默認樣式表
  • refresh:刷新
  • set-cookie:模擬 http 頭 set-cookie,設置 cookie
  • x-ua-compatible:模擬 http 頭 x-ua-compatible,聲明 ua 兼容性
  • content-security-policy:模擬 http 頭 content-security-policy,聲明內容安全策略

5.三、name 爲 viewport 的 meta

<meta name="viewport" content="width=500, initial-scale=1">
  • width:頁面寬度,能夠取值具體的數字,也能夠是 device-width,表示跟設備寬度相等。
  • height:頁面高度,能夠取值具體的數字,也能夠是 device-height,表示跟設備高度相等。
  • initial-scale:初始縮放比例
  • minimum-scale:最小縮放比例
  • maximum-scale:最大縮放比例
  • user-scalable:是否容許用戶縮放

作好了移動端適配的網頁,應該把用戶縮放功能禁止掉,寬度設爲設備寬度安全

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

5.四、其它預約義的 meta

application-name:若是頁面是 Web application,用這個標籤表示應用名稱。cookie

  • author: 頁面做者
  • description:頁面描述,用於搜索引擎或者其它場合
  • generator: 生成頁面所使用的工具,主要用於可視化編輯器,若是是手寫 HTML 的網頁,不須要加這個 meta
  • keywords: 頁面關鍵字,對於 SEO 場景很是關鍵
  • referrer: 跳轉策略,是一種安全考量
  • theme-color: 頁面風格顏色,實際並不會影響頁面,可是瀏覽器可能據此調整頁面以外的 UI(如窗口邊框或者 tab 的顏色)

補充:app

<head>
    <!-- 默認使用最新瀏覽器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 不被網頁(加速)轉碼 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">

    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow">

    <!-- 刪除蘋果默認的工具欄和菜單欄 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- 設置蘋果工具欄顏色 -->
    <meta  name="apple-mobile-web-app-status-bar-style" content="black-translucent">

</head>

我的總結

關於這一塊在業務中確實關注比較少,base標籤也是看了winter這篇文章才知道的,加油加油才行。。。編輯器

相關文章
相關標籤/搜索