<head>標籤裡有什麼?

出離心_發表於2019-04-16

主要包含了頁面是後設資料

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
複製程式碼

title和h1的區別：

h1 會載入顯示在頁面中

title 是用來表示整個html文件大致內容的後設資料

後設資料 <meta>

在 head 中可以出現任意多個 meta 標籤。一般的 meta 標籤由 name 和 content 兩個屬 性來定義。name 表示元資訊的名，content 則用於表示元資訊的值。

後設資料就是描述資料的資料，而HTML有一個“官方的”方式來為一個文件新增後設資料—— 元素。

  • charset 指定了文件的字元編碼 <meta charset="utf-8">
  • name 指定了meta 元素的型別； 說明該元素包含了什麼型別的資訊。<meta name="author" content="Chris Mills">
  • content 指定了實際的後設資料內容。
  • description也被使用在搜尋引擎顯示的結果頁中
<meta name="description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
複製程式碼

利用meta標籤對viewport進行控制

一個典型的針對移動端優化的站點包含類似下面的內容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
複製程式碼

viewport主要有以下屬性

屬性 說明
width 頁面具體寬度，可以取具體數值
height 頁面高度，可以取值具體的數字
initial-scale 初始縮放比例。
minimum-scale 最小縮放比例
maximum-scale 最大縮放比例
user-scalable 是否允許使用者縮放

自定義圖示

  • 將其儲存在與網站的索引頁面相同的目錄中，以.ico格式儲存（大多數瀏覽器將支援更通用的格式，如.gif或.png，但使用ICO格式將確保它能在如Internet Explorer 6一樣久遠的瀏覽器顯示） <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

新增css和JavaScript

<link rel="stylesheet" href="my-css-file.css">

<script src="my-js-file.js"></script>

其他meta

  • application-name:如果頁面是 Web application，用這個標籤表示應用名稱。
  • author: 頁面作者。
  • description:頁面描述，這個屬性可能被用於搜尋引擎或者其它場合。
  • generator: 生成頁面所使用的工具，主要用於視覺化編輯器，如果是手寫 HTML 的網 頁，不需要加這個 meta。
  • keywords: 頁面關鍵字，對於 SEO 場景非常關鍵。
  • referrer: 跳轉策略，是一種安全考量。
  • theme-color: 頁面風格顏色，實際並不會影響頁面，但是瀏覽器可能據此調整頁面之外 的UI(如視窗邊框或者 tab 的顏色)。

相關文章