HTML中表格、列表和表单的基本用法
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标签被用来定义表单域,以实现用户信息的收集和传递。每一个表单都应该有自己的表单域。
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/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表单一起使用的,每个表单都需要有自己的表单域,这样就避免在操作过程中混淆网页中的其他的表单。