摘要：
1.select下拉框
2.textarea文本域
3.iframe小頁面
4.video視頻控件
5.audio音頻控件
6.input的控件：list（模糊查詢）、email、datetime-local、week
下拉框：select
裏面的每一項用option
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
籍貫:<select name="" id="">
<option value="">--請選擇--</option>
<option value="浙江">浙江</option>
<option value="四川">四川</option>
<option value="廣東">廣東</option>
</select>
</body>
</html>
文本域：textarea
範圍：rows確定行數，cols確定列數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
說說你的想法:<br />
<textarea rows="3" cols="24">
</textarea>
</body>
</html>
框架的另一個標籤：iframe(小頁面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<iframe src="text.html" width="400px" height="130px"></iframe>
<iframe src="text.html" width="400px" height="130px"></iframe>
</body>
</html>
HTML5和HTML4的區別
- Html5兼容性更好，不同設備之間的。
- Html5增加了很多具有實際意義的標籤
多媒體控件
插入視頻：video
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video controls="controls" height="300" width="500">
<source src="img/川師公寓.mp4" type="video/mp4"></source>
</video>
</body>
</html>
controls：是否顯示控件（默認不顯示）
type：視頻是什麼格式的
添加音頻：audio
controls：是否顯示控件（默認不顯示）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls="controls" src="img/陳奕迅 - 愛情轉移(國).mp3"></audio>
</body>
</html>
適用於模糊查詢的input控件：list
list 屬性引用數據列表，其中包含輸入字段的預定義選項。可以自己再輸入dataList控件以表的形式呈現數據
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
檢索:<input list="data"/>
<datalist id="data">
<option>名人</option>
<option>憫人</option>
<option>鳴人</option>
<option>佐助</option>
</datalist>
</body>
</html>
list的值和id的值要一樣，關聯起來
只輸入人，可以模糊查詢出來名人、憫人、鳴人
【html的註釋：<!-- -->】
input控件：
（1）用於填寫郵箱校驗：email
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="text" method="post">
郵箱:<input type="email" />
<input type="submit">
</form>
</body>
</html>
（2）時間（年月日+時分）：datetime-local
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="datetime-local" />
</body>
</html>
（3）看一年的第幾周：week
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="week" />
</body>
</html>
HTML部分簡單學習就到這裏，接下來學習CSS！