目录
上一次我们大概了解了编写网页元素的一部分标签，现在让我们来熟悉一些另外的一些常用标签吧！
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>
扫一扫
3223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
