【第一部分 | HTML】3：表格、列表和表单

灰太狼 2023-09-26 09:22 74阅读 0赞

**目录**

| 表格

表格 · 基本语法

表格 · 属性（了解）

表格 · 合并单元格

表格 · 总结

| 列表

列表 · 简介

列表 · 三大列表语法

列表 · 总结

| 表单

表单 · 简介

表单 · 表单域

表单 · input

表单 · input 各属性的使用场景

表单 · label标签

表单 · select textarea

HTML 总结

--------------------

本章介绍一下 HTML语言常用的三种元素：表格、列表和表单

###    **| 表格** ###

#### **表格 · 基本语法** ####

**基本语法**

表格不是用来布局页面的，是用来展示数据的

![38d047a561994d8db50490ccb8464ef9.png][]

**表头标签**

![08e53507ca7e4bb6987a0b8c869fad03.png][]

**结构标签**

我们可以通过表格结构标签，把表格的代码编写分为 \[表头\] 和 \[表体\] 两大部分

![87a92eafe76341b3965bdd84167f5e5e.png][]

--------------------

#### **表格 · 属性（了解）** ####

今后，表格的 align border width height 等属性都是在CSS中定义的

需要注意的是： cellpadding cellspacing无法写在CSS中

*  cellpadding：把文字看作一个矩形、其矩形与该单元格之间的距离为cellpadding
 *  cellspacing：单元格和单元格之间的距离

![38ee2780805a41d6ad1976f4c203a5e2.png][]

--------------------

#### 表格 · 合并单元格 ####

![8e0c60b5fa7944eeb523873c91bac72c.png][]

![9fd2996b2103447b8c552a0c37d5706f.png][]

![e3083c5d604946b1b7c0cecd447e7232.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>
    </head>
    <body>
    
        <p>原始表格</p>
        <table border="1" cellspacing="0" width="100" height="100">
            <tr>   <td>@</td>   <td>@</td>   <td>@</td>   </tr>
            <tr>   <td>@</td>   <td>@</td>   <td>@</td>   </tr>
            <tr>   <td>@</td>   <td>@</td>   <td>@</td>   </tr>
        </table>
    
        <p>跨列合并单元格</p>
        <table border="1" cellspacing="0" width="100" height="100">
            <tr>   <td>@</td>   <td colspan="2">@</td>     </tr>
            <tr>   <td>@</td>   <td>@</td>               <td>@</td>          </tr>
            <tr>   <td>@</td>   <td>@</td>               <td>@</td>          </tr>
        </table>
    
        <p>跨行合并单元格</p>
        <table border="1" cellspacing="0" width="100" height="100">
            <tr>   <td>@</td>                <td>@</td>    <td>@</td>   </tr>
            <tr>   <td rowspan="2">@</td>    <td>@</td>    <td>@</td>   </tr>
            <tr>            <td>@</td>    <td>@</td>   </tr>
        </table>
    </body>
    </html>

--------------------

#### 表格 · 总结 ####

![fd300568bc99426e9a16a4432c58106b.png][]

--------------------

### | 列表 ###

#### 列表 · 简介 ####

![26616f0ff2c243c1a777ac9848dbe88c.png][]

--------------------

#### **列表 · 三大列表语法** ####

**无序列表（重要）**

![ea830fb58e3e4626a50e80b1ee2bd73c.png][]

**有序列表**

*  注意事项和无序列表一致

![1de7f090aa9a4f50bfa5043cbc307c93.png][]

**自定义列表**

*  注意事项和无序列表一致
 *  自定义列表相当于给一个列表加了一个列表头~~

![9fd0db9e226b4df4ae7b14e8abe0e138.png][]

![be8cf74be0d046979eaee19083263346.png][]

--------------------

#### 列表 · 总结 ####

![9990da40a1444fe28ed2254fd109498d.png][]

![b397470751024adca8f4c53bb7194391.png][]

--------------------

### | 表单 ###

#### 表单 · 简介 ####

*  表单的作用：让用户填写信息，收集用户的信息
 *  表单的构成：表单域（整个表单写在这里面）、表单控件（用户输入）、提示信息
 *  表单的种类：inpuit输入元素、select下拉表单元素、textarea文本域元素

![901fcc95446c4e2db404212d25736fee.png][]

#### 表单 · 表单域 ####

![45dc49cff8ef466ab223bee0a81cd0c4.png][]

--------------------

#### **表单 · input** ####

**input的基本简介**

基本语法：

![59a4fb226d074475a155ec31d02cc7b2.png][]

**input的 type属性详解**

*  注意：多个type=”radio”的input必须要有相同的名字，才能多选一

![1532eccb547448c3b1bf6b247e4883ff.png][]

**input示例**

![7c7d5397ff334af4bd490dedb9182169.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>
    </head>
    <body>
        
        <h3>input表单元素</h3>
        <form action="#" method="get" name="表单域名称">
            input的text属性 <input type="text"> <br>
            input的password属性 <input type="password"><br>
            input的button属性 用于触发按钮响应 <input type="button" value="button"><br>
            input的submit属性 用于提交数据到服务器 <input type="submit" value="submit"><br>
            input的radio属性 用于单选按钮的定义        【A】<input type="radio" >  【B】<input type="radio"><br>
            对于同名name的radio属性，会被视为一组，无法多选        
            【A】<input type="radio" name="1" value="送到后台的值">  【B】<input type="radio" name="1" value="XXX" checked><br>
            input的checkBox属性，用于多选  【A】<input type="checkbox" name="1"> 【B】<input type="checkbox" name="1"> 【C】<input type="checkbox" name="1">
        </form>
    
    </body>
    </html>

--------------------

#### 表单 · input 各属性的使用场景 ####

![aef8a70a75ff4433bff5468496b686e2.png][]

--------------------

#### 表单 · label标签 ####

![fddef0f456504c80a3f3b5abb2994e33.png][]

作用：增加用户体验

比如选择男女性别的时候，可以让用户点击头像就可以选中标签

在输入text文本的时候，点击文本的提示信息，就可以把光标放在输入栏内。

![0cde35b695bf47caa8f145dba42c484e.png][]

--------------------

#### 表单 · select textarea ####

![36bbf3ad78ec49d794016ed36fd426bf.png][]

示例：

![5171c6e9983f440eb3410d80b5e603c6.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>
    </head>
    <body>
    
        
        <h4>下拉表单元素select</h4>
        <form>
            购买课程：
            <select>
                <option>Java基础</option>
                <option>Java后端基础</option>
                <option>Java后端</option>
                <option>Java前端</option>
                <option>Java互联网技术</option>
            </select>
            <input type="submit" value="购买"/>
        </form>
    
    
    
        <h4>文本域表单元素textarea</h4>
        <form>
            备忘录：
            <textarea cols="10" rows="3">textarea中间写的东西作为默认文字展示</textarea>
        </form>
    
    
    </body>
    </html>

### HTML 总结 ###

![1981d728491d4b4eacb174bee2621035.png][]

[38d047a561994d8db50490ccb8464ef9.png]: https://img-blog.csdnimg.cn/38d047a561994d8db50490ccb8464ef9.png
[08e53507ca7e4bb6987a0b8c869fad03.png]: https://img-blog.csdnimg.cn/08e53507ca7e4bb6987a0b8c869fad03.png
[87a92eafe76341b3965bdd84167f5e5e.png]: https://img-blog.csdnimg.cn/87a92eafe76341b3965bdd84167f5e5e.png
[38ee2780805a41d6ad1976f4c203a5e2.png]: https://img-blog.csdnimg.cn/38ee2780805a41d6ad1976f4c203a5e2.png
[8e0c60b5fa7944eeb523873c91bac72c.png]: https://img-blog.csdnimg.cn/8e0c60b5fa7944eeb523873c91bac72c.png
[9fd2996b2103447b8c552a0c37d5706f.png]: https://img-blog.csdnimg.cn/9fd2996b2103447b8c552a0c37d5706f.png
[e3083c5d604946b1b7c0cecd447e7232.png]: https://img-blog.csdnimg.cn/e3083c5d604946b1b7c0cecd447e7232.png
[fd300568bc99426e9a16a4432c58106b.png]: https://img-blog.csdnimg.cn/fd300568bc99426e9a16a4432c58106b.png
[26616f0ff2c243c1a777ac9848dbe88c.png]: https://img-blog.csdnimg.cn/26616f0ff2c243c1a777ac9848dbe88c.png
[ea830fb58e3e4626a50e80b1ee2bd73c.png]: https://img-blog.csdnimg.cn/ea830fb58e3e4626a50e80b1ee2bd73c.png
[1de7f090aa9a4f50bfa5043cbc307c93.png]: https://img-blog.csdnimg.cn/1de7f090aa9a4f50bfa5043cbc307c93.png
[9fd0db9e226b4df4ae7b14e8abe0e138.png]: https://img-blog.csdnimg.cn/9fd0db9e226b4df4ae7b14e8abe0e138.png
[be8cf74be0d046979eaee19083263346.png]: https://img-blog.csdnimg.cn/be8cf74be0d046979eaee19083263346.png
[9990da40a1444fe28ed2254fd109498d.png]: https://img-blog.csdnimg.cn/9990da40a1444fe28ed2254fd109498d.png
[b397470751024adca8f4c53bb7194391.png]: https://img-blog.csdnimg.cn/b397470751024adca8f4c53bb7194391.png
[901fcc95446c4e2db404212d25736fee.png]: https://img-blog.csdnimg.cn/901fcc95446c4e2db404212d25736fee.png
[45dc49cff8ef466ab223bee0a81cd0c4.png]: https://img-blog.csdnimg.cn/45dc49cff8ef466ab223bee0a81cd0c4.png
[59a4fb226d074475a155ec31d02cc7b2.png]: https://img-blog.csdnimg.cn/59a4fb226d074475a155ec31d02cc7b2.png
[1532eccb547448c3b1bf6b247e4883ff.png]: https://img-blog.csdnimg.cn/1532eccb547448c3b1bf6b247e4883ff.png
[7c7d5397ff334af4bd490dedb9182169.png]: https://img-blog.csdnimg.cn/7c7d5397ff334af4bd490dedb9182169.png
[aef8a70a75ff4433bff5468496b686e2.png]: https://img-blog.csdnimg.cn/aef8a70a75ff4433bff5468496b686e2.png
[fddef0f456504c80a3f3b5abb2994e33.png]: https://img-blog.csdnimg.cn/fddef0f456504c80a3f3b5abb2994e33.png
[0cde35b695bf47caa8f145dba42c484e.png]: https://img-blog.csdnimg.cn/0cde35b695bf47caa8f145dba42c484e.png
[36bbf3ad78ec49d794016ed36fd426bf.png]: https://img-blog.csdnimg.cn/36bbf3ad78ec49d794016ed36fd426bf.png
[5171c6e9983f440eb3410d80b5e603c6.png]: https://img-blog.csdnimg.cn/5171c6e9983f440eb3410d80b5e603c6.png
[1981d728491d4b4eacb174bee2621035.png]: https://img-blog.csdnimg.cn/1981d728491d4b4eacb174bee2621035.png