HTML 媒体、表单和音视频笔记

抹泪的知更鸟

于 2022-01-11 18:05:30 发布

阅读量1.2k

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html 媒体音视频

本文链接：https://blog.csdn.net/qq_51596354/article/details/122438332

版权

本文详细介绍了HTML5中关于区块元素、内联元素、表单和音视频的使用，包括各种案例展示，如不同类型的表单元素、音频视频标签的运用，并给出了相关作业以巩固学习，如创建登录界面、展示PDF文件等。

摘要由CSDN通过智能技术生成

学习目标

掌握HTML区块原色和内联元素的特征 重点 难点
掌握HTML表单和表单元素的使用 重点
掌握HTML音视频的使用
掌握HTML5缓存的使用

HTML 区块内联

HTML的所有元素可以划分为 区块元素 和 内联元素

	内联元素	区块元素
宽度	标签内容的宽度	和上级元素的宽度一样宽
高度	标签内容的高度	标签内容的高度
显示	多个内联元素显示在同一行	多个区块元素换行显示
控制	宽高不可控制	宽高可控制
代表	`<span>`、`<b>`、`<img>`、`<a>`	`<div>`、`<table>`、`<ul>`、`<li>`

最原始的区块元素是div，最原始的内联元素的span

案例01：区块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<img src="../image/1.webp" height="50" align="left" >
			<div>
				作者：<ins>李白</ins>
			</div>
			<div>发布时间：<ins>年12月1日</ins></div>
		</div>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YsBjM6Nm-1641895236327)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110113610934.png)]$

案例02：内联元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>
			<img src="../image/1.webp" height="50" align="center" >
			<span>
				作者：<ins>李白</ins>
			</span>
			<span>发布时间：<ins>年12月1日</ins></span>
		</span>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8fERMbVt-1641895236328)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110113850057.png)]$

HTML 表单

HTML 表单用于收集不同类型的用户输入。并且提交数据

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,如：
1. 文本框(input)
2. 文本域(textarea)
3. 下拉列表(select-option)
4. 单选框(radio)
5. 复选框(checkbox)等等。

HTML 表单标签

标签	描述
`<form>`	供用户输入的表单
`<input id="" list="">`	输入域
`<textarea>`	文本域 (一个多行的输入控件)
`<label for="">`	`<input>` 元素标签的输入标题
`<fieldset>`	一组相关的表单元素使用外框包含起来
`<legend>`	`<fieldset>`元素的标题
`<select>`	下拉选项列表
`<optgroup label="标题">`	下拉选项列表的选项组
`<option>`	下拉选项列表中的选项
`<button>`	定义一个点击按钮
`<datalist id="">`	指定一个预先定义的输入控件选项列表

<input>属性值类型

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 “浏览…” 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

案例03

修改页面的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改个人信息</title>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0" width="50%" align="center">
			<caption>
				<h3 align="center">修改个人信息的界面</h3>
			</caption>
			<tr>
				<td align="center">
					<fieldset align="center">
						<legend align="center"><strong>个人信息</strong></legend>
						<label for="username">姓名:</label>
						<input type="text" id="username" name="username" placeholder="请输入用户名" />
						<br>
						<label for="email">邮箱:</label>
						<input type="email" id="email" name="email" placeholder="请输入邮箱" />
					</fieldset>
				</td>
			</tr>
		</table>
		<table border="0" cellpadding="10" cellspacing="0" align="center">
			<tr>
				<td>
					<b>性&nbsp;&nbsp; 别:</b>
				</td>
				<td>
					<input type="radio" name="gender" id="Male" value="Male" />
					<label for="Male">男</label>
					<input type="radio" name="gender" id="Female" value="Female" />
					<label for="Female">女</label>
				</td>
			</tr>
			<tr>
				<td><b>爱&nbsp;&nbsp; 好:</b></td>
				<td>
					<input type="checkbox" name="hobby" id="sing"/>
					<label for="sing">唱歌</label>
					<input type="checkbox" name="hobby" id="dance"/>
					<label for="dance">跳舞</label>
					<input type="checkbox" name="hobby" id="ball"/>
					<label for="ball">打球</label>
					<input type="checkbox" name="hobby" id="visit"/>
					<label for="visit">旅行</label>
				</td>
			</tr>
			<tr>
				<td>
					<label>
						<b>课&nbsp;&nbsp; 程:</b>
					</label>
				</td>
				<td>
					<select name="html">
						<option value ="请选择">请选择</option>
						<option value="html">html</option>
						<option value="java">java</option>
						<option value="css">css</option>
						<option value="mysql">mysql</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<b>浏览器:</b>
				</td>
				<td>
					<input list="browsers" />
					<datalist id="browsers">
						<option value ="chrom">chrom</option>
						<option value ="firox">firox</option>
						<option value ="QQBrowser">QQBrowser</option>
						<option value ="Edg">Edg</option>
						<option value ="Internet">Internet</option>
					</datalist>
				</td>
			</tr>
			<tr>
				<td>
					<button type="button">提交</button>
				</td>
				<td>
					<button type="reset">重置</button>
				</td>
			</tr>
		</table>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OIO7C873-1641895236329)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110153629648.png)]$

案例04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	</head>
	<body>
		<table cellpadding="10" cellspacing="0" border="0">
			<caption>
				<h3>欢迎来到注册页面</h3>
			</caption>
			<tr>
				<td>
					<label for="username">
						<b>用户姓名:</b>
					</label>
				</td>
				<td>
					<input type="text" name="username" id="username" placeholder="请输入用户名" />
				</td>
				<td>
					*<small>必填</small>
				</td>
			</tr>
			<tr>
				<td>
					<label for="password">
						<b>用户密码:</b>
					</label>
				</td>
				<td>
					<input type="password" name="password" id="password" placeholder="请输入用户密码" />
				</td>
				<td>
					*<small>必填</small>
				</td>
			</tr>
			<tr>
				<td>
					<label for="password1">
						<b>确定密码:</b>
					</label>
				</td>
				<td>
					<input type="password" name="password1" id="password1" placeholder="请确定密码" />
				</td>
				<td>
					*<small>必填</small>
				</td>
			</tr>
			<tr>
				<td>
					<b>性&emsp;&emsp;别:</b>

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 媒体、表单和音视频笔记

HTML 表单和音视频笔记学习目标HTML 区块内联案例01：区块元素案例02：内联元素HTML 表单案例03案例04总结HTML 音视频HTML 音视频`` 元素案例05`` 元素案例06``和``案例07HTML5 语义元素HTML5 已移除元素作业显示如下HTML所有常用的输入框实现如下登录界面实现如下注册效果（提示：用表格）在页面上展示任意一个pdf文件实现如下在线考试系统学习目标掌握HTML区块原色和内联元素的特征重点难点掌握HTML表单和表单元素的使用重点掌握HTML音视频的使用
复制链接

扫一扫