HTML 表单和音视频笔记
学习目标
- 掌握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)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/c88A78e371.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)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/1Y1Kb1U441.png)
HTML 表单
HTML 表单用于收集不同类型的用户输入。并且提交数据
- 表单是一个包含表单元素的区域。
- 表单元素是允许用户在表单中输入内容,如：
- 文本框(input)
- 文本域(textarea)
- 下拉列表(select-option)
- 单选框(radio)
- 复选框(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 控件） |
| 定义用于 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>性 别:</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>爱 好:</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>课 程:</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)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/611K69a83K.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>性  别:</b>
</td>
<td>
<input type="radio" name="gender" id="Male" value="男" />
<label for="Male">男</label>
<input type="radio" name="gender" id="Female" value="" />
<label for="Female">女</label>
</td>
</tr>
<tr>
<td>
<b>个人爱好:</b>
</td>
<td>
<input type="checkbox" name="hobby" id="hobby1" value="文学" />
<label for="hobby1">文学</label>
<input type="checkbox" name="hobby" id="hobby2" value="影视" />
<label for="hobby2">影视</label>
<input type="checkbox" name="hobby" id="hobby3" value="音乐" />
<label for="hobby3">音乐</label>
<input type="checkbox" name="hobby" id="hobby3" value="体育" />
<label for="hobby4">体育</label>
</td>
</tr>
<tr>
<td>
<b>所在城市:</b>
</td>
<td>
<select>
<option selected="selected">请选择</option>
<option value="贵州">贵州</option>
<option value="西藏">西藏</option>
<option value="北京">背景</option>
</select>
<select>
<option selected="selected">请选择</option>
<option value="贵州">贵州</option>
<option value="西藏">西藏</option>
<option value="北京">背景</option>
</select>
</td>
</tr>
<tr>
<td>
<b>是否同意:</b>
</td>
<td>
<input type="radio" name="agree" id="agree1" />
<label for="agree1">我同意</label>
<input type="radio" name="agree" id="agree2" />
<label for="agree2">我不同意</label>
</td>
</tr>
<tr>
<td>
<b>协议如下:</b>
</td>
</tr>
<tr>
<td colspan="2">
<textarea rows="8" cols="50"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="提交" />
</td>
<td>
<input type="reset" name="" id="reset" value="重置" />
</td>
</tr>
</table>
</body>
</html>
效果展示:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1Wqqn1S-1641895236330)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110170249758.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/MN4TY801R4.png)
总结
所有表单元素都有value属性，不写默认为为空字符串
普通文本text支持任意属性
number/email/search/url这些属性在移动端弹出的键盘不一样
输入框和标题<input>和<lable>
加for和id属性点击文字也可以将光标选中输入框
<label for="i">用户名：</label>
<input value="请输入" id="i"/>
输入框和输入预选项
加list和id属性进行关联，输入的值只有option中value值有效
<input list="li"/>
<datalist id="li">
<option value="贵州">贵州省</option>
</datalist>
下拉选择框
<select>
<optgroup label="贵州的">
<option value="贵州">贵州省</option>
</optgroup>
</select>
单选框，name属性必须有，进行分组，否则不能单选
<input type="radio" name="a"/>选项1
<input type="radio" name="a"/>选项2
<input type="radio" name="a"/>选项3
<input type="radio" name="a"/>选项4
复选框，name属性也必须有，进行分组，否则提交的数据不是同一组
<input type="checkbox" name="b"/>选项1
<input type="checkbox" name="b"/>选项2
<input type="checkbox" name="b"/>选项3
<input type="checkbox" name="b"/>选项4
HTML 音视频
HTML 音视频
| 标签 | 说明 |
|---|---|
<embed> | 音视频，支持单一视频个数 |
<object> | 音视频，支持单一视频个数 |
<audio> | 音频，支持多种视频个数 |
<video> | 视频，支持多种视频个数 |
<embed> 元素
<embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZD4Zvo9-1641895236330)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193111258.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/BU190OU8LR.png)
法：
<embed height="50" width="100" src="horse.mp3">
案例05
·```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频播放</title>
</head>
<body>
<embed height="70" align="center" src="source/SAVE.mp3" />
<br>
<br>
<embed src="source/yun.mp4" />
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UF8Re3M9-1641895236332)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193257518.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/11ebSU8D45.png)
<object> 元素
<object>标签也可以定义外部（非 HTML）内容的容器。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4h93jXgK-1641895236332)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193312345.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/YITRc3F8e6.png)
<object> 标签用于包含对象，比如音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object的初衷是取代 img 和applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。现在常用于插件
如：
<html>
<head>
<title></title>
</head>
<body>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
</body>
</html>
语法：
<object width="550" height="400">
<param name="movie" value="yun.mp4">
</object>
<object data="yun.mp4"></object>
<object type="application/pdf" data="xxx.pdf"></object>
案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频播放</title>
</head>
<body>
<object height="70" data="source/SAVE.mp3"></object>
<br>
<br>
<object data="source/yun.mp4"></object>
</body>
</html>
<audio>和<video>
– 播放音频无画面，播放音视频，有画面。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SCZgPv38-1641895236333)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193437209.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/45d3836T5E.png)
语法：
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
浏览器不支持
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音视频播放</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="source/yun.mp4" type="video/mp4">
<source src="source/yun.mp4" type="video/ogg">
<source src="source/yun.mp4" type="video/webm">
</video>
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGYSkaCL-1641895236334)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193508502.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/3fM8eeaH6f.png)
HTML5 语义元素
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
HTML5 已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
作业
显示如下HTML所有常用的输入框
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业1</title>
</head>
<body>
<form>
<table border="0" cellspacing="10" cellpadding="10" width="50%" align="center">
<tr>
<td>
<fieldset id="" align="center">
<legend>
<b>表单元素</b>
</legend>
<table>
<tr>
<td>
<label for="word"><b>文字输入:</b></label>
</td>
<td align="left">
<input type="text" name="word" id="word" placeholder="请输入文字"/>
</td>
</tr>
<tr>
<td>
<label for="tel"><b>电话号码:</b></label>
</td>
<td align="left">
<input type="tel" name="tel" id="tel" placeholder="请输入号码" />
</td>
</tr>
<tr>
<td>
<label for="number"><b>数字类型:</b></label>
</td>
<td align="left">
<input type="number" name="number" id="number" placeholder="请输入数字" />
</td>
</tr>
<tr>
<td>
<label for="range"><b>输入范围:</b></label>
</td>
<td align="left">
<input type="range" name="range" id="range" />
</td>
</tr>
<tr>
<td>
<label for="search"><b>搜索类型:</b></label>
</td>
<td align="left">
<input type="search" name="search" id="search" placeholder="请输入..." />
</td>
</tr>
<tr>
<td>
<label for="password"><b>密码类型:</b></label>
</td>
<td align="left">
<input type="password" name="password" id="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>
<label for="url"><b>网站地址:</b></label>
</td>
<td align="left">
<input type="url" name="url" id="url" placeholder="请输入网址" />
</td>
</tr>
<tr>
<td>
<label for="email"><b>电子邮箱:</b></label>
</td>
<td align="left">
<input type="email" name="email" id="email" placeholder="请输入邮箱"/>
</td>
</tr>
<tr>
<td >
<label for="week"><b>星  期:</b></label>
</td>
<td align="left">
<input type="week" name="week" id="week" />
</tr>
<tr>
<td>
<label for="monty"><b>月  份:</b></label>
</td>
<td align="left">
<input type="month" name="month" id="month" />
</td>
</tr>
<tr>
<td>
<label for="date"><b>日  期:</b></label>
</td>
<td align="left">
<input type="date" name="date" id="date" />
</td>
</tr>
<tr>
<td>
<label for="datetime"><b>时间日期:</b></label>
</td>
<td align="left">
<input type="datetime" name="datetime" id="datetime" placeholder="请输入时间日期"/>
</td>
</tr>
<tr>
<td>
<label for="color"><b>颜  色:</b></label>
</td>
<td align="left">
<input type="color" name="color" id="color" />
</td>
</tr>
<tr>
<td>
<label for="file"><b>文  件:</b></label>
</td>
<td align="left">
<input type="file" name="file" id="file" />
</td>
</tr>
<tr>
<td>
<label for="summit"><b>按  钮:</b></label>
</td>
<td align="left">
<input type="button" name="summit" id="summit" value="提交" />
</td>
</tr>
<tr>
<td>
<label for="single"><b>单  选:</b></label>
</td>
<td align="left">
<input type="radio" name="single" id="single" />
</td>
</tr>
<tr>
<td>
<label for="chekbox"><b>复  选:</b></label>
</td>
<td align="left">
<input type="checkbox" name="chekbox" id="chekbox" value="" />
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</form>
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CF6xnV4w-1641895236334)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110202133657.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/NLBbd93dcY.png)
实现如下登录界面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<table border="0" cellspacing="10" cellpadding="10" align="center" width="50%">
<caption>
<h3 align="center">欢迎来到登录页面</h3>
</caption>
<tr>
<td>
<fieldset align="center">
<legend align="center"><b>快速登录</b></legend>
<form action="" method="">
<label for="username">用户名称：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" />
<br>
<label for="password">用户密码：</label>
<input type="text" name="password" id="password" placeholder="请输入用户密码" />
<br>
<input type="checkbox" name="checkbox" id="checkbox" value="" />
<label for="checkbox">是否记住密码</label>
<br>
<input type="submit" name="submit" id="summit" value="登录" />
<input type="reset" name="reset" id="reset" value="重置" />
</form>
</fieldset>
</td>
</tr>
</table>
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UQ6t3m2-1641895236335)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110205641220.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/S14O832258.png)
实现如下注册效果（提示：用表格）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
</head>
<body>
<form action="" method="">
<table cellpadding="10" cellspacing="0" border="0" align="center" width="60%">
<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><ins>不超过7个汉字，或者14个字节（数字，字母和下划线）</ins>
</td>
</tr>
<tr>
<td>
<label for="password">
<b>用户密码:</b>
</label>
</td>
<td>
<input type="password" name="password" id="password" placeholder="请输入用户密码" />
</td>
<td>
*<small>必填</small>最少8个字符，不超过14个字符（数字，字母和下划线）
</td>
</tr>
<tr>
<td>
<label for="password1">
<b>确定密码:</b>
</label>
</td>
<td>
<input type="password" name="password1" id="password1" placeholder="请确定密码" />
</td>
<td>
*<small>必填</small><ins>请注意！性别不可更改，如需修改请拨打热线123454534332</ins>
</td>
</tr>
<tr>
<td>
<b>性  别:</b>
</td>
<td>
<input type="radio" name="gender" id="Male" value="男" />
<label for="Male">男</label>
<input type="radio" name="gender" id="Female" value="" />
<label for="Female">女</label>
</td>
</tr>
<tr>
<td>
<b>个人爱好:</b>
</td>
<td>
<input type="checkbox" name="hobby" id="hobby1" value="文学" />
<label for="hobby1">文学</label>
<input type="checkbox" name="hobby" id="hobby2" value="影视" />
<label for="hobby2">影视</label>
<input type="checkbox" name="hobby" id="hobby3" value="音乐" />
<label for="hobby3">音乐</label>
<input type="checkbox" name="hobby" id="hobby3" value="体育" />
<label for="hobby4">体育</label>
</td>
</tr>
<tr>
<td>
<b>所在城市:</b>
</td>
<td>
<select>
<option selected="selected">请选择</option>
<option value="贵州">贵州</option>
<option value="西藏">西藏</option>
<option value="北京">背景</option>
</select>
<select>
<option selected="selected">请选择</option>
<option value="贵州">贵州</option>
<option value="西藏">西藏</option>
<option value="北京">背景</option>
</select>
</td>
</tr>
<tr>
<td>
<b>是否同意:</b>
</td>
<td>
<input type="radio" name="agree" id="agree1" />
<label for="agree1">我同意</label>
<input type="radio" name="agree" id="agree2" />
<label for="agree2">我不同意</label>
</td>
</tr>
<tr>
<td>
<b>协议如下:</b>
</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="8" cols="100"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="提交" />
</td>
<td>
<input type="reset" name="" id="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
效果展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7h0V2K85-1641895236336)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110211542587.png)]
在页面上展示任意一个pdf文件
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本阅读</title>
</head>
<body>
<h3 align="center">ArrayList底层原理</h3>
<embed height="1000" width="80%" align="center" align="center" src="ArrayList.md" />
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZS8uo7fp-1641895236337)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110213147868.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/1cPeEd6BG0.png)
实现如下在线考试系统
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业5在线考试</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="10" align="center" width="%80">
<caption>
<h3 align="center">
<strong>在线考试</strong>
</h3>
</caption>
<tr>
<td>
<span><b>选择班级：</b></span>
<select name="classes">
<option selected="selected" value="请选择">请选择</option>
<option value="请选择">Java1班</option>
<option value="请选择">Java2班</option>
<option value="请选择">Java3班</option>
<option value="请选择">Java4班</option>
</select>
<span>
<b>选择地址</b>
</span>
<select name="adrress">
<option selected="selected" value="贵州省">贵州省</option>
<option value="浙江省">浙江省</option>
<option value="江苏省">江苏省</option>
<option value="广东省">广东省</option>
<option value="陕西省">陕西省</option>
</select>
<select name="adrress">
<option selected="selected" value="贵阳市">贵阳市</option>
<option value="遵义市">遵义市</option>
<option value="六盘水市">六盘水市</option>
<option value="黔东南">黔东南</option>
<option value="毕节市">毕节市</option>
</select>
<select name="adrress">
<option selected="selected" value="息烽县">息烽县</option>
<option value="南明区">南明区</option>
<option value="花溪区">花溪区</option>
<option value="云岩区">云岩区</option>
<option value="白云区">白云区</option>
</select>
<dl>
<dt>
<b>(一)单选题</b>
</dt>
<dd>
<ol type="1">
<li>下列属于区块元素的是()
<br>
<label for="p1A">
<input type="radio" name="p1" id="p1A" />
A. i
</label>
<br>
<label for="p1B">
<input type="radio" name="p1" id="p1B" />
B. table
</label>
<br>
<label for="p1C">
<input type="radio" name="p1" id="p1C" />
C. font
</label>
<br>
<label for="p1D">
<input type="radio" name="p1" id="p1D" />
D. strong
</label>
</li>
<li>下列属于内联元素的是()
<br>
<label for="p2A">
<input type="radio" name="p2" id="p2A" />
A. div
</label>
<br>
<label for="p2B">
<input type="radio" name="p2" id="p2B" />
B. table
</label>
<br>
<label for="p2C">
<input type="radio" name="p2" id="p2C" />
C. font
</label>
<br>
<label for="p2D">
<input type="radio" name="p2" id="p2D" />
D. p
</label>
</li>
</ol>
</dd>
</dl>
<dl>
<dt>
<b>(二)多选题</b>
</dt>
<dd>
<ol type="1">
<li>下列属于区块元素的是()
<br>
<label for="pm1A">
<input type="checkbox" name="pm1" id="pm1A" />
A. i
</label>
<br>
<label for="pm1B">
<input type="checkbox" name="pm1" id="pm1B" />
B. table
</label>
<br>
<label for="pm1C">
<input type="checkbox" name="pm1" id="pm1C" />
C. font
</label>
<br>
<label for="pm1D">
<input type="checkbox" name="pm1" id="pm1D" />
D. strong
</label>
</li>
<li>下列属于内联元素的是()
<br>
<label for="pm2A">
<input type="checkbox" name="pm2" id="pm2A" />
A. div
</label>
<br>
<label for="pm2B">
<input type="checkbox" name="pm2" id="pm2B" />
B. table
</label>
<br>
<label for="pm2C">
<input type="checkbox" name="pm2" id="pm2C" />
C. font
</label>
<br>
<label for="pm2D">
<input type="checkbox" name="pm2" id="pm2D" />
D. p
</label>
</li>
</ol>
</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
效果展示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlWIOtmL-1641895236338)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110193904314.png)]](https://file.cfanz.cn/uploads/png/2022/01/11/10/84fGFTd8F3.png)
