哈囉大家好，我是毛哥EM，歡迎來到網棧。今天我要讓你5分鐘學會所有常用的HTML語法。

HTML 叫做超文本標記語言 (Hyper Text Markup Language)。故名思義就是標記一下文字，要記得 HTML 主要功能不是為了裝飾，目的是讓瀏覽器知道這個是什麼。比如說 Google 想知道網站標題會去找裡面的<h1>；而給盲人用的語音閱讀器在看到<strong>會加重語氣。裝飾文字是 CSS 的工作，下禮拜就來講）

不過讓我們先來實際寫寫看 HTML 再來慢慢探討這些大道理。首先請你再瀏覽器輸入pen.new。輸入之後你會看到三個輸入框方別讓你輸入 HTML,CSS，和 JavaScript，還有底下的預覽區域。這個網站叫做 CodePen，是一個可以讓大家互相分享網頁作品的網站。平常做網站時可以來這裡尋找靈感，或是參考別人的作法。

首先這是一段文字。如果你想要讓它成為粗體的話請你在兩邊加入 <b> 和 </b>。就像 word 一樣，B 代表了 bold。那麼我們把隔壁幾個鄰居也搬過來吧

<i>是斜體 (Italic)、 <u> 是底線 (Underline)、而 <s> 是劃掉 (Strike)。不過這幾個都只是好看而已，對於瀏覽器來說沒什麼意義，因此我比較建議你使用 <strong> 來增加重要性，而語氣轉折或想區別強調文字時使用 <em> (emphasis)。

今天假設你建立了一個 <h1> 元素，代表一級標題 (header)，但是你還想增加一個屬性告訴瀏覽器說這是一個中文的標題，這時你可以這樣打：<h1 lang="zh-TW"> 意思是說這是一段繁體中文的標題。前面這一串我們叫做開始標記，後面的 </h1>叫做結束標記。lang 叫做屬性，而 zh-TW 是屬性質。

HTML 就是這樣建立一個又一個地”元素” (element) 。因為寫 HTML 時你需要一直重複打大於小於符號很麻煩，你知道工程師都是很懶的，所以Сергей Чикуёнок發明了 emmet。假如說你想建立一個<h1>元素你只需要打h1然後按tab就可以了。

為了方便操作我們把輸入框放到左邊，然後選一個好看的配色，然後讓我們一次認識所有常見 HTML 吧！順帶一題我也會告訴你這些 HTML 語法原本的英文單字，可能會讓你比較好理解。

文字

以下是常的文字元素。

1<p>
2    段落
3    <b>粗體</b>
4    <i>斜體</i>
5    <s>刪除線</s>
6    <u>底線</u>
7    H<sup>+</sup> CO<sub>2</sub>
8</p>

<p>元素代表段落區塊 (paragraph)。<b>是粗體 (bold)、<i>是斜體 (italic)、<s>是劃掉 (strike)、<u>是底線 (underline)。<sup>是上標 (superscript)、<sub>是下標 (subscript)。你可以記 super 在上面，而訂閱按鈕 Subscribe 在影片下方等你去按。

**粗體***斜體*刪除線 底線 H+ CO2

空白 換行

也許你有發現，在 HTML 中一個以上的 tab、空格、換行都視為一個空格，因此你可以自由地排版保持程式的簡潔。但是如果你想要換行的話，你可以使用<br>元素換行，<hr>插入分隔線 (Horizontal Rule)。而如果你想要插入一個空白的話，你可以使用&nbsp;。

1橫線
2<hr />
3換行<br />

這兩個是插入一個元素而不是指定範圍，因此習慣後面會用/>結尾，但如果你要打
或

瀏覽器也看得懂。HTML 是一種"好啦我看得懂就好"的語言，因此你就算用大寫，或著是屬性引號不加也沒關係，但是為了你和你的朋友之後維護起來不會那麼累我還是建議你遵守慣例。

標題

接下來是標題。標題有六種大小，分別是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。

1<h1>H1</h1>
2<h2>H2</h2>
3<h3>H3</h3>
4<h4>H4</h4>
5<h5>H5</h5>
6<h6>H6</h6>

建議從<h1>開始依序做使用，保持完整的架構。

無序清單

無序清單是用<ul>元素建立的，而清單內的每一個項目都是<li>元素。

1<ul>
2    <li>a</li>
3    <li>b</li>
4    <li>c</li>
5</ul>
  • a
  • b
  • c

有序清單

有序清單是用<ol>元素建立的，而清單內的每一個項目都是<li>元素。

1<ol>
2    <li>a</li>
3    <li>b</li>
4    <li>c</li>
5</ol>
  1. a
  2. b
  3. c

巢狀清單

而清單裡可以有清單，只要把清單放在<li>元素裡就可以了。

1<ul>
2    <li>玉米濃湯</li>
3    <li>鮪魚吐司</li>
4    <li>
5        薯條
6        <ul>
7            <li>鹽味</li>
8            <li>胡椒鹽</li>
9            <li>番茄醬</li>
10        </ul>
11    </li>
12</ul>
  • 玉米濃湯
  • 鮪魚吐司
  • 薯條
    • 鹽味
    • 胡椒鹽
    • 番茄醬

超連結

假設你想要連結到某個網站，你可以使用<a> (anchor) 元素，並在href(hypertext reference) 屬性中指定連結的網址，而在<a>元素中間的文字就是連結的文字。

1<a href="連結">顯示文字</a>

比如說我們要連結到 Google 首頁，我們可以這樣寫：

1<a href="https://www.google.com">Goolge</a>

Google

連結也可以連結到同一個網頁的某個位置。我們可以幫元素建立 id 並只要在href屬性中指定位置的 id 就可以了，而在<a>元素中間的文字就是連結的文字。

1<a href="#image">顯示文字</a>
2<h3 id="image">圖片</h3>

圖片

如果你想要插入圖片，你可以使用<img> (image) 元素，並在src (source) 屬性中指定圖片的來源，alt( alternative text) 屬性中填入圖片的敘述。如果圖片無法顯示時就會使用這個替代文字，而 Google 也會透過這個文字了解圖片內容。

1<img src="來源" alt="文字敘述" />

比如說這個是從 Google 首頁抓下來的圖片，我們可以這樣寫：

1<img
2    src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
3    alt="Google"
4/>

而連結的文字也可以是圖片，只要把<img>元素放在<a>元素裡就可以了。

1<a href="https://www.google.com/">
2    <img
3        src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
4        alt="Google"
5    />
6</a>
Google

表格

表格是用<table>元素建立的，而表格內的每一排都是<tr>(table row) 元素，而每一個格子都是<td>(table data) 元素，而表格的標題則是<th>(table header) 元素。

1<table>
2    <tr>
3        <th>國家</th>
4        <th>首都</th>
5        <th>人口</th>
6        <th>語言</th>
7    </tr>
8    <tr>
9        <td>USA</td>
10        <td>Washington D.C.</td>
11        <td>309 million</td>
12        <td>English</td>
13    </tr>
14    <tr>
15        <td>Sweden</td>
16        <td>Stockholm</td>
17        <td>9 million</td>
18        <td>Swedish</td>
19    </tr>
20</table>
國家 首都 人口 語言
USA Washington D.C. 309 million English
Sweden Stockholm 9 million Swedish

你可以使用<thead> (table header), <tbody> (table body) 和 <tfoot> (table footer) 元素來區分表格的不同部分，這樣有助於瀏覽器和搜尋引擎了解表格的結構。

1<table>
2    <thead>
3        <tr>
4            <th>項目</th>
5            <th>金額</th>
6        </tr>
7    </thead>
8    <tbody>
9        <tr>
10            <td>iPhone 11</td>
11            <td>$24,900</td>
12        </tr>
13        <tr>
14            <td>AirPods</td>
15            <td>$6,490</td>
16        </tr>
17        <tr>
18            <td>iPad Pro</td>
19            <td>$25,900</td>
20        </tr>
21    </tbody>
22    <tfoot>
23        <tr>
24            <th>總金額</th>
25            <td>$57,290</td>
26        </tr>
27    </tfoot>
28</table>
項目 金額
iPhone 11 $24,900
AirPods $6,490
iPad Pro $25,900
總金額 $57,290

表格來自 Fooish 程式技術，因為我懶得打。

合併儲存格：colspan 和 rowspan 屬性 (attributes)

合併表格可以利用 和 標籤上的 colspan 和 rowspan 屬性，colspan 是用來水平合併多行 (column) 的儲存格，rowspan 則用來垂直合併多列 (row) 的儲存格。

1 2 3
4 5 6
7

輸入框

接下來是輸入框，輸入框是用<input>元素建立的，而<input>元素有很多種類，我們可以用type屬性來指定，比如說我們要建立一個文字輸入框，我們可以這樣寫：

1<input type="text" />

如果給他加入value屬性，就可以預設輸入框的內容了：

1<input type="text" value="Hello World!" />

而如果我們要建立一個密碼輸入框，我們可以這樣寫：

1<input type="password" />

輸入的內容會被隱藏，而且會用星號或圓點代替。

如果我們要建立一個勾選框，我們可以這樣寫：

1<input type="checkbox" />

如果我們要建立一個單選框，我們可以這樣寫：

1<input type="radio" name="color" value="red" /> red<br />
2<input type="radio" name="color" value="green" /> green<br />
3<input type="radio" name="color" value="blue" /> blue

red
green
blue

記住，radio 是只能選一個的，就想你的收音機一樣，你一次只能聽一個頻道。我們在 HTML 裡面會使用name屬性來指定一組單選框，這樣瀏覽器才知道這些單選框是一組的。而 value 代表了選擇他的值，比如說我們選擇了 red，那麼瀏覽器就會把 red 的值傳給伺服器。

HTML 還有很多種輸入框，比如說日期、時間、檔案、顏色等等，足夠我們花一個影片介紹。你可以參考我之前做的這個筆記來預習。

互動元素

接下來我們要來介紹幾個有趣的互動元素

按鈕

按鈕是用<button>元素建立的，我們可以在裡面放入文字或圖片，比如說：

1<button>Click me!</button>

iframe

iframe 是用來嵌入網頁的，比如說我們要嵌入 YouTube 影片，你可以到 YouTube 影片的分享裡面，點選嵌入，然後複製貼上到你的網頁裡面：

1<iframe
2    width="560"
3    height="315"
4    src="https://www.youtube.com/embed/lOecpIqOjjY"
5    title="YouTube video player"
6    frameborder="0"
7    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
8    allowfullscreen
9></iframe>

Audio

Audio 是用來播放音樂的，我們可以用<audio>元素建立，然後用src屬性指定音樂的網址：

1<audio
2    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
3    controls
4></audio>

如果加入controls屬性，就會顯示播放器，讓使用者可以控制音樂的播放。

Video

Video 是用來播放影片的，我們可以用<video>元素建立，然後用src屬性指定影片的網址：

1<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>

同樣的如果加入controls屬性就可以讓使用者控制影片的播放。

div

最後我們要來介紹 HTML5 的版面。我們在建立網站時，通常會把網站分成幾個區塊，比如說標題、導覽列、內容、側邊欄、頁尾等等來方便我們做排版。因此你可以使用<div>元素來建立這些區塊，比如說你想建立一個提示框你可以這樣寫：

1<div>
2    <h2>注意</h2>
3    <p>感謝你的注意</p>
4</div>

注意 感謝你的注意

HTML5 版面

但是div元素只是一個區塊，並沒有說明這個區塊是什麼，因此我們可以使用 HTML5 的版面來建立這些區塊。HTML5 的版面是用<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>元素建立的，我們可以用這些元素來建立版面。比如說我們要建立一個網站的版面，我們可以這樣寫：

1<header>
2  <h1>網站標題</h1>
3</header>
4<nav>
5  <a href="#">連結 1</a>
6  <a href="#">連結 2</a>
7  <a href="#">連結 3</a>
8</nav>
9<main>
10  <section>
11   <article>
12      <h2>第一篇文章</h2>
13      <p>文章內容</p>
14    </article>
15    <article>
16      <h2>第二篇文章</h2>
17      <p>文章內容</p>
18  </section>
19  <aside>
20      <h2>側邊欄</h2>
21      <p>側邊欄內容</p>
22    </aside>
23</main>
24<footer>
25  <p>網站頁尾</p>
26</footer>

這些元素本身都和div一樣只是把元素群組起來，不會有任何視覺效果。但是可以幫入瀏覽器和搜尋引擎了解這些區塊的用途，也能讓別人更容易 Google 到你得內容。

總結

好啦，今天我們介紹了許多不同的 HTML 元素。這些已經是最常用的元素了，如果你想知道更多的元素，可以到MDN查詢。下一週我們要來介紹 CSS 來裝飾我們的網頁。

每週一早上六點，我們會在YouTube和各大Podcast平台不定時更新。如果你喜歡文字版，也歡迎在Instagram和Google新聞追蹤毛哥EM資訊密技。 我是毛哥EM，讓我們下週再見！

毛哥EM

一位喜歡把簡單的事，做得不簡單的高三生。

本文為原創文章，採 CC BY-SA 4.0 授權，轉載請註明來自毛哥EM資訊密技。
標籤：
HTML