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

本文详细介绍了HTML中的表格、列表和表单的基本用法,包括表格标签、属性、单元格合并,列表的不同类型及其语法,以及表单控件的使用,如input、label、textarea和select,帮助读者掌握HTML网页构建的基础。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.表格的用法

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

1.1 表格标签用法

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

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

1.2 表格属性用法

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

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

<!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显示效果):
在这里插入图片描述

1.3 合并单元格

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

  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan=“合并单元格的个数”
    在这里插入图片描述

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>
			<!-- <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>

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

2.列表的用法

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

2.1 无序列表

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

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

2.2 有序列表

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

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

2.3 自定义列表

基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

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

<!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>

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

3.表单的用法

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

3.1 input控件

语法:

  <input type="属性值" value="你好">

input控件常用属性如下:

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <!-- type text  是一个文本框 -->
    用户名: <input type="text" value="请输入用户名" name="username" />  <br />
     <!-- type password  是一个密码框 -->
    密码:  <input type="password" value="请输入密码" name="pwd" /> <br />
     <!-- type radio  是一个单选框 -->
    性别: 
	    男 <input type="radio" name="sex" /><input type="radio" name="sex" checked="checked" /> 
	 <!-- type checkbox  是一个复选框 -->   
	爱好:
	    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 />
	         <!-- 普通按钮需要些value值 -->
	   		<input type="button" value="获取短信验证码" />
	   		<input type="submit" value="提交所填" />
	   		<input type="reset" value="重置所填" />
	   		<!-- 图片提交按钮 里面必须包含 src 属性 -->
	   		<input type="image" src="url" /> <br />
     上传文件:
            <!-- 文件域 上传文件用的-->
            <input type="file" />
</body>
</html>

显示效果:
在这里插入图片描述

3.2 label控件

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

<label> 用户名: <input type="radio" name="usename" 
value="请输入用户名">   </label>

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

<label for="nba">湖人队</label>
<input type="radio" name="nba"  id="nba">

3.3 textarea控件(文本域)

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

<textarea >
  文本内容
</textarea>

3.4 select控件(下拉列表)

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

<select>
  <option selected ="selected">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	籍贯:
	<!-- 省份选择的  selected="selected" 表示默认选中 北京 -->
	<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>

显示效果(下拉的效果大家可以自己复制上述代码去自行尝试):
在这里插入图片描述

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

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

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式,其取值为get或post。
name名称用于指定表单的名称,以区分同一个页面中的多个表单。

用法代码:

<!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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值