HTML-高级元素详解对HTML中的高级元素（列表、表格、表单）进行介绍，详细解释了这些元素的常用属性，并且结合案例练习

一. 列表元素

1.1 有序列表

ol（ordered list）
- 有序列表，直接子元素只能是li
li（list item）
- 列表中的每一项

1.2 无序列表

ul（unordered list）
- 无序列表，直接子元素只能是li
li（list item）
- 列表中的每一项

1.3 定义列表

dl（definition list）
- 定义列表，直接子元素只能是dt、dd
dt（definition term）
- 列表中每一项的项目名
dd（definition description）
- 列表中每一项的具体描述，是对 dt 的描述、解释、补充
- 一个dt后面一般紧跟着1个或者多个dd

新闻列表练习：

<!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.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 
    1. 先完成结构
    2. 重置样式(body/a/ul)
    3. 先整体, 后局部
      * 顺序: 按照从外往里. 从上往下
    4. 去除重复的代码(css)
      * 将重复的逻辑放到一个单独的class中(.icon)
      * 不同的代码抽到不同的class(.new .hot)
   -->
  <style>
    ul > li {
      margin-top: 18px;
    }

    ul > li > a {
      display: inline-block;
    }

    ul > li > a:hover {
      color: #f04142;
    }

    /* 局部 */
    ul > li .ranking {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 3px;
      text-align: center;
      line-height: 24px;

      font-weight: 700;
      color: #999;
    }

    /* 伪类: 结构伪类 */
    ul > li:nth-child(1) .ranking {
      color: #f00;
    }

    ul > li:nth-child(2) .ranking {
      color: #0f0;
    }

    ul > li:nth-child(3) .ranking {
      color: #00f;
    }


    /* 内容相关 */
    ul > li .content {
      display: inline;
    }

    /* 图标相关 */
    ul > li .icon {
      position: relative;
      top: 2px;
      left: 4px;

      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url(../images/new_icon.svg);
    }

    ul > li .new {
      background-image: url(../images/new_icon.svg);
    }

    ul > li .hot {
      background-image: url(../images/hot_icon.svg);
    }

  </style>
</head>
<body>

  <ul>
    <li class="item">
      <a href="#">
        <span class="ranking">1</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">2</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">3</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
      </a>
    </li>
  </ul>

</body>
</html>

效果

二. table元素

2.1 table常见元素

编写表格最常见的是下面的元素:

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

另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

2.2 table其他元素

thead 表格的表头
tbody 表格的主体
tfoot 表格的页脚
caption 表格的标题
th 表格的表头单元格

2.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.0">
  <title>Document</title>
  <style>
    table {
      text-align: center;
      // border-collapse 属性是用来决定表格的边框是分开的还是合并的
      border-collapse: collapse;  // 合并
    }

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

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

  </style>
</head>
<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>
</html>

效果

股票表格.png

table {
    border-collapse: collapse;
}

2.4 单元格合并

单元格合并分成两种情况:

跨列合并: 使用colspan

✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td
跨行合并: 使用rowspan

✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td

单元格合并.png

课程表案例

<!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.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
      text-align: center;
    }

    /* n的取值: 0和整数  */
    /* 此处取前两个 */
    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 #0c0c0c;
      width: 100px;
      height: 30px;
    }
  </style>
</head>
<body>

  <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>

</body>
</html>

效果

三. 表单元素

3.1 常见表单

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

3.2 input元素

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

input官方文档
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
- 布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身

布尔属性.png

3.3 input模拟按钮

表单可以实现按钮效果:

普通按钮（type=button）：使用value属性设置按钮文字
重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）

提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

<form action="">
    <input type="text">
    <input type="date">

    <div>
      <input type="button" value="普通按钮">
      <button>普通按钮</button>
    </div>
    <!-- reset可以对form中的其他表单元素进行重置 -->
    <div>
      <input type="reset" value="重置按钮">
      <button type="reset">重置按钮</button>
    </div>
    <!-- submit可以对form中的其他表单元素进行提交(将数据提交给服务器) -->
    <div>
      <input type="submit" value="提交按钮">
      <button type="submit">提交按钮</button>
    </div>
</form>

3.4 input和label结合

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

labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

  <div>
    <label for="username">
      用户: 
      <input id="username" type="text">
    </label>

  </div>
  <div>
    <label for="password">
      密码: 
      <input id="password" type="password">
    </label>
  </div>

3.5 radio/checkbox

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

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

<!-- 在类型为radio的input中, 如果name一样, 那么两个radio就会互斥 -->
  <form action="/abc">
    <label for="male">
      <input id="male" type="radio" name="sex" value="male">男
    </label>
    <label for="female">
      <input id="female" type="radio" name="sex" value="female">女
    </label>

    <button type="submit">提交按钮</button>
  </form>

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

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

<form action="/cba">
<div>
  您的爱好:
  <label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
  </label>
  <label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
  </label>
</div>

<input type="submit">
</form>

3.6 textarea

textarea的常用属性:
- cols：列数
- rows：行数
缩放的CSS设置
- 禁止缩放：resize: none
- 水平缩放：resize: horizontal
- 垂直缩放：resize: vertical
- 水平垂直缩放：resize: both

3.7 select/option

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

select常用属性
- multiple：可以多选
- size：显示多少项

option常用属性

selected：默认被选中

<select name="fruits" id="" multiple size="2">
  <option value="apple" selected>苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
</select>

3.8 form表单

form通常作为表单元素的父元素，可以将整个表单作为一个整体来进行操作

比如对整个表单进行重置
比如对整个表单的数据进行提交

form常见的属性如下:

action 用于提交表单数据的请求URL
method 请求方法（get和post），默认是get

target 在什么地方打开URL（参考a元素的target）

<!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.0">
  <title>Document</title>
</head>
<body>

  <form action="http://xxxxxx.com/abc" method="post" target="_blank">
    <div>
      <label for="username">
        用户: <input id="username" type="text" name="username">
      </label>
    </div>
    <div>
      <label for="password">
        密码: <input id="password" type="password" name="password">
      </label>
    </div>

    <!-- 性别 -->
    <div>
      性别: 
      <label for="male">
        <input id="male" type="radio" name="sex" value="male">男
      </label>
      <label for="female">
        <input id="female" type="radio" name="sex" value="female">女
      </label>
    </div>

    <!-- 爱好 -->
    <div>
      爱好:
      <label for="basketball">
        <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
      </label>
      <label for="football">
        <input id="football" type="checkbox" name="hobby" value="football">足球
      </label>
    </div>

    <!-- 提交按钮 -->
    <button type="reset">重置内容</button>
    <button type="submit">提交内容</button>
  </form>

</body>
</html>

效果

3.9 表单元素什么情况下使用name和value？

name的作用是
- 后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交
- 表单中不可或缺的元素，一个form表单中该元素的名称对应不同类型的input是不同的
value的作用是
- 后台接收数据时使用的键值对中的值(value) value可以有默认值