1. 表格标签
表格是较为常用的一种标签,但不是用来布局,常用来处理、显示表格式数据。
1.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.2 表格属性
border 设置表格的边框
cellspacing 设置单元格之间的空白间距
cellpadding 设置单元格内容与单元格边框的空白间距
width 设置表格的宽度
height 设置表格的高度
glign 设置表格在网页中的水平对齐方式
1.3 表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:
<thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。
<tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
1.4 表格标题
定义和用法:caption 元素定义表格标题。
<table>
<caption>我是表格标题</caption>
</table>
注意:
1. caption标签只存在表格里面,必须紧随 table 标签之后。
2. 只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
1.5 合并单元格
跨行合并:rowspan
跨列合并:colspan
1、先判断跨行合并还是跨列合并
2、跨行合并用rowspan属性,跨列合并用个colspan属性
3、将rowspan 或者colspan写在第一个要合并的单元格上
4、将合并的行数和列数写在指定的属性值上
5、将多余的单元格注释掉
2. 表单标签
应用场景:主要是应用在数据的提交,比如点击按钮发送数据到服务端。
2.1. 表单标签
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
1. action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式,其取值为get或post。
3. name用于指定表单的名称,以区分同一个页面中的多个表单。
2.2. input控件
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图形形式的提交按钮
file 文件域
name 用户自定义 控件的名称
value 用户自定义 input空间中的默认文本值
size 正整数 input空间在页面中的显示宽度
checked checked 选择控件中的默认项
注意:
radio如果是一组,必须给他们命名相同的名字name,这样就可以多个选其中的一个啦。
Input的size跟字体大小有关系,不设置的情况下,浏览器默认情况下,input默认的输入框的宽度就是169px
2.3 label 标签
label标签为input元素定义标注(标签)。
lable作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢? for属性规定label与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
2.4 textarea控件
如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
<textarea cols="宽度 " rows="高度"> 默认是20
文本内容
</textarea>
2.5 下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意:
1. select中至少应包含一对option。
2. 在option中定义selected ="selected "时,当前项即为默认选中项。