经过前两篇文章的学习,我们的HTML基础的学习已经接近了尾声,今天接下来我们将要学习的是在我们今后工作中经常会用到的的----表格,列表
表格
表格我们都会用过,那都是在Excel或Word文档中,但在HTML文件中又该如何使用表格呢?
在HTML文件中,我们使用<table> </table>标签来定义一个表格
而在列表中我们使用<tr> </tr>来定义表格中的行,使用<td> </td>来定义表格中的列,在<td> </td>中,我们可以使用任何的HTML元素(文字,图像,链接,选择框…)
这三者之间的关系是<tr> </tr>包含在<table> </table>中,<td> </td>包含在<tr> </tr>中
<!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><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>
</body>
</html>
表格中常用的属性
border=""----设置表格边框宽度
bprdercolor=""----设置边框颜色
align=""----设置表格水平对齐方式(left,center,right)
valign=""----设置表格垂直对齐方式(top,middle,bottom)
weight="" height=""----设置表格的高和宽
bgcolor=""----为整个表格或者单一单元格设置背景颜色
background=""----为整个表格或者单一单元格设置背景图像
cellspacing=""----定义单元格之间的距离
cellpadding=""----定义单元边框与单元格内容之间的距离
这我们着重的说一下单元格的合并,clospan="合并的单元格数"定义单元格水平的合并(列合并),rowspan="合并的单元格数"定义单元格的垂直合并(行合并)
<table border="1"><tr><td colspan="2">第一行的合并单元格</td><td rowspan="2">第三列的合并单元格</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>
列表
列表在HTML中分为三种:1.有序列表 2.无序列表 3.自定义列表
有序列表:
我们使用<ol> </ol>来定义一个有序列表,用<li> </li>来包含列表中的内容
<ol><li>果汁</li><li>牛奶</li><li>啤酒</li><li>可乐</li></ol>
可以看出,有序列表中,数据前系统会自动的标出顺序
无序列表:
我们使用<ul> </ul>来定义一个无序列表,用<li> </li>来包含列表中的内容
<ul><li>果汁</li><li>牛奶</li><li>啤酒</li><li>可乐</li></ul>
无需列表中,数据前都有圆形小黑点标记
自定义列表
自定义列表我们以<dl> </dl>来定义,<dl> </dl>下还有<dt> </dt>和<dd> </dd>他们的关系就像古代的皇帝与后宫妃子一样
自定义列表以<dl> </dl>标签开始。每个自定义列表项以<dt> </dt>开始。每个自定义列表项的定义以<dd> </dd>开始,<dt> </dt>与<dd> </dd>在其中数量不限、对应关系不限
<dl><dt>饮料</dt><dd>果汁</dd><dd>牛奶</dd><dt>汽水</dt><dd>可乐</dd><dd>雪碧</dd></dl>
表单
表单我们通过<form> </form>标签来实现
表单中常用的属性:
案例
我们来通过一个简单的案例来将这三者串联起来-----制作一个简单的相亲会员注册网页
<!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" border="1" width="700"><tr><td>性别</td><td><input type="radio" name="sex" value="man" checked><label><img src="../2020.10.28/图片/man.jpg" alt="男士">男</label><input type="radio" name="sex" value="women" ><label><img src="../2020.10.28/图片/women.jpg" alt="女士">女</label></td></tr><tr><td>生日</td><td><select><option value="请选择年份">--请选择年份--</option><option value="1990">--1990--</option><option value="1991">--1991--</option><option value="1992">--1992--</option><option value="1993">--1993--</option><option value="1994">--1994--</option><option value="1995">--1995--</option><option value="1996">--1996--</option><option value="1997">--1997--</option><option value="1998">--1998--</option><option value="1999">--1999--</option><option value="2000">--2000--</option></select><select><option value="请选择月份">--请选择月份--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><select><option value="请选择日期">--请选择日期--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></td></tr><tr><td>所在地区</td><td><input type="text" name="home" 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><select><option value="初中">初中</option><option value="高中">高中</option><option value="本科">本科</option><option value="专科">专科</option></select></td></tr><tr><td>月薪</td><td><input type="text" name="money" value="10000-20000"></td></tr><tr><td>手机号码</td><td><input type="text" name="callnumber"></td></tr><tr><td>昵称</td><td><input type="text" name="name" value="阳光大男孩"></td></tr><tr><td>喜欢的类型</td><td><input type="checkbox" name="like" value="漂亮学姐">漂亮学姐<input type="checkbox" name="like" value="清纯学妹">清纯学妹<input type="checkbox" name="like" value="可爱萝莉">可爱萝莉<input type="checkbox" name="like" value="高冷御姐">高冷御姐<input type="checkbox" name="like" value="all" checked>小孩子啊才选!我全都要!</td></tr><tr><td>自我介绍</td><td><textarea name="me">自我介绍</textarea></td></tr><tr><td rowspan="4"></td><td><input type="checkbox" name="agree" value="agree" checked><label>我同意注册条款和会员加入标准</label></td></tr><tr><td><a href="表单作业--登录页面.html">我是会员,立即登录</a><a href="表单作业--修改信息.html">前往修改页面</a></td></tr><tr><td><h5 align="left">我承诺</h5><ul><li>年满18周岁,单身</li><li>抱着严肃的态度</li><li>真诚的寻找另一半</li></ul></td></tr><tr><td><input type="image" src="图片/btn.png"></td></tr></table></form>
</body>
</html>
完成的网页效果:
