HTML复习之表格标签,表单标签,音频标签
表格标签
基础介绍
(1)作用：有条理的呈现数据，尤其是后台数据
(2)组成：
标签：
table：表格
tr：行，嵌套在table中
th：表头单元格->居中加粗
td：单元格，嵌套在tr中
划分区域：
thead：表格的页眉
tbody：表格的主体
tfoot：表格的页脚
了解：
caption：表题
属性：
border：边框
cellspacing：单元格之间的空白
cellpadding：内容和单元格边沿之间的空白
(3)合并单元格：***
A.确定跨行还是跨列
B.找到目标单元格，写合并方式：
目标单元格：
跨行->最上面单元格；
跨列->最左面单元格
合并方式：
跨行->rowspan='合并单元格的个数'；
跨列->colspan='合并单元格的个数'
C.删除多余的单元格
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表格标签：
作用：有条理的呈现数据，尤其是后台数据
组成：
标签：
table：表格
tr：行，嵌套在table中
th：表头单元格->居中加粗
td：单元格，嵌套在tr中
划分区域：
thead：表格的页眉
tbody：表格的主体
tfoot：表格的页脚
了解：
caption：表题
属性：
border：边框
cellspacing：单元格之间的空白
cellpadding：内容和单元格边沿之间的空白
合并单元格：***
确定跨行还是跨列
找到目标单元格，写合并方式：
目标单元格：
跨行->最上面单元格
跨列->最左面单元格
合并方式：
跨行->rowspan='合并单元格的个数'
跨列->colspan='合并单元格的个数'
删除多余的单元格
-->
<!-- 表格 -->
<table border="1" cellspacing="0" cellpadding="5">
<!-- 表格表题 -->
<caption>员工信息表</caption>
<!-- 行 -->
<thead>
<tr>
<!-- 表头单元格 -->
<th>编号</th>
<th>姓名</th>
<th>薪资</th>
<th>兴趣</th>
</tr>
</thead>
<tbody style="text-align: center;">
<tr>
<!-- 单元格 -->
<td>1</td>
<td>tom</td>
<td>10000</td>
<td>唱歌</td>
</tr>
<tr>
<!-- 单元格 -->
<td>2</td>
<!-- 跨列 -->
<td colspan="2">jack,13000</td>
<!-- <td>13000</td> -->
<td>玩游戏</td>
</tr>
<tr>
<!-- 单元格 -->
<td>3</td>
<td>maria</td>
<td>11000</td>
<!-- 跨行 -->
<td rowspan="2">唱歌</td>
</tr>
<tr>
<!-- 单元格 -->
<td>4</td>
<td>lucy</td>
<td>15000</td>
<!-- <td>唱歌</td> -->
</tr>
</tbody>
</table>
</body>
</html>
表单标签
基础介绍
(1)作用：收集、传递用户信息
(2)组成：
表单域
表单控件
提示信息
(3)form属性：
A.action：指定接收并处理表单数据的服务器程序的地址
B.method：设置表单数据的提交方式，get或post
get：浏览器地址栏，url?key=val&key=val&...
post：请求正文
key=val&key=val&...
C.name：指定表单的名称
(4)输入表单input：
type：
text：文本输入框
password：密码输入框
button：普通按钮，需设置value属性
submit：提交按钮
reset：重置按钮
radio：单选按钮
checkbox：复选框
file：文件上传框
hidden：隐藏框
value：设置input元素值
placeholder：设置提示信息
maxlength：最大长度
name：定义input元素名称
disabled：禁用
readonly:只读
checked：默认选中->单选按钮或复选框
(3)下拉表单select：
使用场景：若有多个选项供用户选择，节省页面空间，使用select定义下拉列表
属性：name：便于数据提交
标签：
option：下拉项
value：下拉项值
disabled：禁用
selected：默认选中
(4)文本域表单textarea：
使用场景：
需要输入很多文字，比如留言版等
属性：
rows：显示的行数
cols：每行字符数
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单：
form：
收集、传递用户信息
属性：
action：指定接收并处理表单数据的服务器程序的地址
method：设置表单数据的提交方式，get或post
get：浏览器地址栏，url?key=val&key=val&...
post：请求正文
key=val&key=val&...
name：指定表单的名称
表单控件：
输入表单：input
下拉表单：select
文本域表单：textarea
-->
<form action="3 图像标签.html" method="post">
<!--
输入表单input：
type：
text：文本输入框
password：密码输入框
button：普通按钮，需设置value属性
submit：提交按钮
reset：重置按钮
radio：单选按钮
checkbox：复选框
file：文件上传框
hidden：隐藏框
value：
设置input元素值
placeholder：
设置提示信息
maxlength：
最大长度
name：
定义input元素名称
disabled：
禁用
readonly:
只读
checked：
默认选中->单选按钮或复选框
-->
<table>
<tr>
<td>用户名：</td>
<td> <input type="text" name="userName" placeholder="请输入姓名" maxlength="6" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="userPwd" placeholder="请输入密码" maxlength="6" />
</td>
</tr>
</table>
性别：
<!--
单选按钮：
name：同组元素，互斥 sex=on
value：单选按钮值 sex=male | female
checked：默认选中
扩展：
lebal标签，和表单元素搭配使用，提高用户体验
label的for属性和input的id属性：属性值一致
-->
<label for="male">男</label>
<input id="male" type="radio" name="sex" value="male" checked />
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="female" />
<br>
<!--
复选框：
属性同单选按钮
-->
<label for="Java">Java</label>
<input id="Java" type="checkbox" name="subject" value="Java" />
<input type="checkbox" name="subject" value="Web" checked />Web
<input type="checkbox" name="subject" value="UI" checked />UI
<br>
<input type="color" />
<br>
<input type="date" />
<br>
<!--
文件上传框：
上传文件
-->
<input type="file" />
<br>
<!--
隐藏框：
发送隐藏内容
-->
<input type="hidden" />
<br>
<!--
下拉表单select：
使用场景：
若有多个选项供用户选择，节省页面空间，使用select定义下拉列表
属性：
name：便于数据提交
标签：
option：
下拉项
value：下拉项值
disabled：禁用
selected：默认选中
-->
省份：
<select name="province">
<option disabled selected>请选择</option>
<option value="hn">河南省</option>
<option value="hb">湖北省</option>
<option value="gd">广东省</option>
</select>
<br>
<!--
文本域表单textarea：
使用场景：
需要输入很多文字，比如留言版等
属性：
rows：显示的行数
cols：每行字符数
-->
<textarea rows="5" cols="20">
......
</textarea>
<br>
<!--
按钮：
button：普通按钮，设置value属性
submit：提交按钮
reset：重置按钮
-->
<input type="reset" />
<input type="submit" />
</form>
</body>
</html>
音频视频
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
音频：
audio：定义声音
-->
<!-- 绝对路径 -->
<audio controls="controls">
<source src="https://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
</audio>
<!-- 视频 -->
<video width="200" height="100" controls="controls" autoplay="autoplay">
<source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
</video>
</body>
</html>
