HTML中表格、列表和表单的基本用法（配合案例说明）

缺乏、安全感 2021-11-09 16:50 1060阅读 0赞

### HTML中表格、列表和表单的基本用法 ###

*   *  1.表格的用法
     *   *  1.1 表格标签用法
         *  1.2 表格属性用法
         *  1.3 合并单元格
     *  2.列表的用法
     *   *  2.1 无序列表
         *  2.2 有序列表
         *  2.3 自定义列表
     *  3.表单的用法
     *   *  3.1 input控件
         *  3.2 label控件
         *  3.3 textarea控件（文本域）
         *  3.4 select控件（下拉列表）
         *  最后来讲一下什么叫做form表单域

## 1.表格的用法 ##

表格不是用来布局的，而是用来显示表格式的数据，使得数据的显示具有可读性。  
下面是搜狐财经页面中table的用法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]

### 1.1 表格标签用法 ###

表格主要是用来显示特殊数据的，一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签。另外单元格标签中可以容纳其他的所有的元素，如图片，链接等。

<table> 
 <thead> 
  <tr> 
   <th>标签名称</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>table</td> 
   <td>表格标签，就是一个四方的盒子</td> 
  </tr> 
  <tr> 
   <td>tr</td> 
   <td>定义表格中的行，必须嵌套在table中</td> 
  </tr> 
  <tr> 
   <td>td</td> 
   <td>用于定义表格中的单元格，必须嵌套在行标签中</td> 
  </tr> 
  <tr> 
   <td>th</td> 
   <td>表头单元格ytd用法相同（一般表头单元格位于表格的第一行或者第一列，并且文本加粗居中）</td> 
  </tr> 
  <tr> 
   <td>caption</td> 
   <td>表格标题，通常这个标签会被居中显示且显示于表格之上，该标签必须紧跟在table标签之后。</td> 
  </tr> 
 </tbody> 
</table>

### 1.2 表格属性用法 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>设置表格宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置表格高度</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>定义表格单元格之间的空间</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>表示单元格边框与单元格内容之间的距离</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>表示围绕表格的边框的宽度</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>表示表格在页面中的位置</td> 
  </tr> 
 </tbody> 
</table>

表格属性中我们要重点关注的是cellspacing和cellpadding。并且在实际的开发过程中，通常将border，cellspacing和cellpadding设置为0。  
**下面用一张图来解释上述属性在表格中的具体含义：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]  
下面用一个案例来展示上述表格标签和表格属性的用法。  
**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
    		<caption>湖人队主要球员</caption>
    		<tr> 
    			<th>姓名</th>  
    			<th>位置</th>  
    			<th>能力</th>  
    		</tr>
    		<tr> 
    			<td>詹姆斯</td>  
    			<td>小前锋</td>  
    			<td>99</td>  
    		</tr>
    		<tr> 
    			<td>戴维斯</td>  
    			<td>大前锋</td>  
    			<td>97</td>  
    		</tr>
    	</table>
    </body>
    </html>

**显示效果如下（这里只是单纯的html显示效果）：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]

### 1.3 合并单元格 ###

**1.合并单元格有两种形式：**

*  跨行合并：rowspan=“合并单元格的个数”
 *  跨列合并：colspan=“合并单元格的个数”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 3]

**2.合并单元格的顺序，先上后下，先左后右**

**3.单元格合并的三个步骤**

*  先确定是跨行还是跨列
 *  根据合并原则找到目标的单元格，写上合并方式和要合并的单元格数量
 *  删除多余的单元格

现在根据上面提供的图片我们进行单元格的合并案例。  
**代码如下**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<table border="1" width="500" height="240" align="center" cellspacing="0">
    		<caption> 个人简介 </caption>
    		<tr>
    			<td>詹姆斯</td>
    			<td>男</td>
    			<td>18</td>
    			
    			<td rowspan="2">照片</td>
    		</tr>
    		<tr>
    			<td>身高 203</td>
    			<td>湖人队</td>
    			<td>已婚</td>
    			
    		</tr>
    		<tr>
    			<td>总冠军年份</td>
    			
    			<td colspan="3">2012，2013，2016</td>
    			
    		</tr>
    		<tr>
    			<td>mvp年份</td>
    			<td colspan="3">2009,2010,2012,2013</td>
    		</tr>
    	</table>
    </body>
    </html>

**网页效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 4]  
此外表格划分结构也需要我们了解一下，对于比较复杂的表格，结构比较复杂，在开发时我们需要将其分成三部分：**题头（thead）,正文（tbody）和脚注（tfoot）**。这样可以帮助我们更好的划分表格结构。

## 2.列表的用法 ##

前面我们知道表格一般用于数据的展示，而列表主要用于页面的布局，以后学习了css后，可以与其配合实现页面中的布局。

### 2.1 无序列表 ###

这是以后我们在开发中用得最多得列表形式。  
基本语法如下：

### 2.2 有序列表 ###

使用情形少，了解即可。  
基本语法如下：

### 2.3 自定义列表 ###

基本语法如下：

下面用一个案例介绍上述三种列表的使用和网页中得效果。  
**代码如下**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
      <h2>1. 无序列表</h2>
      湖人队球员：
      <ul>
      	<li>詹姆斯</li>
      	<li>戴维斯</li>
      	<li>考辛斯</li>	
      	<li>裤子吗</li>
      </ul>
      <h2>2. 有序列表 </h2>
      近几年mvp获得者：
      <ol>
      	<li>字母哥</li>
      	<li>哈登</li>
      	<li>威斯布鲁克</li>
      	<li>库里</li>
      </ol>
    
       <h2>3. 自定义列表 </h2>
       球队成员：
       <dl>
       		<dt>湖人队</dt>
       		<dd>詹姆斯</dd>
       		<dd>戴维斯</dd>
       		<dd>考辛斯</dd>
       		<dd>裤子吗</dd>
       		<dt>快船队</dt>
       		<dd>伦纳德</dd>
       		<dd>乔治</dd>
       		<dd>威廉姆斯</dd>
       		<dd>哈雷尔</dd>
       </dl>
    </body>
    </html>

**显示效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 5]  
列表在网页中的具体用法需要配合css使用，主要是用来实现网页中的布局。特别是无序列表，以后会大量用到该结构。

## 3.表单的用法 ##

表单目的是为了收集用户的信息，跟用户进行交互时收集用户资料，也需要表单。一个完整的表单通常由**表单空间，提示信息和表单域**3个部分构成。

### 3.1 input控件 ###

**语法：**

**input控件常用属性如下：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>表单类型</td> 
   <td>text：单行文本输入框；password：密码输入框；radio:单选按钮；checkbox：复选框；button：普通按钮；submit：提交按钮；reset：重置按钮；image：图像形式提交按钮；file：文件域</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>表单值</td> 
   <td>表单里面默认显示的文本</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>表单名字</td> 
   <td>name主要作用是区别不同的表单</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>默认选中</td> 
   <td>在表示单选或者复选表单时，表示默认选中指定项</td> 
  </tr> 
 </tbody> 
</table>

上述name属性在我们后续用到ajax和后台时，是必须要用到的。后台可以通过这个name属性找到这个表单，然后进行后续的操作。  
**现在通过如下代码实现上述所有控件，属性用法：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	 
        用户名： <input type="text" value="请输入用户名" name="username" />  <br />
         
        密码：  <input type="password" value="请输入密码" name="pwd" /> <br />
         
        性别： 
    	    男 <input type="radio" name="sex" />  
    	    女  <input type="radio" name="sex" checked="checked" /> 
    	    
    	爱好:
    	    lol <input type="checkbox" name="hobby" checked="checked" />
    	    nba <input type="checkbox" name="hobby" />
    	    中国新说唱 <input type="checkbox" name="hobby" />
    	    前端 <input type="checkbox" name="hobby" /> <br />
    	         
    	   		<input type="button" value="获取短信验证码" />
    	   		<input type="submit" value="提交所填" />
    	   		<input type="reset" value="重置所填" />
    	   		
    	   		<input type="image" src="url" /> <br />
         上传文件:
                
                <input type="file" />
    </body>
    </html>

**显示效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 6]

### 3.2 label控件 ###

label标签主要的目的是为了提高用户体验。用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点，而不是只能通过点击文本框获得焦点。  
用法1：直接包括input表单，适合单个表单选择

用法2：for属性规定label与哪个表单元素绑定

### 3.3 textarea控件（文本域） ###

通过文本域可以创建多行文本输入框，上面提到的input表单只能显示一行。  
input多用于用户名，昵称，密码等场景；textarea文本域多用于留言板，有多行文字输入的场景。  
语法：

### 3.4 select控件（下拉列表） ###

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。  
用法：

select至少包含一对option，selected表示当前项为默认选中项。  
**实例代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	籍贯：
    	
    	<select>
    		<option>--请选择省份--</option>
    		<option selected="selected">北京</option>
    		<option>天津</option>
    		<option>上海</option>
    		<option>山东</option>
    	</select>
        
    	<select>
    		<option>--请选择城市--</option>
    		<option>海淀区</option>
    		<option>昌平区</option>
    		<option>通州区</option>
    		<option>雄安区</option>
    	</select>
    
    </body>
    </html>

**显示效果（下拉的效果大家可以自己复制上述代码去自行尝试）：**  
![在这里插入图片描述][20190801195416245.PNG]

### 最后来讲一下什么叫做form表单域 ###

我们在网页中收集到的表单信息需要通过form表单域传递给服务器。form标签被用来定义表单域，以实现用户信息的收集和传递。每一个表单都应该有自己的表单域。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td align="left">url地址</td> 
   <td>用于指定接收并处理表单数据的服务器程序的url地址。</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td align="left">get/post</td> 
   <td>用于设置表单数据的提交方式，其取值为get或post。</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td align="left">名称</td> 
   <td>用于指定表单的名称，以区分同一个页面中的多个表单。</td> 
  </tr> 
 </tbody> 
</table>

**用法代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<form action="" method="post" name="user">
    		用户名: <input type="text" name="username" /> <br />
    		密码: <input type="password" name="pwd" /><br />
    		<input type="submit" />
    		<input type="reset" />
    	</form>
    </body>
    </html>

**显示效果：**  
![在这里插入图片描述][20190801200245939.PNG]  
注意之前提高的input控件中的提交（subbit）和重置（reset）表单一般是配合form表单一起使用的，每个表单都需要有自己的表单域，这样就避免在操作过程中混淆网页中的其他的表单。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: /images/20211109/c43cf1c47b654167964d3fd0141d4bba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20211109/f4f6cefb62b74e8790d02dd00a7feaa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]: /images/20211109/9dcaf4c6f3de47118b7d177001769ff5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 3]: /images/20211109/e8c12a2cb0e649ce8345d824ccaba2b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 4]: /images/20211109/8e7c9e7fa6ba43fe9dae382ade844bda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 5]: /images/20211109/e0c820ff1d4a4cd982ae12f67bf02a00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 6]: /images/20211109/fb57af8c6971439c96006935203ad6a8.png
[20190801195416245.PNG]: /images/20211109/ff356ef2b784470fa7b9cb524332cf8a.png
[20190801200245939.PNG]: /images/20211109/5405fc696eab4ff294570adf93b51a19.png