HTML（Hypertext Markup Language），中文是「超文本標記語言」，是一種用來組織架構與呈現網頁內容的標記語言，本篇文章是分享我學習 HTML 的筆記內容。

1. HTML 簡介

  • HTML（HyperText Markup Language），中文是「超文本標記語言」。
  • 超文本是從某網頁連到其他網頁的連結。
  • HTML 使用標記（markup）來詮釋文字、圖片或其他顯示內容。例如用段落標籤<p>來表示此句子是段落：
<p>My cat is very grumpy</p>
  • HTML、CSS、JavaScript 的關係：
    • HTML：骨架。
    • CSS：衣服。
    • JavaScript：動作。

2. 製作第一個網頁

下載VS Code，並安裝外掛：Auto Rename Tag、Prettier。

使用 VS Code，儲存一個副檔名為.html的檔案。

在檔案中，先用簡單的標籤撰寫，例如段落標籤<p>：

<p>這是段落</p>

儲存檔案後，用瀏覽器開啟.html檔案，即可看到網頁。

3. 標籤、HTML Validator

範例：

<p>我的貓 <strong>非常</strong> 可愛。</p>
  • 起始標籤（opening tag）：<>，例如<p>。
  • 結束標籤（closing tag）：</>，例如</p>。
  • 內容（content）：元素的內容，例如「我的貓非常可愛。」。
  • 元素（element）：以上三者加起來就是元素 HTML element。
  • 巢狀元素（Nesting elements）：把元素放進另一個元素裡面，叫巢套（nesting），例如<strong>...</strong>放進<p>...</p>。
  • HTML Validator：全球資訊網協會（W3C）提供驗證服務，可以檢查 HTML 檔案是否符合 HTML 標準，檢驗網頁：The W3C Markup Validation Service。

4. 物件導向（Object-Oriented）

  • 屬性（Attributes）：就像廠牌、年份、顏色。
  • 行為（Methods）：就像直走、左轉、鳴喇叭。

5. HTML Skeleton

  • 沒有 Skeleton（骨架）就無法呈現：
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

6. HTML Skeleton 2

  • head：網頁的特定信息，包含 title、script、css……。
  • body：文檔正文，包含標題、段落、圖片……。
  • 打!可直接生成基本 HTML：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
  • 打command+/可生成註解：
<!-- 我是註解 -->

7. head 標籤

  • head 內的元素可至HEAD查詢。
  • 比較重要的有：viewport、description、robots、googlebot。

8. h1-h6 標籤

  • 有六種標題元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
  • <h1>：代表主標題，最重要的，只能有一個。
  • <h2>：代表副標題。
  • <h3>：代表更次級的副標題
  • <h6>：最不重要的副標題。
  • HTML 標籤是定義架構，不是樣式。

9. p 標籤、anchor tags

  • <p>：段落，HTML 會自動加空行。
  • <a>：超鏈接。
  • 常用標籤可至MDN查詢。

10. img 標籤、絕對路徑與相對路徑

  • <img>：圖片。
  • 絕對路徑：使用完整的 URL。
  • 相對路徑：連結到相對於目前文件的檔案。.代表目前 html 文件所在資料夾位置，..代表上層的資料夾位置。

11. ul 與 ol 標籤

  • <ul>：無序清單。
  • <ol>：有序清單。

12. block, inline

  • block elements：在頁面中組成區塊，例如：<div>。
  • inline elements：是指放在 block elements 中的內容，例如：<a>。

13. 表格製作

  • 製作表格需要用到標籤<table>、<tr>（每一行）、<th>（標題單元格）、<td>（數據）。
  • colspan 定義跨越列數，rowspan 定義跨越行數。
  • 選擇性使用的標籤：<thead>、<tbody>、<tfoot>。

14. 表單製作

  • form action：定義數據發送地。
  • form method：告訴瀏覽器如何將數據發送到伺服器。

15. GET, POST

  • GET：把數據發送到 action 指定的 URL。
  • POST：隱藏資料或向伺服器寄送被儲存的資料。

16. checkbox, email, file

input type：

  • checkbox：勾選格。
  • email：電子郵件填寫欄位。
  • file：選取檔案。

17. number, password

input type：

  • number：數字欄位，min、max可設定最小值最大值。
  • password：密碼欄位。

18. radio, range

input type：

  • radio：單選。
  • range：滑桿。

19. button, selection, option, datalist, textarea

  • <button>：按鈕，<button>放在<form>內，預設 type 是 submit。
  • <selection>：下拉式選單。
  • <option>：下拉式選單中的個別選項。
  • <datalist>：建立資料清單 ，和<input>結合。
  • <textarea>：可輸入多行文字的輸入框。

20. br, hr, comment

  • <br>：換行。
  • <hr>：分隔線，主題的分隔。
  • comment：註解。
<!-- 
我是註解
我是註解
-->

21. index.html, HTML entity

  • index.html：目錄中默認開啟的文件。
  • HTML entity：特殊符號，以&為開頭，;為結尾，可至HTML Symbols查詢。

22. favicon.ico

  • favicon.ico：與某網站相關聯的圖示，會在瀏覽器網址列左側顯示。