KU地址提供》什么是HTML 标签

news/2025/2/12 15:09:08/

HTML 标签

下拉选单- select

单选选单
下拉式选单让使用者可以从一堆选项中选择出一个(或多个)选项【KU地址K͜W͜9㍠N͜E͜T͜娜娜提供】。本身做为选单的容器，在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 ：自动循环播放

<!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>