HTML Cheat Sheet

歡迎，有志於成為網頁開發者的你！今天，我們將進入HTML的世界，這是每個你曾經訪問過的網站的骨干。作為一個教了超過十年HTML的人，我可以告訴你，它並不像乍看之下那麼令人敬畏。事實上，我喜歡將HTML視為互聯網的樂高積木 - 簡單的部件，當它們被組合起來時，可以創造出令人驚奇的事物！

HTML - Cheat Sheet

基本標籤

每個HTML文件都從一些基本的標籤開始。將這些視為你的網頁的基礎：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
歡迎，世界！
</body>
</html>

讓我們分解一下：

<!DOCTYPE html> 告訴瀏覽器這是一個HTML5文件。
<html> 是頁面的根元素。
<head> 包含文件的元信息。
<title> 指定文件的標題。
<body> 定義文件的體，所有可見內容都放在這裡。

頂層屬性

<body> 標籤可以具有多種屬性以控制內容的顯示方式。這裡有一些常見的：

屬性	描述
bgcolor	設置背景顏色
background	設置背景圖像
text	設置文字顏色

範例：

<body bgcolor="lightblue" text="navy">
歡迎來到我的藍色世界！
</body>

這將創建一個有淺藍色背景和藏青色文字的頁面。這就像是在網站上粉刷你的房間！

文本標籤

HTML提供了多種標籤來格式化文本。這裡有一些最常見的：

標籤	描述
`<h1>` 到 `<h6>`	标题（h1 是最大的，h6 是最小的）
`<p>`	段落
`<br>`	行斷
`<strong>`	粗體文字
`<em>`	斜體文字

範例：

<h1>歡迎來到我的網站</h1>
<p>這是一個 <strong>粗體</strong> 說法。</p>
<p>這是一個 <em>強調</em> 的觀點。</p>

連結

連結是構成網絡的網的一部分！這是怎樣創建的：

<a href="https://www.example.com">點我！</a>

href 屬性指定了連結去的頁面的URL。你也可以使用ID來連結到頁面的特定部分：

<h2 id="section2">第二部分</h2>
<a href="#section2">去第二部分</a>

格式化

HTML提供了多種方式來格式化你的文本，而不仅仅是粗體和斜體。這裡有一些更多的：

標籤	描述
`<sup>`	上標文字
`<sub>`	下標文字
`<pre>`	預格式化文本
`<code>`	代碼片段

範例：

<p>H<sub>2</sub>O 是水。</p>
<p>2<sup>3</sup> 等於 8。</p>
<pre>
這段文字
是預格式化的。
</pre>
<p>這裡有一些 <code>內聯代碼</code>。</p>

清單

清單有助於組織信息。HTML中有三種類型：

無序清單 (<ul>)
有序清單 (<ol>)
定義清單 (<dl>)

範例：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>櫻桃</li>
</ul>

<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
<dt>CSS</dt>
<dd>層叠樣式表</dd>
</dl>

圖形元素

圖像可以使你的網站變得栩栩如生。這是怎樣添加的：

<img src="cat.jpg" alt="一隻可愛的貓" width="300" height="200">

src 屬性指定圖像文件，alt 為屏幕閱讀器或圖像加載失敗提供替代文本，width 和 height 設置尺寸。

表單

表單讓用戶能夠輸入數據。這是一個簡單的表單：

<form action="/submit-form" method="post">
<label for="name">名字：</label>
<input type="text" id="name" name="name" required>

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="提交">
</form>

這創建了一個有名字和電子郵件字段以及提交按鈕的表單。

表格

表格用於以行和列顯示數據：

<table border="1">
<tr>
<th>標題 1</th>
<th>標題 2</th>
</tr>
<tr>
<td>第一行，單元格 1</td>
<td>第一行，單元格 2</td>
</tr>
<tr>
<td>第二行，單元格 1</td>
<td>第二行，單元格 2</td>
</tr>
</table>

表格屬性

表格可以使用各種屬性進行自定義：

屬性	描述
border	設置邊框的寬度
cellpadding	設置單元格內容和邊框之間的間距
cellspacing	設置單元格之間的間距
width	設置表格的寬度

HTML5 input 標籤屬性

HTML5引入了新的輸入類型和屬性：

類型/屬性	描述
type="email"	為電子郵件地址
type="date"	為日期選擇器
type="number"	為數字輸入
placeholder	輸入字段中的提示文字
required	使字段成為必填

範例：

<input type="email" placeholder="輸入你的電子郵件" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">

HTML 編輯器和格式化工具

雖然你可以在任何文本編輯器中編寫HTML，但使用專用的HTML編輯器可以讓你的生活更輕鬆。一些流行的選擇包括：

Visual Studio Code
Sublime Text
Atom

這些編輯器提供了如語法高亮和自動完成等特性，這可以為你節省很多時間和麻煩！

結論

好了，各位！這個HTML速查表涵蓋了你開始創建自己的網頁所需的基礎知識。記住，HTML只是開始。當你進步時，你將會想要學習CSS來進行樣式設計和JavaScript來增加互動性。

學習HTML就像學習一門新語言 - 它需要練習。不要害怕嘗試和犯錯誤。我們都是這樣學習的！而且，誰知道呢？也許下一個大網站會是由你建造的！

快樂編程，願你的標籤總是正確關閉！

Credits: Image by storyset