HTML中的form和CSS笔记
一.form
表单的作用：主要是收集用户的各种类型数据 提交数据请求到服务器
表单由表单元素和表单控件组成，是一个功能性标签
1.表单元素
<form action="#" method="get" enctype="application/x-www-form-urlencoded" >
属性：
action>作用主要作用是规定表单提交的动作 提到到服务器上处理的URL
默认值一般提交到首页；
method:指表单数据提交的方式，一般有两种提交方式分别为get和post；
get方式为默认值，提交的数据会有限制为2kb,而且会显示提交的内容在地址栏里，一般适用于向服务器要数据时，比如搜索框
post方式提交的数据大小不会有限制，提交的内容对于用户不可见，专业人士看得见，一般适用于向服务器提交数据时，比如注册账号。
enctype指的是表单数据进行编码的方式，一般有三种方式，默认值为application/x-www-form-urlencoded
上传文件时用multipart/form-data 上传文本用text/plain
2.表单控件
input组元素
属性：
type（定义类型） 默认值为text（文本）
value 值 要提交到服务器的值
name 控件名称，适用于服务器端，如果不做名称，无法提交
名称 匈牙利命名方式 类型+功能
disabled 禁用控件 改属性，主要出现在控件中表达禁用 boolean类型的属性
<1.文本框---type="text"
<2.密码框---type="password"
<3. 单选按钮---type="radio"想要一组单选按钮有互斥的效果，必须设置他们的name值相同
<4.多选框---type="checkbox"
<5.隐藏域---type="hidden" 可以将服务器提交到服务器，给程序员看的
<6.文件选择框---type="file"
<7.文本域---<textarea></textarea> cols 列数 rows 行数；例如：
个人签名：
<textarea name="intr" cols="100" rows="3"></textarea>
籍贯：
multiple：指多选项
size 显示的选项数量
<select name="sel" multiple="multiple" size="2">
<option value="1">湖北</option>
<option value="2">湖南</option>
<!--默认被选中-->
<option value="3" selected="selected">广西</option>
</select>
<8.按钮
submit 提交
button 普通的按钮
reset 重置---type="reset"
二.CSS---层叠样式表
CSS的常用语法
- border 边框
- margin 边框的外边距
- padding 边框于内部元素的距离
- font-size 文字字体
- line-height 文字的行高，通常用于设置文本的垂直居中
- text-align：center 设置文本的水平居中
- background-color 设置元素的背景颜色
- background-image 设置元素的背景图片
- display 改变元素的样式，通常将元素改为行内块样式（bloak-inline），从而设置元素的宽高等属性
选择器的分类---
<1.class选择器---不同的标签有相同的样式
.name{
}
<2.ID选择器---某个标签有特殊的样式设计
#name{
}
<3.通用选择器---一般用在将浏览器缺省样式清空
*{
}
<4.后代选择器--- 符合要求的所有后代元素
ul span{
}
<5.子选择器--- 只找符合要求的子元素
div>p{
}
<6.兄弟选择器
div+p{
}
<7.属性选择器
[type="submit"]{
}
<8.伪类选择器
a：hover{
}
a：link{
}
a：visited{
}
<9.插入新内容
p ：before{
}
p：after{
}
三.图片标签的使用
<img src="图片的URL" align="对其方式（图片），和文字搭配使用" title="鼠标移上去的显示信息" alt="图片加载不出来时的文字信息" width="图片的宽度" height="图片的高度" />
四.背景图片的使用
background-image：ul()
<1.背景图片的平铺
background-repeat: no repeat;
<2.背景图片的尺寸
取值：
1、制定固定的宽度和高度 px为单位
2、采用百分比 以元素的宽高位基数
3、cover 覆盖 通过等比放大 用背景图片覆盖整个元素
4、contain 包含 将背景图片等比放大，直到北京图片的下边或右边碰到元素的边缘为止
例如：
background-size: cover;
background-size: contain;
<3.背景图片的固定
取值：
scroll 默认值 背景图片随着滚动条而滚动
fixed 固定，背景图不会随着滚动条而移动 一直保持在可视化区域里
例如：
background-attachment: fixed;
<4.背景图片的定位
background-position: x y;
x:水平偏移 + 右边 -左边
y:垂直偏移 +下偏移 -上偏移
x y 关键词
x left right center
y top bottom center
x y具体的值 px 百分比
0% 0%
50% 50% 背景元素的正中间
例如：
background-position: center;
五.边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必须 阴影的水平偏移距离 + 右偏移 - 左偏移
v-shadow:必须 阴影的垂直偏移距离 + 下偏移 -上偏移
blur: 模糊距离
spread：阴影的尺寸
color 阴影的颜色
inset 将默认的外阴影更改为 内阴影
例如：
box-shadow: 0px 0px 5px #f00 inset;
六.尺寸相关
当框中元素的宽高固定，且内容比空间大的时候，才会导致溢出，而溢出后的设置为：
visible 默认值 溢出可见
hidden 溢出部分被裁减掉，且不可见
scroll 滚动 不论内容是否溢出都出现滚动条
例如：
overflow: auto;
overflow-x 横向溢出的处理
overflow-y 纵向溢出的处理
七.显示相关
块级元素：可以设置宽高 设置外边距 内边
行内元素 ：可以设置宽高，且不独立成行 img input
内联元素 无法设置宽高， 且不独立成行 不能设置上下边距 span lable font i e...
display+.....
block 块状 让元素和块级元素一样显示----display:block;
inline 行内元素----display:inline;
inline-block 可以设置元素宽高 但是又不会独立成行----display:inline-block;
none 隐藏 特点：脱离文档流 不占据页面的空间-----display:none;
visible 默认值，可见
visibility 显示/隐藏
hidden 隐藏 特点 不脱离文档流 ，依然占据页面的空间
opacity设置元素的透明度 0.0-1.0值越大透明度越低
vertical-align 设置单元格的垂直对齐方式
top middle bottom baseline(默认值 基线对齐)
八.浮动
定位的分类：
<1.普通流定位----文档流
块级元素 从上到下
行内元素 从左到右 当前一行显示不下的是，会自动换行
<2.浮动定位
脱离文档流 不在占据页面的空间，其他未浮动的元素会自动补齐
清除浮动带来的影响-----clear属性
none ----默认值
clear:left
clear:right
clear:both
<3.
相对定位---position:relative;
绝对定位---position:absolute;
固定定位---position:fixed;
九.定位
<1.相对定位
元素不会脱离文档流 元素原有的位置会保留
以自身的位置为目标做较小的偏移
适用场合：实现元素微调的时候
例如:
position: relative;
top: 50px;
left: 50px;
<2.绝对定位
元素脱离文档流 不占据页面的空间
元素相对于它最近的已定位的祖先元素实现位置的初始化；
如果没有已经定位的祖先元素，那么元素会相对于body或者是html最大的祖先元素实现位置的初始化
已定位：position的属性值设置为：relative absolute fixed
绝对定位的一些影响-----绝对定位的元素变成块级元素
绝对定位的元素可以使用margin，但是auto会失效
例如：
position: absolute;
left: 50px;
top: 50px;
<3.固定定位
作用；将元素固定在页面可视区的某个位置处，不会随着滚动条变化而移动
固定定位的元素会脱离文档流，会变成块级元素，永远是相对于body实现定位
一般用于导航条
例如：
position: fixed;
bottom: 50px;
right: 50px;
