前端学习笔记3

列表、表格与表单

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

3.0 代码访问地址

https://gitee.com/qiangge95243611/java118/tree/master/web/day03

3.1 列表

列表大致可以分为3类：有序列表ol，无序列表ul, 自定义列表dl。

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

ul是unordered lists的缩写 (无序列表)
li是list item的缩写（列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写（导航列表）
tr是table row的缩写（表格中的一行）
th是table header cell的缩写（表格中的表头）
td是table data cell的缩写（表格中的一个单元格）

3.1.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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>无序列表</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      li {
     
        height: 35px;
        line-height: 35px;
      }
      li a {
     
        text-decoration: none;
        color: red;
      }
      li a:hover {
     
        text-decoration: underline;
        color: blue;
      }
      li {
     
        list-style: square;
      }
      /* 列表项前面的标记 */
      li::marker {
     
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3>热搜</h3>
      <ul>
        <li><a href="#">逐梦苍穹 ***引领航天强国建设</a></li>
        <li><a href="#">神十八发射取得圆满成功</a></li>
        <li><a href="#">职高女孩逆袭成双一流大学研究生</a></li>
        <li><a href="#">解码首季经济成绩单</a></li>
      </ul>
    </div>
  </body>
</html>

效果图

3.1.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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>有序列表</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      li {
       
        height: 35px;
        line-height: 35px;
      }
      li a {
       
        text-decoration: none;
        color: red;
      }
      li:hover a {
       
        text-decoration: underline;
        color: blue;
      }
      /* 列表项前面的标记 */
      li::marker {
       
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3>热搜</h3>
      <ol>
        <li><a href="#">逐梦苍穹 ***引领航天强国建设</a></li>
        <li><a href="#">神十八发射取得圆满成功</a></li>
        <li><a href="#">职高女孩逆袭成双一流大学研究生</a></li>
        <li><a href="#">解码首季经济成绩单</a></li>
      </ol>
    </div>
  </body>
</html>

3.1.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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>自定义列表</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <div class="box">
      <h3>生鲜</h3>
      <dl>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>榴莲</dd>
        <dd>水蜜桃</dd>

        <dt>水产</dt>
        <dd>鲈鱼</dd>
        <dd>基围虾</dd>
        <dd>帝王蟹</dd>

        <dt>蔬菜</dt>
        <dd>白菜</dd>
        <dd>辣椒</dd>
        <dd>黄瓜</dd>
      </dl>
    </div>
  </body>
</html>

效果图

3.2 表格

HTML 表格由 <table> 标签来定义，是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格相关的元素如下表所示：

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

3.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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>基本表格</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <style>
      .box {
       
        background-color: #ddd;
        /* 有宽度的块元素在父级元素中水平居中样式 */
        margin: 0 auto;
        width: 750px;
        /* 内边距：边框到内容之间的间距 */
        padding: 20px;
      }
      table {
       
        /* 设置边框 */
        border: 1px solid black;
        /* 折叠边框，合并边框 */
        border-collapse: collapse;
        width: 50%;
        margin: 0 auto;
      }
      tr,
      td,
      th {
       
        border: 1px solid black;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <table>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
        </tr>
        <tr>
          <td>1</td>
          <td>tom</td>
          <td>20</td>
          <td>13900011122</td>
        </tr>
        <tr>
          <td>2</td>
          <td>sam</td>
          <td>21</td>
          <td>13900011133</td>
        </tr>
        <tr>
          <td>3</td>
          <td>jack</td>
          <td>22</td>
          <td>13900011155</td>
        </tr>
      </table>
    </div>
  </body>
</html>

效果图

3.2.2 表格的跨列

表格跨列使用colspan="n"在单元格td,th上声明，跨n列的效果。
语法

跨列表格

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>跨列表格</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      table {
       
        width: 200px;
        text-align: center;
        border-collapse: collapse;
      }
      table,
      td,
      th,
      tr {
       
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">学生成绩</th>
      </tr>
      <tr>
        <td>数学</td>
        <td>98</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>86</td>
      </tr>
    </table>
  </body>
</html>

效果

3.2.3 表格的跨行

表格跨行使用rowspan="n"在单元格td,th上声明，跨n行的效果。
语法

跨行表格

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>跨列表格</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      table {
       
        width: 200px;
        text-align: center;
        border-collapse: collapse;
      }
      table,
      td,
      th,
      tr {
       
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>95</td>
      </tr>
      <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>91</td>
      </tr>
    </table>
  </body>
</html>

效果图

3.2.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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      table {
       
        width: 200px;
        text-align: center;
        border-collapse: collapse;
      }
      table,
      td,
      th,
      tr {
       
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="3">学生成绩</td>
      </tr>
      <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>95</td>
      </tr>
      <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>91</td>
      </tr>
    </table>
  </body>
</html>

效果图

3.3 表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

3.3.1 表单语法

语法

以下是一个简单的HTML表单的例子：
- <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
- <label> 元素用于为表单元素添加标签，提高可访问性。
- <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
- <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

代码

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>表单基本结构</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <form action="/" method="post">
      <!-- 文本输入框 -->
      <label for="name">用户名称:</label>
      <input type="text" id="name" name="name" required />

      <br />

      <!-- 密码输入框 -->
      <label for="password">用户密码:</label>
      <input type="password" id="password" name="password" required />

      <br />

      <!-- 单选按钮 -->
      <label>用户性别:</label>
      <input type="radio" id="male" name="gender" value="male" checked />
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">女</label>

      <br />