HTML重点标签——表格,列表和表单
今天我们来进行HTML的最后一个阶段,这个阶段我们主要学习表格,列表和表单,因为这三个在以后的网页制作中会经常用到,所以今天特地拿出来进行详细的讲解.
HTML表格
-
表格由
table标签来定义,表格平时用于显示和展示数据 -
每个表格均有若干行（由
<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。 -
字母
td指表格数据（table data），即数据单元格的内容。 -
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格的基本结构:
<table>-</table>
- 定义表格
<th>-</th>
- 定义表格的表头单元格(单元格中文字会加粗)
<tr>-</tr>
- 定义表格的行
<td>-</td>
- 定义表格的列
HTML表格高度和宽度
-
在
<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。 -
您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
HTML表格背景
bgcolor属性
- 可以为整个表格或仅为一个单元格设置背景颜色。
background属性
- 可以为整个表设置背景图像或仅为一个单元设置背景图像。
bordercolor属性
- 可以设置边框颜色。
HTML表格空间
有以下两个属性，用于调整HTML表格中单元格的空间：
cellspacing属性
- 定义表格单元格之间的空间
cellpadding属性
- 表示单元格边框与单元格内容之间的距离
HTML合并单元格
colspan属性
- 可以将两个或者多个列合并为一个列
rowspan属性
- 可以将两行或者更多行进行合并
合并单元格的三步骤:
- 先确定是跨行(rowspan)还是跨列(colspan)
- 找到目标单元格并写上合并的数量
- 删除多余的单元格
HTML表格头部、主体、页脚
表格可以分为三个部分头部,主体,页脚,如同word文档中页面的页眉,正文和页脚一样.
头部，主体和页脚的对应的三个标签是:
thead
- 创建单独的表头
tbody
- 表示表格的主体
tfoot
- 创建一个单独的表页脚
表可以包含多个<tbody>元素以指示不同的页面
但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前
HTML表格和边框属性
border属性
在实例中如果不定义表格和边框的属性的话,表格将不显示边框,所以我们需要使用border来显示一个带有边框的表格
align属性
align可以将表格的位置设置为left(左),center(中)和right(右)
HTML表格实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格作业</title>
</head>
<body>
<table border="1" cellpadding="40" cellspacing="0" align="center" width="500">
<tr>
<td colspan="6" align="center">------</td>
</tr>
<tr>
<td>姓名</td>
<td>德莱厄斯</td>
<td>专业</td>
<td>计算机</td>
<td colspan="2" rowspan="3"></td>
</tr>
<tr>
<td>性别</td>
<td>男</td>
<td>毕业学校</td>
<td>城建学院</td>
</tr>
<tr>
<td>民族</td>
<td>汉族</td>
<td>住址</td>
<td>诺克萨斯</td>
</tr>
<tr>
<td>学历</td>
<td>小学二年级</td>
<td>邮箱</td>
<td>123456789@qq.com</td>
<td>联系方式</td>
<td>12345578945</td>
</tr>
<tr>
<td>出生日期</td>
<td>2018.3.16</td>
<td>电话</td>
<td>110</td>
<td>邮编</td>
<td>101102</td>
</tr>
<tr>
<td colspan="2">实习经历</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
HTML列表
HTML支持有序,无序和自定义列表.
HTML无序列表
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
-
无序列表使用
<ul>标签 -
无序列表
ul中只能嵌套li -
li双边标记,可以容纳所以元素 -
无序列表适合成员之间无级别顺序关系的情况。
无序列表的语法格式:
<ul>
<li>列表项<li/>
<li>列表项<li/>
<li>列表项<li/>
<ul/>
HTML有序列表
-
有序列表也是一列项目，列表项目使用数字进行标记。
-
有序列表始于
<ol>标签。每个列表项始于<li>标签。 -
有序列表适合各项目之间存在顺序关系的情况。
-
列表项项使用数字来标记。
有序列表的语法格式:
<ol>
<li>列表项<li/>
<li>列表项<li/>
<li>列表项<li/>
<ol/>
HTML自定义列表(重点)
-
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
-
自定义列表没有项目符号
自定义列表的语法格式:
-
自定义列表以
<dl>标签开始,dl标签中只能包含dt和dd -
每个自定义列表项以
<dt>开始,dt和dd个数有限制,经常一个dt对应多个dd -
每个自定义列表项的定义以
<dd>开始
<dl>
<dt>名词<dt/>
<dd>名词解释1<dd/>
<dd>名词解释2<dd/>
<dd>名词解释3<dd/>
<dl/>
HTML列表实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>无序列表第一行</li>
<li>无序列表第二行</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>有序列表第一行</li>
<li>有序列表第二行</li>
</ol>
<h2>自定义列表</h2>
<dl>
<dt>首先(自定义列表)</dt>
<dd>我们要团结</dd>
<dd>我们要万众一心</dd>
<dt>其次我们要吃饱</dt>
<dd>不能饿着</dd>
<dd>对吧</dd>
</dl>
</body>
</html>
HTML表单
HTML表单实例
世纪佳缘-你在我也在网页主界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<form >
<h4 align="center">青春不常在,抓紧谈恋爱</h4>
<table border="1" cellpadding="1" cellspacing="1" align="center">
<tr>
<td>性别</td>
<td>
<input type="radio" name="nan" value="男" checked><img src="img/男.jpg" alt="男">男
<input type="radio" name="nan" value="女"><img src="img/女.jpg" alt="女">女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="" id="">
<option value="--请选择年份--">--请选择年份--</option>
<option value="1544">1544</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="" id="">
<option value="--请选择年份--">--请选择月--</option>
<option value="1544">1</option>
<option value="1999">9</option>
<option value="2000">2</option>
</select>
<select name="" id="">
<option value="--请选择年份--">--请选择日--</option>
<option value="1544">15</option>
<option value="1999">19</option>
<option value="2000">20</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" name="地区" value="北京市中心">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" value="未婚" checked>未婚
<input type="radio" name="marry" value="已婚">已婚
<input type="radio" name="marry" value="离婚">离婚
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" name="学历" value="幼儿园">
</td>
</tr>
<tr>
<td>月薪</td>
<td><input type="text" name="月薪" value="1000-2000"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text"></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" value="可爱的" name="love">可爱的
<input type="checkbox" value="傻逼的" name="love">傻逼的
<input type="checkbox" value="憨批的" name="love">憨批的
<input type="checkbox" value="瓜皮的" name="love">瓜皮的
<input type="checkbox" value="成年人不做选择,我全都要" name="love">成年人不做选择我全都要
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="" id="" cols="30" rows="2">自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="img/免费注册.png">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="同意">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="欢迎来到登录页面.HTML">我是会员.立即登录</a>
<a href="欢迎来到修改页面.HTML">前往修改页面</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>
年满18岁,单身
</li>
<li>
抱着严肃的态度
</li>
<li>
真诚寻找另一半
</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
修改界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改界面</title>
</head>
<body>
<h4 align="center">欢迎来到修改页面</h4>
<form action="">
<table align="center">
<tr>
<td>姓名:</td>
<td><input type="text" value="jack"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" value="女士">女士
<input type="radio" value="男士">男士
</td>
</tr>
<tr>
<td>学历:</td>
<td><select name="" id="">
<option value="幼儿园" selected>幼儿园</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
</td>
</tr>
<tr>
<td>
个人描述
</td>
<td><textarea name="" id="" cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="radio">不要公开我的个人信息
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存">
<input type="button" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
会员登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会员登录界面</title>
</head>
<body>
<form>
<table align="center">
<caption><h2>欢迎来到登录页面</h2></caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>请输入手机号：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>请输入密码：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text"></td>
<td><img src="img/验证码.bmp" alt=""></td>
</tr>
<tr>
<td><button>登录</button></td>
<td><button>取消</button></td>
</tr>
</table>
</form>
</body>
</html>
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
