HTML5简明教程系列之HTML5 表格与表单（二）
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>
三、总结
表格与表单是网页的基础元素，本期主要是对其基础元素的简单使用做介绍，想要熟练使用还得在项目上练习呀。
HTML5简明教程系列之HTML5 表格与表单（二）相关推荐
- HTML5简明教程系列之HTML5基础（一）
打工人是世界上最难的人,打工人同样是世界上最勇敢的人.过几天有个任务关于HTML,但是之前根本没写过HTML啊,又要开始学习了,看到同事一个一个的下班,想哭.那就把自己学习HTML的过程写出来吧.本期 ...
- easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目 录 第3章 HTML表格与表单................................... ...
- HTML5表格，表单的实现过程
本篇博客读完,看着图片能够一步一步做出表格(表单)就算达到目的,看到表格(表单)的图片之后,可以先思考一下自己会如何实现. 从行着手是我发现的一个核心点,大部分表格(表单)都可以拆分为一行一行,奇妙的 ...
- 英语简明语法系列之－－－代词（二）
下文转自: http://www.hxen.com/englishstudy/grammar/ ---------------------------------------------------- ...
- HTML 表格、表单和CSS初识
表格.表单和CSS初识 一.提问 html骨架结构是什么 常用标签有哪些 图像标签有哪些属性,绝对路径和相对路径的区别 链接标签有哪些属性,说出各个属性的作用 列表标签分几种,分别是什么 二.本章任务 ...
- 表格、表单、HTML标记语言以及使用canvas来画图 input新属性
三 内容大纲 今天讲的内容大致为表格.表单.HTML标记语言以及使用canvas来画图,表格中用table标签来书写,其中包含tr.th.td元素来构建表格,还可使用colspan来进行行合并,用r ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 入门视频课:H5和JAVASCRIPT实战教程 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的 ...
- html里面超链接alt_前端html--超链接，表格，表单属性
单元格合并涉及表格结构的调整 1. 跨列合并 属性 : colspan 取值 : 无单位的数值,表示跨几列 2. 跨行合并 属性 : rowspan 取值 : 无单位的数值,表示跨几行 注意 : 1. ...
- 表格和表单的结合示例
表格和表单的结合示例demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
最新文章
- 应用矩阵分析1 子空间分析1 线性子空间基础
- ML之回归预测：利用八(9-1)种机器学习算法对无人驾驶汽车参数(2017年的data,18+2)进行回归预测值VS真实值
- python 字符串交集_Python序列--集合（set）
- 在sharepoint中添加视频播放
- android bool转字符串,Android 知识点——当json传入字符串，使用Boolean接收时，GSON会将其转换为false...
- Lidar Studio点云处理与分析软件V1.1
- libjpeg php,libjpeg62_turbo
- java收割者模式,王牌战士收割者怎么玩 海拉技巧玩法介绍
- Maven的settings.xml文件结构之Servers，Mirror和Repository
- python调研报告总结体会_调查报告的心得体会
- Murmur Hash 例子
- matlab电机算法仿真,MATLAB电机仿真精华50例源代码
- ·穷途末路之举·解决VirtualBox启动问题-Error relaunching VirtualBox VM process 5/terminated with exit code1(0x1)
- 利用决策树算法在鲍鱼数据集上对年龄进行预测
- 如何用大数据进行甜品店选址要素分析
- 上海电子计算机学校招生要什么条件,【上海市致远中学招生简章/入学条件|上海市致远中学】- 上海房天下...
- tsc打印机android,使用热敏打印机Android打印条形码
- DetectoRS论文解读
- ruby中Thor用法雷神介绍，MyCLI ＜ Thor详细介绍
- 存储基础：ATA、SATA、SCSI、SAS、FC