基础2 | 易学教程

表单
1:表单标签
<form></form>
属性:
action="接口地址" <form action="提交地址" method="提交方式" name="表单名字">
method="get/post"
name="表单名称"

2:表单控件
<input>
属性:
type="控件类型"
name:属性标识表单域的名称;
value:属性定义表单域的默认值，其他属性根据type的不同而有所改变化。
<input type="类型">
type="text"当行文本输入框
type="password"密码输入框
type="submit"提交按钮
type="reset"重置按钮
type="button"空按钮（如果要做功能，需要结合js）

name="名字"
value="值"
maxlength="允许输入的字符个数"
size="设置元素显示的宽度"

get和post的区别:
get:在地址栏提交，有长度限制，有可能造成数据丢失，一般提交的数据较短，明文可见，
不安全，就算加密也比较容易破解，速度较快，如果只考虑速度那就用get
post:不在地址栏提交，安全，没有长度限制（理论上是有长度限制）一般提交的数据较大，速度较慢

样式的基本规则:
1:属性与值之间用英文冒号连接，分号结束
2:属性与属性之间可以空格，可以换行
3:一个属性中有多个属性值时，属性值与属性值之间用空格隔开，没有先后顺序
4:属性与属性值必须在花括号中

样式的三种写法:
1:内部样式存在在head标签中<head> <style type="text/css">选择器{属性:值;}</style> </head>
2:内联样式以属性style的方式添加在标签中<div style="属性:值;></div>
3:外部样式
创建独立的htme页面，并在页面head标签中添加<link rel="stylesheet" href="文件地址">
创建独立的css文件

方式一（推荐使用）
<link rel="stylesheet" href="css文件地址">
另一种引入方式：
在style标签第一行添加
@import url(css文件地址);
创建独立的css文件

样式表权重关系
外部样式内部样式<内联样式
就近原则

选择器:(选中指定的元素)
类型选择器（标签选择器）:div span h1 p li ul......

类选择器（class选择器）:选中指定的元素，在一个页面中可以多次出现
1:在标签中添加属性 class=".属性"
2:在样式中的选择器 .属性{}

id选择器:选中指定的元素，在一个页面中相同值只允许出现一次
1:在标签中添加属性 id="#属性"
2:在样式用添加选择器 #属性{}

伪类选择器:（更多的是控制颜色）
:link{}未访问之前的状态
:visited{}访问过后的状态
:hover{}鼠标悬停的状态
:active{}鼠标按下的状态

通配符 * 匹配页面所有的元素进行统一操作
*{margin:0;padding:0;}(消除了所有元素的间距)

群组选择器选择器1,选择器2,选择器3

包含选择器（后代选择器）选择器1 选择器2 选择器3{属性:值;}

选择器权重对比
id > class >类型选择器
100 10 1
内联样式选择器权重值1000
包含选择器权重值为各个选择器权重之和
除非有添加 !important

列表修饰符
list-style:;=list-style-type:;
disc 小黑圆点
circle 空心圆
square 实心方块
none 取掉修饰
list-style-image:url(图片地址)
list-style-position:图片位置;
outside 外边
inside 里边
边框:
border:边框大小边框形态边框颜色;
border-width:边框的大小;
border-style:边框的形态;
border-color:边框的颜色;

border-style边框的常用线型
：solid 实线
：dashed虚线
：dotted点状线
：double双线
某一个方向的拆分:
border-top:上边框大小上边框形态上边框颜色;
border-bottom:底边框大小底边框形态底边框颜色;
border-left:左边框大小左边框形态左边框颜色;
border-right:右边框大小右边框形态右边框颜色;

利用边框斜切实现三角形
border:30px solid transparent;颜色设置位透明
border-top-color:red; 某一个方向的颜色不透明

PS的应用（基本操作）
1：放大缩小
ctrl+alt+shift+鼠标滑轮
2: 测量尺寸
矩形选框工具
f8调出信息面板
修改尺寸单位
编辑--首选项--单位与标尺--单位--px
3: 辅助线ctrl+R
页面结构划分:
1:头部区域
2:轮播图区域
3:内容区域
4:底部区域

background-color:背景颜色
颜色单词 red blue green......
十六进制# 0-9 a-f
三原色 rgb(0,0,0) 0-255

background-image:url("图片地址");
与img标签的区别:
img是标签，是结构，占据页面位置
background-image:;是css样式,不占据位置
（画在墙上的一幅画,被img盖住）
背景图默认平铺

background-repeat:图片是否平铺;
repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺

background-position:背景定位；
关键字写法
水平值 left center right
垂直值 top center bottom
具体像素位置
综合写法:
background:颜色图片是否重复定位;
background-attachment:背景关联;
scroll 滚动(默认值)
fixedq 固定

浮动的属性:
float:;
left 左浮动
right 右浮动
none 不浮动
浮动的目的:
让竖着的元素横着来
浮动效果:
1:左浮动找左边,右浮动找右边
2:浮动只影响后面的元素，不影响前面的元素
3:父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行
4:子元素高度不一致的浮动元素被迫换行时,可能被卡着
5:结构先写的先浮动,后写的后浮动
6:图文混排
7:浮动产生的问题,父级元素高度塌陷
解决办法: 给父级元素添加height:;

盒模型：
外边距:：改变元素外边的间距
margin:四个方向；
margin:上下左右；
margin:上左右下;
margin:上右下左；
margin-top:上外边距；
margin-right;右外边距；
margin-bottom:下外边距；
margin-left:左外边距；
注意：margin可以为负值，auto自适应
margin常见bug:
1：上下外边距相遇，只显示最大值
2：嵌套关系的元素，子元素的上外边距和父元素的上外边距相遇，取较大值
内边距：改变元素与内容的间距
padding:一个值; 一个值，改变四个方向 padding:10px(内边距)
padding:上下左右; padding:px px(上下左右)
padding:上左右下; padding:px px px(上左右下)
padding:上右下左； padding:px px px px(上右下左)顺时针方向变化
注意: 内边（padding）没有负值;

盒模型占位大小计算：
W= width+左右边框+左右内边距+左右外边距
H= height+上下边框+上下内边距+上下外边距