一、常用标签
（1）音频标签
<audio src="音频的路径" controls autoplay width="宽度" height="高度">
</audio>
（2）视频标签：
<video src="视频的路径" controls autoplay width="宽度" height="高度"></video>
controls属性：controls 属性规定浏览器应该为音频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。浏览器控件应该包括：
①播放
②暂停
③定位
④音量
⑤全屏切换
⑥字幕（如果可用）
⑦音轨（如果可用
autoplay属性：autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性，音频将自动播放。
注意： < a u d i o > 和 < v i d e o > <audio>和<video> <audio>和<video>标签内部插入的文字只有当浏览器不支持该音视频时才会显示给用户看。
（3）source标签：
< s o u r c e > <source> <source> 标签为媒体元素（比如 < a u d i o > <audio> <audio>和 < v i d e o > <video> <video>）定义媒体资源。
<
s
o
u
r
c
e
>
<source>
<source> 标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
【详细解释点击一下此词条】
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
二、表格
（1）基本结构
<table>
<tr>
<th></th> <!-- 表格的列标题-->
</tr>
<tr> <!--表示行-->
<td></td> <!--表示单元格-->
</tr>
</table>
A、 < t a b l e > < / t a b l e > <table></table> <table></table>的常用属性
(1)border：边框线,默认为0
(2)width： 宽度
(3)height: 高度
(4)align：表格在网页中的对齐方式
(5)bgcolor：表格的背景色
(6)background：背景图像
(7)cellspacing：单元格之间的距离
(8)cellpadding：单元格边线与单元格内容之间的距离(内补白)
B、 < t r > < t r / > <tr><tr/> <tr><tr/>的常用属性
(1)height： 表示行高
(2)align：水平对齐方式(left、center、right)
(3)valign：垂直对齐方式(top、center、bottom)
(4)bgcolor：表格的背景色
(5)background：背景图像
C、 < t d > < t d / > <td><td/> <td><td/>的常用属性
(1)width：单元格的宽度
(2)align：水平对齐方式(left、center、right)
(3)valign：垂直对齐方式(top、center、bottom)
(4)bgcolor：表格的背景色
(5)background：背景图像
(6)height：单元格的高度
(7)合并单元格的属性
a、跨列: colspan="跨的列数"
b、跨行：rowspan="跨的行数"
（2）表格标题标签
(1)<caption>表格标题内容</caption>
（3） 语义标签
表示某种含义,没有具体的显示效果。
(1)<thead></thead>：表示表格头部
(2)<tbody></tbody>：表示表格的主体
(3)<tfoot></tfoot>：表示表格的页脚
三、表单
1、什么是表单？
(1)收集用户的信息(登录、调查问卷、注册等)
(2)将信息发送给后台服务器
2、表单由什么组成？
<form name="表单的名称" action="远程服务器的URL" method="提交信息的方式">
表单控件
</form>
3、表单控件的种类
<label></label>：显示提示信息
(1)input控件
name：是控件的名称,可以通过名称来获得控件中的值
id：控件的唯一标识,不能重复
value：控件中的值
placeholder：提示信息，当用户输入时会自动消失
size：标识文本框的宽度
readonly：只读属性
disabled：控件是否可用
maxlength：可用输入的最多字符数
checked：用于单选、复选按钮，表示按钮被选中
A、单行文本框：<input type="text" />
<input type="text" name="username" id="username" value="控件的值"/>
B、密码框：<input type="password"/>
C、单选按钮：<input type="radio/>
D、数字框：<input type="number" />
E、日期：<input type="date"/>
F、日期时间：<input type="datetime-local"/>
G、复选框：<input type="checkbox" />
H、颜色框：<input type="color" />
I、文件选择框：<input type="file" />
J、隐藏文本框：<input type="hidden"/> 可以向服务器传递数据,但是该数据在页面中不显示
K、电子邮箱：<input type="email"/>
L、提交按钮：将表单控件的值提交给'action'属性给定的远程服务器
<input type="submit" value="按钮上的文字"/>
或
<button type="submit">按钮上的文字</button>
N、重置按钮：将表单控件的值恢复到初始状态
<input type="reset" value="按钮上的文字"/>
或
<button type="reset">按钮上的文字</button>
M、普通按钮：
<input type="button" value="按钮上的文字"/>
或
<button type="button">按钮上的文字</button>
(2)textarea控件：文本区，可以编辑多行、多列数据
<textarea cols="列数" rows="行数"></textarea>
(3)select控件：下拉列表框
<select multiple>
<option value="值">列表项</option>
<option value="值">列表项</option>
<option value="值">列表项</option>
<option value="值">列表项</option>
</select>
multiple属性：可以多选
4、语义标签
只是表达某种含义,没有特殊的显示效果
<header>头部</header>：表示的是页面的头部信息
<footer>尾部</footer>：表示页面的尾部信息
<nav>导航栏</nav>：表示的是页面的导航部分
<section>具体的内容</section> ：表示页面的主体内容
<article>文章</article>：表示页面的文章
<aside>内容的侧边栏</aside> ：表示页面的内容侧边栏
5、新增的表单控件的属性
placeholder：提示信息,提示用户如何输入,不是控件的value属性值
required：表示必须要填信息。使用该属性的控件要放在<form>中，当点击<form>中的submit按钮时，该属性才起作用
autofocus：自动获得鼠标焦点。一个页面只能有一个控件具有该属性
pattern：对用户输入的值进行验证的，对应的是正则表达式
multiple：表示可以输入多个。常用于email控件
novalidate：取消验证。required属性失效
maxlength：输入的最大长度
minlength：输入的最小长度
max：最大值
min：最小值
step：数字间隔
四、示例
1、音频视频标签示例
①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--controls属性是控制面板 autoplay属性是自动播放-->
<audio src="../video/EXO - 지나갈 테니 (Been Through) (片段).mp3" controls autoplay width="200" height="50"></audio>
<source src=""/>
<br/><br/>
<video src="../video/时代少年团2021火力全开演唱会时代少年团2021火力全开-综艺-高清独家在线观看-bilibili-哔哩哔哩 - 联想浏览器 2021-12-15 19-16-33.mp4"
controls autoplay width="200" height="100"></video>
</body>
</html>
②效果展示：
2、表格练习示例
(1）①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>表格</title>
</head>
<body >
<table border="1" width="300" height="200" align="center" background="../images/001.png" >
<caption>人物信息表</caption>
<tr height="60">
<th width="100">学号</th>
<th width="100">姓名</th>
<th width="100">性别</th>
<th width="100">地址</th>
<th width="200" colspan="2">操作</th>
</tr>
<tr align="center" valign="center">
<td>001</td>
<td>贾宝玉</td>
<td>男</td>
<td>红楼梦</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center" valign="center">
<td >002</td>
<td>林黛玉</td>
<td>女</td>
<td>红楼梦</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center" valign="center">
<td>003</td>
<td>王熙凤</td>
<td>女</td>
<td>红楼梦</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</table>
</body>
</html>
②效果展示：
(2）①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨行跨列表格操作</title>
</head>
<body>
<table border="1" align="center" bgcolor="#ccc">
<tr>
<td>
手机卡充值，IP卡充值
</td>
<td colspan="2">办公设备和文具</td>
</tr>
<tr>
<td rowspan="2">各种卡的总汇</td>
<td>铅笔</td>
<td>彩笔</td>
</tr>
<tr>
<td>打印</td>
<td>刻录</td>
</tr>
</table>
</body>
</html>
②效果展示：
(3）①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" style="text-align: center;" align="center" >
<thead>
<tr>
<td colspan="3" bgcolor="pink">顶部</td>
</tr>
</thead>
<tbody>
<tr>
<td width=100 height=150 colspan="1" rolspan="6" bgcolor="green">中左</td>
<td width=150 height=150 colspan="2"rolspan="5" bgcolor="blue">中右</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" bgcolor="yellow">底部</td>
</tr>
</tfoot>
</table>
</body>
</html>
②效果展示：
(4）①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" style="text-align: center;" align="center" cellspacing="0">
<tr bgcolor="green">
<th>课程</th>
<th>成绩</th>
<th>学分</th>
<th>学期</th>
<th>备注</th>
</tr>
<tr bgcolor="#adccc">
<td>大学英语Ⅰ</td>
<td>90</td>
<td>2.0</td>
<td>2011秋季</td>
<td>无</td>
</tr>
<tr>
<td>高等数学Ⅰ</td>
<td>94</td>
<td>2.0</td>
<td>2022秋季</td>
<td>无</td>
</tr>
<tr bgcolor="#adccc">
<td>大学计算机1</td>
<td>99</td>
<td>2.0</td>
<td>2022秋季</td>
<td>无</td>
</tr>
<tr>
<td>大学英语Ⅱ</td>
<td>92</td>
<td>2.0</td>
<td>2022秋季</td>
<td>无</td>
</tr>
<tr bgcolor="#adccc">
<td>高等数学Ⅱ</td>
<td>99</td>
<td>2.0</td>
<td>2022秋季</td>
<td>无</td>
</tr>
<tr>
<td>大学计算机2</td>
<td>90</td>
<td>2.0</td>
<td>2022秋季</td>
<td>无</td>
</tr>
</table>
</body>
</html>
②效果展示：
3、表单练习示例
①代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body style="text-align: center;">
<form action="#">
<label>
用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"/>
</label>
<br/><br/>
<label>
密 码：<input type="password" placeholder="请输入密码"/>
</label>
<br/><br/>
<label>
性 别：
<input type="radio"name="gender"value="男" checked id="s1"/>
<label for="s1">男</label>
<input type="radio"name="gender"value="女" id="s2"/>
<label for="s2">女</label>
</label>
<br/><br/>
<label>
年 龄：
<input type="number" value="1" min="1"max="120"/>
</label>
<br/><br/>
<label>
生 日：<input type="date"/>
</label>
<br/><br/>
<label>
日 期：<input type="datetim-local"/>
</label>
<br/><br/>
<label>
兴 趣：
<input type="checkbox" value="唱歌" id="ch1" name="chk"/>
<label for="ch1">唱歌</label>
<input type="checkbox" value="跳舞" id="ch2"name="chk"/>
<label for="ch2">跳舞</label>
<input type="checkbox" value="游泳" id="ch3" name="chk"/>
<label for="ch3">游泳</label>
</label>
<br/><br/>
<label>
颜 色：<input type="color"/>
</label>
<br/><br/>
<label>
上 传；<input type="file"/>
</label>
<!--隐藏文本框-->
<input type="hidden" value="vip" name="vipname" />
<br/><br/>
<label>
<input type="image" src="../images/001.png" alt="" width="50" height="50">
</label>
<br/><br/>
<label>
电子邮件：<input type="email"/>
</label>
<br/><br/>
<label>
毕业院校：
<select name="" id="" multiple>
<option value="xy">西安邮电大学</option>
<option value="xf">西北政法大学</option>
<option value="sk">陕西科技大学</option>
<option value="sf">陕西师范大学</option>
</select>
</label>
<br/><br/>
<!--<input type="submmit" value="提交" size="10"/>-->
<!--<input type="button" value="普通按钮"-->
<button type="submmit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
<br/><br/>
<textarea cols="30" rols="10"></textarea>
</form>
</body>
</html>
②效果展示：
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
