1. HTML概述
HTML 是一種相當簡單的、由不同元素組成的标記語言，它可以應用于文本片段，使文本在文檔中具有不同的含義（它是一個段落嗎？它是一個項目清單嗎？它是一個表格嗎？），将文檔結構化為邏輯塊（文檔是否有頭部？有三列内容？有一個導航菜單？），并且可以将圖檔，影像等内容嵌入到頁面中。本子產品将介紹前兩個，并且介紹一些了解HTML所需的基本概念和文法。
2. HTML入門
2.1 什麼是HTML?
HTML (HyperText Markup Language) 不是一門程式設計語言，而是一種用來告知浏覽器如何組織頁面的标記語言。HTML 由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的内容，使其以某種方式呈現或者工作。 一對标簽（ tags）可以為一段文字或者一張圖檔添加超連結，将文字設定為斜體，改變字号，等等。
#3 剖析一個HTML元素
段落元素：
這個元素的主要部分有：
1、開始标簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括号所包圍。
2、結束标簽（Closing tag）：與開始标簽相似，隻是其在元素名之前包含了一個斜杠。
3、内容（Content）：元素的内容，本例中就是所輸入的文本本身。
4、元素（Element）：開始标簽、結束标簽與内容相結合，便是一個完整的元素。
3.1 建立第一個HTML元素
斜體：使用元素
3.2 嵌套元素
<p>我的貓咪脾氣<strong>爆</strong>:)</p>
確定元素被正确的嵌套：先打開<p>元素，然後才打開<strong>元素，是以必須先将<strong>元素關閉，然後再去關閉<p>元素。
3.3 塊級元素和内聯元素
塊級元素和内聯元素。
- 塊級元素在頁面中以塊的形式展現 —— 相對于其前面的内容它會出現在新的一行，其後的内容也會被擠到下一行展現。塊級元素通常用于展示頁面上結構化的内容，例如段落、清單、導航菜單、頁腳等等。一個以block形式展現的塊級元素不會被嵌套進内聯元素中，但可以嵌套在其它塊級元素中。
- 内聯元素通常出現在塊級元素中并環繞文檔内容的一小部分，而不是一整個段落或者一組内容。内聯元素不會導緻文本換行：它通常出現在一堆文字之間例如超連結元素<a>或者強調元素<em>和 <strong>。
例如：内聯元素<em> 塊級元素<p>
3.4 空元素
不是所有元素都擁有開始标簽，内容，結束标簽。一些元素隻有一個标簽，通常用來在此元素所在位置插入/嵌入一些東西。例如：元素是用來在元素所在位置插入一張指定的圖檔。例子如下：
4. 屬性
元素也可以擁有屬性，如下：
屬性包含元素的額外資訊，這些資訊不會出現在實際的内容中。在上述例子中，這個class屬性給元素賦了一個識别的名字（id），這個名字此後可以被用來識别此元素的樣式資訊和其他資訊。
一個屬性必須包含如下内容：
1、一個空格，在屬性和元素名稱之間。(如果已經有一個或多個屬性，就與前一個屬性之間有一個空格。)
2、屬性名稱，後面跟着一個等于号。
3、一個屬性值，由一對引号“ ”引起來。
4.1 為元素添加屬性
例如元素<a>是錨，它使被标簽包裹的内容成為一個超連結。此元素也可以添加大量的屬性，其中幾個如下：
- href: 這個屬性聲明超連結的web位址，當這個連結被點選浏覽器會跳轉至href聲明的web位址。例如：href=“https://www.mozilla.org/”。
- title: 标題title屬性為超連結聲明額外的資訊，比如你将連結至的那個頁面。例如：title=“The Mozilla homepage”。當滑鼠懸停在超連結上面時，這部分資訊将以工具提示的形式顯示。
- target: 目标target屬性用于指定連結如何呈現出來。例如，target="_blank"将在新标簽頁中顯示連結。如果你希望在目前标簽頁顯示連結，忽略這個屬性即可。
4.2 布爾屬性
有時會看到沒有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們隻能有跟它的屬性名一樣的屬性值。例如disabled 屬性，他們可以标記表單輸入使之變為不可用(變灰色)，此時使用者不能向他們輸入任何資料。
友善起見，我們完全可以将其寫成以下形式：
<!-- 使用disabled屬性來防止終端使用者輸入文本到輸入框中 -->
<input type="text" disabled>
<!-- 下面這個輸入框沒有disabled屬性，是以使用者可以向其中輸入 -->
<input type="text">
4.3 單引号or雙引号？
都可以
想将引号當作文本顯示在html中，就必須使用實體引用（一些符号）
5. 剖析HTML文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的測試站點</title>
</head>
<body>
<p>這是我的頁面</p>
</body>
</html>
5.1 學習實踐：為HTML文檔添加一些特征
編寫index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的測試站點</title>
<body>
<h1>經典回憶</h1>
<p>相思無用，惟别而已。别期若有定，千般煎熬又何如？莫道黯然銷魂，何處<strong>柳暗花明</strong>？
——《<a href="http://zh.wikipedia.org/zh-hans/神鵰俠侶/">神雕俠侶</a>》
</p>
<img src="https://roy-tian.github.io/learning-area/extras/tools/playable-code/images/sdxl.jfif" alt="神雕俠侶圖">
</body>
</head>
</html>
5.2 HTML中的空白
了在代碼中包含了很多的空格——這是沒有必要的；下面的兩個代碼片段是等價的：
<p>狗 狗 很 呆 萌。</p>
<p>狗 狗 很
呆 萌。</p>
無論在HTML元素的内容中使用多少空格(包括空白字元，包括換行)，當渲染這些代碼的時候，HTML解釋器會将連續出現的空白字元減少為一個單獨的空格符。
為了代碼的可讀性——更多留白
6. 實體引用：在HTML中包含特殊字元
在HTML中，字元 <, >,",’ 和 & 是特殊字元. 它們是HTML文法自身的一部分, 直接在文本裡運用這些字元html解釋器會将其處理為代碼而不是文本，要将這些字元包含進文本裡要通過字元引用。
使用字元引用 —— 表示字元的特殊編碼, 它們可以在那些情況下使用. 每個字元引用以符号&開始, 以分号(;)結束.
參考：XML和HTML字元實體引用清單
7. HTML注釋
注釋用特殊的記号<!–和-->包括起來，
<p>我在注釋外！</p>
<!-- <p>我在注釋内！</p> -->