初识HTML表格
一，简介
表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是table标签来定义的。而table标签中的行就是tr标签，而列就是td标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。
二，创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>内容
<tr>
<td>单元格内的文字</td>
</tr>
</table>
</body>
</html>
其中，
1.table 用于定义一个表格
2.tr 是定义表格中的一行，必须嵌套在table标签内，table中包含几对tr就有几行表格，tr table row
3.td 就是单元格，必须嵌套在tr标签内，tr有几个td就表示有几个单元格(就是几列)
三，一些常用的属性
- button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
- checkbox 定义复选框。
- file 定义输入字段和 "浏览"按钮，供文件上传。
- hidden 定义隐藏的输入字段。
- image 定义图像形式的提交按钮。
- password 定义密码字段。该字段中的字符被掩码。
- radio 定义单选按钮。
- reset 定义重置按钮。重置按钮会清除表单中的所有数据。
- submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
- text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
四，合并单元格（难点）
- colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan=“2”，它的下一行tr会少一列；合并列的时候 colspan=“2”，此行的列会少一列。
- 代码演示
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" style={{margin:200}}>
<tbody>
<tr>
<th colspan="2">我是占位符</th>
<th colspan="2">我是占位符</th>
</tr>
<tr>
<th rowspan="2">我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
<tr>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
</tbody>
</table>
</body>
效果
五，input控件
-
定义：input 标签用于搜集用户信息。 根据不同的 type
属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 -
常用格式：input type="" name="" value=""
-
属性：type： text单行文本输入框 password密码输入框 radio单选按钮 checkbox多选按钮 button普通按钮 submit提交按钮 reset重置按钮 image图像形式的提交按钮 file文件域 name由用户自定义控件的名称 value由用户自定义 input控件中的默认值 size正整数控件在页面中显示的宽度 checkedchecked定义选择控件中默认被选中的项 maxlength正整数控件允许输入的最大字符数
六，label标签(理解)
- label 标签为 input 元素定义标注（标签）。
- 作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
- 如何绑定元素呢？ for 属性规定 label 与哪个表单元素绑定。
七，textarea控件(文本域)
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行的字符数" rows="显示的行数">
</textarea>
八，下拉菜单
注意：
- <select></select>中至少应包含一对<option></option>。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
九，表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
action: url地址
method: 提交方式
name : 表单的名称，区分同一界面的多个表单
每个表单都要由自己表单域
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
