（3）HTML学习（select、textarea、iframe、video、audio、list、email、datetime、week）（终）

最新推荐文章于 2024-07-18 20:18:47 发布

书文的学习记录本

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量212

点赞数

分类专栏：前后端学习文章标签： html

本文链接：https://blog.csdn.net/qq_43935969/article/details/104277329

版权

前后端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

摘要：

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！

书文的学习记录本

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（3）HTML学习（select、textarea、iframe、video、audio、list、email、datetime、week）（终）

下拉框：select里面的每一项option<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 籍贯:<select name="" id=""&gt...
复制链接

扫一扫