2021.11.13 晴
表格、表单和H5
1.表格标签
表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。
- 、创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>在上面的语法中包含三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素
表格属性
表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：
<thead></thead>：用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。
表格标题
定义和用法：caption 元素定义表格标题。
<table>
<caption>我是表格标题</caption>
</table>
注意：
1. caption标签只存在表格里面，必须紧随 table 标签之后。
2. 只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
- 、合并单元格
跨行合并：rowspan
跨列合并：colspan
合并单元格的步骤：
1、先判断跨行合并还是跨列合并
2、跨行合并用rowspan属性，跨列合并用个colspan属性
3、将rowspan 或者colspan写在第一个要合并的单元格上
4、将合并的行数和列数写在指定的属性值上
5、将多余的单元格注释掉
2.表单标签
表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。应用场景：主要是应用在数据的提交，比如点击按钮发送数据到服务端。
(1)、表单标签
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>常用属性：
1. action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。
(2)、input控件
input 输入的意思。在上面的语法中，input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input标签还可以定义很多其他的属性，其常用属性如下表所示。
注意：
radio如果是一组，必须给他们命名相同的名字name，这样就可以多个选其中的一个啦。
Input的size跟字体大小有关系，不设置的情况下，浏览器默认情况下，input默认的输入框的宽度就是169px
(3)、label标签
label标签为input元素定义标注（标签）。
lable作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？ for属性规定label与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">(4)、textarea控件
如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="宽度 " rows="高度"> 默认是20
文本内容
</textarea>比如各个网站的评论回复框：
(5)、下拉菜单
使用select控件定义下拉菜单的基本语法格式如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...</select>
注意：
1. select中至少应包含一对option。
2. 在option中定义selected ="selected "时，当前项即为默认选中项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 1 2 <h1>我是<h1>标签</h1> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 无序列表 : <ul type="circle"> <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> <li><a href="">444</a></li> <li><a href="">555</a></li> </ul> 有序列表 : <ol type="I"> <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> <li><a href="">444</a></li> <li><a href="">555</a></li> </ol> 城市 : <dl> <dt>河北</dt> <dd>石家庄</dd> <dd>沧州</dd> <dd>廊坊</dd> <dt>北京</dt> <dd>昌平区</dd> <dd>朝阳区</dd> <dd>海淀区</dd> </dl> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table : 定义表 border : 表的边框 width : 表的宽度 align : 表居中显示 cellspacing : 单元格与单元格之间的距离 cellpadding : 文字到单元格之间的距离 tr : 定义一行 align : 行中内容局部 th : 定义表头列 td : 定义行中一列数据 caption : 定义表头 --> <table border=1 width="500" cellpadding="10" cellspacing="0" align="center"> <caption><h2>学习信息</h2></caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr align="center"> <td align="center">张三</td> <td>男</td> <td>19</td> </tr> <tr align="center"> <td>李四</td> <td>女</td> <td>18</td> </tr> </table> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border=1 width="500" cellpadding="10" cellspacing="0" align="center"> <tr> <!-- colspan : 列合并 --> <th colspan="3">学生信息</th> <th colspan="2">成绩</th> </tr> <tr> <th>姓名</th> <th>性别</th> <th>专业</th> <th>课程</th> <th>分数</th> </tr> <tr align="center"> <td>张三</td> <td>男</td> <!-- rowspan : 跨行合并 --> <td rowspan="2">计算机</td> <td rowspan="2">java开发</td> <td>98</td> </tr> <tr align="center"> <td>李四</td> <td>女</td> <!-- <td>计算机</td> <td>java开发</td> --> <td>99</td> </tr> </table> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" width="500" cellpadding="2" cellspacing="0" align="center"> <caption> <h2>学员信息录入</h2> </caption> <!-- action : 把数据请求到哪里去 --> <!-- method : 请求方式 , get/post get : 明文传输,相对不安全,传递数据量较少,效率高 post : 不是明文传输,相对安全,传递的数据量较多,效率低 向服务器发送数据,考虑安全性,一般使用post 向服务器索要数据,一般使用get,比如查看,搜索等都是为了获取数据 action?name=value&name=value..... http://www.baidu.com?age=2 --> <form action="http://www.baidu.com" method="get"> <!-- input 最重要的三个属性 name : 就是定义 的名字 value : 输入框输入的数据会自动赋值给value,当然我们也可以手动设置 最终数据会以 name=value的形式进行传递 type : 定义了输入框的类型 text : 普通输入域 password : 密码输入框 radio : 单选框,多个标签的name必须一致 checked="checked" 单选框默认选项 checkbox : 复选框 checked="checked" 复选框默认选项,和单选一致 file : 选择文件,比如文件上传 button : 普通按钮(没有提交功能) submit : 提交按钮(点击后,提交表单) reset : 重置按钮 image : 用图片代替提交按钮 placeholder : 提示文字,输入数据后不再显示 label : 无语义标签,使用上之后没有任何样式变化 当label的for属性和对应的输入框的id属性值一致的时候 点击label标签的内容,会在对应输入框中获得焦点 --> <tr> <td><label for="username">用户名 : </label></td> <td><input id="username" type="text" name="username" placeholder="请输入用户名" /></td> </tr> <tr> <td><label for="password">密码 : </label></td> <td><input id="password" type="password" name="password" placeholder="请输入密码" /></td> </tr> <tr> <td>性别 : </td> <td> <input type="radio" checked="checked" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>爱好 : </td> <td> <input type="checkbox" name="like" value="篮球" /> 篮球 <input type="checkbox" name="like" checked="checked" value="学习" /> 学习 <input type="checkbox" name="like" value="玩游戏" /> 玩游戏 </td> </tr> <tr> <td>毕业证照片 : </td> <td> <input type="file" /> </td> </tr> <tr> <td>出生年月日 : </td> <td> <!-- select : 定义下拉列表 option : 下拉列表中的选项 下拉列表 是以 select的name = option的value 进行数据提交 selected="selected" : 默认选项 multiple : 可以选择多个,按ctrl --> <select name="year" id=""> <option value="">---请选择年份---</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option selected="selected" value="1994">1994</option> </select> </td> </tr> <tr> <td>自我评价 : </td> <td> <textarea cols="30" role="10"></textarea> </td> </tr> <tr align="center"> <td colspan="2"> <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <input type="image" src="图片地址"> <!-- button按钮也是可以触发submit的,除非设置类型为button --> <button type="button">按钮</button> <button>按钮</button> </td> </tr> </form> </table> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="搜索"> </form> </body> </html>
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
