HTML常用標籤認識

發表於 更新於 分類於
HTML 標籤其實非常多，所以特別寫一篇記錄一下常用的標籤有哪些，順便做一下解釋紀錄...

前言

HTML 標籤其實非常多，所以特別寫一篇記錄一下常用的標籤有哪些，順便做一下解釋紀錄…

HTML標籤

註解寫法

在 HTML 上的註解內容是可以在開發者工具中看見的，你可以試著按下 F12 看看我在這 HTML 中藏了什麼。

1
<!-- -->

換行符號

簡單來講就是斷行。

1
<br>

標題

標題主要使用的標籤 h，而 h 的標籤共有六種。

1
<h1>這是H1</h1>
1
<h2>這是H2</h2>
1
<h3>這是H3</h3>
1
<h4>這是H4</h4>
1
<h5>這是H5</h5>
1
<h6>這是H6</h6>

※使用 h1 標籤時須注意網頁上頁面上只會有一個 h1 標籤，否則將會導致搜尋引擎爬蟲搞不懂哪一個是這個頁面上最重要的標題。

超連結

超連結本身預設樣式為藍色然後帶有底線，但是在我的部落格超連結會是另一種顏色。

範例:
這是一段超連結

1
<a href="#" target="">這是一段超連結</a>

其中 target 有四種屬性可用，但這邊只講常用的兩種屬性。

開啟新視窗↓

範例:
開啟新視窗

1
<a href="#" target="_blank">開啟新視窗</a>

同一個視窗下開啟連結(預設)↓

範例:
同一個視窗下開啟連結

1
<a href="#" target="_self">同一個視窗下開啟連結</a>

縮寫

這個 HTML 標籤最常用於英文縮寫上。↓

範例:
你好MyName，這是我名子。

1
你好<abbr title="王曉明">MyName</abbr>，這是我名子。

地址

顧名思義就是將這個區塊變成地址，樣式會是斜體字。↓

範例:
我家住在

台灣

1
我家住在<address>台灣</address>

影音

這個影音標籤是於 HTML5 才加入的標籤，可用於撥放音樂。↓

音樂

範例:

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls>你的瀏覽器不支援HTML5</audio>

audio 本身也提供了四種屬性。

顯示播放控制面板↓

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls>你的瀏覽器不支援HTML5</audio>

播放完畢後自動重新循環↓

範例:

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" loop controls>你的瀏覽器不支援HTML5</audio>

自動播放↓

這個放上範例會吵死人…

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" autoplay controls>你的瀏覽器不支援HTML5</audio>

加載完畢就播放↓

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" preload controls>你的瀏覽器不支援HTML5</audio>

如果你要一進來就自動播放又自動循環，但不想顯示播放控制面板那就這樣寫↓

1
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls loop autoplay>你的瀏覽器不支援HTML5</audio>

影片

大概就跟看 youtube 一樣觀念…

範例:

1
<video src="http://www.w3school.com.cn/i/movie.ogg" controls>你的瀏覽器不支援HTML5</video>

參數基本上與音樂標籤差不多，但 video 可以測試高寬。

範例:

1
<video src="http://www.w3school.com.cn/i/movie.ogg" controls width="100px" height="100px">你的瀏覽器不支援HTML5</video>

如果要能夠自動播放，播放完畢就重複就這樣寫

1
<video src="http://www.w3school.com.cn/i/movie.ogg" controls loop autoplay>你的瀏覽器不支援HTML5</video>

按鈕

按鈕是一個常見使用的標籤，舉凡註冊表單、登入表單都會看到這個標籤。

範例:

1
<button type="button">這是一個按鈕</button>

本身 button 有三種 type

預設按鈕(沒功能)↓

1
<button type="button">這是一個按鈕</button>

送出&提交按鈕，主要用於 form 表單的搭配送出↓

1
<button type="submit"></button>

重置↓

1
<button type="reset"></button>

切版用

目前主要切版所使用的標籤為 <div>

1
<div>...</div>

水平線

範例:

1
<hr>

段落

舉凡文章就是使用 p 標籤來包覆。

範例:

這是一篇文章 文字很長 文字很長 文字很長 文字很長文字很長 

1
2
3
4
5
6
7
<p>
這是一篇文章
文字很長
文字很長
文字很長
文字很長文字很長
</p>

上下標

上下標滿常見用於化學標記或數學標記。

上標樣式:
Co2

下標樣式:
24

1
2
2<sup>2</sup>
2<sub>2</sub>

項目清單

最常用於清單、功能及商品清單，主要有兩種模式 ul 及 ol。

ul範例:

  • 項目清單1
  • 項目清單2
  • 項目清單3
  • 項目清單4
1
2
3
4
5
6
<ul>
  <li>項目清單1</li>
  <li>項目清單2</li>
  <li>項目清單3</li>
  <li>項目清單4</li>
</ul>

ol範例:

  1. 項目清單1
  2. 項目清單2
  3. 項目清單3
  4. 項目清單4
1
2
3
4
5
6
<ol>
  <li>項目清單1</li>
  <li>項目清單2</li>
  <li>項目清單3</li>
  <li>項目清單4</li>
</ol>

表格

表格常見於用於顯示數據，主要撰寫 table 包覆著 thead、 tbody 及 tfoot。
tr 是一個段行的概念，所以當有 tr 就會被斷掉，tr 就是定義行的標籤意思。
td 代表著內容，所以只要是內容都必須放置在 td 中。
th 是標題且會預設居中，所以標題文字都會採用 th 作包覆。

可惜這邊不能寫範例，寫上範例版型會怪怪的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table>
  <thead>
    <tr>
      <th>這是標題1</th>
      <th>這是標題2</th>
      <th>這是標題3</th>
      <th>這是標題4</th>
      <th>這是標題5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>這是內容1</td>
      <td>這是內容2</td>
      <td>這是內容3</td>
      <td>這是內容4</td>
      <td>這是內容5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>這是表格結尾</td>
      <td>這是表格結尾</td>
      <td>這是表格結尾</td>
      <td>這是表格結尾</td>
      <td>這是表格結尾</td>
    </tr>
  </tfoot>
</table>

網頁三劍客(表單)

表單元素在網頁上俗稱網頁三劍客，但是這邊要講的東西就比較多。

表單(form)

1
2
3
<form action="" method="post">
            
</form>

action 代表要將資料傳送到哪裡，method 代表傳送方式，有 post、 get 兩種。

標籤(label)

主要用於定義 input 欄位的，其主要改用於 UX (使用者體驗)體驗，當使用者點擊 label 時將會自動跳至相對應 input 欄位。

1
<label for="account">account</label>

主要參數 for，用於對應 input 的 id。

欄位(input)

欄位的屬性較多，所以主要只會講常用的 type。

按鈕欄位:

1
<input type="button" value="這是input按鈕">

勾選欄位:

1
<input type="checkbox">

選色欄位:

1
<input type="color">

日期欄位:

1
<input type="date">

信箱:

1
<input type="email">

檔案上傳:

1
<input type="file">

隱藏欄位(這欄位隱藏了，看不到很正常):

1
<input type="hidden">

純數字欄位:

1
<input type="number">

密碼欄位:

1
<input type="password">

單選欄位:

1
<input type="radio">

範圍欄位:

1
<input type="range">

重置:

1
<input type="reset" value="重置">

查詢欄位:

1
<input type="search">

提交/送出按鈕欄位:

1
<input type="submit">

電話欄位:

1
<input type="tel">

純文字/一般欄位:

1
<input type="text">

時間欄位:

1
<input type="time">

組合三劍客 (form、label、input)

在這邊需注意，若 radio 要單選的話就要加入 name 這樣子才會變成單選。
以下表單僅為範例，所以並不會將資料送至哪裡。

是 不是 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="#" method="post">
  <label for="account">account</label>
  <input type="text" id="account">
  <label for="password">password</label>
  <input type="text" id="password">
  <label for="password">你吃葷嗎?</label>
  <input type="radio" name="gender"> 是
  <input type="radio" name="gender"> 不是
  <label for="tel">連絡電話</label>
  <input type="tel" id="tel">
  <input type="submit">
  <input type="reset" value="重置">
</form>

多行輸入欄位

一般來講普通的文字欄位是單行輸入，並不能做多行輸入，所以當有多行輸入需求時就必須使用另一種 HTML 標籤。

範例:

1
2
3
<textarea rows=5 cols=10>
這是多行表單，可以段行輸入。
</textarea>

結尾

HTML 標籤非常的多，並不是每一個都會使用，所以僅列出常用的這些標籤，僅需要記著這些標籤就可以應付大部分7~8成的東西，剩下兩成需要的時候在查就好了。

文章參考:https://www.w3schools.com

可以給點牡蠣。
Google AD