標籤裡有什麼?
摘要：
主要包含了頁面是元資料
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
複製程式碼
title和h1的區別：
h1...
主要包含了頁面是元資料
<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有一個“官方的”方式來為一個文件新增元資料——元素。
<meta charset="utf-8"> <meta name="author" content="Chris Mills">
<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 的顏色)。