本篇將介紹身為前端工程師，你一定要知道的幾個HTML標籤。

常用的HTML標籤

根據上一篇 HTML基本格式，來向大家介紹使用於<head> 及 <body>常用的幾個標籤。

head內常用的標籤

1. title 標題

title為一個HTML文件裡面不可或缺的標籤，其有幾個功能：

瀏覽器上的網頁頁籤，會顯示title。
當使用者將網頁加入我的最愛時，會預設為title。
搜尋引擎的結果，會顯示title。

<head>
  <title>我的網站</title>
</head>

2. meta

meta 又稱作matadata，主要用來定義HTML文件裡面的細部資訊。以下舉兩個為例：

<meta charset="UTF-8"> 透過屬性chartset，定義HTML文件為UTF-8編碼。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 透過屬性name及content，讓網頁可以適用於不同螢幕尺寸的裝置。

屬性這個用法目前大家是第一次看到，根據HTML標籤的不同，可以使用的屬性也不同。使用屬性的方式就是在第1個標籤內加入屬性的設定，如：charset="UTF-8" 。

<head>
  <title>我的網站</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

body內常用的標籤

1. h1-h6 標題

h的全名是heading，為HTML預設的標題樣式。根據標題的重要性，依序為<h1>到<h6>。

<h1>通常一個網頁裡面只會有一個h1，代表最重要的標題或是網頁的主題。
<h2>為網頁裡面最常使用的標題。

在使用標題時，通常會依序使用，不會突然從<h2>跳到<h4>。

2. p 段落

p的全名是paragraph，為HTML預設的段落樣式。我們撰寫網頁的內容，可以用<p>來呈現。

3. a 超連結

a標籤為超連結，我們可以透過屬性href來顯示要呈現的連結。

<a href="https://bradyyang-tw.github.io/">Brady Yang的網站</a>

4. img 圖片

img標籤為圖片，我們可以透過屬性src來顯示要呈現的圖片。

<img src="https://bradyyang-tw.github.io/img/HsinYu.png" alt="Brady" width="500" height="600">

根據範例可以發現，<img>標籤內除了src屬性外，還有alt、width、height。

alt 當圖片路徑失效時，會顯示該文字。
width 圖片寬度。
height 圖片高度。

5. ol、ul、li 列表

ol 的全名是ordered list，顧名思義就是有排序的列表。反之，當然就也會有無排序的列表，即ul。全名為unordered list。 li 全名為list。

透過以下範例，讓我們了解<ol>、<ul>、<li>的使用方式。首先，使用<ol>或<ul>告訴瀏覽器要呈現甚麼樣的的列表，接著透過<li>將所有列表列出來。

6. table、tr、th、td 表格

table即為表格的意思。tr為table row，代表表格的每一列。th為table header代表表格標題，在HTML預設為粗體置中。 td為table data代表表格內容，在HTML預設為置左。

透過以下範例，讓我們了解<table>、<tr>、<th>、<td>的使用方式。首先，使用<table>告訴瀏覽器要呈現表格。由於表格是一列一列的，所以我們透過<tr>，並根據要呈現的內容是什麼來決定要在<tr>裡面放什麼。若是要放表格的標題就用<th>；若要放資料，就用<td>。

若大家在練習表格時，可能會發現並沒有表格的線條。那是因為雖然照著表格排列，但目前並沒有設定線條樣式。若要設定線條樣式，就要透過CSS來做設定，這個之後會再向大家介紹。

在表格上也可以使用這些標籤 <caption>、<colgroup>、<thead>、<tfoot> 及 <tbody>。

7. div 區塊

div 的全名為division，主要使用於網頁排版時，可以透過<div>定義網頁裡面特定位置要呈現什麼內容。以下範例透過CSS讓大家更好理解。

透過<div>可以讓我們在特定的區間裡面，使用不同的CSS樣式設計。

8. span

<span>與<div>的功用相當類似，只是<div>是定義整塊的區間，而<span>是針對內容長度。

這樣講大家可能還是不太清楚，我們可以看一下下面的範例，我將blue這個字透過<span>包著，並給予其CSS樣式，讓這個字可以有藍色的效果。若使用<div>換產生一個區塊，將這行文字變成三行。

因此<div>被稱作區塊元素；<span>被稱作行內元素。

總結

今天介紹了常用的HTML標籤，大家可以自己練習透過這些標籤建立一個基本的網站唷。但是標籤這麼多，我們也不可能全部都背起來，下一篇我們將介紹透過人家的網站來學習HTML。

成為前端工程師-Day5之HTML常用標籤

前端工程師養成