前端修煉の道：第一個 HTML 頁面

時間 2019-11-06

標籤前端修煉第一個 html 頁面欄目 HTML 简体版

原文原文鏈接

往期回顧html

在 1.2 節介紹 HTML 語言時講到：
HTML 是一種「超文本標記語言」
它由許多 HTML 標籤組成
注意：HTML 標籤也稱爲元素前端

HTML 頁面瀏覽器

一個頁面的建立離不開 HTML 語言，每一個頁面都是從搭建結構開始的，儘管頁面變得愈來愈複雜，可是其底層結構依然會比較簡單。本節將經過示例 1-1 所示的簡單 HTML 頁面來詳細講解 HTML 頁面的基本結構。less

【示例 1-1】HTML 頁面基本結構編輯器

上述代碼體現了 HTML 頁面的基本結構，每一個頁面都是由示例 1-1 所示的結構開始構建的。學習

根據功能的不一樣，整個 HTML 頁面在結構上能夠分紅兩層：優化

一層是外層，由 <html> 和 </html> 標籤對來標識；
一層是內層，用於實現 HTML 頁面的各項功能；

根據實現功能的不一樣，又能夠將內層細分爲兩個區域：即頭部區域和主體區域網站

頭部區域由 <head> 和 </head> 標籤對標識；
要在瀏覽器窗口顯示的內容須要放在主體區域；
主體區域的標識標籤是 <body> 和 </body>

打開任意一款編輯器，新建一個 HTML 頁面，書寫以上的 HTML 結構代碼以後，之後綴名」.html」保存。而後用 Chorme 瀏覽器打開該頁面，會發現頁面上一片空白，沒有任何內容。這是由於咱們尚未在代碼的<body></body> 標籤中添加內容。ui

在添加內容以前先介紹一下結構中所用到的各個標籤的做用。搜索引擎

基本標記標籤
一<!DOCTYPE > 文檔類型聲明

下面分別講解示例 1-1 中每一行代碼的含義及使用方法。

DOCTYPE 是 Document Type 的簡寫，用來告訴瀏覽器使用什麼樣的 HTML 或 XHTML 規範來解析網

頁。解析規範由 DOCTYPE 定義的 DTD（文檔類型定義）來指定，DTD 規定了使用通用標籤語言的網頁語法。

須要注意的是：在 HTML 文檔中，DOCTYPE 應該位於頁面的第一行。在 HTML5 之前，必須指定 DTD，例以下例代碼是 XTHML 的過渡類型的文檔聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

在 HTML5 中，遵循「存在即合理」的原則，對規則的要求比較寬鬆，沒有指定 HTML 標籤必須遵循的 DTD，於是簡寫成如下形式：

<!DOCTYPE html>

DOCTYPE 是不區分大小寫的，因此也能夠寫成：

<!doctype html>

目前，瀏覽器對頁面的渲染有兩種模式：

怪異模式（瀏覽器使用本身的模式解析渲染頁面）
標準模式（瀏覽器使用 W3C 官方標準解析渲染頁面）

不一樣的渲染模式會影響到瀏覽器對 CSS 代碼甚至 JavaScript 腳本的解析。

若是使用 DOCTYPE，瀏覽器將按標準模式解析渲染頁面，不然將按怪異模式解析渲染頁面。

使用怪異模式對運行在 IE 低版本瀏覽器下的頁面影響很大。可見 DOCTYPE 對一個頁面正確渲染很重要。

二<html></html> 開始文檔實際 HTML 部分

<html> 標籤是 HTML 頁面中全部標籤的頂層標籤，頁面中的全部標籤必須放在 <html></html> 標籤對之間

三<head></head> 設置網頁文檔頭部信息

<head> 一般跟在 <html> 後面。

<head> 和 </head> 標籤對用於標識 HTML 頁面的頭部區域，<head> 和</head> 之間的內容都屬於頭部區域中的內容。

這個區域主要用來設置一些與網頁相關的信息，如網頁標題、字符集、網頁描述的信息等，設置的信息內容通常不會顯示在瀏覽器窗口中。

四<title></title> 網頁文檔的標題

<title> 標籤的做用有兩個：

一是設置網頁的標題，以告訴訪客網頁的主題是什麼，設置的標題將出如今瀏覽器中的標籤欄中，如圖 1-22 所示；
二是用於搜索引擎索引，做爲搜索關鍵字以及搜索結果的標題使用。

須要注意的是：搜索引擎會根據 <title> 標籤設置的內容將網站或文章合理歸類。因此標題對一個網站或文章來講特別重要。

此外，到目前爲止，標題標籤是 SEO 中最爲關鍵的優化項目之一，一個合適的標題可使網站得到更好的排名。

實踐證實，對標題同時設置關鍵字時可使網站得到更靠前的排名。有關 title 標題對搜索影響的示例請參見示例 1-3。

爲了讓訪客更好地瞭解網頁內容以及使網站得到更好的排名，每一個頁面都應該有一個簡短的、描述性的、最好能帶上關鍵字的標題，並且這個標題在每一個頁面應該是惟一的。
標題設置語法以下：

<title> 標題內容 </title>

示例代碼以下：

<title> 妙味課堂 -www.miaov.com</title>

知識點拓展：什麼是搜索引擎？

搜索引擎（Search Engine，SE）

是指根據必定的策略，運用特定的計算機程序從互聯網上搜集信息，在對信息進行組織和處理後，爲用戶提供檢索服務，將用戶檢索相關的信息展現給用戶的系統。

通俗解釋：

經常使用的百度搜索就是一種搜索引擎，它經過一些關鍵字迅速地找到用戶須要的資料。在搜索引擎中，用戶搜索的就是標題，因此一個切合內容的標題是相當重要的。

爲了界面的統一性，全文中的示例運行結果截圖統一套用了妙味官方的網址：

www.miaov.com

各位讀者在各自的電腦中進行這些示例文件時，在 Chrome 瀏覽器的地址欄中看到的 URL 將會是這樣的格式：

file:/// 文件保存路徑 /html 文件名

如將 html 文件 ex1-1.html 保存在 d:Weblesson1 路徑中；則訪問 ex1-1.html 時瀏覽器中顯示的 URL 將是：
file:///D:/Web/lesson1/ex1-1.html

五<meta> 定義文檔元數據

通常使用它來描述當前頁面的特性，好比：文檔字符集、關鍵字、網頁描述信息、做者等內容。

①使用 <meta> 設置頁面字符集

簡體中文操做系統下，IE 瀏覽器的默認字符編碼是 GB2312，Chrome 瀏覽器默認字符編碼是 GBK。因此當頁面字符集設置不正確或沒有設置時，文檔的編碼和頁面內容的編碼有可能不一致，此時將致使頁面內容和標題顯示亂碼。

在 HTML 頁面中，經常使用的字符編碼是「utf-8」「utf-8」又叫「萬國碼」
它涵蓋了地球上幾乎全部地區的文字。咱們也能夠把它當作是一個世界語言的「翻譯官」。有了「utf-8」，你能夠在 HTML
頁面上寫中文、英文、韓文等語言的內容。默認狀況下，HTML
文檔的編碼也是「utf-8」。這就使文檔編碼和頁面內容的編碼保持了一致，這樣的頁面在世界上幾乎全部地區都能正常顯示。

HTML4/XHTML 設置格式：

<meta http-equiv="Content-Type" content="text/html; charset= 字符集 ">

HTML5 對字符集的設置做了簡化，格式以下：

<meta charset=" 字符集 ">

使用 <meta> 設置頁面字符集的示例以下
【示例 1-2】HTML 頁面字符集設置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 網頁字符集設置 </title>
</head>
<body>
      妙味課堂－ www.miaov.com
</html>

上述代碼在 HTML 頁面的頭部區域使用 <meta> 設置頁面的字符編碼爲「utf-8」，在 Chrome 瀏覽器中運行的結果如圖 1-23 所示。

將示例 1-2 中的 <meta> 標籤去掉後，再在 Chrome 瀏覽器中運行，結果如圖 1-24 所示。

對比圖 1-23 和圖 1-24，可見頁面字符集設置的重要性。

②使用 <meta> 設置關鍵字

關鍵字是爲了便於搜索引擎搜索而設置的，用戶在網頁中是看不到關鍵字的。

它的做用主要體如今搜索引擎優化。對於 SEO 優化而言，關鍵字起到畫龍點睛的做用。

爲提升網頁在搜索引擎中被搜索到的機率，能夠設定多個與網頁主題相關的關鍵字。需注意的是，雖然設定多個關鍵字可提升被搜索到的概率，但目前大多數的搜索引擎在檢索時都會限制關鍵字的數量，通常 10 個之內關鍵字比較合理，關鍵字多了會分散關鍵字優化，反倒影響排名。

關鍵字設置語法以下：

<meta name="keywords" content=" 關鍵字 1, 關鍵字 2, 關鍵字 3,…">

語法說明：關鍵字之間可使用逗號，也可使用空格等符號。示例代碼以下：

<meta name="keywords" content=" JavaScript 教程 ,HTML5 培訓 ,CSS3 培訓 , 移動端培訓 ">

③使用 <meta> 設置網頁描述信息

網頁的描述信息主要用於概述性地描述頁面的主要內容，是對關鍵詞的補充性描述，當描述信息包含部分關鍵字時，會做爲搜索結果返回給用戶。

像關鍵字同樣，搜索引擎對描述信息的字數也有限制，通常容許 70~100 字，因此描述信息的內容應儘可能簡明扼要。

描述信息設置語法以下：

<meta name="discription" content=" 網頁描述信息 ">

示例代碼以下：

<meta name="discription" content=" 妙味課堂是北京最資深的前端開發培訓機構，妙味課堂擁有系統的 JavaScript、HTML五、CSS三、移動開發、遠程培訓等課程，並錄製成最系統的前端開發視頻教程，妙味課堂推出的 VIP 前端學習平臺已經成爲學習氛圍最濃郁的前端學習圈。">

從 <title> 和 <meta> 兩個標籤的介紹中，能夠看到，標題、網頁描述信息以及關鍵詞對 SEO 有着很大的做用，搜索引擎之因此能搜到網站，全都是標題、網頁描述信息和關鍵詞的功勞，因此咱們必須作好標題、描述標籤、關鍵詞的設置與優化。下面的示例演示瞭如何使用標題、網頁描述信息和關鍵詞進行網頁搜索。

【示例 1-3】使用標題和網頁描述信息實現網頁的搜索。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content=" 妙味課堂是北京最資深的前端開發培訓機構，妙味課堂擁有系統的 JavaScript、HTML五、CSS三、移動開發、遠程培訓等課程，並錄製成最系統的前端開發視頻教程，妙味課堂推出的 VIP 前端學習平臺已經成爲學習氛圍最濃郁的前端學習圈 ">
<meta name="keywords" content="JavaScript 遠程培訓 ,JS 遠程培訓 ,JavaScript 培訓 ,JS 培訓 ,JavaScript
教程 ,HTML5 培訓 ,CSS3 培訓 , 北京前端培訓 , 移動端培訓 , 北京移動端培訓 , 北京 JS 培訓 , 北京 JavaScript 培訓 ,北京 HTML5 培訓 ">
<title> 首頁－妙味課堂 www.miaov.com</title>
</head>
<body>
……
</body>
</html>

上述代碼中的標題中帶有了關鍵字「妙味課堂」，因此當用戶在百度搜索框中輸入「妙味課堂」時會搜索到妙味課堂頁面，同時在返回的搜索結果中，會以「首頁－妙味課堂 www.miaov.com」做爲搜索結果的標題，而返回的搜索結果描述信息則是上述代碼中設置的網頁描述信息，如圖 1-25 所示。

圖 1-25 是使用關鍵詞搜索信息，一樣能夠搜索到圖 1-26 的結果，但排名沒有使用標題中的關鍵字進行搜索時靠前。

六<body></body> 頁面主體內容

body（身體，主體）表明了頁面的主體部分，它是放置頁面內容的地方，全部須要在瀏覽器窗口中顯示的內容都須要放置在 <body></body> 標籤對之間。用戶能夠經過瀏覽器看到寫在 <body></body> 標籤中的內容。

【示例 1-4】<body> 標籤的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 主體標籤的使用示例 </title>
</head>
<body>
     吼吼，好厲害，這是咱們第一個 HTML 頁面
</body>
</html>

當打開瀏覽器運行上述代碼時就會發現，瀏覽器上會顯示書寫的文本，如圖 1-27 所示。

以上就是 HTML 基本結構中標籤的含義及使用介紹，經過觀察這些基本的標籤，能夠總結出標籤的一些特色，以下所述。

① 標籤是由尖括號包圍的關鍵詞，好比 <html>。
② 標籤一般是成對出現的（稱爲雙標籤），有開始標籤和結束標籤。開始標籤使用 < 標籤名 > 表示，結束標籤使用 </ 標籤名 > 表示，好比 <html></html>。
③ 也有單獨呈現的標籤（稱爲單標籤），好比 <meta charset="utf-8"/>。
④ 在開始標籤中能夠包含若干個屬性。每一個屬性使用：屬性名 =「屬性值」的格式進行設置，結束標籤不包含任何屬性。HTML 屬性表示標籤所具備的一些特性。好比標籤的形狀、顏色、用途等特性。好比<meta> 標籤中的 charset="utf-8" 「charset」就是標籤的一個屬性，而「utf-8 」則是它的值。
⑤ 若是是雙標籤的話，內容出如今兩個標籤之間，好比 <body> 內容 </body>。
⑥ 若是是單標籤的話，內容在標籤屬性中賦值，好比後面將學到的 img 圖片標籤，圖片地址就出如今 src 屬性中：<img src="tupian.png"/>。
⑦ 標籤不區分大小寫，可是爲了創建一個良好的編碼習慣，標籤請使用小寫。

根據上面總結的標籤特色，可獲得以下所示的標籤設置格式：

雙標籤：< 標籤名稱屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …> …</ 標籤名稱 >
單標籤：< 標籤名稱屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …/>

標籤嵌套關係

在 HTML 結構中，標籤與標籤之間只存在兩種關係：嵌套關係和並列關係。

01嵌套關係

嵌套關係又稱爲包含關係，能夠通俗記憶爲「父子級關係」。

在 1.4.1 小節中，咱們發現 <meta> 標籤和 <title> 標籤都存在 <head> 標籤中，此時 <head> 標籤與 <meta>
標籤的關係以及 <head> 標籤和 <title> 標籤的關係，體現的就是嵌套關係也是父子級關係，如圖 1-28 所示。

02並列關係

並列關係也就是常說的同級關係，也能夠通俗記憶爲「兄弟關係」。

這兩種關係在之後的示例中會常常用到，你們必定要對這兩種關係有所瞭解。

思考：

在 HTML 基本結構中還有哪些父子級關係和兄弟關係？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。