HTML5+CSS3学习（二）

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（双标签）