标签：定义 表格 标签 单元格 36 表单 html nbsp day
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>
标签：定义,表格,标签,单元格,36,表单,html,nbsp,day 来源： https://blog.csdn.net/qq_47726356/article/details/121309972
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。