表格与表单

前面我们了解了很多HTML标签,下面来继续学习表格Table和表单Form的知识,表格平时开发中用到的不算太多,大家只需要掌握基础的表格知识即可,而表单则是比较重要,知识点也比较多。

表格Table标签

要使用HTML代码创建一个完整的表格会使用到一系列的标签,下面只列举了最常用的表格标签

  • <table>:整个表格以<table>标记开始、</table>标记结束;
  • <tbody>:表格的主体内容会放在tbody标签里;
  • <th>:表格表头单元格;
  • <tr>:表格的每一行,一个表格有多少对tr标签,就有多少行;
  • <td>:表格的一个单元格,一行中包含几对td标签,说明一行中就有几列。

表格在日常开发之中用的不多,大家只需要了解上面常用的标签即可,与表格Table相关的标签还有<thead>、<tfoot>、<caption>、<col>、<colgroup>等,大家可以在需要开发复杂表格的时候去查阅技术文档。

技术文档:Table标签

还有很多人在用table标签来进行页面的布局,这种方式我们非常不推荐。

 

表格的跨行跨列操作

要对表格像Excel一样进行跨行跨列操作,会使用到th、td标签的colspan属性来实现单元格跨列操作,rowspan属性来实现单元格的跨行操作。大家可以通过搜索的方式来写一个跨行、跨列的案例。

使用Bootstrap对表格进行美化

我们可以把<table>、<th>、<td>、<tr>等看成是一个div标签一样,来对表格进行美化,也可以借助于BootStrap等UI框架来快捷处理,大家可以根据下面的技术文档来实战一下具体的案例。

技术文档:Bootstrap表格MDN表格美化案例

程序员学习最重要的是知道如何快速快速查阅最专业的文档,并能看得懂文档且快速应用到项目之中。

技术文档:CSS伪类

https://marksheet.io/css-pseudo-classes.html

表单

表单的标签。

账号密码

fieldset和legend

 

input表单

技术文档:

 

textarea

单选

button

select与option

Names

labels

 

optgroup

<form> 定义 section 或 page 的页眉。
<input> footer标签声明这个是网页的底部,通常会保护作者、联系方式、版权、相关文件等
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表(下拉列表)。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。

http://www.htmldog.com/guides/html/advanced/forms/

http://www.htmldog.com/guides/html/advanced/html5forms1/

http://www.htmldog.com/guides/html/advanced/html5forms2/