HTML列表、表格以及表单

ゞ浴缸里的玫瑰 2023-09-27 20:48 86阅读 0赞

**目录**

1.列表

1.1列表定义

1.2无序列表

1.3有序列表

1.4定义列表

2.表格

2.1表格概述

2.2表格基本语法结构

2.3表格跨列

2.4表格跨行

2.5表格跨行与跨列

3.表单

3.1表单的应用、语法与属性

3.1.1表单概述

3.1.2文本框

3.1.3密码框

3.1.4单选按钮

3.1.5复选框

3.1.6列表框

3.1.7按钮

3.1.8多行文本域

3.1.9文件域

3.1.10邮箱

3.1.11网址

3.1.12数字

3.1.13滑块

3.1.14搜索框

3.2表单的高级应用

3.2.1隐藏域

3.2.2只读和禁用

3.2.3表单元素的标注

3.3表单的初级验证

3.3.1表单的初级验证缘由

3.3.2默认提示placeholder

3.3.3必填项 required

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

## 1.列表 ##

### 1.1列表定义 ###

**（1）列表定义：**列表是一种特别的对象集合

**（2）集合定义：**集中在一起，再合成一（聚集）

**（3）聚集定义：**多个列（信息资源（图片，字符串））排在一起

**（4）HTML5如何实现列表：**①无序列表②有序列表③（自）定义列表

### 1.2无序列表 ###

**（1）定义：没有顺序的列表**

**（2）代码结构：**![cfc5713c5e4547c2a81eca32486c2881.png][]

效果：![b90a0ee0c9574beeb0006440f6a8e9b2.png][]

**（3）无序列表的特性**

①没有顺序，每个<li>标签独占一行（块元素）

②默认<li>标签项前面会有一个实心小圆点（利用CSS可以去掉小圆点）

③应用场景：导航、侧边栏新闻、有规律的图文组合模块等

### 1.3有序列表 ###

**（1）定义：**有顺序的列表

**（2）代码结构：**![3cee259c7f30481eaa5d92e618efa169.png][]

效果：![66c91c0e0cc34dafb61dff1cb596389e.png][]

**（3）有序列表的特性**

①有顺序，每个<li>标签独占一行（块元素）

②默认<li>标签项前面会有顺序标记（1. 2. 3. ......）

③应用场景：一般用于排序类型的列表，如试卷，问卷选项等

### 1.4定义列表 ###

**（1）定义：**存在包含与被包含关系时使用的表示关系的列表

**（2）代码结构：**![432a1be56fc24d038dce9ae5e44b18c6.png][]

效果：![3dda9e5e9f7c4879819737db0bf0a0a8.png][]

**<dt>**标签表示高一级的内容

**<dd>**标签表示低一级的内容

**（3）有序列表的特性**

①没有顺序，每个<dt>、<dd>标签独占一行

②默认没有标记，<dd>标签项会缩进

③应用场景：一般用于表示包含和被包含关系下的标题

## 2.表格 ##

### 2.1表格概述 ###

**（1）表格定义：**有行有列，多个单元格组成**（**使用H5代码实现网页中的“excel”）

**（2）表格优点：**可以清晰地将多个信息资源整合在一起

### 2.2表格基本语法结构 ###

代码：![659525024fc74525b17face40917ba4a.png][]

结果：![3f13640ac33444d394b5106579eab4cd.png][]

### 2.3表格跨列 ###

代码：![4cb4d8d6fb684fae9f1570934a1f748b.png][]

结果：![98e7b535a81240b7bae6d9d8b44ec109.png][]

### 2.4表格跨行 ###

代码：![dcc4006554614bf9a8328e459383d6fa.png][]

结果：![78e4f3ecd3b64d4a9b3225c1e1e88b42.png][]

### 2.5表格跨行与跨列 ###

代码：![c1e49d958e3349809b544e5d15eba792.png][]

结果：![0fda417c81d74f4180b36bc6dbd8a50f.png][]

## 3.表单 ##

### 3.1表单的应用、语法与属性 ###

#### 3.1.1表单概述 ####

**（1）定义：**以开发角度的定义：多个输入单（输入框）、按钮等元素以表格的形式呈现

**（2）应用场景：**最常见的是网站页面的登录和注册功能

**（3）代码基本结构：**

代码：![dc201e580c234d40960c4fb5c9f092f0.png][]

结果：![37e590b040b947f7a828f686f9ff6ba7.png][]

**（4）表单的元素属性：**

type 指定元素的类型

name 连接后端的变量名

value 元素的初始值

#### 3.1.2文本框 ####

代码：![b1b4546a2c594483978a1c91cb6f8e98.png][]

结果：![39b6b9beb3cf49deaee09056139f763a.png][]

#### 3.1.3密码框 ####

代码：![879227ea06374063ae70b37a20c0ddb0.png][]

结果：![7af559ba3f5d4d0db17236ae55c758df.png][]

#### 3.1.4单选按钮 ####

代码：![5d9feca02517474b98e28763a30cb66b.png][]

结果：![11be2e50884a44aa8481079382ca3899.png][]

#### 3.1.5复选框 ####

代码：![1f02649ac1c54e7e9eba281acedc62d2.png][]

结果：![766c3345f8ce4a58b0e9b925a460fd6d.png][]

#### 3.1.6列表框 ####

代码：![8adf53426bf149e49f633fa8e971cd0d.png][]

结果：![77ffa1964dac4a15927db486aaa27315.png][]

#### 3.1.7按钮 ####

**（1）重置按钮**

代码：![699e3c71f60e4025b204eeff18550b0c.png][]

结果：![69049a07635a496cabce1e8d865798bd.png][]点击重置后![a40e4efe8624417eace9063ca25c02c9.png][]

**（2）提交按钮**

代码：![9129ee8f0c634dd792519e17d5d7a525.png][]

结果：![c9081f27a0864d46809989744b13f165.png][]点击后的效果为![36aecdcf95de4e9986a027bd51634ca3.png][]

**（3）普通按钮**

代码：![50a9a3b2901b43b5bea246e1bef6c2f3.png][]

结果：![a8e2ade1f7bc435c848588106bd6677d.png][]

#### 3.1.8多行文本域 ####

代码：![3fc6a711e99645ccbaca0f36f00982d2.png][]

结果：![33b8b89355ab4b3a89914f4c390482ef.png][]

#### 3.1.9文件域 ####

代码：![3b69e96be093409f9db1e4c278650bbb.png][]

结果：![750c9d776cc84836af6e5c6ca213b60a.png][]

#### 3.1.10邮箱 ####

代码：![e660ff756f8f46068fcc768551aced94.png][]

结果：![4a9e4fd1e8ed450280dd67d77bdd63ae.png][]

必须要输入正确格式的邮箱才可以点击提交

#### 3.1.11网址 ####

代码：![5027fa24db084c399c198f0a461d6afe.png][]

结果：![739248570bc443ad93b9a72fa139ebd1.png][]

同上

#### 3.1.12数字 ####

代码：![93bb1f4622224c99bfee8e4d9fad8cb1.png][]

结果：![6e43f8fac1994cbf87978483a82a14e6.png][]

#### 3.1.13滑块 ####

代码：![98bdad16263940b4984613f43534df9e.png][]

结果：![220fd67a04f741a2a2293957e2b5030f.png][]

#### 3.1.14搜索框 ####

代码：![4ee104b8ea684a288d1e0093c0f3e778.png][]

结果：![7106d2ce7ad1490d9c193378b4d1ed3c.png][]

### 3.2表单的高级应用 ###

#### 3.2.1隐藏域 ####

（1）用于存储给后端提供的数值，不需要显示在前端

（2）后端通过name值获取value值

代码：![2dde89f4c2aa428f8964cc8c49b3ee67.png][]

结果：![e3722716fe8e4ad9b18ca321f4105116.png][]

#### 3.2.2只读和禁用 ####

（1）文本只读

代码：![4f4439aea74940bca50f25f3e0c1007f.png][]

（2）按钮禁用

代码：![db721678fc0746deabdb6d6f11eed379.png][]

效果为![1eb00a1d78a44e2b9d0a49fb1ec0a514.png][]

（3）注意

文本也可以使用禁用，效果会变成灰色，且无法选中

#### 3.2.3表单元素的标注 ####

（1）增强鼠标的可用性

（2）自动将焦点转移到与该标注相关的表单元素上

（3）只能获取同一个表单的id值

代码：![da122814180543f5a307f09dbc0e0229.png][]

效果：![47338e71c3e547e6a03b0603f96c9469.png][]

### 3.3表单的初级验证 ###

#### 3.3.1表单的初级验证缘由 ####

（1）初级验证：不需要接入后端，调用服务器直接进行简单验证拦截

（2）好处是①减轻服务器的压力②保证数据的可行性和安全性

#### 3.3.2**默认提示placeholder** ####

（1）给input类型的文本框提供一种提示

（2）可以描述文本框期待用户输入何种内容

（3）提示语默认显示，当文本框中输入内容时提示语消失

（4）适合于input标签：text、search、url、email和password等类型

代码：![ae11fd7e57ad42be85220193e49a3918.png][]

结果：![3427349a9ce04b128c38502bba1e5e4a.png][]

#### **3.3.3必填项 required** ####

（1）规定文本框填写**内容不能为空**，否则不允许用户提交表单

（2）适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

代码：![812d8d11fbad43ffb646820af1e748d8.png][]

结果：![38e57bc982e44c23b94f2897b71a1ff0.png][]

[cfc5713c5e4547c2a81eca32486c2881.png]: https://img-blog.csdnimg.cn/cfc5713c5e4547c2a81eca32486c2881.png
[b90a0ee0c9574beeb0006440f6a8e9b2.png]: https://img-blog.csdnimg.cn/b90a0ee0c9574beeb0006440f6a8e9b2.png
[3cee259c7f30481eaa5d92e618efa169.png]: https://img-blog.csdnimg.cn/3cee259c7f30481eaa5d92e618efa169.png
[66c91c0e0cc34dafb61dff1cb596389e.png]: https://img-blog.csdnimg.cn/66c91c0e0cc34dafb61dff1cb596389e.png
[432a1be56fc24d038dce9ae5e44b18c6.png]: https://img-blog.csdnimg.cn/432a1be56fc24d038dce9ae5e44b18c6.png
[3dda9e5e9f7c4879819737db0bf0a0a8.png]: https://img-blog.csdnimg.cn/3dda9e5e9f7c4879819737db0bf0a0a8.png
[659525024fc74525b17face40917ba4a.png]: https://img-blog.csdnimg.cn/659525024fc74525b17face40917ba4a.png
[3f13640ac33444d394b5106579eab4cd.png]: https://img-blog.csdnimg.cn/3f13640ac33444d394b5106579eab4cd.png
[4cb4d8d6fb684fae9f1570934a1f748b.png]: https://img-blog.csdnimg.cn/4cb4d8d6fb684fae9f1570934a1f748b.png
[98e7b535a81240b7bae6d9d8b44ec109.png]: https://img-blog.csdnimg.cn/98e7b535a81240b7bae6d9d8b44ec109.png
[dcc4006554614bf9a8328e459383d6fa.png]: https://img-blog.csdnimg.cn/dcc4006554614bf9a8328e459383d6fa.png
[78e4f3ecd3b64d4a9b3225c1e1e88b42.png]: https://img-blog.csdnimg.cn/78e4f3ecd3b64d4a9b3225c1e1e88b42.png
[c1e49d958e3349809b544e5d15eba792.png]: https://img-blog.csdnimg.cn/c1e49d958e3349809b544e5d15eba792.png
[0fda417c81d74f4180b36bc6dbd8a50f.png]: https://img-blog.csdnimg.cn/0fda417c81d74f4180b36bc6dbd8a50f.png
[dc201e580c234d40960c4fb5c9f092f0.png]: https://img-blog.csdnimg.cn/dc201e580c234d40960c4fb5c9f092f0.png
[37e590b040b947f7a828f686f9ff6ba7.png]: https://img-blog.csdnimg.cn/37e590b040b947f7a828f686f9ff6ba7.png
[b1b4546a2c594483978a1c91cb6f8e98.png]: https://img-blog.csdnimg.cn/b1b4546a2c594483978a1c91cb6f8e98.png
[39b6b9beb3cf49deaee09056139f763a.png]: https://img-blog.csdnimg.cn/39b6b9beb3cf49deaee09056139f763a.png
[879227ea06374063ae70b37a20c0ddb0.png]: https://img-blog.csdnimg.cn/879227ea06374063ae70b37a20c0ddb0.png
[7af559ba3f5d4d0db17236ae55c758df.png]: https://img-blog.csdnimg.cn/7af559ba3f5d4d0db17236ae55c758df.png
[5d9feca02517474b98e28763a30cb66b.png]: https://img-blog.csdnimg.cn/5d9feca02517474b98e28763a30cb66b.png
[11be2e50884a44aa8481079382ca3899.png]: https://img-blog.csdnimg.cn/11be2e50884a44aa8481079382ca3899.png
[1f02649ac1c54e7e9eba281acedc62d2.png]: https://img-blog.csdnimg.cn/1f02649ac1c54e7e9eba281acedc62d2.png
[766c3345f8ce4a58b0e9b925a460fd6d.png]: https://img-blog.csdnimg.cn/766c3345f8ce4a58b0e9b925a460fd6d.png
[8adf53426bf149e49f633fa8e971cd0d.png]: https://img-blog.csdnimg.cn/8adf53426bf149e49f633fa8e971cd0d.png
[77ffa1964dac4a15927db486aaa27315.png]: https://img-blog.csdnimg.cn/77ffa1964dac4a15927db486aaa27315.png
[699e3c71f60e4025b204eeff18550b0c.png]: https://img-blog.csdnimg.cn/699e3c71f60e4025b204eeff18550b0c.png
[69049a07635a496cabce1e8d865798bd.png]: https://img-blog.csdnimg.cn/69049a07635a496cabce1e8d865798bd.png
[a40e4efe8624417eace9063ca25c02c9.png]: https://img-blog.csdnimg.cn/a40e4efe8624417eace9063ca25c02c9.png
[9129ee8f0c634dd792519e17d5d7a525.png]: https://img-blog.csdnimg.cn/9129ee8f0c634dd792519e17d5d7a525.png
[c9081f27a0864d46809989744b13f165.png]: https://img-blog.csdnimg.cn/c9081f27a0864d46809989744b13f165.png
[36aecdcf95de4e9986a027bd51634ca3.png]: https://img-blog.csdnimg.cn/36aecdcf95de4e9986a027bd51634ca3.png
[50a9a3b2901b43b5bea246e1bef6c2f3.png]: https://img-blog.csdnimg.cn/50a9a3b2901b43b5bea246e1bef6c2f3.png
[a8e2ade1f7bc435c848588106bd6677d.png]: https://img-blog.csdnimg.cn/a8e2ade1f7bc435c848588106bd6677d.png
[3fc6a711e99645ccbaca0f36f00982d2.png]: https://img-blog.csdnimg.cn/3fc6a711e99645ccbaca0f36f00982d2.png
[33b8b89355ab4b3a89914f4c390482ef.png]: https://img-blog.csdnimg.cn/33b8b89355ab4b3a89914f4c390482ef.png
[3b69e96be093409f9db1e4c278650bbb.png]: https://img-blog.csdnimg.cn/3b69e96be093409f9db1e4c278650bbb.png
[750c9d776cc84836af6e5c6ca213b60a.png]: https://img-blog.csdnimg.cn/750c9d776cc84836af6e5c6ca213b60a.png
[e660ff756f8f46068fcc768551aced94.png]: https://img-blog.csdnimg.cn/e660ff756f8f46068fcc768551aced94.png
[4a9e4fd1e8ed450280dd67d77bdd63ae.png]: https://img-blog.csdnimg.cn/4a9e4fd1e8ed450280dd67d77bdd63ae.png
[5027fa24db084c399c198f0a461d6afe.png]: https://img-blog.csdnimg.cn/5027fa24db084c399c198f0a461d6afe.png
[739248570bc443ad93b9a72fa139ebd1.png]: https://img-blog.csdnimg.cn/739248570bc443ad93b9a72fa139ebd1.png
[93bb1f4622224c99bfee8e4d9fad8cb1.png]: https://img-blog.csdnimg.cn/93bb1f4622224c99bfee8e4d9fad8cb1.png
[6e43f8fac1994cbf87978483a82a14e6.png]: https://img-blog.csdnimg.cn/6e43f8fac1994cbf87978483a82a14e6.png
[98bdad16263940b4984613f43534df9e.png]: https://img-blog.csdnimg.cn/98bdad16263940b4984613f43534df9e.png
[220fd67a04f741a2a2293957e2b5030f.png]: https://img-blog.csdnimg.cn/220fd67a04f741a2a2293957e2b5030f.png
[4ee104b8ea684a288d1e0093c0f3e778.png]: https://img-blog.csdnimg.cn/4ee104b8ea684a288d1e0093c0f3e778.png
[7106d2ce7ad1490d9c193378b4d1ed3c.png]: https://img-blog.csdnimg.cn/7106d2ce7ad1490d9c193378b4d1ed3c.png
[2dde89f4c2aa428f8964cc8c49b3ee67.png]: https://img-blog.csdnimg.cn/2dde89f4c2aa428f8964cc8c49b3ee67.png
[e3722716fe8e4ad9b18ca321f4105116.png]: https://img-blog.csdnimg.cn/e3722716fe8e4ad9b18ca321f4105116.png
[4f4439aea74940bca50f25f3e0c1007f.png]: https://img-blog.csdnimg.cn/4f4439aea74940bca50f25f3e0c1007f.png
[db721678fc0746deabdb6d6f11eed379.png]: https://img-blog.csdnimg.cn/db721678fc0746deabdb6d6f11eed379.png
[1eb00a1d78a44e2b9d0a49fb1ec0a514.png]: https://img-blog.csdnimg.cn/1eb00a1d78a44e2b9d0a49fb1ec0a514.png
[da122814180543f5a307f09dbc0e0229.png]: https://img-blog.csdnimg.cn/da122814180543f5a307f09dbc0e0229.png
[47338e71c3e547e6a03b0603f96c9469.png]: https://img-blog.csdnimg.cn/47338e71c3e547e6a03b0603f96c9469.png
[ae11fd7e57ad42be85220193e49a3918.png]: https://img-blog.csdnimg.cn/ae11fd7e57ad42be85220193e49a3918.png
[3427349a9ce04b128c38502bba1e5e4a.png]: https://img-blog.csdnimg.cn/3427349a9ce04b128c38502bba1e5e4a.png
[812d8d11fbad43ffb646820af1e748d8.png]: https://img-blog.csdnimg.cn/812d8d11fbad43ffb646820af1e748d8.png
[38e57bc982e44c23b94f2897b71a1ff0.png]: https://img-blog.csdnimg.cn/38e57bc982e44c23b94f2897b71a1ff0.png