簡介
HTML全稱是超文本标記語言 (Hyper Text Markup Language)，不是一種程式設計語言，而是一種标記語言，标記語言是一套标記标簽，用來描述網頁。
目前最新的HTML版本是H5，要了解它和之前版本的不同，可以看我之前的這篇：
Youky：【翻譯整理】What's new in HTML5zhuanlan.zhihu.com
因為HTML是标記語言，是以無需運作環境，直接用浏覽器打開檔案即可看到預期結果
HTML的注釋格式是：<! >
标簽
按照不同的分類标準，可以把标簽分為不同的類别，如block元素和inline元素等等，我這裡将HTML标簽分為兩類：表示頁面元素的标簽，和各種功能性标簽。
頁面元素标簽
文本标簽
<p>：最常用的，段落标簽，用來表示一段話。
注意：p标簽内的多個空格會被自動去掉，隻保留一個。要表示多個空格，在文字中用 代替空格，或使用pre标簽
<h>：标題标簽，共有六級标題，分别是<h1>一直到<h6>，字号逐漸減小
<span>：沒有特别含義，将其他标簽内的一部分文字放入span标簽内，可用于友善的改變部分文字的樣式
<pre>：pre标簽内部的文字會保留格式
<abbr title="全稱">縮寫</abbr>：頁面上會顯示縮寫,将滑鼠移動到縮寫上會顯示全稱
<em>：内部字型用斜體顯示
<strong>：内部字型加粗
<sup>：内部的内容顯示為上角标
<hr>：分割線
<br>：換行
盒子模型
<div>：這個無疑是頁面布局中使用最多的标簽了，表示一個盒子區域，多用作容器
H5中語義化的盒子模型：
- section表示章節
- article定義有意義的獨立内容
- nav表示導航欄連結
- aside表示側邊欄
- header表示頂部
- footer表示底部
這些語義化的标簽都相當于是起了id的div，并沒有本質差別，隻是為了更好的可讀性、對搜尋引擎的優化以及更好的适配無障礙閱讀
表格
<table>：表格的最外層
<th>：首行的title
<tr>：表格中的每一行
<td>：每一行的每一個單元格
表單
1. <form action = "">：表單類型的标簽有很多，最外層都要有一個form标簽，意義是将内部的标簽定義為同一個表單，這樣才可以使用送出/重置按鈕，action屬性定義了用來處理輸入資料的腳本的伺服器頁面。是以，下面的表單元素在沒有form标簽時實際也是可以使用的
2. 輸入框：
<input type=”text|password”/>
- type=text時為文本框
- type=password時為密碼框，即無法看到輸入的内容
3. 文本域：
<textarea rows="行數" cols="列數">文字</textarea>
文字會出現在文本編輯區内作為提示性文本
4. 按鈕：<input type=”submit|reset ” value=”按鈕要顯示的文字”/>
- submit表示送出按鈕
- reset表示重置按鈕
5. 單選框和複選框:
<input type=”radio|checkbox” value=” ” name=” ” checked=” ”/>
- radio表示單選框，checkbox表示複選框
- 單選的name值要相同,複選的可以不同
- 若某一個選項中checked=”checked”,則該項為預設選項
- value為選擇框會傳回後端的值，是以要為每個選項設定不同value值
<label for = "id" >：與單選框和複選框一起使用，for屬性的值取為表單中某個選項的值，則點選label中文字的時候會選中這個選項。
6. 下拉清單
<select>
<option selected="selected"></option>
<option ></option>
<option disabled></option>
<select>
selected="selected"的那一項為預設選擇且顯示
添加了disabled的那一項無法選中
超連結
<a href="" target="_blank" rel="external nofollow" target="">文字或圖檔</a>
href屬性表示跳轉到的位址，有三種情況：
- 網址
- 本地目錄
- #，表示無效的超連結。在後期要為此處添加連結時，前期可以先使用#作為占位
target屬性表示打開該位址的方式，取值為_blank時會在新的頁面中打開超連結。預設在目前頁面打開
圖檔
<img src="圖檔路徑" alt=”文字”/>
圖檔的路徑可以是本地目錄也可以是網址，當圖檔找不到時會顯示alt中的文字
功能性标簽
<head>：頭部元素的容器
<link rel="stylesheet" href="css路徑" target="_blank" rel="external nofollow" >：引入CSS樣式檔案
<style>：在頁面中書寫内嵌樣式
<script>：引入JS腳本檔案，或是書寫内嵌JS腳本
- script标簽可以放在head标簽中，也可放在body标簽中。推薦放在body标簽中，這樣可以避免進行DOM操作時頁面尚未渲染的問題
- 預設情況下，解析script标簽時其他内容的解析将停止
- 在script标簽中有 defer屬性時，頁面完成解析後腳本才開始解析
- 在script标簽中有aysnc屬性時，腳本與頁面同時解析，但腳本解析完後将執行
<title>：定義網頁标題
<meta>：提供有關頁面的元資訊（meta-information）
常用的有下面這些：
<meta charset="utf-8">：指明了編碼方式
<meta name="keywords" content=" "/>：content内容是向搜尋引擎提供的關鍵字
<meta name="description" content=" "/>：content内容是告訴搜尋引擎網站的主要内容（被搜尋時會顯示）
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
viewport參數含義：
width：寬度（數值 / device-width）（預設為980 像素）
height：高度（數值 / device-height）
initial-scale：初始的縮放比例 （範圍從>0 到10）
minimum-scale：允許使用者縮放到的最小比例
maximum-scale：允許使用者縮放到的最大比例
user-scalable：使用者是否可以手動縮 (no,yes)
<base href="基本url " target="_blank" rel="external nofollow" >：網頁中其他位址将從給出的基本url下尋找相對url
其他
元素嵌套規則
前面已經說過，元素分為塊級元素（block）和行内元素（inline），在元素嵌套中：
- 塊級元素可以包含行内元素，但不一定能包含塊級元素（如p，h标簽内部不能包含塊級元素）
- 行内元素一般不能包含塊級元素。a元素内部可以嵌套塊級元素，因為在檢查嵌套關系時會自動跳過a标簽
src和herf的差別
- src是source的縮寫，表示引用資源替換目前内容
- herf是Hypertext Reference的縮寫，表示超文本引用，用于在目前文檔和引用資源之間建立聯系
- 浏覽器解析到src時會停止其他資源的處理，直接将該資源處理完畢，而對herf不會
标簽自閉和
通常，一個标簽的尖括号内最後一個字元為斜杠 /
但根據最新的HTML5規定，形如<img>、<br>、<hr>這樣的标簽，标簽内部是沒有内容的（對于img标簽，圖檔是屬性而不是内容），在以前版本的HTML中，img标簽是這樣寫的<img/>，但現在不需要了，寫為<img>足矣。
以上