整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
格元素详解与练习
提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。
在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：
今天我们就来学习一下如何向页面中添加表格元素。
首先来介绍一下表格元素中的基本标签。
NO.1：<table></table>
这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。
NO.2：<caption></caption>
这个标签是表格的标题标签。
NO.3：<tr></tr>
这个标签定义表格的列标签。
NO.4：<th></th>
这个标签是列表标题标签，例如，男生、女士、姓名等。
NO.5：<td></td>
这个标签定义表格的行标签。
OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：
<table><!-- 写在表格元素的开头 --><caption>表格标题</caption><!-- 表格标题 --><tr>标题标签<th>姓名</th><!-- 标题标签 --><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 写在表格元素的结尾 -->
页面效果如图所示：没有表格的外边框。
如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。
<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->效果如图所示：
这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->效果如图所示：
ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。
今天的完整代码示例如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body><h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
TML 基础
非常简单的HTML文档
HTML 标题
HTML 段落
HTML 链接
HTML 图片
实例解析
HTML 标题
HTML 标题
在html源码中插入注释
插入水平线
实例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文档中折行的使用。
HTML 格式化的某些问题。
实例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 标签对空行和空格进行控制。
此例演示不同的"计算机输出"标签的显示效果。
此例演示如何在 HTML 文件中写地址。
此例演示如何实现缩写或首字母缩写。
此例演示如何改变文字的方向。
此例演示如何实现长短不一的引用语。
文本下划线与删除线
实例解析
HTML 样式
HTML Style 元素
背景色样式
字体样式，颜色，大小
文本对齐样式
设置文本字体
设置文本字体大小
设置文本字体颜色
设置文本字体，字体大小，字体颜色
HTML使用不同样式
没有下划线的链接
链接到一个外部样式表
实例解析
HTML 链接
创建超级链接
将图像作为链接
在新的浏览器窗口打开链接
链接到同一个页面的不同位置
跳出框架
创建电子邮件链接
创建电子邮件链接 2
实例解析
HTML 图像
插入图像
从不同的位置插入图片
排列图片
本例演示如何使图片浮动至段落的左边或右边。
制作图像链接
创建图像映射
实例解析
HTML 表格
简单的表格
没有边框的表格
表格中的表头
带有标题的表格
跨行或跨列的表格单元格
表格内的标签
单元格边距(Cell padding)
单元格间距(Cell spacing)
实例解析
HTML 列表
无序列表
有序列表
不同类型的有序列表
不同类型的无序列表
嵌套列表
嵌套列表 2
定义列表
实例解析
HTML Forms 和 Input
创建文本域(Text fields)
创建密码域
复选框
单选按钮
简单的下拉列表
预选下拉列表
本例演示如何创建一个文本域（多行文本输入控件）。
创建一个按钮
本例演示如何在数据周围绘制一个带标题的框。
带有文本域与输入域的表单
带有复选框与提交按钮的form表单
带有单选框与提交按钮的表单
发送邮件表单
实例解析
HTML iframe
内联框架 (HTML页面中插入框架)
实例解析
HTML 头部元素
描述了文档标题
HTML页面中默认的URL链接
提供文档元数据
实例解析
HTML 脚本
插入一个脚本
使用 <noscript> 标签
实例解析
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：
此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：
type 值 | 含义 |
text | 文字字段 |
password | 密码域，用户看不到明文，以*代替 |
radio | 单选按钮 |
checkbox | 多选按钮 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图像域，用图像作为背景的提交按钮 |
hidden | 隐藏域，不可见的输入框 |
file | 文本域，用于上传文件等非文本数据 |
文本输入框和密码框
除了显示形式不一样，其它属性一样，有以下属性：
如下是文本输入框和密码框制作一个登录表单
html代码：
<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用户名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密码:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>显示效果：
HTML5 输入类型
除了以上几种类型，HTML5 还增加了多个新的输入类型：
如下代码：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
数字类型（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 选择颜色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
时间：
<input type="time" name="usr_time"><br>
一定范围
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能够在被提交时自动对电子邮件地址进行验证<br>
搜索：
<input type="search" name="googlesearch"><br>
电话：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 类型。<br>
url：
<input type="url" name="url">
提交时能够自动验证 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
单选和多选按钮
使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。
如下实例：
<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form>
</body>
</html>显示效果：
单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按钮、提交按钮、重置按钮
普通按钮：type = “button”，一般配合脚本使用，语法如下：
<input type="button" name="名称" value="按钮值" onclick="脚本程序" />value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
单击您好按钮
提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。
如刚才的登录表单，提交后会返回结果：
重置按钮：type="reset"，用于清除表单数据，也是一种特殊按钮。
输入数据
点击重置按钮后，表单数据清空
重置清空数据
HTML5 按钮
除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form> 其它输入类控件
隐藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隐藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 显示效果
可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。
除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。
如下示例：
<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。
下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：
<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：
<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。
如下代码：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>显示效果：
这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：
到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。
还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！
上篇 ： 前端入门——html 表单
下篇： 前端入门 —— 网页中使用窗口框架
*请认真填写需求信息，我们会在24小时内与您取得联系。
