03-初識HTML

#本文主要內容

頭標籤
排版標籤：<p>、<div>、<span>、<br>、<hr>、<center>、<pre>
字型標記：<h1>、<font>、<b>、<u>、<sup>、<sub>
超連結<a>
圖片標籤<img>

#編輯器相關

前端開發的編輯器軟體，我首先推薦 VS Code，其次推薦Sublime Text。

有人說 WebStorm 也不錯？但真實情況是，自從VS Code 問世之後，用 WebStorm 的人越來越少了。

#VS Code 的使用

詳情請移步至：第一次使用VS Code時你應該知道的一切配置

#Sublime Text 的使用

詳情請移步至：Sublime Text使用技巧

#HTML的概述

#HTML的概念

HTML全稱為 HyperText Markup Language，譯為超文字標記語言。

HTML 不是一種程式語言，是一種描述性的標記語言。

作用：HTML是負責描述文件語義的語言。

#概念：超文字

所謂的超文字，有兩層含義：

（1）圖片、音訊、視訊、動畫、多媒體等內容，成為超文字，因為它們超出了文字的限制。

（2）不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案進行連線。即：超級連結文字。

#概念：標記語言

HTML 不是一種程式語言，是一種描述性的標記語言。這主要有兩層含義：

（1）標記語言是一套標記標籤。比如：超連結標籤<a>、圖片標籤<img>、一級標題標籤<h1>等等，它們都是屬於 HTML 標籤。

說的通俗一點就是：網頁是由網頁元素組成的，這些元素是由 HTML 標籤描述出來，然後通過瀏覽器解析，就可以顯示給使用者看了。

（2）程式語言是有編譯過程的，而標記語言沒有編譯過程，HTML標籤是直接由瀏覽器解析執行。

#HTML是負責描述文件語義的語言

HTML 中，除了語義，其他什麼都沒有。

HTML 是一個純本文檔案（就是用txt檔案改名而成），用一些標籤來描述語義，這些標籤在瀏覽器頁面上是無法直觀看到的，所以稱之為“超文字標記語言”。

所以，接下來，我們需要要學習一堆 HTML 中的標籤對，這些標籤對能夠給文字不同的語義。

比如，面試的時候問你，<h1>標籤有什麼作用？

正確答案：給文字增加主標題的語義。
錯誤答案：給文字加粗、加黑、變大。

關乎“語義”的更深刻的理解，等接下來我們學習了各種標籤，就明白了。

#HTML的歷史

我們專門來對XHTML做一個介紹。

XHTML介紹：XHTML：Extensible Hypertext Markup Language，可擴充套件超文字標註語言。 XHTML的主要目的是為了取代HTML，也可以理解為HTML的升級版。 HTML的標記書寫很不規範，會造成其它的裝置(ipad、手機、電視等)無法正常顯示。 XHTML與HTML4.0的標記基本上一樣。 XHTML是嚴格的、純淨的HTML。

我們稍後將對XHTML的編寫規範進行介紹。

#HTML的專有名詞

網頁：由各種標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記：<p>稱為開始標記，</p>稱為結束標記，也叫標籤。每個標籤都規定好了特殊的含義。
元素：<p>內容</p>稱為元素.
屬性：給每一個標籤所做的輔助資訊。
xhtml：符合XML語法標準的HTML。
dhtml：dynamic，動態的。javascript + css + html合起來的頁面就是一個dhtml。
http：超文字傳輸協議。用來規定客戶端瀏覽器和服務端互動時資料的一個格式。SMTP：郵件傳輸協議，ftp：檔案傳輸協議。

#HTML的編輯工具

用的最多的編輯器是： VS Code 和 Sublime Text。

VS Code：最火的前端程式碼編輯器。
Sublime Text：很輕量的程式碼編輯器。
NotePad：記事本。
EditPlus：語法高亮顯示。技巧：根據顏色判斷單詞是否出錯（不是100%）。不好的地方：沒有程式碼提示。
UltraEdit：根據顏色判斷單詞是否出錯，可以顯示2進位制資料。
dw(dreamweaver，專業工具) ：建立WEB站點和應用程式的專業工具。它將佈局功能、開發工具、程式碼編輯組合在一起。有程式碼提示。

PS：字尾名不能決定檔案格式，只能決定開啟檔案開啟的方式。

#計算機編碼介紹

計算機，不能直接儲存文字，儲存的是編碼。

計算機只能處理二進位制的資料，其它資料，比如：0-9、a-z、A-Z，這些字元，我們定義一套規則來表示。假如：A用110表示，B用111表示等。

ASCII碼：美國發布的，用1個位元組(8位二進位制)來表示一個字元，共可以表示2^8=256個字元。美國的國家語言是英語，只要能表示0-9、a-z、A-Z、特殊符號。

ANSI編碼：每個國家為了顯示本國的語言，都對ASCII碼進行了擴充套件。用2個位元組(16位二進位制)來表示一個漢字，共可以表示2^16＝65536個漢字。例如：中國的ANSI編碼是GB2312編碼(簡體)，對6763漢字進行編碼，含600多特殊字元。另外還有GBK(簡體)。日本的ANSI編碼是JIS編碼。臺灣的ANSI編碼是BIG5編碼（繁體）。

GBK：對GB2312進行了擴充套件，用來顯示罕見的、古漢語的漢字。現在已經收錄了2.1萬左右。並提供了1890個漢字碼位。K的含義就是“擴充套件”。

Unicode編碼(統一編碼)：用4個位元組(32位二進位制)來表示一個字元，想法不錯，但效率太低。例如，字母A用ASCII表示的話一個位元組就夠，可用Unicode編碼的話，得用4個位元組表示，造成了空間的極大浪費。A的Unicode編碼是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)編碼：根據字元的不同，選擇其編碼的長度。比如：一個字元A用1個位元組表示，一個漢字用2個位元組表示。

毫無疑問，開發中，都用UTF-8編碼吧，準沒錯。

中文能夠使用的字符集兩種：

第一種：UTF-8。UTF-8是國際通用字型檔，裡面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……
第二種：GBK（對GB2312進行了擴充套件）。gb2312 是國標，是中國的字型檔，裡面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號。

字型檔規模： UTF-8（字全） > gb2312（只有漢字）

重點1：避免亂碼

我們用meta標籤宣告的當前這個html文件的字型檔，一定要和儲存的檔案編碼型別一樣，否則亂碼！（重點）。

當我們不設定的時候，sublime預設型別就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設定一下sublime的儲存型別：檔案→ set File Encoding to → Chinese Simplified(GBK)。

重點2：UTF-8和gb2312的比較

儲存大小：UTF-8（更臃腫、載入更慢） > gb2312 （更小巧，載入更快）

總結：

UTF-8：字多，有各種國家的語言，但是儲存尺寸大，檔案臃腫；
gb2312：字少，只用中文和少數外語和符號，但是尺寸小，檔案小巧。

列出2個使用情形：

1）你們公司是做日本動漫的，經常出現一些日語動漫的名字，網頁要使用UTF-8。如果用gb2312將無法顯示日語。 2）你們公司就是中文網頁，極度的追求網頁的顯示速度，要使用gb2312。如果使用UTF-8將每個漢字多一個byte，所以5000個漢字，多5kb。

我們親測：

qq網、網易、搜狐都是使用gb2312。這些公司，都追求顯示速度。
新華網藏語頻道，使用的是UTF-8，保證字符集的數量。

我們是怎麼檢視網頁的編碼方式的呢？在瀏覽器中開啟網頁，右鍵，選擇“檢視網頁原始碼”，找到meta標籤中的charset屬性即可。

那麼，我們為什麼可以檢視網頁的原始碼呢？因為這個開啟的網頁已經存到我的臨時資料夾裡了，臨時資料夾裡的html是純文字檔案，純文字檔案自然可以檢視網頁的原始碼了。

#HTML顏色介紹

顏色表示：

純單詞表示：red、green、blue、orange、gray等
10進製表示：rgb(255,0,0)
16進製表示：#FF0000、#0000FF、#00FF00等

RGB色彩模式：

自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理。
RGB三原色也叫加色模式，這是因為當我們把不同光的波長加到一起的時候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
在數字視訊中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示裝置都採用的是RGB色彩模式。
RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

#HTML的規範

HTML是一個弱勢語言
HTML不區分大小寫
HTML頁面的字尾名是html或者htm(有一些系統不支援字尾名長度超過3個字元，比如dos系統)
HTML的結構：
- 宣告部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。<!doctype html>是HTML5標準。
- head部分：將頁面的一些額外資訊告訴伺服器。不會顯示在頁面上。
- body部分：我們所寫的程式碼必須放在此標籤內。

目前，IE瀏覽器是完全不支援H5的，支援最好的是Opera瀏覽器，可以支援95%以上；其次是google，可以支援一部分H5。

#1、編寫XHTML的規範：

（1）所有標記元素都要正確的巢狀，不能交叉巢狀。正確寫法舉例：<h1><font></font></h1>

（2）所有的標記都必須小寫。

（3）所有的標記都必須關閉。

雙邊標記：<span></span>
單邊標記：<br>轉成<br /><hr>轉成<hr />，還有<img src=“URL” />

（4）所有的屬性值必須加引號。<font color="red"></font>

（5）所有的屬性必須有值。<hr noshade="noshade">、<input type="radio" checked="checked" />

（6）XHTML文件開頭必須要有DTD文件型別定義

#2、HTML的基本語法特性

#（1）HTML對換行不敏感，對tab不敏感

HTML只在乎標籤的巢狀結構，巢狀的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮排來表示巢狀的，就是看標籤的包裹關係。但是，我們發現有良好的縮排，程式碼更易讀。要求大家都正確縮排標籤。

百度為了追求極致的顯示速度，所以HTML標籤都沒有換行、都沒有縮排（tab），HTML和換不換行無關，標籤的層次依然清晰，只不過程式設計師不可讀了。如下圖所示：

#（2）空白摺疊現象

HTML中所有的文字之間，如果有空格、換行、tab都將被摺疊為一個空格顯示。

舉例如下：

#（3）標籤要嚴格封閉

標籤不封閉是災難性的。

標籤不封閉的舉例如下：

#三、HTML結構詳解

備註：

所有的瀏覽器預設情況下都會忽略空格和空行

每個標籤都有私有屬性。也都有公有屬性。

html中表示長度的單位都是畫素。HTML只有一種單位就是畫素。

HTML標籤通常是成對出現的（雙邊標記），比如<div>和</div>，也有單獨呈現的標籤（單邊標記），如：<br />、<hr />和<img src="images/1.jpg" />等。

屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。

#快速生成 html 的骨架

方式1：在 VS Code 中新建 html 檔案，輸入html:5，按Tab鍵後，自動生成的程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

方式2：在Sublime Text中安裝Emmet外掛。新建html檔案，輸入html:5，按Tab鍵後，自動生成的程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

方式3：在Sublime Text中安裝Emmet外掛。新建html檔案，輸入html:xt，按Tab鍵後（或者按Ctrl+E），自動生成的程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

上面的方式2和方式3中，我們會發現，第一行的內容有些不太一樣，這就是我們接下來要講的文件宣告頭。

#1、文件宣告頭

任何一個標準的HTML頁面，第一行一定是一個以<!DOCTYPE ……>開頭的語句。

這一行，就是文件宣告頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。

#HTML4.01有哪些規範呢？

HTML4.01這個版本是IE6開始相容的。HTML5是IE9開開始相容的。如今，手機、移動端的網頁，就可以使用HTML5了，因為其相容性更高。

說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，並未對外公開。

HTML4.01裡面有兩大種規範，每大種規範裡面又各有3種小規範。所以一共6種規範（見下圖）。

HTML4.01裡面規定了普通和XHTML兩大種規範。HTML覺得自己有一些規定不嚴謹，比如，標籤是否可以用大寫字母呢？<H1></H1>所以，HTML就覺得，把一些規範嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示“嚴格的”。

總結一下，HTML4.01一共有6種DTD。說白了，HTML的第一行語句一共有6種情況：

下面對上圖中的三種小規範進行解釋：

strict：表示“嚴格的”，這種模式裡面的要求更為嚴格。這種嚴格體現在哪裡？有一些標籤不能使用。比如，u標籤，就是給一個本文加下劃線，但是這和HTML的本質有衝突，因為HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。所以，在strict中是不能使用u標籤的。那怎麼給文字增加下劃線呢？今後的css將使用css屬性來解決。那麼，XHTML1.0更為嚴格，因為這個體系本身規定比如標籤必須是小寫字母、必須嚴格閉合標籤、必須使用引號引起屬性等等。
Transitional：表示“普通的”，這種模式就是沒有一些別的規範。
Frameset：表示“框架”，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。

在HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C自己打臉了）：

<!DOCTYPE html>

#2、頭標籤

#html5 的比較完整的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="Author" content="">
    <meta name="Keywords" content="牛逼，很牛逼，特別牛逼" />
    <meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、搜尋引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及部落格、視訊、論壇等互動交流，網聚人的力量。" />
    <title>Document</title>
</head>
<body>

</body>
</html>

面試題：

問：網頁的head標籤裡面，表示的是頁面的配置，有什麼配置？
答：字符集、關鍵詞、頁面描述、頁面標題、IE適配、視口、iPhone小圖示等等。

頭標籤都放在

頭部分之間。包括：<title>、<base>、<meta>、<link>

<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<base>：為頁面上的所有連結規定預設地址或預設目標。
<meta>：提供有關頁面的基本資訊
<body>：用於定義HTML文件所要顯示的內容，也稱為主體標籤。我們所寫的程式碼必須放在此標籤內。
<link>：定義文件與外部資源的關係。

meta 標籤：

上面的<meta>標籤都不用記，但是另外還有一個<meta>標籤是需要記住的：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

上面這個標籤的意思是說，3秒之後，自動跳轉到百度頁面。

常見的幾種 meta 標籤如下：

（1）字符集 charset：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta標籤中的charset定義，meta表示“元”。“元”配置，就是表示基本的配置專案。

charset就是charactor set（即“字符集”）。

瀏覽器就是通過meta來看網頁是什麼字符集的。比如你儲存的時候，meta寫的和宣告的不匹配，那麼瀏覽器就是亂碼。

（2）視口 viewport：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：表示視口寬度等於螢幕寬度。

viewport 這個知識點，初學者還比較難理解，以後學 Web 移動端的時候會用到。

（2）定義“關鍵詞”：

舉例如下：

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,簡訊" />

這些關鍵詞，就是告訴搜尋引擎，這個網頁是幹嘛的，能夠提高搜尋命中率。讓別人能夠找到你，搜尋到你。

（3）定義“頁面描述”：

meta除了可以設定字符集，還可以設定關鍵字和頁面描述。

只要設定Description頁面描述，那麼百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜尋引擎優化）。

設定頁面描述的舉例：

<meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、搜尋引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及部落格、視訊、論壇等互動交流，網聚人的力量。" />

效果如下：

title 標籤:

用於設定網頁標題：

	<title>網頁的標題</title>

title也是有助於SEO搜尋引擎優化的。

base標籤：

<base href="/">

base 標籤用於指定基礎的路徑。指定之後，所有的 a 連結都是以這個路徑為基準。

#3、`<body>`標籤的屬性

其屬性有：

bgcolor：設定整個網頁的背景顏色。
background：設定整個網頁的背景圖片。
text：設定網頁中的文字顏色。
leftmargin：網頁的左邊距。IE瀏覽器預設是8個畫素。
topmargin：網頁的上邊距。
rightmargin：網頁的右邊距。
bottommargin：網頁的下邊距。

<body>標籤另外還有一些屬性，這裡用個例子來解釋：

上方程式碼中，當我們對點我點我這幾個字使用超鏈時，link屬性表示預設顯示的顏色、alink屬性表示滑鼠點選但是還沒有鬆開時的顏色、vlink屬性表示點選完成之後顯示的顏色。效果如下：

接下來，我們講一下<body>裡的各種標籤的屬性。

html 03-初識HTML