# HTML

### HTML 是什麼

HyperText Markup Language，超文本標記語言，定義網頁的內容，使用「標記」（markup）來詮釋。

### 元素與標籤

元素的組成為起始標籤<>、結束標籤\</>與內容，如 \<p>content\</p>，其中\<p>稱為「標籤」。\
標籤不分大小寫，可全大、全小寫或混用，一般為了可讀性、ㄧ致性與習慣，使用全小寫。

<figure><img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png" alt=""><figcaption><p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png">https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png</a></p></figcaption></figure>

標籤都有其代表的意義，必須視您想呈現的內容，選擇對應、有意義的標籤，以下舉例：

* 網頁主要標題使用 \<h1>
* 副標題使用 \<h2>\<h3>\<h4>\<h5>\<h6>
* 段落使用 \<p>
* 超連結使用\<a>
* 主要內容區域使用 \<main>

{% hint style="info" %}
標籤正確的使用對於瀏覽網頁會有更好的體驗，建議盡您所能地達成無障礙網頁設計的標準。

所有標籤意義都可以在 [w3school 網頁](https://www.w3schools.com/tags/)找到。&#x20;
{% endhint %}

標籤可以包含標籤，例如：\
`<p>我喜歡上了 <a href="ilovehtml.html" title="前往 HTML 教學">HTML</a></p>`\
但是區塊元素不能被行內元素包起來。

這是什麼意思呢？讓我們繼續看下去。

### **區塊元素與行內元素**

* 區塊元素：在頁面中單獨佔據一行，在它前後的內容都將以一個換行分隔。區塊級元素傾向於作為頁面上的結構化元素，區塊級元素不會被包含在行內元素中，但有可能會包含在其他區塊元素中。
* 行內元素：放在區塊級元素之中的內容，這些元素只由文件內容的一小部分組成，而非由完整段落或群組式內容組成。一個行內元素不會在文件中產生新的一行，它們通常只會出現在一段文字中。<br>

  <figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FY2JjG7fXx3FNV97ZwsP9%2FGroup%2016.png?alt=media&#x26;token=27a1698f-5878-4684-9f3e-6ecb014f8efa" alt=""><figcaption><p>紅色框框為行內元素，灰色框框為區塊元素</p></figcaption></figure>

### 空元素

不一定所有標籤都有結束標籤，例如\<img src="iloveyou3000.png">

### 屬性

每個標籤都可以輸入屬性，屬性有分通用的，或是只專屬於某些標籤使用的。

例如：`<div title="Hi">Hi</div>`、`<a href="hi.html" title="Hi">Hi</a>`

title 屬性是通用，但 href 只能用在特定元素，關於屬性可[前往 w3school](https://www.w3schools.com/tags/ref_attributes.asp) 查閱相關特性與用法。

### 製作第一個 HTML 檔案，並開啟觀看網頁

先試著查看以下 HTML：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

我們已經在上面的文件中學會標籤、元素以及屬性，現在我們將應用這些知識製作一個最簡單的網頁。\
但還有一些小知識必須學習：

* \<!DOCTYPE html>：文件類型(doctype)，目前 HTML 5 只需要寫這樣即可。
* \<html>：使用這個包住所有網頁內容，通常也會稱為根元素
* \<head>：在\<head>中間的東西並不會呈現在網頁上，其內容有[跟 SEO 、無障礙以及 CSS 有關](https://www.w3schools.com/tags/tag_head.asp)。
* \<body>：在\<body>之間的內容，會呈現在網頁上。

現在，您可以嘗試看看在任何純文字編輯器裡打上這些文字，並加入看看不一樣的元素，完成後儲存成一個檔案，檔案的副檔名請儲存為 `.html`，點擊該檔案，就會使用您電腦系統預設的瀏覽器打開網頁。（如果您是使用 codepen 線上服務的話，僅需要輸入 \<body> 內的內容即可。）

### 網頁內容

恭喜您已經會製作一個網頁了，接下來就是學習如何豐富網頁內容：

* HTML 中的空格\
  不管用多少空格(whitespace，包括空白字元與換行字元)，HTML 的語法分析器都只會留一個空格。
* HTML 中的實體與符號特殊字元\
  有些時候我們會需要在內容輸入特殊符號，但這些特殊符號又可能是原本 HTML 的標籤寫法，例如：「<」、「>」，所以為了避免混淆，HTML 的把這些特殊符號使用特定寫法來判別：\
  「\&lt;」為 less than (小於)；\
  「\&gt;」 為 great than (大於)；\
  「\&quot;"」為 quotation (引號)；\
  「\&apos;」 為 apostrophe (單引號)；\
  「&;」 為 ampersand (和號)；\
  「\&nbsp;」為 No-Break Space(不換行空格)；\
  「\&ensp;」為 En Space(半形空格)；\
  「\&emsp;」為 Em Space(全形空格)；\
  \
  也就是如果我們的 HTML 是

  <pre><code><strong>&#x3C;p>這是 &#x26;lt;p&#x26;gt; 元素&#x3C;/p>
  </strong></code></pre>

  將會輸出：\
  `這是 <p> 元素`\
  \
  如果想更深入暸解，可以前往w3school 的[實體](https://www.w3schools.com/html/html_entities.asp)[符號](https://www.w3schools.com/html/html_symbols.asp)<br>
* 註解\
  註解像是上課的時候寫的筆記一樣，主要是幫助我們理解內容。HTML 的註解寫法為：\
  \
  `<!-- 在這裡面寫筆記 -->`\
  \
  通常會用在以下情形：\
  \- 結構太複雜，寫一些註解幫助之後回來看的時候恢復記憶。\
  \- 共同協作，當一起編輯程式碼時，需要清楚傳遞資訊給共同編輯者理解內容。\
  \- 做一些趣味性的嘗試，留下某種足跡或辨識度。\
  \
  註解沒有一定格式，只要確保團隊定義出大家都可以理解的內容即可，能順利溝通最重要
* 架構\
  就好一像一篇文章，可能需要標題、副標題、內文、參考來源等，具有結構性才能讓使用者方便閱讀。\
  同理網頁也是一樣，基礎網頁就是在傳遞資訊，那麼就需要良好的架構，才能有效傳遞資訊。\
  \
  而要達成這件事，您必須清楚暸解每個元素被設計出來的意義及使用方式。例如：\
  \- 標題類： \<h1>、\<h2>、\<h3>、\<h4>、\<h5>、\<h6>，\
  \- 版面類：\<main>、\<header>、\<footer>\
  \
  更多元素請[前往 w3school 閱讀](https://www.w3schools.com/tags/default.asp)。\
  \
  暸解元素的意義之後，在呈現網頁時的版面、內容順序也是重要的一環，此部分將會在 CSS 部分深入暸解。<br>
* 多媒體\
  在 HTML 裡，您可以加入圖片、音訊與影片，讓您的網頁更加生動與吸引使用者，常見標籤如下：\
  \- \<img>\
  \- \<svg>\</svg>\
  \- \<video>\</video>\
  \- \<audio>\</audio>\
  \
  更多控制項與屬性請[前往 w3school 查閱](https://www.w3schools.com/tags/ref_av_dom.asp)。<br>
* 表格\
  表格是網頁經常會用來呈現資訊、數據的一種方式，讓使用者方便快速地查看內容並理解其相關性。\
  表格的常見標籤如下：\
  \
  \- \<table>：表格最外面的標籤。\
  \- \<caption>：描述此表格呈現的是什麼資訊。\
  \- \<th>：標頭，用來表示此欄/列所代表的意義。\
  \- \<tr>：列。\
  \- \<td>：儲存格。<br>

  ```
  <table>
    <caption>動物種類與數量</caption>
    <tr>
      <th>動物</th>
      <td>斑馬</td>
    </tr>
    <tr>
      <th>數量</th>
      <td>10</td>
    </tr>
  </table>
  ```

  \
  \
  表格也可以利用屬性來達成合併儲存格等意義，詳細用法請參閱 w3school。<br>

{% hint style="warning" %}
比較早期的網頁，會使用表格來作為排版工具，在現在來看是非常糟糕的事，請注意千萬不要使用表格來排版，除了不符合 HTML 設計原意外，也會造成無障礙困擾。
{% endhint %}

### 小結

至此您的 HTML 知識大致上已具備，剩下的就是去琢磨很多小細節以及多加練習，例如此篇文章並沒有著墨很多關於 \<head> 裡面的內容，您就可以找資料練習寫裡面的內容。尤其是現在的線上編輯程式的服務也很多，可以選擇自己喜歡的服務，打鐵趁熱直接在線上練習看看。

您需要自動自發的練習，這種精神在程式領域，尤其是前端領域裡特別重要，因為技術也在快速迭代，若沒有跟上最新思維，您就沒辦法更近一步精進。

但也不是說學了新技術就一定要用，重要的是有沒有新技術的觀念，理解其背後意義，這樣在未來您需要做選擇的時候，才有背景知識下決策。

### 作業

請使用 Codepen 或是 VSCode 或是文字編輯器，練習完成一個網頁，並盡可能地練習多種標籤。\
例如新聞文章、球賽資料、或是[練習標籤](https://codepen.io/neillin1023/pen/RwZyrZj)等...。

{% hint style="warning" %}
Codepen 的 HTML 編輯區，只需要寫 \<body>\</body> 之間的內容即可。
{% endhint %}

### 參考來源

* [HTML：超文本標記語言](https://developer.mozilla.org/zh-TW/docs/Web/HTML)
* [行內元素(inline)&區塊元素(block)](https://home.gamer.com.tw/artwork.php?sn=5079325)
* [w3school](https://www.w3schools.com/)
* [HTML / 網頁當中的六種空白字元的差別](https://note.charlestw.com/html-space/)
