表格表单与盒子标签

# 标签基础二

## 列表标签

列表的作用，使布局内容排列整齐有序。

列表标签是父子标签，嵌套布局。

### 分类

- 无序列表

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

标签:ul嵌套li,ul是无序列表,li是列表条目。

tips:

- ul标签只能包裹li标签

- li标签可以包裹任意内容

```html
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ...
</ul>
```

- 有序列表

布局排列整齐的需要规定顺序的区域。

标签:ol嵌套li,li是列表条目

```html
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
```

- 定义列表

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题，dd是定义列表的描述和详情。

```html
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dd>维修服务价格</dd>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
    </dl>
```

dl里面只能包含dt和dd。

dt和dd可以包含任意内容。

## 表格标签

类似excel数据。

| 标签  | 作用       |
| ----- | ---------- |
| table | 表格       |
| tr    | 行         |
| th    | 表头单元格 |
| td    | 内容单元格 |

```html
    <table border="">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>chuck</td>
            <td>030121301197</td>
            <td>男</td>
            <td>25</td>
        </tr>
        <tr>
            <td>1</td>
            <td>joan</td>
            <td>030121301197</td>
            <td>女</td>
            <td>26</td>
        </tr>
    </table>
```

在网页中，默认没有边框线，通过border属性添加边框线。

表格结构标签：用于浏览器识别表格内容。

| 标签名 | 含义     | 特殊说明     |
| ------ | -------- | ------------ |
| thead  | 表格头部 | 表格头部内容 |
| tbody  | 表格主题 | 主要内容区域 |
| tfoot  | 表格底部 | 汇总信息区域 |

```html
    <table border="">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>chuck</td>
                <td>030121301197</td>
                <td>男</td>
                <td>25</td>
            </tr>
            <tr>
                <td>1</td>
                <td>joan</td>
                <td>030121301197</td>
                <td>女</td>
                <td>26</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>2</td>
                <td>-</td>
                <td>-</td>
                <td>51</td>
            </tr>
        </tfoot>
    </table>
```

合并单元格：多个单元格合并为一个，可以横向合并也可以竖向合并。

- 跨行合并

保留最上单元格，添加rowspan属性，值为需要合并的行数

- 跨列合并

保留最左单元格，添加colspan属性，值为需要合并的列数。

## 表单标签

用于收集信息、登录界面、注册界面等场景。

### input标签

`<input type="">`

| 属性     | 说明             |
| -------- | ---------------- |
| text     | 文本框，单行文本 |
| password | 密码框           |
| radio    | 单选框           |
| checkbox | 多选框           |
| file     | 上传文件         |

placeholder属性：占位文本，没有输入内容时显示。

```html
用户：<input type="text" placeholder="用户名/手机号/邮箱"><br>
```

name属性，为一个单选项设定名字，用于判断选项属于同一个，同组只能选中一个选项。

```html
单选框：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
```

value属性，用于设置选择该选项提交给服务器的值，可以是任意字符。

```html
单选框：<input type="radio" name="gender" value="man">男<input type="radio" name="gender" value="woman">女<br>
```

checked,设置默认选中，可以简写为一个单词。

```htm
单选框：<input type="radio" name="gender" value="man" checked>男<input type="radio" name="gender" value="woman">女<br>
```

多文件上传：

multiple属性，type选择file时，添加multiple属性，可以实现多文件上传。

```html
上传文件：<input type="file" multiple>
```

### 下拉菜单

标签:select嵌套option,select是下拉菜单,option是每一个选项。

```html
<select>
     <option>北京</option>
     <option>上海</option>
     <option selected>深圳</option>
</select>
```

selected属性，默认选中。

```html
<option selected>深圳</option>
```

### 文本域

多行文本输入表单。

标签：textarea,双标签。

```html
<textarea>文本域</textarea>
```

### label标签

给某个标签的说明文本，也可以用于绑定文字和表单控件。

```html
# 1.label标签的for属性值与input的id值相同进行绑定
性别：
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>

# 2.使用label标签包裹input
性别：
<label><input type="radio">男</label>
<label><input type="radio">女</label>
```

### 按钮

button标签：

```html
<button type="">
    按钮
</button>
```

type属性：

| 属性   | 作用                                                         |
| ------ | ------------------------------------------------------------ |
| submit | 提交按钮，提交数据到后台服务器（默认）                       |
| reset  | 重置按钮，将表单控件重置默认值，需要使用form表单标签包裹才能生效 |
| button | 普通按钮，默认没有功能，配合js使用                           |

from标签：表单区域双标签。

```html
    <form action="">
        用户：<input type="text" placeholder="请输入用户名/手机号/邮箱"><br>
        密码：<input type="password" placeholder="请输入密码"><br>
        <button type="submit">登录</button>
        <button type="reset">重置</button>
    </form>
```

action属性，用于数据提交的地址。

### div和span标签

用于布局网页，没有语义。

- div独占一行
- span不换行

```html
<div>
    这是一个div标签。
</div>
<span>
    这是一个span标签。
</span>
```

### 字符实体

在网页中显示预留字符如>,<,p等等

| 显示结果 | 描述     | 实体名称 |
| -------- | -------- | -------- |
|          | 空格     | &nbsp;   |
| <        | 小于号   | &lt;     |
| >        | 大于号   | &gt;     |
| ©        | 版权符号 | &copy;   |

```html
测试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格! <br>
小于号&lt; <br>
大于号&gt;
```

案例一：

```html
    <ul>
        <li><img src="./lovejoanicon.jpg" alt="xinwentupian" width="100" height="100"><a href="https://baijiahao.baidu.com/s?id=1769558821541373581" target="_blank"><h3>夯实粮食安全根基</h3></a></li>
        <li><img src="./lovejoanicon.jpg" alt="xinwentupian" width="100" height="100"><a href="https://baijiahao.baidu.com/s?id=1769619996817021375" target="_blank"><h3>瓦格纳撤军 停止在俄境内活动沸</h3></a> </li>
        <li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://baijiahao.baidu.com/s?id=1769633241308232914" target="_blank"><h3> 乌军方：趁乱从多方向对俄发起反攻热</h3></a></li>
        <li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://baijiahao.baidu.com/s?id=1769549784593328796" target="_blank"><h3>大地诗篇</h3></a></li>
        <li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=7703806344085346580" target="_blank"><h3>女生考前3天连续失眠 一查684分落泪</h3> </a></li>
    </ul>
```

案例二：

```html
<div>
        <form action="">
            <h1>注册信息</h1>
            <h2>个人信息</h2>
            姓名：<input type="text" placeholder="请输入真实姓名"><br><br>
            密码：<input type="password" placeholder="请输入密码"><br><br>
            确认密码：<input type="password" placeholder="请输入确认密码"><br><br>
            性别：<label><input type="radio" name="gender">男</label><label><input type="radio" name="gender">女</label><br><br>
            居住城市：<select name="" id="">
                <option value="" selected>深圳</option>
                <option value="">广州</option>
                <option value="">北京</option>
                <option value="">上海</option>
            </select>
            <h2>教育经历</h2>
                最高学历：<select name="" id="">
                    <option value="">专科</option>
                    <option value="" selected>本科</option>
                    <option value="">研究生</option>
                </select><br><br>
                学校名称：<input type="text"><br><br>
                所学专业：<input type="text"><br><br>
                在校时间：<select name="" id="">
                    <option value="">2015</option>
                    <option value="">2016</option>
                    <option value="">2017</option>
                    <option value="">2018</option>
                    <option value="">2019</option>
                </select> ---
                <select name="" id="">
                    <option value="">2015</option>
                    <option value="">2016</option>
                    <option value="">2017</option>
                    <option value="">2018</option>
                    <option value="">2019</option>
                </select>
            <h2>工作经历</h2>
            公司名称：<input type="text"><br>
            工作描述：<br>
            <textarea name="workdescript"></textarea><br>
            <input type="checkbox">我已阅读并同意以下协议：
            <ul>
                <li><a href="#"><ins>《用户服务协议》</ins></a></li>
                <li><a href="#"><ins>《隐私协议》</ins></a></li>
            </ul>
            <button type="submit">免费注册</button>
            <button type="reset">重新填写</button>
        </form>
    </div>
```