EP.2 5分鐘完結HTML

Jun 5, 2023 · 3 分鐘長 · HTML CSS JavaScript ·

分享到:

哈囉大家好，我是毛哥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  <b>粗體</b>
3  <i>斜體</i>
4  <s>刪除線</s>
5  <u>底線</u>
6  H<sup>+</sup>
7CO<sub>2</sub>
8</p>

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

粗體斜體~~刪除線~~ 底線 H⁺ CO₂

空白換行

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

1橫線<hr />
2換行<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>

有序清單

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

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

巢狀清單

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

 1<ul>
 2         <li>玉米濃湯</li>
 3         <li>鮪魚吐司</li>
 4         <li>薯條
 5            <ul>
 6              <li>鹽味</li>
 7              <li>胡椒鹽</li>
 8              <li>番茄醬</li>
 9            </ul>
10         </li>
11     </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 src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">

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

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

表格

表格是用<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		6

輸入框

接下來是輸入框，輸入框是用<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 width="560" height="315" src="https://www.youtube.com/embed/lOecpIqOjjY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Audio

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

1<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls></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，讓我們下週再見！