[快速入門前端 5] 什麼是 HTML 標籤 (3)

html 前端新手村下拉式選單 image

Doris 2023-05-10 16:32:43 ‧ 1472 瀏覽

分享至

HTML 標籤

下拉選單 - select

單選選單
下拉式選單讓使用者可以從一堆選項中選擇出一個(或多個)選項。本身做為選單的容器，在 select 裡面用標籤來建立個別選項。

<select>
    <option value="dog" selected>Dog</option>
    <option value="cat">Cat</option>
    <option value="rabbit">Rabbit</option>
</select>

當然，<select>和<option>中也有一些常見的屬性：

select 常見屬性：name、disabled、required
option 常見屬性
- value：指定該選項的值，選中後會傳送給伺服器，若沒有設定則是以option中的內容為 value
- selected：預設選中此選項，功能與 input 中的 checked 屬性相同
- disabled：將該選項設定為禁用(不可選中)

多選選單
除了最常見的單選選單外，select 只要加上 multiple 屬性就會成為可多選的選單。

<select multiple>
    <option value="dog" selected>Dog</option>
    <option value="cat">Cat</option>
    <option value="rabbit">Rabbit</option>
</select>

選項分組 - option group
<optgroup>可以將同性質的選項進行分組，並以<optgroup>的label屬性設定顯示的組別名稱。

<select>
    <optgroup label="可愛動物">
        <option>dog</option>
        <option>cat</option>
        <option>rabbit</option>
    </optgroup>
    <optgroup label="危險動物">
        <option>tiger</option>
        <option>shark</option>
    </optgroup>
</select>

多行文字 - textarea

<textarea></textarea>，是可以輸入多行文字的輸入框，通常用於表單輸入，預設使用者可修改文字框大小，若文字段落超過範圍會自動換行。

rows：預設高度，rows="6" 代表預設文本框為六行高
cols：預設寬度，cols="20" 代表預設文本框為 20 個字寬

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>這是頁面標題</title>
  </head>
  <body>
	<textarea rows="6" cols="40">
    我是...
    多行....
    輸入框....
    </textarea>
  </body>
</html>

圖片 - images

若想要在網頁中顯示一張圖片，就需要用到<img>標籤；而要讓圖片正確顯示，就一定需要src屬性才能讓瀏覽器知道圖片的位置(url)。

image 常見屬性：

src：必要屬性！瀏覽器會透過 src 才知道要顯示什麼圖片
alt：圖片替代文字，當網路速度太慢、圖片檔案出錯、瀏覽器禁用圖像等原因導致圖片失效無法顯示的時候，替代文字可以描述圖像的內容
width、height：width 及 height 屬性可用於設置圖片大小(單位為 px)，若指設定高或者寬，則另一邊照原圖等比縮放；而若同時設定寬度及高度的話很可能造成圖片變形
title：於滑鼠移動到圖片時懸浮出現的文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>這是頁面標題</title>
  </head>
  <body>
    <img src="./img1.jpg" alt="" title="圖片名稱" width="200">
  </body>
</html>

音樂、影片 - audio、video

音樂(<audio>)和影片(<video>)的用法與圖片相似，除了必要的 src 屬性外，還有三個常見的屬性：

controls：顯示播放控制器
autoplay：會自動播放
loop：自動循環播放
muted：預設靜音
poster：影片封面 (只作用於 audio 元素)，屬性值為圖片 url
preload：預加載，屬性值分為 auto 自動加載、meta 只載入基本資訊、none 不加載

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>這是頁面標題</title>
  </head>
  <body>
    <audio src="./music.mp3" controls autoplay loop></audio>
    <video src="./video.mp4" controls autoplay loop></video>
  </body>
</html>

上一篇：[快速入門前端 4] 什麼是 HTML 標籤 (2) — 表格(Table) 和表單(Form)
下一篇：[快速入門前端 6] 區塊元素和超連結
系列文章列表：[快速入門前端] 系列文章索引列表