head裏兩個重要標籤base和meta

base標籤

<base href="../">

咱們並不經常使用的一個標籤，可是一旦用得不當會帶來災難性的影響。

它會影響到全部頁面上的href和src屬性相對路勁的定位:

例如：

<!-- ./1.css 會被理解爲 ../1.css -->
<link rel="stylesheet" href="./1.css">

<!-- 2.mp4 會被理解爲 ../2.mp4 -->
<video src="2.mp4"></video>

<!-- ../3.mp3 會被理解爲 ../../3.mp3 -->
<audio src="../3.mp3"></audio>

<!-- 像下面這2種絕對路徑就不會受影響 -->
<a href="/aaa"></a>
<script src="D:///desk/test/node_modules/vue/dist/vue.js"></script>

值得注意的是:  base標籤不會影響連接內部的路徑

例如base href是「../」，link標籤引入了1.css，1.css有引入其餘樣式文件：

@import: url("../2.css")

這個時候，../2.css 不是被理解成 ../../2.css，而是理解爲相對於1.css的../2.css

 

meta標籤

平常開發中咱們用得更多的是meta標籤，分爲3類

1. 具備charset屬性的meta

<meta charset="UTF-8">

通常Response Header都會有，所以這個meta不是寫了就必定會生效

content-type: text/html; charset=utf-8

它會在HTTP Response Header沒帶上編碼的時候 或者本地打開HTML文件（file:///..）時 生效

建議這個標籤放在 head 的第一個，處理的全部字符都是 ASCII 字符，衆所周知，ASCII 字符是 UTF-8 和絕大多數字符編碼的子集，因此，在讀到 meta 以前，瀏覽器把文檔理解多數編碼格式都不會出錯， 這樣能夠最大限度地保證不出現亂碼

 

2. 帶有http-equiv 屬性的 meta

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

它的做用至關於在HTML裏面書寫Response Header

上面這個例子至關於添加了 content-type 這個 HTTP Response 頭，而且指定了 http 編碼方式爲 UTF-8

值得注意的是，這個和 meta charset是等價的，若是同時存在，誰先出現，瀏覽器就採用誰

http-equiv還有如下幾種：

• content-language 指定內容的語言；
  • 對頁面沒什麼影響，只是用來告訴瀏覽器，這是一個默認的語系是xxx的網頁

    <meta http-equiv="Content-Language" content="zh-cn">

• default-style 指定默認樣式表；

  • 若是link標籤帶有title，則會默認選擇帶有title的link的第一個生效，若是有這個meta default-style，則按照這個content來默認選擇

    <meta http-equiv="default-style" content="xxx2">
    <link rel="stylesheet" href="1.css" title="xxx">
    <link rel="stylesheet" href="2.css" title="xxx2">

    順帶一提firefox支持樣式切換選擇（demo）

     

• refresh 刷新；
  • 表示過5s後刷新頁面，並跳轉到qq.com

    <meta http-equiv="refresh" content="5; http://www.qq.com">

• set-cookie 模擬 http 頭 set-cookie，設置 cookie；
  • chrome已經廢棄這個設置cookie的方法，但firefox仍然支持，每一個標籤只能set一個key value

    <meta http-equiv="set-cookie" content="age=23">
    <meta http-equiv="set-cookie" content="name=david">

• x-ua-compatible 模擬 http 頭 x-ua-compatible，聲明 ua 兼容性；
  • 這個x-ua-compatible是專門給IE使用的，通知IE用什麼版原本渲染
• content-security-policy 模擬 http 頭 content-security-policy，聲明內容安全策略。

 

3. 最多見的meta，帶有content、name屬性的meta標籤

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

它用於定義一些網頁的元信息，除了比較特殊的viewport、referrer外，每每不會對頁面功能有影響，更可能是用做優化SEO：

• viewport
  • key有width、height、initial-scale、minimum-scale、maximum-scale、user-scalable，會影響頁面的分辨率（移動端H5頁面最多見）
• referrer: 跳轉策略，是一種安全考量。
  • 用於控制referer的值，content有4種：origin(推薦，只帶協議和域名)、never(直接不帶referer)、always(不推薦，老是帶完整的referer，包括了query，若是涉及隱私則很危險)、default（https向http請求時，referrer置爲空） 更多詳情
• author: 頁面做者，用於優化SEO。
• description：頁面描述，用於優化SEO。
• keywords: 頁面關鍵字，用於優化SEO。
• generator: 生成頁面所使用的工具，主要用於可視化編輯器（例如ps直接根據設計稿生成的HTML），若是是手寫 HTML 的網頁，不須要加這個 meta。
• theme-color: 頁面風格顏色，實際並不會影響頁面，可是瀏覽器可能據此調整頁面以外的 UI（如窗口邊框或者 tab 的顏色）。