HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课。本期主要内容为:HTML表格与DIV应用、HTML表单。上期基础部分的传送门:
HTML5简明教程系列之HTML5基础(一)_Thomas_Lbw的博客-CSDN博客
目录
一、HTML 表格与 DIV 应用
1.1 创建表格
1.2 div设置
1.3 小节挑战-课程表绘制
二、HTML表单
2.1 插入表单对象
2.2 菜单和列表
2.3 文本域
2.4 挑战-表单综合
三、总结
一、HTML 表格与 DIV 应用
div 是网页制作中用于定位元素或者布局的一种重要技术。
1.1 创建表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
eg:
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
1. 为表格加边框:
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
2. caption 元素定义表格标题:
<table border="1" width="300px" height="150px">
<caption>
表格标题
</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
3. 给表格添加表头:
<table border="1" width="300px" height="150px">
<caption>
支出表
</caption>
<tr>
<th>支出</th>
<th>备注</th>
</tr>
<tr>
<td>32</td>
<td>买苹果</td>
</tr>
<tr>
<td>24</td>
<td>买饮料</td>
</tr>
</table>
4. 表格与单元格的属性:
1.2 div设置
在网页中可以使用很多个 div,在网页制作中,使用 div 可以将网页中的任何元素布局到网页中的任何位置。
<div style="样式设置"><div></div></div>
table 元素布局:
- 优点:
- 理解比较简单。
- 不同的浏览器看到的效果一般相同。
- 缺点:
- 显示样式和数据绑定在一起。
- 布局的时候灵活度不高。
- 一个页面可能会有大量的 table 元素,代码冗余度高。
- 增加带宽。
- 搜索引擎不喜欢这样的布局。
div 元素布局:
- 优点:
- 符合 W3C 标准。
- 搜索引擎更加友好。
- 样式的调整更加方便,内容和样式的分离,使页面和样式的调整变得更加方便。
- 节省代宽,代码冗余度低。
- 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
1.3 小节挑战-课程表绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>课程表</title>
</head>
<body>
<table border="1" width="60%" bgcolor="pink" cellpadding="2">
<caption>
课程表
</caption>
<tr align="center">
<td colspan="2">时间\日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td>9:30-10:15</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>音乐</td>
<td>体育</td>
</tr>
<tr align="center">
<td>10:25-11:10</td>
<td>数学</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>14:30-15:15</td>
<td>体育</td>
<td>语文</td>
<td>历史</td>
<td>政治</td>
<td>化学</td>
</tr>
<tr align="center">
<td>15:25-16:10</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
效果:
二、HTML表单
网页中的表单由许多不同的表单元素组成,这些表单元素包括文字字段、单选按钮、复选框、按钮等。
2.1 插入表单对象
1. 文字字段:
该语法包含了许多参数,除了 type
参数以外,其他的参数都是可选的,大家可以自行选择。举个例子:
<form name="formBox" method="post" action="">
姓名:<input type="text" name="name" size="20" /><br />
年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>
2. 密码输入框:
密码输入框是一种特殊的文字字段,他的各个属性和文字字段是相同的,但是输入进密码输入框的字符全部是“*”表示,保证周围人看不见输入的文本。
<input type="password" name="pwd" />
3. 单选按钮 :
<form name="formBox" method="post" action="">
<input type="radio" name="sex" value="male" checked />男<br />
<input type="radio" name="sex" value="female" />女
</form>
4. 复选框:
<form name="formBox" method="post" action="">
<input type="checkbox" name="music" checked />音乐<br />
<input type="checkbox" name="art" />美术<br />
<input type="checkbox" name="math" />数学<br />
</form>
5. 按钮 :
HTML 表单中,有三种按钮:提交按钮,重置按钮,匿名按钮。我们可以使用 <button>
元素或者 <input>
元素来创建一个按钮。type
属性的值指定显示什么类型的按钮。
提交按钮(submit):用于发送表单数据给服务器。
<form name="formBox" method="post" action=""> <input type="text" value="输入的内容" /> <button type="submit">This a submit button</button> <!--or--> <input type="submit" value="This is a submit button" /> </form>
重置按钮(reset):
重置按钮用来清除用户在页面中输入的信息。
<form name="formBox" method="post" action=""> <input type="text" /> <button type="reset">This a reset button</button> <!--or--> <input type="reset" value="This is a reset button" /> </form>
匿名按钮(button):
没有自动生效的按钮,但是可以使用 JavaScript 代码进行定制。如果你省略了
type
属性,那么这就是默认值。<button type="button">This a anonymous button</button> <!--or--> <button>This a anonymous button</button> <!--or--> <input type="button" value="This is a anonymous button" />
2.2 菜单和列表
菜单和列表主要是用来选择给定答案中的一种,这类选择中往往答案比较多。
1. 下拉菜单
下拉菜单能够节省页面空间,正常状态下显示一个选项,单击展开所以选项。
<form name="formBox" method="post" action="">
<select name="select">
<option value="成都">成都</option>
<option value="广州">广州</option>
<option value="四川">四川</option>
<option value="上海">上海</option>
</select>
</form>
2. 列表项
在页面中列表项可以显示出几条信息,一旦超出这个信息量,在列表项右侧会出现滚动条,拖动滚动条可以看到所有选项。size="2"
表示一次显示 2 条数据。
<form name="formBox" method="post" action="">
<select name="select" size="2" multiple="multiple">
<option value="成都">成都</option>
<option value="广州">广州</option>
<option value="四川">四川</option>
<option value="上海">上海</option>
</select>
</form>
2.3 文本域
当用户想要填入多行文本时,就应该使用文本域而不是文本字段。文本域使用 <textarea>
标记。cols
代表列数,rows
代表行数。
<form name="formBox" method="post" action="">
留下您的联系方式:
<textarea name="textarea" cols="35" rows="5"></textarea>
</form>
2.4 挑战-表单综合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<form action="" method="get">
<p>姓名:<input type="text" name="username" /></p>
<p>密码:<input type="password" name="password" /></p>
<p>
性别:
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
爱好:
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swimming" /> 游泳
</p>
<p>
照片:
<input type="file" name="person_pic" />
</p>
<p>
个人描述:
<textarea name="about"></textarea>
</p>
<p>
籍贯:
<select name="select">
<option value="成都">成都</option>
<option value="广州">广州</option>
<option value="四川">四川</option>
<option value="上海">上海</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交" />
<input type="reset" name="" value="重置" />
</p>
</form>
</body>
</html>
三、总结
表格与表单是网页的基础元素,本期主要是对其基础元素的简单使用做介绍,想要熟练使用还得在项目上练习呀。