GZQ0607 ·HTML 標簽中的訊息
在這一節知識點中，我將帶領大家一起學習 <head>標簽的相關知識點。<head>標簽，是一個對于網頁極其重要的標簽。在整個前端開發領域算得上不可不知的程度。<head> 標簽可謂是“藏龍臥虎”。別看它外觀簡短，卻處處定義著一個網頁的“大事”。
<head> 也是 HTML 結構中不可獲取的一部分。而關鍵字決定了你是否會被搜索引擎檢索到。百度谷歌等搜索引擎想必大家的生活都已經離不開了吧。而網頁視角則描述了用戶從何種角度看一個網頁。當然，作為一個完整的網頁，最好還是有一些說明信息。那么，本節我們從四個知識點上來深入學習。首先是學習什么是網頁頭部信息，進而學習給網頁添加關鍵字，然后學習一下什么叫網頁視角，最后我們來學習給網頁添加說明信息。
1. 學習“網頁頭部信息”
網頁的頭部信息指的就是 <head> 標簽里的內容。你可以在這里面設置很多網頁的屬性，比如刷新，比如網頁標題，比如網頁的關鍵詞等。<head> 標簽內也可以容納腳本（ script ）標簽，要正確認識 <head> 在網頁結構中的地位。下面讓我來結合 Dreamweaver CC 2018 詳細介紹一下相關知識。
1.1 設置網頁頭部信息
第一步：我們還是選擇創建一個空白的 HTML 文檔。按照前幾節中介紹過的內容，我們依次點擊菜單欄中的文件，新建，新建空白 HTML 文檔。切換到代碼視圖我們可以看到，軟件自動創建了好一個文檔無標題文檔。并且在 <head> 標簽里已經有了默認的內容。它們分別是 meta 標簽， link 標簽，title 標簽。如下圖。我們來一一解釋一下各個標簽的作用。
1.1.1 <meta>標簽
<meta> 標簽是一個位于網頁頭部標簽中的輔助性標簽。它的作用是為頁面提供元信息，比如供搜索引擎使用的關鍵詞等。它有 http-equiv 屬性和 name 屬性。這些屬性帶有自己的參數，通過參數的變化來實現對網頁的控制。比如我們常能看到通過 <meta> 標簽來設置字符集。在這里大家一定要注意 <meta> 標簽一定是位于頭部標簽內部的，不能出現在其他地方，要嚴格執行這一點標準。
1.1.2<link>標簽
<link> 標簽是用來鏈接的標簽。這里大家肯定會問鏈接什么。在一個工程中，我們常常用這個標簽來鏈接樣式文件，如 CSS 文件。腳本文件，如 Javascript 文件。這個標簽在 Android 開發等其他領域的開發中還會有其他的作用，在這里我們不做過多贅述。我們只需要知道并且重點記憶的是：<link> 標簽用來鏈接 CSS 文件和 JS 文件。
1.1.3 <title> 標簽
毋庸置疑，這是個見名知意的標簽，這個標簽的作用是為網頁設置在瀏覽器中顯示的標題。對于今天大多數的選項卡式的瀏覽器來說，這里的標題會展是在選項卡頂部位置。
網頁的標題往往是為了讓用戶能通過網頁標題來獲取他現在所在網頁的功能。同學們有沒有想過，如果一個網頁我們點開之后由于各種原因遲遲看不到網頁標題，用戶有極大概率會以為自己點錯了，或者放棄瀏覽網頁。因此，一個好的提醒意識，也是一個網頁設計者必備的素養之一。
2. 給頁面添加關鍵字
向頁面添加關鍵字，首先新建一個 HTML 文件，此處不在贅述新建文檔的具體過程。然后，我們點擊插入，選擇關鍵字?？梢钥吹綇棾鲆粋€讓我們輸入內容的頁面。
在這個頁面中輸入我們要添加的關鍵字，點擊確定，即可完成關鍵詞的添加。在這個知識點中，必須要掌握的是添加關鍵字的意義并不是給我們網頁設計者和使用網頁的用戶看，而是給搜索引擎等機機器人看。好的程序，要能夠被機器很好的識別，作為一名豐富的前端工程師或者 SEO 優化相關從業人員，他們都具備良好的關鍵字選取技巧。具體技巧，感興趣的同學們可以去互聯網上了解一下，在此處我們無法詳細展開了解。
添加完關鍵字后，我們打開代碼視圖可以看到，代碼中被插入了一個 <meta> 標簽，標簽的 name 屬性為 keywords （關鍵字），標簽的內容 content 為我們剛剛輸入的關鍵字。
不難發現，Dreamweaver CC 2018 其實是以圖形化界面幫我們構建了通往代碼的路徑，讓我們不必掌握代碼就可以實現添加關鍵字這種專業技能。是不是很好用很貼心那？
3. 什么是網頁視角
3.1 網頁視角的概念
網頁視角，英文說法叫 viewport ，這個詞經常在 Unity3D ，VR，WebGL 開發中見到。顧名思義，就是你看網頁的視角，舉個例子：你在看電視的時候可能是坐著看，也可能是躺著看，也可能是側著身子看。來幫你完成看這個動作的表面上是你的眼睛，但實際限制你看到多少內容的是你的眼眶，而看到的東西和具體姿態，則受你的姿勢影響。
比如你在電視的側面看電視，它就是個黑色長方形，而你去電視機背面看它則是密密麻麻纏繞的線更加丑陋。這樣就很好解釋了。網頁也是“橫看成嶺側成峰，遠近高低各不同”。要想看到什么（內容多少，形狀如何）完全取決你站在哪里看，用什么比例看（縮?。糠糯?？），用什么角度看。這里類比的是你的屏幕大小和你設置的網頁觀看角度。
3.2 如何在 Dreamweaver CC 2018 中設置視角？
如果你用的英文原版的 Dreamweaver CC 2018，你看到的視角按鈕寫的就是ViewPort（V）。
但如果你使用的恰好是某些中文漢化版本的 Dreamweaver CC 2018 ，卻怎么找也找達不到 Viewport（V），那也請你不必著急。因為軟件的漢化工作組把這個詞翻譯為了視口（V）。具體操作看下圖：
首先我們點擊插入（I），然后進一步點擊 HTML ，再次彈出的下拉列表中選擇 視口（V）。我們發現并沒有什么變化。然而并不是，這個時候請大家看一下代碼視圖，是不是又多了一條標簽？沒錯，這個就是設置視角的代碼。
3.3 視角屬性解讀
我們在上述代碼中可以看到兩個基本屬性，一個是 width 屬性，代表設置視角的寬度，它的默認值是設備寬度，也就是網頁默認以顯示器大小來適應顯示。另一個叫 initial-scale 這個屬性叫初始縮放，它的默認值為1，代表默認以100%大小展示網頁。
4. 給網頁添加說明信息
在這個知識點中，將為大家著重講解一下如何設置網頁說明信息。
下面來看一下具體操作：
設置說明信息的操作和設置視角完全一樣。如下圖展示的一樣，先在插入中選擇 HTML 然后選擇說明即可發現網頁代碼中多了一條 meta 信息。如圖所示：
5. 小結
總結一下本小結知識點，本小結主要講授了網頁頭部信息的重要性，進一步講，其實是主要圍繞著meta標簽的各種豐富的功能。通過這一節我們不難發現，網頁中 head 部分雖然并不是很多，但卻承擔著很重的功能。 它更像是給整個網頁在指定一種規則，比如縮放比例，觀看視角，刷新時間，搜索關鍵字等。這要引起我們的注意，如果你的網頁遇到了某些怎么調都調不好的 bug ，比如字符編碼亂碼。是不是可以先檢查一些 head 部分的設置。從我以往的授課經驗來看，犯這種問題的同學不盡其數，但歸根到底還是一個練習二字。希望大家可以重視相關知識點。
那么總結一下：
- 本節的重點是： 學會設置網頁的關鍵字，理解并掌握 head 部信息的作用；
- 本節的難點是： 理解視角的含義并設置視角。
2025 imooc.com All Rights Reserved |