1.表单
<form action=""method=""><form>
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="sumbit">
<input type="image">
<input type="reset">
<input type="button">
<select name size multiple>
<option value selected></option>
文本样式
color
font-size
font-style
font-family
font-weight
fon-variant
text-decoration
text-indent
text-transform
vertica-lalign
line-height
letter-spacing
word-spacing
2.CSS
分类
1内嵌
<div style="color:green"></div>
2内联
在<head></head>中添加style标签，将样式说明写入其中
3外联式
将样式说明存储在css文件中，在HTML中
<link href="css文件路径"rel="styleshee"/>关联起来
语法 选择器（样式说明）
选择器：用于找到样式标签
属性名：属性值；
属性值是空格或中文加双引号
注释快捷键 ctrl+/
2选择器
1基本选择
通用选择器
标签名选择器
类名选择器 .className(样式说明）
用 class=“className”调用
id选择器
#idName
id="idName"调用
2多元素选择器
A,B,C{样式说明}
3后代选择器
A,B{样式说明}
功能：为选择器B设置样式，但是B必须是A的后代
4儿子选择器 选择器之间用>来分隔
语法 A>B{样式}
为B选择器设置样式，但是A和B是父子关系
5相邻选择器
A+B{样式说明}
还是为B设置样式，是兄弟关系
6后续选择器
A~B{}
为B设置样式，B为A的后续兄弟
7属性选择器
A【attr]{}
为A选择器设置样式，A中必须有attr属性
A【attr=value]{}
为A选择器设置样式，A中必须有attr属性且值是value
p[align]{color:red;}
p[align=right]{color:green;}
伪类选择器
在选择器的基础添加事件
事件：完成一个事件，产生一个结果
在a标签上应用
a或a:link{样式}表示a标签的初始状态
a:hover{样式说明}鼠标指针指向超文本的一个状态
a:active{样式说明}鼠标指针指向超文本上按下的一个状态
a:visited{样式说明}鼠标指针指向超文本上按下的一个状态
一般情况下只用前两者
选择器的优先级 内嵌>id>class>标签名
/......./
4盒子模型
针对是双标签的块元素，如果不是快元素的要转化为快元素
<div><p><hn>
行内元素：除去快元素；
盒子模型的六要素
宽
width：值px；百分比
高
height：值px；auto父盒子多高，纸盒子多高；
边框线
border：线宽：px; 线型:solid实线 dashed虚线dotted点线double双线 颜色
每一边2可以独立设置
border-top；
border-left；
border-right；
border-bottom；
圆角
border-radius；百分比|值px；
border-raduis:左 上右上 右下 左下；
去掉边框线border：none;
border会占空间
.box{
100px;
height:100px;
border:50px solid red;
}
外边距
margin:值px;auto自动适应，一般用于居中；
一个值表示全部，两个值，第一个为上下，第二个位左右
三个值，第一个表示上，第二个表示左右，第三个表示下边距
第四个，第一个表示上，第二个表示右，第三个表示下，第四个表示左；
内边距 盒子的内容与边框线之间的距离
padding：值px;
如果一个值，表示盒子全部，两个值第一个表示上下，第二个表示左右；
三个值第一个表上，地二个左右，第三个下，四个值，第一个表示上，第二个表示右，地三个表示下，第四个表示左；
padding会将盒子撑大；
F12 旁边的箭头
4.6背景
background：url();
1background-color:
background-image:url(图片地址)
background-repeat:平铺处理 背景图片比盒子规格小了，no-repeat不平铺，repeat-x：表示x方向平铺，repeat-y：表示y方向平铺；
background-position:值px，值px;表示背景图片左上角距离远点的位置；
5布局
盒子的摆放
两种情况
一是纵式
二是横式
浮动
float：left|right；
清除浮动 clear：left|both|right；
7file布局 设置在父盒子中，对它的子盒子进行布局
dispaly:flex;
flex-direction:row(横着）|colum（竖着摆），默认为横着；
justify-content:父盒子中毒的子盒子摆放方式；
:flex-start;从左至右从上到下；
:flex-end:从右到左或从上到下；
:center：所有的子盒子挤到中间；
:space-around：所有子盒子均匀摆放，每一个纸盒子外边距是平均的，两侧是没有顶格；
:space-between：效果与space-around一样的，只是两端地垄；
align-items:设置顶一个轴的摆放方式；
：flex-start;靠顶部；
：flex-end:靠底部；
：center:垂直居中；
都在父盒子中写；