iT邦幫忙

1

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

  • 分享至 

  • xImage
  •  

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] 區塊元素和超連結
系列文章列表:[快速入門前端] 系列文章索引列表


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言