列表

HTML 提供了 3 组常用的用来展示列表的元素

  • 有序列表： ol、 li
  • 无序列表： ul、 li
  • 定义列表： dl、 dt、 dd

有序列表 – ol – li

ol（ordered list）

  • 有序列表，直接子元素只能是 li

li（list item）

  • 列表中的每一项

浏览器会自动添加 CSS 属性:

无序列表 – ul - li

ul（unordered list）

  • 无序列表，直接子元素只能是 li

定义列表 – dl – dt - dd

dl（definition list）

  • 定义列表，直接子元素只能是 dt、 dd

dt（definition term）

  • term 是项的意思, 列表中每一项的项目名

dd（definition description）

  • 列表中每一项的具体描述，是对 dt 的描述、解释、补充
  • 一个 dt 后面一般紧跟着 1 个或者多个 dd

一般开发时会首先重置默认属性

ol, li {
  padding: 0;
  margin: 0;
  list-style: none;
}
-----------------------------
ul, body, h1, p {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
-----------------------------
dl, dt, dd {
  padding: 0;
  margin: 0;
}

表格

  • table : 表格
  • tr (table row): 表格中的行
  • td (table data): 行中的单元格

注意:

与列表一样, 一般会重置 CSS 样式, 自定义实现

  • 合并单元格边框: border-collapse
table {
  text-align: center;
  border-collapse: collapse;
}

td {
  border: 1px solid #333;
  padding: 8px 16px;
}

table tr:nth-child(1) {
  font-weight: 700;
}

===========================
<table>
<tr>
  <td>排名</td>
  <td>股票名称</td>
  <td>股票代码</td>
  <td>股票价格</td>
  <td>股票的涨跌</td>
</tr>
<tr>
  <td>1</td>
  <td>贵州茅台</td>
  <td>600519</td>
  <td>1800</td>
  <td>5%</td>
</tr>
<tr>
  <td>1</td>
  <td>贵州茅台</td>
  <td>600519</td>
  <td>1800</td>
  <td>5%</td>
</tr>
<tr>
  <td>2</td>
  <td>腾讯控股</td>
  <td>00700</td>
  <td>400</td>
  <td>3%</td>
</tr>
<tr>
  <td>3</td>
  <td>五粮液</td>
  <td>000858</td>
  <td>160</td>
  <td>8%</td>
</tr>
</table>

为了元素语义化, 新增如下元素:

  • thead: 表格的表头
  • tbody: 表格的主体
  • tfoot: 表格的页脚
  • caption: 表格的标题
  • th: 表格的表头单元格
<style>
    table {
      text-align: center;
      border-collapse: collapse;
    }
    
    td, th {
      border: 1px solid #333;
      padding: 8px 16px;
    }
    
    table tbody tr:nth-child(1) {
      color: red;
      font-weight: 700;
    }

</style>
============================
<body>
  
  <table>
    <caption>热门股票</caption>
    <thead>
      <tr>
        <th>排名</th>
        <th>股票名称</th>
        <th>股票代码</th>
        <th>股票价格</th>
        <th>股票的涨跌</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
      </tr>
    </tfoot>
  </table>

</body>

单元格合并

  • 跨列合并: 使用 colspan
  • 跨行合并: 使用 rowspan

练习

  <style>
    table {
      border-collapse: collapse;
      text-align: center;
    }

    /* tr.head {
      font-weight: 700;
      font-size: 20px;
    } */

    /* n的取值: 0和整数  */
    /* 0, 1, 2, 3, 4, 5, 6......... */
    /*-n + 2表示:前2行*/
    table tr:nth-child(-n + 2) {
      font-weight: 700;
      font-size: 20px;
    }

    /* 属性选择器 */
    table tr td[rowspan] {
      font-weight: 700;
      font-size: 18px;
    }

    td {
      border: 1px solid red;
      width: 100px;
      height: 30px;
    }
  </style>
-----------------------------------
  <table>
    <tr>
      <td colspan="6">课程表</td>
    </tr>
    <tr>
      <td></td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
    </tr>
    <tr>
      <td rowspan="4">上午</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td rowspan="4">下午</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td rowspan="2">晚自习</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
  </table>
## 表单 表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单

常见如: 用户注册/登录的表单

常见元素:

  • form: 表单, 一般情况下，其他表单相关元素都是它的后代元素
  • input: 单行文本输入框、单选框、复选框、按钮等元素
  • textarea: 多行文本框
  • select、 option: 下拉选择框
  • button: 按钮
  • label: 表单元素的标题

input

表单元素使用最多的是 input 元素

常见属性:

  • type： input 的类型
    • text：文本输入框（明文输入）
    • password：文本输入框（密文输入）
    • radio：单选框
    • checkbox：复选框
    • button：按钮
    • reset：重置
    • submit：提交表单数据给服务器
    • file：文件上传
  • readonly：只读
  • disabled：禁用
  • checked：默认被选中
    • 只有当 type 为 radio 或 checkbox 时可用
  • autofocus：当页面加载时，自动聚焦
  • name：名字
    • 在提交数据给服务器时，可用于区分数据类型
  • value：取值

注意:

对于 Boolean 属性, 如:
disabled、 checked、 readonly、 multiple、 autofocus、 selected

布尔属性可以没有属性值，写上属性名就代表使用这个属性

button

  • 普通按钮（type=button） ：使用 value 属性设置按钮文字
  • 重置按钮（type=reset） ：重置它所属 form 的所有表单元素（包括 input、 textarea、 select）
  • 提交按钮（type=submit） ：提交它所属 form 的表单数据给服务器（包括 input、 textarea、 select）

有如下两种实现方式:

效果一样

label

一般跟 input 配合使用，用来表示 input 的标题

点击 label 就可以激活对应的 input 变成选中

radio

type 类型设置为 radio 就变成单选框

  • name 值相同的 radio 才具备单选功能

checkbox

将 type 类型设置为 checkbox 就变成多选框

  • 属于同一种类型的 checkbox， name 值要保持一致

注意:

radio 和 checkbox 在表单中进行提交时, 提交的值是属性 value 的值

textarea

多行文本框

常见属性:

  • cols：列数
  • rows：行数

可以设置文本框的大小, 默认是两行, 可以鼠标拖放

缩放的 CSS 设置:

  • 水平垂直缩放： resize: both
  • 禁止缩放： resize: none;
  • 水平缩放： resize: horizontal;
  • 垂直缩放： resize: vertical;
textarea {
  resize: vertical;
}

select 和 option

option 是 select 的子元素，一个 option 代表一个选项

select 常用属性

  • multiple：可以多选
  • size：显示多少项

option 常用属性

  • selected：默认被选中

form

表单元素的父元素

  • form 可以将整个表单作为一个整体来进行操作;
  • 比如对整个表单进行重置;
  • 比如对整个表单的数据进行提交;

常见的属性:

  • action: 用于提交表单数据的请求 URL
  • method: 请求方法（get 和 post），默认是 get
  • target: 在什么地方打开 URL（参考 a 元素的 target）