HTML标签下
1.表格标签
<table>表格框
<tr>行
<td>单元格
<th>表头单元格 (table head )
<th>和<td>不同的地方是会加粗居中显示
属性:
表格结构标签
<thead></thead>:用于定义表格的头部(其内部必须拥有<tr>标签,一般位于第一行)
<tbody></tbody>:用于定义表格的主体,主要用于放数据本体
以上表格都是放在<table></table>标签中
合并单元格
方式:
1.跨行合并:rowspan
2.跨列合并:colspan
目标单元格:
跨行合并:最上侧单元格为目标单元格,写合并代码
跨列合并:最左侧单元格为目标单元格,写合并代码
合并步骤:
1.先确定合并单元格方式
2.再确定目标单元格
写上合并方式=合并的单元格数量(例如:<td colspan = “2” ></td>)
3.删除多余的单元格
2.列表标签
2.1无序列表
<ul>标签是定义无序列表的
<li>是列表项
2.2有序列表
<ol>标签是定义有序列表的,列表排序以数字显示
<li>是列表项
2.3自定义列表
<dl>标签是定义自定义列表的
<dt>定义项目/名字
<dd>描述每一个项目/名字
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序列表 | 里面只能包含li 没有顺序,使用较多 li里面可以包含任何标签 |
<ol></ol> | 有序列表 | 里面只能包含li 有顺序,使用相对较少 li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd dt和dd里面可以放任何标签 |
3.表单标签(重点)
3.1为什么需要表单
为了收集用户的信息,而在网页中,我们也需要跟客户进行交互,收集用户资料,此时就需要表单
3.2表单的组成
一个完整的表单通常由表单域、表单控件(也称为表单元素)、提示信息三个部分组成。
3.3表单域
<form></form>标签用于定义表单域,以实现用户信息的收集和传递。<form></form>会把它范围内的表单元素信息提交给服务器。
<form action=“url地址 method=”“提交方式” name=“表单域名称”>
</form>
action:提交到地址,默认提交到当前的页面
method:表单的提交方式
常用的有两种 get和post,默认是get请求
name:表单域名称
enctype:一般请求下不需要,做文件上传时需要设置这个属性
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
enctype | 一般请求下不需要,做文件上传时需要设置这个属性 |
** ☆掌握:get和post的区别**
1.get请求地址栏会携带提交的数据,post不会携带(在请求体里面,http协议时讲)
2.get请求安全级别较低,post较高
3.get请求数据大小有限制,post没有限制
3.4表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
分类:
1.input 输入表单元素
2.select 下拉表单元素
3.textarea 文本域元素
1.input(单标签)输入表单元素
各种属性用法:
普通文本输入项:
<input type=“text”/> (单标签)
maxlength:
规定输入字段中的最大长度
密码输入项:
<input type=“password”/>
单选输入项:
<input type=“radio”/>
- 在里面需要属性name
- 若需要两个单选输入项互斥,将两者的name属性值设置相同即可
- name的属性值必须要相同
- 必须有一个value值
实现要默认选中的属性:
checked=“checked”
复选输入项:
<input type=“checkbox”>
- 在里面需要属性name
- name的属性值必须要相同
- 必须有一个value值
实现默认选中的属性:checked=“checked”
文件输入项(在后面上传时候用到):<input type=“file”/>
隐藏项(不会显示在页面上,但是存在于html代码里面)
<input type=“hidden”/>提交按钮
<input type=“submit”/>
<input type=“submit” value=“注册”/>使用图片提交
<input type=“image” src=“图片路径”/>重置按钮:回到输入项的初始状态
<input type=“reset”/>普通按钮(和js一起使用)
<input type=“button” value=“”/>
2.select(双标签)