這是全棧資料工程師養成攻略系列教程的第十九期：19 Web基礎 網頁的骨骼HTML。
寫Web網頁的基礎三件套是HTML、CSS和JavaScript，這一節讓我們先來了解下HTML。
什麼是HTML
HTML全拼是Hyper Text Markup Language，即超文字標記語言。之所以將HTML比喻成網頁的骨骼，是因為它是Web網頁的基本組成部分，而且HTML中所定義的元素，決定了網頁的內容和結構。
Python是一門程式語言，可以用來處理資料、編寫程式、完成任務，重在做什麼和怎麼做。而HTML是一門標記語言，如同畫畫一樣，HTML告訴瀏覽器，應該在網頁上畫出哪些內容，重點在是什麼和有什麼。
基本結構
使用HTML所寫的程式碼儲存時字尾名可以取成.html，一般來說會包含以下基本結構。Web網頁都是由一些HTML標籤（或者稱作HTML元素）組成的，即用尖括號擴起來的內容，並且呈現出層級巢狀結構。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>複製程式碼第一行程式碼宣告瞭以下使用HTML5語法，HTML5是HTML的最新版本，在原本HTML的基礎上增加了一些新的擴充套件和功能。接下來是一個html標籤，包括開始標籤<html>和結束標籤</html>，兩者之間中便是網頁的全部內容。html中包括head標籤和body標籤，分別代表網頁的頭部和主體，並且head、body都有各自對應的開始標籤和結束標籤。head中會記錄網頁的基本資訊和引用的資源連結等，而body中則存放著網頁詳細的主體結構。可以向head和body中新增更多HTML標籤，從而進一步豐富對應網頁的內容。
可以發現，因為head和body包裹在html中，所以相對於html標籤存在一級縮排。這正是HTML的層級巢狀結構，內層標籤相對於直接外層標籤都會保持一級縮排，因此在編寫HTML程式碼時需要注意標籤的縮排和對齊。
常用標籤
HTML標籤主要分為單標籤和雙標籤兩類。單標籤只有開始標籤，所以需要在開始的同時關閉，例如meta標籤，用於定義Web網頁的基本資訊。以下meta標籤指定了網頁使用UTF-8字符集，通過標籤的屬性值進行設定，即將屬性名和屬性值都寫在標籤內部。
<meta charset="UTF-8"/>複製程式碼而雙標籤既有開始標籤又有結束標籤，所以可以在其中包裹一些標籤的內容，例如title標籤，用於定義Web網頁的標題。因此，雙標籤包含標籤內容並且一般會直接顯示在Web網頁上，而單標籤則主要是為了完成某些功能。
<title>我愛HTML</title>複製程式碼meta和title標籤需要放入head之中。可以將以上例子新增到之前提供的基本結構裡，然後雙擊.html執行，在瀏覽器中觀察網頁中出現了什麼變化。
再來介紹一些常用的內容標籤，這些標籤都需要放入body之中，可以嘗試新增並重新整理瀏覽器，觀察標籤對應的效果。
首先是h1至h6，分別表示一級標題至六級標題，標題文字會依次減小。
<h1>這裡是一級標題</h1>
<h2>這裡是二級標題</h2>
<h3>這裡是三級標題</h3>
<h4>這裡是四級標題</h4>
<h5>這裡是五級標題</h5>
<h6>這裡是六級標題</h6>複製程式碼p表示正文中的段落。
<p>這裡是段落內容</p>複製程式碼a表示超連結，提供Web網頁之間的跳轉，或者從網頁的一部分跳轉到另一部分。在a標籤中需要指定href屬性，即跳轉的目標連結，target="_blank"表示連結點選後在新標籤頁中開啟目標連結，以下程式碼即生成一個跳轉到我的個人部落格的超連結。
<a href="http://zhanghonglun.cn" target="_blank">一個乾貨滿滿的地方</a>複製程式碼img用於生成圖片，src屬性指定圖片原始檔的地址，可以使用相對路徑呼叫本地圖片，或者使用網際網路上能訪問到的圖片連結。width和height屬性分別指定圖片的寬度和高度，單位是畫素，如果僅提供其中一個的值，則保持圖片原始比例並計算另一個的值。
<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>複製程式碼需要注意的是，Web網頁中使用的圖片資源應當在滿足清晰度條件下儘可能地使用小檔案。平面設計和網頁設計不同，前者會盡量使用高清圖片，便於後期修改細節、列印海報等；而後者只需滿足在瀏覽器上的顯示清晰度即可，檔案越小則載入越快，過大的高清圖片只會導致長時間的載入等待和完全可以避免的流量浪費。
再介紹兩個新的概念：塊級標籤和內聯標籤。塊級標籤單獨佔據一行，其後面的標籤會在下一行出現，而多個內聯標籤則會顯示在同一行中，直到總寬度超過了瀏覽器寬度才換行。之前介紹的h1至h6、p都是塊級標籤，而a、img則是內聯標籤。瀏覽器在渲染HTML頁面時會遵循預設的文件流，從上往下依次顯示每個HTML標籤，對於塊級標籤則獨佔一行，對於內聯標籤則放置在同一行，直到總寬度超過瀏覽器寬度才換行。
可以在HTML標籤之間或者p等標籤內容中新增br，用於新增空白行或換行。
<p>這是一段<br/>換行的段落</p>複製程式碼div和span分別屬於塊級標籤和內聯標籤，都可以用作其他HTML標籤或頁面文字的容器。它們本身沒有具體的語義，僅作為其他內容的容器，從而將Web頁面更加結構化地組織起來。我們在設計網頁時，往往會將頁面劃分為多個區域，例如導航欄、側邊欄、第一部分、第二部分、第三部分、底欄等，如果將全部內容都直接寫在body的下一級中，則會給開發帶來很大的不便。相比之下，合理使用div勾勒出網頁內容的結構和層次，可以使程式碼編寫和閱讀變得更加清晰明朗。
<div>
div裡面可以包含其他HTML標籤或者文字內容
<p>這個div是頁面的第一塊內容</p>
</div>
<div>
<p>這個div是頁面的第二塊內容</p>
<div>
<span>span是內聯標籤，後面的文字不換行</span>
<span>div裡面還可以巢狀其他div</span>
<p>div的使用可以讓頁面內容更加結構化、有層次</p>
</div>
</div>複製程式碼使用table標籤可以定義表格，用tr表示表格中的每一行，用td表示每一行中的單元格，用th表示表頭行中的單元格。以下是一個簡單的例子，當然可以通過更復雜的語法實現合併單元格等效果，在我們掌握了CSS之後，也可以進一步美化表格樣式，使得表格看起來更美觀。
<table>
<tr>
<th>語言</th>
<th>難度</th>
<th>功能</th>
</tr>
<tr>
<td>Python</td>
<td>簡單</td>
<td>強大</td>
</tr>
<tr>
<td>R</td>
<td>簡單</td>
<td>強大</td>
</tr>
</table>複製程式碼使用ul和ol定義列表，分別對應無序列表和有序列表，用於展示多個並列項，每一項用li定義。
<ol>
有序列表
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ol>
<ul>
無序列表
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>複製程式碼標籤的屬性
很多HTML標籤都有對應的屬性，即寫在標籤開始部分中的屬性名和屬性值，例如a的href、img的src等。這裡再介紹四種重要而且通用的屬性：id、class、name和style。
id屬性可以給標籤取一個id，id值應當在整個頁面中是獨一無二的，使用id可以針對性地操作某一個標籤，例如控制樣式、繫結事件等。另外，如果將a的href設定為#加上某一標籤的id，則點選連結後頁面將跳轉到對應標籤所在位置。
<p id="main">這是最主要的一段話</p>
<a href="#main">跳到main所在位置</a>複製程式碼class屬性可以給標籤取一個class，同一個class值可以應用於多個標籤，從而使用class可以同時操作多個標籤，例如控制它們的樣式、為它們繫結事件等。
<p class="content">這些段落都是普通內容</p>
<p class="content">這些段落都是普通內容</p>
<p class="content">這些段落都是普通內容</p>複製程式碼name屬性和class類似，只是基於name控制相應的標籤沒有class那麼方便，可以將id、class和name理解成一個人的身份證號、姓、名等。
style屬性可以為標籤新增內聯樣式，即使用CSS的一種方法，等我們瞭解CSS之後再詳細討論，這裡提供一個簡單的示例。
<p style="color:red;">這是一段有顏值的內容</p>複製程式碼註釋
在HTML中滿足以下格式的內容即為註釋，被註釋的內容將不會渲染和顯示。
<!--這是一個註釋！-->複製程式碼表單
能夠接受使用者輸入並且可以被賦值的標籤統稱為表單標籤，例如常見的文字框、單選框、多選框、下拉選單等。表單標籤一般都會放在form標籤之中，使得在觸發提交時可以一併上傳全部表單標籤的值。
<form action="" method="post">
使用者名稱 <input type="text" placeholder="使用者名稱" name="username"/>
密碼 <input type="password" placeholder="密碼" name="password"/>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
</select>
一大段文字 <textarea rows="10" cols="10" placeholder="一大段文字" name="content"></textarea>
<button type="submit">登陸</button>
</form>複製程式碼form的action屬性指定了使用者提交時應當觸發的響應函式，method屬性指定了提交的HTTP請求型別，這裡為post；input為輸入框，不同的type對應不同的表單元素，可取的值包括button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time等。placeholder指定了當標籤內容為空時，在頁面上顯示的提示資訊；- 使用
select和option可以定義下拉選單，預設選中第一項。option中的內容會顯示在頁面上，而value屬性則對應每個option的值，處於選中狀態的option值將作為整個select的值； textarea為文字框，用於顯示多行文字，rows和cols分別用於指定文字框的行數和列數；button為按鈕，type="submit"表示按鈕點選之後將觸發提交操作，form內全部表單標籤的值都會一併提交給action裡定義的響應函式處理。
新增以上程式碼並在瀏覽器中重新整理即可看到表單的效果。input、textarea、button都屬於內聯標籤，因此所有的表單標籤都顯示在同一行。可以向input和textarea中輸入文字，填寫完畢後點選button即可提交。但由於這裡在action中並未指定相應的響應處理函式，因此點選後頁面只是簡單地重新整理一下。處理表單提交涉及到一些後端的內容，所以等我們掌握了相應知識之後再回過頭來講解。
顏色
HTML中可以用三種方法來表示顏色，用於修改HTML標籤的外觀，例如標籤的文字顏色、背景色、邊框色等。
第一種方法是RGB表示法。網頁渲染使用R、G、B來合成任意一種顏色，分別表示顏色的紅色分量、綠色分量和藍色分量，0為最小值，255為最大值，因此rgb(0, 0, 0)表示黑色，rgb(255, 255, 255)表示白色，rgb(255, 0, 0)表示純紅色，依此類推。如果是rgba(255, 0, 0, 0.5)，則第四個分量表示顏色的透明度。
第二種方法是十六進位制表示法，同樣基於RGB色彩合成原理，只不過用十六進位制來表示相應的值，例如#000表示黑色，#fff表示白色，#f00表示純紅色。
第三種方法是使用顏色名稱，例如red、green、blue等，這些內建的名稱分別對應一些預先設定好的顏色。
<p style="color:rgb(255,0,0);">紅色</p>
<p style="color:#0f0;">綠色</p>
<p style="color:blue;">藍色</p>複製程式碼如果對顏色沒有準確的把握，可以在需要控制顏色的地方開啟開發者工具，點選右邊對應的色塊，互動式地進行調整直到滿意。
DOM
DOM的全拼是Document Object Model，即文件物件模型。我們之前提到HTML是層次結構化的，如果將內層標籤看作直接外層標籤的子節點，那麼整個HTML頁面可以整理成樹形結構，樹的根節點即html，下一層即head和body，以樹形結構不斷展開，這便是HTML頁面的文件物件模型。
在後續內容中，我們也會將HTML標籤稱作DOM元素。DOM的概念在遍歷和操作HTML標籤時非常有用，我們經常需要找到一個DOM元素的父節點、兄弟節點以及子節點，而遍歷一顆DOM樹也是通過先訪問根節點，然後遞迴地遍歷根節點的全部子樹來實現的。
HTML5
HTML5是HTML的最新版本，在原本HTML的基礎上增加了一些新的擴充套件和功能，例如在手機上可以檢測抖動、獲取地理位置等，因此受到了廣泛關注，並且在移動端引爆了一股開發狂潮。
HTML5中新增了一些新的功能標籤，例如支援更加高階、複雜和精細繪圖功能的canvas和svg，支援直接播放音訊和視訊的audio和video，支援嵌入多種型別資源的embed。關於svg的更多內容可以檢視www.runoob.com/svg/svg-tut…，關於canvas的更多內容可以檢視zhanghonglun.cn/blog/canvas…。
HTML5中也引入了一些新的語義標籤，例如header、nav、section、article、aside、figcaption、figure、footer等。這些標籤的使用方法和div大同小異，只是像p代表段落一樣，賦予了一些用途語義。以下兩種寫法在實際應用中沒有任何區別，都能夠很好地說明這一塊內容對應網頁的導航欄部分，只不過前者稍微簡潔一些而已。
<header>導航欄部分</header>
<div id="header">導航欄部分</div>複製程式碼除此之外，HTML5中還增加了一些新的功能，例如元素拖拽、地理定位、更豐富的input type、Web儲存等，限於篇幅這裡就不展開介紹了，有興趣的話可以訪問以下連結獲取更多內容，www.runoob.com/html/html5-…。
補充學習
HTML語法比較簡單，沒有複雜的程式設計邏輯，只需要根據自己的設計排列HTML標籤即可，因此對HTML的掌握關鍵在於多寫多練、熟能生巧。關於HTML的更多內容可以訪問以下連結，www.runoob.com/html/html-t…，裡面提供了更為詳細和系統的講解，並結合大量例項程式碼加以鞏固，推薦完整地瀏覽和嘗試一遍。
最後，推薦安裝一個Sublime外掛，Emmet，可以極大地加速和簡化HTML程式碼編寫，功能十分強大，詳細使用方法可以參考這裡，juejin.im/post/584f53…。
視訊連結：