- HTML5 移動Web開發從入門到精通（微課精編版）
- 前端科技
- 1648字
- 2019-11-15 20:21:48
3.1 頭部信息
在HTML文檔的頭部區域，存儲著各種網頁基本信息（也稱元信息），這些信息主要被瀏覽器所采用，不會顯示在網頁中。另外，搜索引擎也會檢索這些信息，因此重視并設置這些頭部信息非常重要。
3.1.1 定義網頁標題
使用title元素可定義網頁標題。例如：
瀏覽器會把它放在窗口的標題欄或狀態欄中顯示，如圖3.1所示。當把文檔加入用戶的鏈接列表、收藏夾或書簽列表時，標題將作為該文檔鏈接的默認名稱。
圖3.1 顯示網頁標題
title元素必須位于head部分。頁面標題會被Google、百度等搜索引擎采用，從而能夠大致了解頁面內容，并將頁面標題作為搜索結果中的鏈接顯示，如圖3.2所示。它也是判斷搜索結果中頁面相關度的重要因素。
圖3.2 網頁標題在搜索引擎中的作用
總之，讓每個頁面的title是唯一的，從而提升搜索引擎結果排名，并讓訪問者獲得更好的體驗。
【補充】
title元素是必需的，title中不能包含任何格式、HTML、圖像或指向其他頁面的鏈接。一般網頁編輯器會預先為頁面標題填上默認文字，要確保用自己的標題替換它們。
很多開發人員不太重視title文字，僅簡單地輸入網站名稱，并將其復制到全站每一個網頁中。如果流量是網站追求的指標之一，這樣做會對網站造成很大的損失。不同搜索引擎確定網頁排名和內容索引規則的算法是不一樣的。不過，title通常都扮演著重要的角色。搜索引擎會將title作為判斷頁面主要內容的指標，并將頁面內容按照與之相關的文字進行索引。
有效的title應包含幾個與頁面內容密切相關的關鍵字。作為一種最佳實踐，選擇能簡要概括文檔內容的文字作為title文字。這些文字既要對屏幕閱讀器用戶友好，又要有利于搜索引擎排名。
將網站名稱放入title，但將頁面特有的關鍵字放在網站名稱的前面會更好。建議將title的核心內容放在前60個字符中，因為搜索引擎通常將超過此數目（作為基準）的字符截斷。不同瀏覽器顯示在標題欄中的字符數上限不盡相同。瀏覽器標簽頁會將標題截得更短，因為它占的空間較少。
3.1.2 定義網頁元信息
使用meta元素可以定義網頁的元信息，例如，定義針對搜索引擎的描述和關鍵詞，一般網站都必須設置這兩條元信息，以方便搜索引擎檢索。
定義網頁的描述信息。
<meta name="description" content=" 標準網頁設計專業技術資訊" / >
- 定義頁面的關鍵詞。
<meta name="keywords" content="HTML,DHTML, CSS, XML, XHTML, JavaScript" />
<meta>標簽位于文檔的頭部，<head>標簽內，不包含任何內容。使用meta元素的屬性可以定義與文檔相關聯的名稱／值對。<meta>標簽可用屬性說明，如表3.1所示。
表3.1 <meta>標簽屬性列表
【示例】下面列舉常用元信息的設置代碼，更多元信息的設置讀者可以參考HTML參考手冊。
使用http-equiv等于content-type，可以設置網頁的編碼信息。
- 設置UTF-8編碼。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
提示：HTML5簡化了字符編碼設置方式：<meta charset="utf-8">，其作用是相同的。
- 設置簡體中文gb2312編碼。
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
注意：每個HTML文檔都需要設置字符編碼類型，否則可能會出現亂碼，其中UTF-8是國家通用編碼，獨立于任何語言，因此都可以使用。
使用content-language屬性值定義頁面語言的代碼。如下所示為設置中文版本語言。
<meta http-equiv="content-language" content="zh-CN" />
使用refresh屬性值可以設置頁面刷新時間或跳轉頁面，如5秒鐘之后刷新頁面。
<meta http-equiv="refresh" content="5" />
5秒鐘之后跳轉到百度首頁。
<meta http-equiv="refresh" content="5; url= https://www.baidu.com/" />
使用expires屬性值設置網頁緩存時間。
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" />
也可以使用如下方式設置頁面不緩存。
<meta http-equiv="pragma" content="no-cache" />
類似設置還有：
3.1.3 定義文檔視口
在移動Web開發中，經常會遇到viewport（視口）問題，就是瀏覽器顯示頁面內容的屏幕區域。一般移動設備的瀏覽器默認都設置一個<meta name="viewport">標簽，定義一個虛擬的布局視口，用于解決早期的頁面在手機上顯示的問題。
iOS、Android基本都將這個視口分辨率設置為980px，所以桌面網頁基本能夠在手機上呈現，只不過看上去很小，用戶可以通過手動縮放網頁進行閱讀。這種方式用戶體驗很差，建議使用<meta name="viewport">標簽設置視圖大小。
<meta name="viewport">標簽的設置代碼如下。
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1;
user-scalable=no;">
各屬性說明如表3.2所示。
表3.2 <meta name="viewport">標簽的設置說明
【示例】下面的示例是在頁面中輸入一個標題和兩段文本，如果沒有設置文檔視口，則在移動設備中所呈現的效果如圖3.3所示，而設置了文檔視口之后，所呈現的效果如圖3.4所示。
提示：ideal viewport（理想視口）通常就是我們說的設備的屏幕分辨率。
圖3.3 默認被縮小的頁面視圖
圖3.4 保持正常的布局視圖
3.1.4 移動應用的head頭信息說明
本節為線上拓展內容，介紹移動端HTML5 head頭部信息設置說明。本節內容相對專業，適合專業開發人員閱讀或參考，對于初級讀者來說，建議有選擇性地跳讀，或者作為案頭參考資料，需要時備查使用。詳細內容請掃碼閱讀。