表单
核心标签
(1)form 表单标签
a) 概述:定义表单要提交的范围和提交的地址
b) 重要的属性
属性 | 备注 |
---|---|
action | 设置表单要提交的地址(默认提交到当前页面) |
method | 设置表单的提交方式(默认是get方式) |
c) method取值
aa) get:把数据拼接到地址栏后面,相对的不安全,只能提交量比较小的数据
bb) post:把数据封装到请求体中,相对的安全,可以提交大量的数据
(2)input 表单项标签
a)重要属性
属性名 | 属性值 | 备注 |
---|---|---|
type | text | 文本框 |
password | 密码框 | |
radio | 单选框 | |
checkbox | 复选框 | |
file | 文件框(用于文件上传) | |
hidden | |隐藏域(把不需要用户看到,但是后台需要的数据,提交到后台) | |
submit | 提交按钮 | |
reset | 重置按钮(恢复页面刚打开时的效果,并非清空所有选项) | |
button | 普通按钮(配合后面js一起使用) | |
image | 图片提交按钮 | |
checked | checked | 对于单选和复选框可以设置元素的默认选中 |
(3)select 下拉选择框标签
a) option 选择框的选择项标签
b) 重要属性
属性名 | 备注 |
---|---|
selected | selected 可以设置下拉选择框选中状态 |
(4)textarea 文本域标签
a) 重要属性
属性名 | 备注 |
---|---|
cols | 列数 |
rows | 行数 |
(5)通用属性
a) name:表单项要想提交到后台,必须要有name属性(对于单选和复选框,可以使用name属性进行分组)
b) value:
aa) 对于单选和复选框,可以指定value属性的值,用于区分用户选择了哪一个选项(否则默认都是on)
bb) 对于submit,button,reset按钮,可以设置submit,button,reset按钮上的文字
cc) 对于text,password,可以设置text,password等元素的默认值
新增标签
1、autocomplete 属性规定表单是否应该启用自动完成功能。 默认是on,自动开启
2、<button>
标签定义按钮。
可以在 button 元素内放置内容,比如文本或图像。这是该元素与通过input元素创建的按钮的不同之处。请始终为按钮规定 type 属性。不同的浏览器根据 type 属性使用不同的默认值。
<!--例如:-->
<input type="image" src="img/xxx.jpg">
<button type="submit"><img src="img/xxx.jpg"></button>
3、<input>
新增属性
属性 | 属性值 | 备注 |
---|---|---|
type | 设置文本的样式为邮箱 | |
date | 日期框 | |
time | 时间框 | |
dateTime-local | 本地日期时间框 | |
number | 数字框 | |
range | 滚动条数值框 | |
search | 可清除文本框 | |
tel | 电话框 | |
url | 网址框 |
4、label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。<label>
标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来
5、optgroup 列表项分组标签
label 设置分组的名称
CSS深入
1、引入方式
(1)行内样式(内联样式):简单,耦合性强,不利于代码的分离
(2)内部样式:复用性比较低,只能在当前页面使用
(3)外部样式:复用性比较高,可以用在多个页面,统一网站的风格
2、三种引入方式的优先级
行内样式>(内部样式=外部样式)
内部样式和外部样式的优先级相同,那么在实际应用中,谁最后解析就显示谁的
3、选择器
(1)基本选择器
a) id选择器
b) 类选择器
c) 元素选择器
优先级:style > id选择器 > 类选择器 > 元素选择器
(2)扩展选择器
a) 属性选择器
[属性名]
[属性名=属性值]
b) 伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
c) 分组选择器(并集选择器)
选择器a,选择器b
d) 后代选择器
选择器a 选择器b
e) 子选择器
选择器a > 选择器b
注意:选择器选择的节点越具体,那么选择器中对应的属性设置的优先级越高。(例如:一个div里面有很多个a标签和span标签,使用其中一个选择器是直接选择的span标签,然后进行了属性设置,这个属性会作用到所有的span标签上面,同时有另一个选择器选择了span标签中具体的某一个span节点,那么该span标签会优先显示当前这个选择器中的内容,相当于屏蔽到那个整体选择span标签中设置的属性)
4、新增属性
(1)边框样式
border-radius: 属性值; /*边框的弧度*/
(2)文本样式
line-height: 属性值; /*设置行高*/
font-family: 属性值; /*规定文本的字体系列*/
vertical-align: 属性值; /*设置元素的垂直对齐方式*/
text-decoration: 属性值; /*规定添加到文本的装饰效果 (下划线之类)*/