目录
1.1列表
（1）有序列表 ol
（2）无序列表 ul
（3）嵌套列表
1.2表格
（1）表格基本结构
（2）合并表格
1.3表单标签
（1）form标签
（2）输入标签input
1.4制作表单
上一次我们大概了解了编写网页元素的一部分标签，现在让我们来熟悉一些另外的一些常用标签吧！
1.1列表
网页为什么需要列表呢？
- 为了使网易更易读懂，所以我们常将网页信息以列表形式呈现
- 商品，新闻等分类排列有序，清晰易懂
列表又分为有序列表和无序列表
（1）有序列表 ol
有序列表（ordered lists)格式为：
<ol type="符号类型">
<li type="符号类型">文本</li>
<li type="符号类型">文本</li>
</ol>
type标签的属性有：
| disc | 默认实心 |
| circle | 空心圆 |
| square | 小方块 |
| none | 不显示 |
（2）无序列表 ul
无序列表格式为：
<ul type="符号类型">
<li type="符号类型">文本</li>
<li type="符号类型">文本</li>
</ul>
注：快捷键（ol>li*3)其中3为li的数量
（3）嵌套列表
嵌套列表就是将无序列表与有序列表嵌套混合使用，给人一种层次分明的感觉。
<p>有序与无序嵌套列表</p> <ul type="disc"> <li>裤子 <ul type="circle"> <li>短裤</li> <li>长裤</li> </ul> </li> <li>裙子</li> </ul> <ol type="A"> <li>裙子 <ol type="a"> <li>长裙</li> <li>短裙</li> </ol> </li> <li>裤子</li> </ol>
1.2表格
（1）表格基本结构
<table>:用于创建表格
<tr>:表格中的一行
<td>:表格中的单元格
<td>:表格中的表头单元格（一种特殊的单元格）
| 属性 | 取值 | 描述 |
| border | 像素 | 表格边框宽度 |
| width | 像素或百分比 | 表格宽度 |
| height | 像素或百分比 | 表格高度 |
| align | left，center，right | 对齐方式 |
下面我们来创建一个四列四行的表格吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>表格</p> <table align="center" border="1" width="200px" heigh="200"> <tr align="center"> <th></th> <th>小猫</th> <th>小白</th> <th>小花</th> </tr> <tr align="center"> <th>语文</th> <td>64</td> <td>45</td> <td>65</td> </tr> <tr align="center"> <th>数学</th> <td>57</td> <td>67</td> <td>57</td> </tr> <tr align="center"> <th>英语</th> <td>35</td> <td>68</td> <td>86</td> </tr> </table> </body> </html>
效果示意图：
（2）合并表格
1.跨列 rowspan
即水平合并（保留左单元格，删掉右边多余单元格）
<table> <tr> <td colspan="所合并的列数">单元格内容</td> </tr> </table>
（类似下图不规则表的单元格13，18，23）
2.跨行 colspan
即垂直合并（保留上边单元格，删掉下边多余单元格）
<table> <tr> <td rowspan="所合并的行数">单元格内容</td> </tr> </table>
（类似下图不规则表的单元格6，7）
3.跨行跨列
即先水平后垂直合并
（类似下图不规则表的单元格16，17，21，22）
下面我们来制作一个不规则的表格吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>不规则表格</title> </head> <body> <table border="1" width="400" height="100"> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td colspan="2">单元格6单元格7</td> <td>单元格8</td> <td>单元格9</td> <td>单元格10</td> </tr> <tr> <td>单元格11</td> <td>单元格12</td> <td rowspan="3">单元格13,18,23</td> <td>单元格14</td> <td rowspan="2">单元格15,20</td> </tr> <tr> <td colspan="2" rowspan="2">单元格16单元格17,21,22</td> <td>单元格19</td> </tr> <tr> <td>单元格24</td> <td>单元格25</td> </tr> </table> </body> </html>
效果示意图：
1.3表单标签
（1）form标签
定义一个表单。
常用属性有：action="url" method="get/post" name="form-1"
action用于指定接收并处理表单数据的服务器url地址；name用来区分一个网页中的多个表单；method用于设置表单数据的提交方式，默认为get.
（2）输入标签input
| 属性值 | 说明 | 属性值 | 说明 |
| text | 文本框 | button | 标准按钮 |
| password | 密码框 | submit | 提交按钮 |
| file | 文件域 | reset | 重置按钮 |
| checkbox | 复选框 | image | 图像域 |
| radio | 单选按钮 |
其他出现的常用属性：name指定控件名称;value指定当表单被载入的时候，在输入域中出现的默文本；size改变文本框的字符宽度；maxlength是限制输入框的最大字符数
以下是所有<input>的type表现形式：
<form action=""> 账号<input type="text"><br> 密码<input type="password"><br> 爱好:篮球<input type="checkbox" name="hobby1"> 音乐<input type="checkbox" name="hobby2"> 阅读<input type="checkbox" name="hobby3"><br> 身份证：<input type="file" value="上传身份证照片" ><br> <!-- 定义单选键按钮时，同一组的选项必须指定相同name,单选键才生效 --> 性别：女<input type="radio" name="sex"> 男<input type="radio" name="sex"><br> <input type="reset" value="重置"> <input type="submit" value="提交"> <input type="button" value="其他按键"> <!-- 图像形式的按钮键用图片替代了默认的按钮，更美观 --> <input type="image" src="./pyqglytkdo4.webp" width="50" height="50"> </form>
1.4制作表单
现在让我们用以上学过的知识来做一份问卷调查吧！
代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <!-- form标签创建表单 --> <form action="" method="post" name="form1"> <!-- 是空格标签 --> <font color="red" size="6" align="center"><b>用户注册</b></font><br> <!-- 用table标签创建一个表格并设置好想要的格式 --> <table align="left" border="1" width="400" height="200"> <!-- 设置input的输出形式，第一个属于文本输入所以使用了text --> <tr> <td align="right">用户名</td> <td><input type="text">*</td> </tr> <!-- 第二，三行是密码输入所以用了password --> <tr> <td align="right">密码</td> <td><input type="password">*</td> </tr> <tr> <td align="right">确认密码</td> <td><input type="password">*</td> </tr> <!-- 这一行是选项中二选一，所以用了radio --> <tr> <td align="right">性别</td> <td><input type="radio" name="sex">女 <input type="radio" name="sex">男</td> </tr> <tr> <td align="right">出生日期</td> <td><input type="text">*</td> </tr> <tr> <td align="right">联系电话</td> <td><input type="number">*</td> </tr> <tr> <td align="right">电子邮件</td> <td><input type="text">*</td> </tr> <tr> <td align="right">最高学历</td> <td><input type="radio" name="congraduration">中专 <input type="radio" name="congraduration">大专 <input type="radio" name="congraduration">本科 <input type="radio" name="congraduration">研究生 </td> </tr> <!--checkbox 表多选 --> <tr> <td align="right">爱好</td> <td><input type="checkbox" name="congraduration">上网 <input type="checkbox" name="congraduration">篮球 <input type="checkbox" name="congraduration">听歌 <input type="checkbox" name="congraduration">下棋 </td> </tr> <!-- submit提交和重置reset --> <tr> <td align="center" colspan="4"><input type="submit"> <input type="reset"></td> </tr> </form> </table> </body> </html>
