目錄
2. HTML
從本章開始，我們正式進入網頁製作的教學環節。本章的主要內容是HTML，簡單地說，HTML是一個網頁的核心部分，同時它也指定了網頁上的內容和排布的模式。
HTML是HyperText Markup Language超文本標記語言的簡稱，所謂超文本，就是指用純文本的方式去表達超越文字的內容。
接下來我們就要學習如何使用純文本來描述一個網頁的內容。
標籤和元素
顧名思義，標記語言的本質就是標籤。也就是，在英文半角模式下輸入的左右尖號<>，他們以特定的組合方式形成HTML元素。
通常來說，一個元素有以下格式：
<元素名稱> 元素的內部內容 </元素名稱>
其中<元素名稱>被稱爲開始標籤，</元素名稱>被稱爲結束標籤，他們之間的內容就是這個元素的內部內容，內部內容可以爲空，也可以是另一些元素。通常情況下結束標籤需要和開始標籤配套出現。
HTML中的換行和空格都會被忽略，也就是說，上述代碼完全等效於：
<元素名稱> 元素的內部內容 </元素名稱>請注意，元素內部需要有兩個空格的縮進（html元素不需要），特別是在元素嵌套的情況下會幫助我們瞭解元素之間的層級關係。
在sublime中，如果在html文件中書寫
<，會彈出自動補全輔助，按下回車即可自動補全元素的結束標籤。當然還有更多好用的插件，可以自行百度。
同時，也有一些標籤是不需要標籤結束符號的，例如<br>，它們不具有元素的內部內容。
元素除了名稱和內部內容以外，還可以具有一些屬性。它們用key="value"的形式，並被包含在元素開始標籤內部。例如：
<a href="#">內部內容</a>
在這裏，元素名稱爲a，元素內容爲內部內容，元素的屬性有href="#"。
懂了嗎？
開始！
讓我們打開sublime！一章不見如隔三秋啊
在0. 準備章節中我們新建了index.html文件，現在把它打開，並輸入以下內容：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<!-- 這是一行註釋 -->
然後用瀏覽器打開這個index.html文件（如果雙擊打開不行的話，就右擊打開方式，實在不行就把這個文件拖進瀏覽器），是不是很神奇呢？
下面的很多例子代碼，也鼓勵大家多多嘗試！
接下來我們細細地解釋一下這一段代碼：
<!DOCTYPE HTML>文檔類型說明標籤。告訴瀏覽器，這是一段符合HTML5標準的代碼。<html>html元素開始標籤。一段HTML代碼都應該包含在一個名爲html的元素當中。<head>head元素開始標籤。head元素用於指定一些不直接顯示的信息。<title>第一個網頁</title>title元素，用於定義文檔的標題，設置瀏覽器標題欄的內容是“第一個網頁”。</head>head元素結束標籤。<body>body元素開始標籤。body元素標記了網頁的顯示內容。<h1>Hello, World!</h1>h1元素標籤。是一個一級標題，標題的內容是“Hello, World!”</body>body元素結束標籤。</html>html元素結束標籤。<!-- 這是一行註釋 -->被<!--和-->標籤包裹的內容會被瀏覽器忽略，可以用於開發時的一些標記等。
我們可以看到，在這一段最基礎的代碼中，真正起到顯示作用的是title和h1元素，它們分別指定了瀏覽器標籤上的網頁標題和實際顯示的一行標題。其餘的內容都是一個HTML文件的基本框架：
- 第一行是文件類型說明
- 剩餘部分都被包含在
html元素當中 html元素包含兩個子元素，是head和body
那麼，除了這些最基礎的元素以外，還有哪些標籤呢？
資源：W3School上有完整的默認標籤列表：https://www.w3school.com.cn/tags/index.asp
需要的時候可以自行查詢。本篇教程不會涵蓋所有的HTML標籤。
head
html元素中的一個子元素，用於指定網頁的一些不直接顯示的信息，也經常用於引入網頁需要使用的其他內容（例如CSS文件和JS文件）。
在head中經常使用的元素有如下幾個：
| 元素名稱 | 用途 | 例子 |
|---|---|---|
| title | 定義文檔的標題 | <title>這是標題</title> |
| link | 引入網頁所需的文件 | （在3. CSS章節中演示） |
| script | 引入網頁所需要的腳本 | （在4. JS章節中演示） |
*base、meta、style等元素如果下文有所使用會特殊說明。
body
body是HTML中最重要的元素，它的元素內容就是網頁顯示的內容。在body中，有很多很多元素可以使用，詳細可以參考W3School上的html教程，上面很全面。這裏重點介紹幾個非常常用的元素，其餘元素可以有空自行學習，或者使用到的時候再進行查找。
div 塊元素
最最最最強大而常用的元素，沒有什麼特殊之處，具有極少的默認樣式，但也因此非常靈活。
塊元素經常用於將很多元素包裹在其內部，以方便形成特殊的佈局，或者設置它們的樣式。有時塊元素內部只包含文字，可以方便地設置文字的格式。
<div>
<h1>這是一個一級標題</h1>
<p>這是一個段落。</p>
</div>
如果塊元素內部不包含任何內容，塊元素會坍縮。因此，如果想在網頁上實現空白的塊，需要在塊元素中包含佔位空格
<div> </div>
在HTML中，有許多特殊字符不能直接輸入，可以使用對應的字符實體編碼（形如
©這樣的，在網頁上會顯示爲©）。這些字符實體編碼可以在這裏查到：https://www.w3school.com.cn/html/html_entities.asp
h1-h6 標題元素
一共有六種不同級別的標題元素，它們自帶有一定的樣式，會獨佔一行。同時，使用不同級別的標題元素可以讓搜索引擎等自動化網頁處理程序瞭解你的網頁結構。
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
p 段落元素
用於顯示一段文字，也有一定的默認樣式。使用段落元素也可以讓你的網頁結構更容易被搜索引擎處理。
<p>這裏是一個段落。</p>
<p>這裏是另一段。</p>
br 轉行元素
轉行元素不需要結束標籤，用於在一段文字內轉行。注意，在HTML文件中直接轉行是沒有用的哦！
<p>給你講個故事：<br>從前有座山，
山裏有個廟，
廟裏有個小和尚......</p>
a 鏈接元素
通過設置鏈接元素的href屬性來實現超鏈接，鏈接元素的內部內容則是顯示的部分（可以是文字，也可以是其他元素）。（別傻乎乎地在代碼上點哦，要複製進body元素並用瀏覽器打開！）
<a href="https://www.baidu.com/">點擊我可以去百度！</a>
img 圖片元素
不需要結束標籤，通過設置src屬性來打開指定圖片。
<img src="https://www.baidu.com/img/bd_logo1.png">
span 行內元素
行內元素可以單獨選中一段文字中的某些文字，而不會引起段落被分割爲幾塊。
“萬物皆框”的文檔流
當我們稍稍瞭解了一部分HTML的元素以後，我們就可以通過簡單的拼拼湊湊的方法將我們需要的內容拼起來形成網頁了。然而，爲了我們下一步的樣式設置，我們還需要理解HTML的幾個重要概念。
什麼叫“萬物皆框”呢？在瀏覽器渲染網頁的時候，每一個HTML元素都會被渲染爲一個框(box)，框的形態大小和位置等等屬性由下一章的樣式指定，框內的內容則是該元素的內部內容。如果我們把整個網頁（也就是body元素）理解爲最大的一個框，那麼各種標題啊、段落啊、圖片啊，都是大框中的小框。即使是我們的文字，也是在一個宛如文本框的box當中。所以，整個網頁本質上就是無數的框按照HTML元素之間的關係，嵌套和排列在整個網頁上。
嵌套關係還好理解，就是大框裏面套小框。但是如果若干個元素並列，它們是怎麼排列的呢？這就是我們所說的文檔流了。
在文檔流中，所有的元素（框）被分成兩類：
- 內聯元素：比如
a（鏈接元素）、br（轉行元素）、span（行內元素）以及img（圖片元素，屬於不完全的內聯元素），它們之間的默認排列方式是從左到右按順序排列。 - 塊級元素：例如
h1（標題元素）、p（段落元素）、div（塊元素），它們會從上到下排列。
也就是說，即使並列寫兩個img元素引入兩張圖片，它們會默認從左到右排列。
但是如果並列用p元素寫兩個段落，即使它們沒有佔滿一行，它們也會從上到下排列。
文檔流是瀏覽器渲染HTML的固有屬性，真正的問題是，如何改變默認的文檔流，按照自己的想法去排列元素。如果我偏要讓段落元素從左到右排列怎麼辦呢？此外，有的時候還需要脫離文檔流，例如：我想讓一行字和一張背景圖片重疊起來，怎麼辦呢？
事實上，我們可以通過設置特殊的樣式來解決這些問題，這些都是下一章的內容啦！
思考題：如果不設置樣式，但是我偏要讓幾張圖片從上到下排列，可以怎麼做呢？（提示：不要忘了元素嵌套，不要忘了最好用
div哦）
DOM以及網頁調試
DOM是Document Object Model文檔對象模型的簡稱，這是一個很複雜的概念，是瀏覽器用來管理和跟蹤網頁上的每個元素所用的技術。我們只需要瞭解到，它是按照元素嵌套層級來組織結構的。因此，合理安排元素的嵌套至關重要。
在開發網頁和調試的時候，我們往往需要查看網頁的DOM狀態和各個元素的狀態，這個時候我們可以在瀏覽器中使用F12或者右擊 - 檢查來打開瀏覽器的調試控制檯，其中元素控制檯中顯示的內容就是瀏覽器的DOM結構，也就是各個元素的嵌套結構。
將鼠標懸浮在你想要關注的元素上，該元素就會在網頁上被高亮標註出來。同時你可以關注它的各項屬性和CSS樣式，也可以展開查看它所有的子元素。
如果你覺得從body元素一層一層展開過於麻煩，可以右擊頁面上你想要關注的元素，並點擊檢查。元素控制檯會自動展開到你關注的元素上。
HTML5和其他
HTML5是HTML的最新規範，從2008年提出。其中包含了很多新的元素和屬性，例如video元素，可能會在網頁中使用到。你可以通過查看W3School上的教程來學習HTML5標準下新增的內容。
HTML還有很多很多可以學習的知識和本篇教程沒有提到的元素，例如可以用它實現上標下標，以及列表和表格等排版，這些內容都可以在互聯網上找到，並且自己學習。
HTML作爲一個劃時代的Web核心語言，它真正的意義在於：在開發的各個環節中，多如繁星的程序員只要能夠認定同一套標準，那麼它就是這個時代的珍寶。網頁的開發者，到瀏覽器的開發者，正是因爲同一套標準的確立和認同，纔有浩如煙海的網頁應用推動我們的文明。
而你，也可以是其中的一環。