【千锋教育HTML5从入门到精通】第3章 HTML表格与表单 内容分析 本章主要介绍HTML表格、HTML表单 教学目标 掌握HTML表格的基本使用、掌握HTML表单的基本使用、了解前端与后端如何交互与通信 教学内容 HTML表格 生活中，经常使用表格来统计数据和信息，这样可以更清晰地显示数据或信息，同理在在制作网页时 为了有条理地显示网页中的素，可以使用表格对网页进行布局和规划，从而可以给浏览者展示大量且清晰的排列数据，表格在网页中应用得极其广泛，下面先来看下网页中表格的展现效果，如图3.1、图3.2所示。
图3.1 网页中表格展示效果
图3.2 网页中表格展示效果 表格的基本结构 每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，其语法格式如下： 上面三个标签是创建表格的基本标签，其中<table></table>标签用于定义一个表格。<tr>标签用于定义表格中的一行，必须嵌套在<table></table>标签中，在<table></table>标签中包含几对<tr></tr>，表示该表格有几行。<td></td>标签用于定义表格中的单格，必须嵌套在<tr></tr>标签中，一对<tr></tr>包含几对<td></td>，表示该行中有多少个单格（列）。 表格内除了可以添加文本外，还可以添加其它标签素，如：图片、列表、段落等。 默认情况下表格是没有边框的，如果想要给表格添加边框，可以设置表格的border属性，数值为边框的宽度。 表头与标题 为了使表格的格式更清晰方便读者查阅，应用表格时经常需要为表格设置表头，表头<th>是<td>单格的一种标题，其本质还是一种单格，一般位于表格的第一行或第一列，用来表明这一行或列的内容类别。浏览器会将表头默认以粗体居中的样式显示在网页中。 <th>标签和<td>在本质上都是单格，但这两种不可以互换使用。th即“table header（表头单格）”。而td即“table data（单格）”。 表格一般都有一个标题，用来表明表格的内容，一般位于整个表格的第一行，使用<caption>标签。一个表格只能含有一个表格标题。 表格语义化 为了使网页内容更好的被搜索引擎理解，在使用表格进行布局时，HTML中引入了<thead>、<tbody>和<tfoot>这三个语义化标签，用来将表格划分为头部、主体和页脚三部分。用这三个部分来定义网页中不同的内容，三个标签的详细理解如下。 l <thead></thead>标签：用于定义表格的头部，位于<table></table>标签中，一般包含网页的logo和导航等头部信息。 l <tfoot></tfoot>标签：用于定义表格的页脚，位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。 l <tbody></tbody>标签：用于定义表格的主体，位于<table></table>标签中。<tfoot></tfoot>标签之后，一般包含网页中除头部和底部以外的其他内容。 语义化表格效果上并没有什么变化，<thead>、<tbody>和<tfoot>三个标签不带任何效果，只是更好地提供了语义化的功能，根据表格的需求尽量添加相应的语义化标签。需要注意<thead>、<tfoot>这两个标签在一个<table>标签中只能出现一次，而<tbody>标签可以出现多次。 合并行与列 在word中设计表格时，有时需要将两个或多个的相邻单格组合成一个单格，即合并单格的操作。在HTML中，也需要用到“表格合并行”和“表格合并列”。 合并行使用<td>标签的rowspan属性，而合并列则用到<td>标签的colspan属性。 单格边距与间距 表格还有用于控制单格边距与间距的属性，即cellpadding和cellspacing属性，cellpadding属性用于设置单格内容与单格边框之间的空白间距，默认为1px.，cellspacing属性用于设置单格与单格边框之间的空白间距，默认为2px。 表格其他属性 HTML为表格提供了一系列的属性，用于控制表格的显示样式，除上面<table>标签的属性，还有很多控制单格和单格内容的属性，具体如表3.1所示。 表3.1 <table>标签常用属性属性名含义属性值width设置表格的宽度像素值height设置表格的高度像素值align设置单格内容的水平对齐方式left(左对齐)、enter(居中对齐)、right（右对齐）valign设置单格内容的垂直对齐方式baseline（基线对齐）、top（上对齐）、middle（居中对齐）、bottom（下对齐） 接下来将详细介绍表3.1中的属性 1. width属性 width属性可以设置单格的宽度，当一列有多个不同width属性值时，取最大值作为这一列的宽度。 2. height属性 height属性可以设置单格的高度，当一行有多个不同height属性值时，取最大值作为这一行的高度。 3. align属性 align属性可以设置单格的内容左右对齐方向， <th>标签的align属性默认为center，<td>标签的align属性默认为left。<table>标签也有align属性，用来设置表格在网页中的水平对齐方式。 4. valign属性 valign属性可以设置单格的内容垂直对齐的方向，默认为center(居中对齐)。 HTML表单 表单是网页中常用的一种展示效果，如登录页面中的用户名和密码的输入、登录按钮等都是用表单相关的标签定义的。表单是HTML中用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现网页与用户的交流。本节将详细讲解表达使用，先来观察微博登录、注册页面表单的展示效果，如图3.3所示。
图3.3 微博登录、注册展示效果 HTML中，一个完整的表单通常由表单素、提示信息和表单域三个部分组成，下面将详细介绍这三个部分。 l 表单素：包含表单的具体功能项，如文本输入框、下拉列表框、复选框、密码输入框、登录按钮等。 l 提示信息：表单中通常还需包含一些说明性的文字，提示用户要进行的操作。 l 表单域：用来容纳表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果未定义表单域，表单中的数据就无法传送到后台服务器。 表单素是表单的核心，常用的表单素如表3.2所示。 表3.2 表单素表单素含义<input>表单输入框（可定义多种表单项）<textarea>定义多行文本框<select>定义一个下拉列表(必须包含列表项)<label>定义表单辅助项 这里先简单了解常用的表单素，后面的小节将详细讲解。 <form>标签 为了实现网页与用户的交流，需要让表单中的数据传送给后台服务器，这就必须定义表单域。定义表单域用<table>标签定义表格类似，HTML中<form>标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，<form></form>标签中的所有内容都会被提交给服务器。其语法格式如下： HTML表单将数据发送给后台服务器，用到<form>的action、method、enctype和target属性，下面详细了解这四个属性。 1. action属性 action属性是用来定义表单数据的提交地址，即一个URL。HTML表单要想和后台服务器进行连接，就需要在action属性上设置一个URL。比如两人打电话，双方要通话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。具体示例如下： 表示提交表单时，表单数据会传送到qianfeng_action.asp的页面处理。 action属性值可以是相对路径或绝对路径，还可以是接收数据的E-mail邮箱地址。具体示例如下： 表示提交表单时，表单数据以电子邮件的形式传递出去。 2. method属性 method属性用来定义表单数据的提交方式，常用的有get（默认）和post两种方式。提交方式类似于通信方式，可以打电话、发短信或发邮件。一般情况下，一些数据用get方式，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。post方式的保密性好，而且无数据量的限制，使用method=”post”可以大量提交数据。 3. enctype属性 enctype属性用来定义表单数据的提交内容形式，常用的有application/x-www-form-urlencoded（默认）和multipart/form-data两种方式。提交内容可以是网页中的文本，也可以是图片或视频等非文本的内容，因此需要对enctype属性选择不同的设置。 4. target属性 target属性用来定义提交地址的打开方式，常用的有_self（默认）和_blank两种方式。打开方式可以选择当前页打开，也可以在新页面打开，<form>标签中的target属性跟<a>标签中的target属性一样，这里不再赘述。 <input>标签 网页中经常会包含有单行文本框、单选按钮、复选框、提交按钮等，要想定义这些表单素需要使用<input>标签，其基本语法格式如下： 1. type属性 <input>标签通过type属性取值不同可以展示不同的表单类型，其属性值如表3.3。 表3.3 type属性取值表单素含义text单行文本框password密码文本框radio单选框checkbox复选框button按钮submit提交按钮reset重置按钮hidden隐藏域image图像形式的按钮file文件上传按钮 表3.3中列出了type属性的取值及含义，下面将分别讲解这些属性。 （1）text、password text值用来展示单行文本框，password值用来展示密码文本框，一般用与登录界面。 （2）radio、checkbox radio值用来展示单选框，checkbox值用来展示复选框，一般在调查问卷中使用。 （3）button、submit、reset button值用来设置普通按钮，submit值用来设置提交按钮，reset值用来设置重置按钮。 普通按钮没有任何行为，常用于在用户单击按钮时启动JavaScript程序。提交按钮可以看成一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给后台服务器处理。重置按钮也可以看成一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。 （4）hidden hidden值用于隐藏那些只是往后台服务器发送一些数据，但又不影响页面布局的表单控件。 （5）image image值用来设置图像形式的按钮，src属性用来引入图像的地址，目的是替换submit的默认样式，从而完成更加美观的展示。 （6）file file值用来设置文件上传的按钮，文件上传是网站中常见的功能，例如网盘文件上传和邮箱文件上传。设置file值时，<form>标签的method属性必须设置成post，enctype属性必须设置成multipart/form-data。 网页中经常能看到一些漂亮的上传按钮，这些按钮都是通过CSS来实现的，后面的章节将会详细讲解。 2. 其他属性 <input>标签除了type属性，还有一些常用的属性，如表3.4所示。 <input>标签其他属性属性属性值含义name自定义素的名称value自定义素的值maxlength正整数素允许输入的最多字符数disableddisabled第一次加载页面时禁用该素（显示为灰色）readonlyreadonly素内容为只读（不能修改编辑）checkedchecked定义选择素默认被选中的项 表3.4中列出了<input>标签中其他常用的属性，下面进行详细讲解。 （1）name、value属性 name属性用来规定input素的名称，value属性用来规定input素的值。在前面的案例中，已经接触过name和value这两个属性，其中name值和value值配合成一对来使用，这样后台服务器就可以通过name值来找到对应的value值。 （2）maxlength属性 maxlength属性规定输入内容允许的最大字符数，如设置maxlength属性，则输入控件不会接受超过所允许字符数。 （3）disabled、readonly属性 disabled属性规定输入内容是禁用的，被禁用的素是不可用和不可单击的。readonly属性规定输入内容为只读（不能修改，但是能当前只读的内容）。 （4）checked属性 checked属性规定在页面加载时应该预先选定的input素。checked属性与<input type=”checkbox”>或<input type=”radio”>配合使用。 ² <textarea>标签 单行文本框只能输入一行信息，而多行文本框可以输入多行信息。多行文本框使用的是<textarea>标签，而<input>标签只能设置单行文本框。 <select>标签 网页中经常会看到包含多个选项的下拉菜单，如选择城市、日期、科目、校区选择等。HTML中用<select>标签设置下拉列表，其需要与<option>标签配合使用，这个特点和列表一样，如无序列表是由<ul>标签和<li>标签配合使用。为了更好地理解，可以把下拉列表看作一个特殊的无序列表。 下拉列表是一种最节省页面空间的选择方式，因为在正常状态下只显示一个选项，单击下拉菜单打开菜单后才会看到全部的选项。 和其他标签一样，<select>标签也有其常用的属性，如表3.5。 表3.4 type属性取值属性含义multiple多选操作size下拉列表可见选项的数目selected选中项 1.multiple属性 multiple属性可以设置多选下拉列表，默认下拉列表只能选择一项，而设置multiple属性后就可以选择多项了（使用“Ctrl+鼠标左键”进行多选操作）。 2.size属性 size属性可以设置下拉列表可见选项的数目，默认情况下单选下拉菜单显示一项。 3.selected属性 selected属性表示选中项，与单选框的checked属性类似，注意selected属性是设置到<option>标签上的。 <select>标签中使用<optgroup>标签进行分组项操作，把相关的选项组合在一起。<optgroup>标签的label属性来设置分组项的标题。 <label>标签 <label>标签用来辅助表单素，可以更好地提高用户体验。当用户选择<label>标签内文本进行时，会自动将焦点转到和标签相关的表单控件上。 以上内容源自清华大学出版社出版的《HTML5从入门到精通》，非常适合零基础的同学学习，内容系统且全面。
本书是HTML5初学者极好的入门教材之一，内容通俗易懂、由浅入深、循序渐进。本书内容覆盖全面、讲解详细，其中包括标签语义化、标签使用规范、选择器类型、盒模型、标签分类、样式重置、CSS优化、Photoshop切图处理、整页制作、CSS3新样式、HTML5新功能等。 本书具有四大特色：一是案例简洁形象，以简单案例来剖析晦涩的知识点；二是通过精简核心内容，摒弃老旧的概念与语法，突出重点内容，从而节省读者的阅读时间与学习成本；三是本书作者实战操作经验丰富，本书内容不仅仅局限于知识点讲解，还包含开发工具、开发流程、整站制作、精确切图等知识点的详细介绍；四是本书包含更多新版本内容，同时对新的CSS3和HTML5知识点都有所涉及。 本书适合初学者和中等水平的HTML5开发人员，以及高等院校、培训学校的师生使用，是牢牢掌握HTML5语言开发技术的必读之作。 【往期内容回顾】 【千锋教育HTML5从入门到精通】第1章 Web前端技术简介 【千锋教育HTML5从入门到精通】第2章 HTML详解
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/59484.html
