一、列表（list）
1.1 HTML中的list有三种：
- 有序列表（ol > li）
- 无序列表（ul > li）
- 定义列表（dl > dt > dd）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list列表</title> </head> <body> <ul> <li>结构</li> <li>表现</li> <li>行为</li> </ul> <ol> <li>结构</li> <li>表现</li> <li>行为</li> </ol> <dl> <dt> <dd>结构</dd> <dd>表现</dd> <dd>行为</dd> </dt> </dl> </body> </html>
- 定义列表（dl > dt > dd）
二、表格（table）
2.1 普通表格
<table> <tr> <td></td> <td></td> </tr> </table>
2.2 长表格
<!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> <!-- 长表格，分为三部分： 头部：thead 主体：tbody 底部：tfoot --> <table border="1" width="50%" align="center"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>小花</td> <td>女</td> <td>22</td> </tr> <tr> <td>0002</td> <td>小一</td> <td>女</td> <td>18</td> </tr> <tr> <td>0003</td> <td>小二</td> <td>女</td> <td>20</td> </tr> <tr> <td>0004</td> <td>小三</td> <td>男</td> <td>18</td> </tr> <tr> <td>0005</td> <td>桦桦</td> <td>女</td> <td>18</td> </tr> <tr> <td>0006</td> <td>马晓旭</td> <td>男</td> <td>21</td> </tr> <tr> <td>0007</td> <td>王明文</td> <td>男</td> <td>24</td> </tr> <tr> <td>0008</td> <td>小一</td> <td>女</td> <td>19</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>总人数</td> <td>8</td> </tr> </tfoot> </table> </body> </html>
2.3 一些属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长表格</title> <style> table{ width: 50%; border: 1px solid red; margin: 0 auto; /* border-spacing: 指定边框之间的距离，一般指定为0 */ /* border-spacing: 10px; */ /* border-collapse: 设置边框的合并 */ border-collapse: collapse; } th, td { border: 1px solid red; height: 100px; /* 垂直水平居中 */ vertical-align: middle; text-align: center; } /* 表格中如果没有tbody，直接使用tr， 浏览器会自动创建一个tbody，并且将所有得tr放入其中 所以tr不是table的直接子元素 table > tr:nth-child(odd): 不能获取 tbody > tr:nth-child(odd): 获取 */ tbody > tr:nth-child(odd){ background-color: #bfa; } .box1{ width: 300px; height: 400px; background-color: orange; /* 将元素设置为单元格 td */ display: table-cell; vertical-align: middle; } .box2{ width: 100px; height: 100px; background-color: yellow; margin: 0 auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <table> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>0001</td> <td>小花</td> <td>女</td> <td>22</td> </tr> <tr> <td>0002</td> <td>小一</td> <td>女</td> <td>18</td> </tr> <tr> <td>0003</td> <td>小二</td> <td>女</td> <td>20</td> </tr> <tr> <td>0004</td> <td>小三</td> <td>男</td> <td>18</td> </tr> <tr> <td>0005</td> <td>桦桦</td> <td>女</td> <td>18</td> </tr> <tr> <td>0006</td> <td>马晓旭</td> <td>男</td> <td>21</td> </tr> <tr> <td>0007</td> <td>王明文</td> <td>男</td> <td>24</td> </tr> <tr> <td>0008</td> <td>小一</td> <td>女</td> <td>19</td> </tr> </table> </body> </html>
三、表单（form）
3.1 作用
- 现实生活中，表单用于提交数据
- 在网页中也可以使用表单，用于将本地的数据来提交给远程的服务器
- 使用form标签来创建一个表单
<!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的属性 action：表单要提交的服务器地址/接口 method：提交的方式 - get：从服务器获取数据（一对键值对需要用"?"连接） - post：向服务器提交数据 区别： ① get在传输过程中，数据被放在请求的URL中，不安全 post的操作用户不可见，放在Request body中 ② get的输送数据较小，主要受URL长度所限 post传输数量较大，一般默认不受限制 ③ get请求的参数会被浏览器缓存 一般，input标签中要有name属性，数据传输时可以通过name属性 的键值对将数据提交给服务器 --> <form action="05z-index层级.html"> <!-- autocomplete="off" 关闭自动补全 readonly：将表单项设置为只读，数据会提交 disable：将表单设置为禁用，数据不会提交 autofocus：设置表单自动获取聚焦 --> 文本框：<input type="text" name="username" autocomplete="off" placeholder="请输入文字"> <br><br> 密码框：<input type="password" name="pwd" autofocus> <br><br> <!-- 单选按钮： - 选择框，必须制定一个value属性，value属性最终会作为用户填写的值参数给服务器 - checked 默认选中 --> 男<input type="radio" name="gender" value="male" checked> 女<input type="radio" name="gender" value="female"> <br><br> 多选框<input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3"> <br><br> <!-- 下拉列表 --> <select name="cityList"> <option value="BeiJing">北京</option> <option value="DaLian" selected>大连</option> <option value="KunMing">昆明</option> </select> <br><br> <input type="submit"> <input type="reset"> <input type="button" value="按钮"> <br><br> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form> </body> </html>