HTML基础知识(第三阶段)_综合

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>