用户投稿HTML 标籤
下拉选单 - select
单选选单
下拉式选单让使用者可以从一堆选项中选择出一个(或多个)选项。 本身做为选单的容器，在 select 里面用 标籤来建立个别选项。
<select> <option value="dog" selected>Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option></select>当然，<select>和<option>中也有一些常见的属性：
option中的内容为 valueselected：预设选中此选项，功能与 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="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 属性外，还有三个常见的属性：
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] 区块元素和超连结
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
