參考文章：MDN
HTML總結
HTML（HyperText Markup Language）是一種用來告訴瀏覽器如何組織頁面的標記語言。它由一系列元素組成。
基本概念
1）塊級元素與內聯元素
塊級元素通常用於包裹結構化內容，獨佔一行，不會被內聯元素包裹，但可以被其他塊級元素包裹。內聯元素則通常出現在塊級元素中包裹一小部分內容，內聯元素不會導致文本換行。
2）空元素
只有一個標籤，插入/嵌入一些東西。
3）屬性/布爾屬性 " " ' '
<! DOCTYPE html>聲明文檔類型 <meta charset="utf-8">設置文檔使用utf-8字符集編碼
<html></html> <head></head> <title></title> <body></body>
*對於HTML文檔中的空白，HTML解釋器會將其通通解釋爲一個空字符。
4）特殊字符
& ;
圖1 HTML知識架構圖（來自重學前端）
一、元素
1）文檔元信息
指包含在<head></head>標籤中的元素，用於描述文檔自身的一些信息。
<meta> 描述數據的數據，爲文檔添加元數據。
- charset="utf-8" | "ISO-8859-1" 指定字符集
- name 指定meta元素的類型
- content 指定實際的元數據內容
- 還有其他類型的metadata，通常爲某些（社交）網站提供可使用的特定信息。例如使用了相應metadata的文檔，其在Facebook上的鏈接會呈現圖像和描述。Facebook和Twitter都擁有自己專有的元數據協議。
- 一些meta例子：<meta name="viewport" content="width=device-width">
<link> 引入圖標、CSS、腳本
<html lang="en-US"> 爲文檔設置主語言
2）語義相關內容 表達文章結構、不同語言要素的標籤
- <h1-6>
- 列表<ul><ol><li>
- 重點強調<em><strong>
- 表象元素<b><i><u>
- 描述列表<dl><dt><dd>
- 引用 塊引用<blockquote cite="URL"> 行內引用<q cite="URL"> 引文<cite>默認字體樣式爲斜體
- 縮略語<abbr title="縮寫的解釋"> 當光標懸停在縮略語上時會出現提示
- 標記聯繫方式<address>
- 上標<sup>和下標<sub>
- 標記計算機代碼<code><pre><var><kbd>鍵盤（或其他）輸入<samp>標記程序輸出
- 標記時間和日期<time datatime=""> 可供機器識別
- 換行<br> 水平分割線<hr>
- 完整HTML元素參考
網站結構
- <header> 頁眉
- <nav> 主導航
- <main> 每個頁面特有的內容 <article><section><div>
- <aside> 間接信息
- <footer> 頁腳
無語義元素
- <div>
- <span>
3）鏈接 在文檔中鏈接到任何其他文檔
<a>
- href 目標，包含網址
- title 關於鏈接的補充有用信息，當鼠標懸停在鏈接上時會顯示
統一資源定位器（URL）是一個定義了在網絡上的位置的一個文本字符串。可理解爲URI標準的子集，表示資源定位。URL使用路徑查找文件，路徑指定文件系統中文件所在位置。
同級路徑：直接寫文件名；子目錄：進入子目錄/文件名；上級目錄：../上級目錄/文件名。
文檔片段：鏈接到html文檔的特定部分。首先給該部分分配一個id，鏈接時href="URL#id名" | "#id名"。
電子郵件鏈接：href="mailto: [email protected]?(cc)&(cc)&(subject=x%x)&(body)"。更多細節。
絕對URL&相對URL：絕對URL包含協議、域名等完整URL信息；相對URL定位取決於當前文檔所在的位置。
注意
- 清晰的鏈接措辭
- 儘可能使用相對鏈接
- 當鏈接到非html文檔時進行標註
4）替換型標籤 元素的內容和尺寸由外部資源所定義，而不是元素本身
圖片 <img src="圖片的路徑" alt="對圖片的文字描述，備選文本"> ←→ <a>
- 若圖片起到裝飾作用，應使用CSS來插入；如果要設定圖片高寬，應使用CSS。
- 圖片版權問題
- title="圖片標題" 當鼠標懸停在圖片上時顯示，不推薦
- <figure> 一個獨立單元，爲主要內容提供補充說明，可包含圖片、音視頻、代碼、方程、表格等。
- <figure><img><figcaption> 搭配圖片的說明文字
視頻和音頻
<video>
- src="01.webm" 視頻資源路徑
- controls 控制回放功能
- width/height
- autoplay 自動播放 | loop 循環播放 | muted 默認關閉聲音
- poster="圖像URL" 封面
- preload="none | auto | metadata" 緩衝較大的文件，不緩衝|頁面加載後緩衝|盡緩衝文件元數據
- <video>標籤內的段落<p> 後備內容
- 嵌入多個媒體資源 <video/audio><source type="MIME types">
<audio>
- 幾乎完全同上
- 不支持width/height，不支持poster
- 顯示音軌文本（字幕）<track kind（指定cues類型）="subtitle | caption | timed description" src="01.vtt" srclang="en">
嵌入元素
歷史上程序員喜歡使用frames搭建網站，但現在已不再使用了。90年代末二十一世紀初，開始使用插件技術給網頁嵌入更豐富的內容，例如Video，Flash等。在HTML文檔中通過<object>或<emded>標籤使用插件。現在，<iframe>標籤（<video><audio><img><svg><canvas>等）的出現，使得嵌入內容更加便捷。
<object><embed> 嵌入插件豐富網頁（flash | PDF | 視頻 | SVG | 圖像）
<iframe>
- src="URL路徑"
頁面加載完成後，使用JavaScript設置能提高速度？？？？ - allowfullscreen 通過全屏API設置全屏模式
- frameborder="1" 0，不推薦 ，應使用CSS
- width/height
- 備選內容
- 安全隱患問題
矢量圖像
位圖和矢量圖是常見的兩種類型。位圖使用像素網格來定義，包含精確的像素位置和色彩信息。流行的位圖格式包括Bitmap（.bmp），PNG（.png），JPEG（.jpg），GIF（.gif）；矢量圖使用算法定義，包含圖形和路徑的定義，SVG格式，擁有較小的文件尺寸，卻高度可縮放。
添加方式：
- <img src="01.svg" /> 快速，可嵌套進<a> | 無法使用JS操作圖像，內聯CSS樣式，無法使用CSS僞類
- 使用<svg></svg>插入HTML 減少HTTP請求，使用外聯CSS樣式 | 只適用於在一個地方使用SVG
- 使用<iframe>嵌入SVG
iframe回退機制？？？？ - 跨瀏覽器支持
<svg>
- SVG是用於描述矢量圖像的XML語言，通過在<svg>中包含圖形元素可繪製矢量圖形。
- <circle><rect> 簡單圖形
- <feColorMatrix> 使用變換矩陣轉換顏色
- <animate> 矢量圖形的動畫
- <mask> 在圖像頂部應用蒙版
在不同的屏幕尺寸和分辨率的設備上都能工作得很好的圖片（響應式web設計的一部分）。
兩個問題：藝術方向問題（art direction problem） 使用不同的圖片以適應不同的空間分配<picture><source media>；分辨率切換問題（resolution switching problem） 使用相同顯示效果的圖片但包含多個不同的分辨率<img srcset sizes>。
5）表單
6）表格
HTML表格應該用於表格數據，但許多人習慣用表格進行網頁佈局，這是很糟糕的。應該使用CSS layout技術。
<table>
- <tr> 表格行
- <th> 表格標題，加粗和居中
- <td> 單元格
- colspan="2" 設置一個單元格的寬度是兩個單元格
- rowspan="2" 設置一個單元格的高度是兩個單元格
- <colgroup> <col> 指定表格中的某一列；如果想要爲每一列設置樣式信息，<col span="2">
- <caption> 爲表格添加一個標題
- <thead><tfoot><tbody> 隱式包含
- 嵌套表格是可行的，但不建議。
- 使用scope屬性（"row" | "col" | "rowgroup"）標記行標題和列標題，有利於實現無障礙閱讀。
- scope的替代方法，id和headers屬性。給標題添加id，單元格添加headers（包含行標題id和列標題id）。
二、語言
三、補充標準
XHTML 是使用XML編寫的HTML，編寫規範更嚴格。
XML（Extensible Markup Language） 被設計用於傳輸和存儲數據。是對HTML語言的一種補充。
- XML聲明 <?xml version="1.0" encoding="ISO-8859-1"?>
- 樹結構；XML屬性 v.s. 子元素；一些嚴格的語法，命名（數據庫名稱）
- 不中斷應用程序的情況下進行擴展
- XSLT 首選的 XML 樣式表語言