HTML—列表、表格、表单

本文介绍: 标签：dl 嵌套 dt 和 dd，dl是定义列表，dt是定义列表的标题，dd是是定义列表的描述 / 详情注意事项：dl 里面只能包含 dt 和 dd d t 和 d d 里面可以包含任何内容。

1、列表

作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表

1.1 无序列表

作用：布局排列整齐的不需要规定顺序的区域

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目

注意事项：ul 标签里面只能包裹 li标签

1.2 有序列表

作用：布局排列整齐的需要规定顺序的区域

标签：ol 嵌套，ol 是有序列表，li 是列表条目

注意事项：

ol标签里面只能包裹 li标签
li标签里面可以包裹任何内容

1.3 定义列表

标签：dl 嵌套 d t 和 dd，dl是定义列表，dt是定义列表的标题，dd是是定义列表的描述 / 详情

注意事项：

dl 里面只能包含 dt 和 dd
dt 和 dd 里面可以包含任何内容

2、表格

网页中的表格与Exc el 表格类似，用来展示数据

标签：table 嵌套 tr，tr 嵌套 td / th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线

2.1 表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

标签名	含义	特殊说明
t head	表格头部	表格头部内容
t body	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

&lt;!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Document</title&gt;
</head&gt;
<body&gt;
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90</td>
                <td>100</td>
                <td>190</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2.2 合并 单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

1.明确合并的目标

2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 row span
跨列合并，保留最左单元格，添加属性 colspan

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>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td>
                <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

3、表单

作用：手机用户信息

使用场景：

4、input标签基本 使用

input 标签 type 属性值不同，则功能不同。

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

5、input标签占位文本

占位文本：提示信息

注意：

6、单选框 radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

7、上传 文件– file

默认情况下，文件上传表单控件只能上传一个文件，添加 multi ple属性可以实现文件多选功能

8、多选框–checkbox

多选框也叫复选框。

默认选中：checked

9、下拉菜单

标签：select 嵌套 option，select是下拉菜单整体，option是下拉菜单的每一项

常见属性：selected：下拉菜单的默认选中

10、文本域

作用：多行输入文本的表单控件

标签： textarea ，双标签

常见属性：

col s：规定了文本域内可见宽度
ro ws：规定了文本域内可见行数

11、label标签

经验：用lab el标签绑定文字和表单控件的关系，增大表单控件的点击范围。

之前是只能在小圆圈里面点击才能选中，使用 lab el使它点击男或女也可以选中

11.1 lab el标签-增大点击 范围

写法一：

lab el标签只包裹内容，不包裹表单控件
设置 lab el标签的for属性值和表单控件的id属性相同

写法二：

使用 lab el标签包裹文字和表单控件，不需要属性

提示：支持 lab el标签增大点击范围的表单控件：文本框、上传文件、单选框、多选框、下拉菜单、文本域等等。

12、按钮–button

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScri pt使用

注意：

如果需要实现以上按钮功能，需要配合form标签使用

form 使用方法：用form标签把表单标签一起包裹起来即可

13、无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div：独占一行
span：不换行

14、字符 实体

作用：在网页中显示预留字符

15、综合 案例一

<!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>
    <ul>
        <li>
            <img src="../photo/1.jpg" alt="">
            <h3>吃泡面咋了，不让吃</h3>
        </li>
        <li>
            <img src="../photo/2.jpg" alt="">
            <h3>柠檬头，我好爱，你爱嘛</h3>
        </li>
        <li>
            <img src="../photo/3.jpg" alt="">
            <h3>冬天了，冬天了，降温了</h3>
        </li>
    </ul>
</body>
</html>

16、综合 案例二-注册信息

<!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>
    <h1>注册信息</h1>
    <form action="">
        <!-- 表单控件 -->
        <!-- 个人信息 -->
        <h2>个人信息</h2>
        <label for="">姓名：</label><input type="text" placeholder="请输入真实姓名">
        <br><br>
        <label>密码：</label><input type="password" placeholder="请输入密码">
        <br><br>
        <label>确认密码</label><input type="password" placeholder="请输入确认密码">
        <br><br>
        <label>性别：</label>
        <label><input type="radio" name="gender" checked> 男</label>
        <label><input type="radio" name="gender"> 女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>武汉</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称：</label><input type="text"><br><br>
        <label>所学专业：</label><input type="text">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        --
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text">
        <br><br>
        <label>工作描述：</label>
        <br>
        <textarea></textarea>
        <br><br>
        <!-- 协议和按钮 -->
        <input type="checkbox"><label>已阅读并同意以下协议：</label>
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>
</body>
</html>