單選選單
下拉式選單讓使用者可以從一堆選項中選擇出一個(或多個)選項。 本身做為選單的容器,在 select 裡面用 標籤來建立個別選項。
<select>
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="rabbit">Rabbit</option>
</select>
當然,<select>
和<option>
中也有一些常見的屬性:
option
中的內容為 value多選選單
除了最常見的單選選單外,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>
,是可以輸入多行文字的輸入框,通常用於表單輸入,預設使用者可修改文字框大小,若文字段落超過範圍會自動換行。
rows="6"
代表預設文本框為六行高cols="20"
代表預設文本框為 20 個字寬<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>這是頁面標題</title>
</head>
<body>
<textarea rows="6" cols="40">
我是...
多行....
輸入框....
</textarea>
</body>
</html>
若想要在網頁中顯示一張圖片,就需要用到<img>
標籤;而要讓圖片正確顯示,就一定需要src
屬性才能讓瀏覽器知道圖片的位置(url)。
image 常見屬性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>這是頁面標題</title>
</head>
<body>
<img src="./img1.jpg" alt="" title="圖片名稱" width="200">
</body>
</html>
音樂(<audio>
)和影片(<video>
)的用法與圖片相似,除了必要的 src 屬性外,還有三個常見的屬性:
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] 區塊元素和超連結
系列文章列表:[快速入門前端] 系列文章索引列表