html
一、标签（重要）
1.web标准的组成三部分
结构层 html 样式层css 行为层JS。
2.标签的分类 （单标签，双标签） (嵌套关系，并列关系)
3.文本格式化标签
b, p i u h1 en
4.img标签使用及属性 <img src="路径" alt=“图片加载失败显示”title=“鼠标悬停出现”width=“宽”height=“高”>
*图片设置宽高，最好宽和高只选择一项设置防止变形;除非有确定的宽和高
5.a标签的使用以及页面定位功能
标签<a herf="#" 属性:href路径 target窗口打开方式:_blank(新窗口打开) _self(当前窗口打开) ( <base target="打开方式">写在hady标签内 base英文基础的意思S
) onclick:(点击)="return fase" 禁止当前页面跳转
锚点定位 加id名 herf="路径+#id名"
6.绝对定位/相对定位: 绝对路径是从盘符,网络资源路径出发(不常用) 相对路径是从文件本身出发.
H5标签：<nav></nav>导航 <aside></aside>侧边栏 <article><article>文章 footer脚注 header头部
二、无序列表(常用、重要)
ul li （导航 多种相同的）
例: <ul>
<li><p></p><li> *在ul内写其他标签， 要用li包以下
</ul>
三、表格(了解)
table tr （th td） 并列
四、表单控件
1.文本框<text>
密码框<password>
单选框<radio>
多选框<checkbox> 属性：checked选中的
2.按钮
form 属性
下拉框
select》option --用js循环写
普通按钮<botton> 属性:value
图片按钮 <image> 属性src--- 给图片添加点击事件
提交按钮<submit> 到form表单
重置按钮<reset>
css
css的三种书写位置
行内式-影响范围最小
<style></style>
内嵌式--影响当前页面内 外链式-影响整个网站、站点
<link rel="stylecheet" herf="css路径">
导入式 @import （基本不用） 一般用于权重中 !import
font:
size: 大小
widht: 粗细 400正常 700粗
连写
是否倾斜(style)-粗细(weight)-字体大小（size）字体（）颜色（color)
font:14px/100% "微软雅黑
简单选择器 标签选择器 . 类选择器 # id选择器 *通配符（不推荐使用，推荐用并集选择器）
符合选择器 后代选择器（选择器 空格 选择器 ）最多3-5个
子代选择器（选择器>标签）（不怎么用）
交集选择器（选择器，选择器）(当后代没办法实现控制的时候，可以用交集来提高精确度; 只跟一个元素有关，找到当前元素上的所有选择器或标签连写中间没有空格跟后代没有关系)
位置伪类选择器 选择器：li:last-child(找到最后一个子元素是li标签) nth-child（数字odd基数 even偶数 4n（倍数））
伪类选择器 ：link:当鼠标为访问的状态 hover鼠标移入的时候
伪元素选择器::after（暂时用来清除浮动） 样式：.clearfix::after{content“”； display：block; clear:both；heighte:0;visilibity：hidden;}
伪元素选择器
例 左边
父盒子选择器::before{content"内容"} 配合
父盒子内的选择器::after{content:"内容"}
相邻选择器 选择器+选择器
属性选择器[ 标签中的属性 ] 配合type
如果标签中类型相同 属性选择器 [标签中的属性="属性的数值"]
css三大特性（继承性 层叠行（权重）， 优先级）
继承性 font color 行高 宽高不继承， a标签不继承颜色， h系列不继承字体大小，（也不是不继承而是把父元素的字体，拿过来加以计算，然后进行赋值显示）——
层叠行 --权重
优先级 ！important<内联元素<id选择器<l类选择器<标签选择器<通配符<继承
背景图片 background-image：
背景图片url(路径）
背景图片是否平铺 repeat
背景图片位置position
北京图片大小 size
背景颜色 color；
连写顺序 背景图片-是否平铺-图片位置-背景图片大小-背景颜色
背景图片和img用法
img：经常更新的图片用img
背景图片： 固定不经常动。
显示模式:
disiplay: blok;快元素(p,h1-h6,div,ul,li)
行内元素 b, u,a,i,em,span.s
行内快(input img)
边框
border-color 颜色
-width粗细/大小
-style 边框的样式
-rdius 圆角边框
连写 border: -widht -style-color
标准流 用margin-top会出现高度塌陷, 包含塌陷.
浮动后的元素,可以随便用;
盒子水平居中方式 margin:0 auto;
margin:auto;
margin-left:50%
margin-right:50%
浮动的特点
1. 脱离标准流
2.显示为行内块
3.父元素浮动子元素也会跟着移动.
4.浮动后,子元素不会超过父元素
浮动最先开始的特点是,图文环绕效果.
版心布局:特点:有固定的宽度
定位
固定定位 fixed
相对定位relative; 父盒子有定位参照父父盒子，父盒子没有定位，会在找上一级。，如果没有以浏览器作为参考
绝对定位：absolute;父盒子有定位参照父父盒子，父盒子没有定位，会在找上一级。，如果没有以浏览器作为参考
一般情况下（子绝父相常用） 。子绝父绝 子绝父绝。 子绝父固
z-index
显示图片模块为 inline-block 图片会跟文字对齐。
给图片设置 vertical-align: middle;
高级CSS
鼠标样式
cursor： default（小白箭头/默认） pointer（小手/点击光标） move（移动光标） text（文本光标）help（帮助光标） wait（载入光标）
outline input外轮廓线 不占像素 一般用于清空input的轮廓线，
文本域清除拖拽
resize：none； 清除拖拽功能；
vertical-align：middle； 清除图片底部间隙；
display：block； 清除图片底部间隙；
标签嵌套规则
1.p h 不能嵌套块级元素 a标签可以嵌套其他元素，但不推荐
2.块级元素和块级元素嵌套，行内元素和行内元素嵌套，
3.行内元素和行内元素并列，块级元素和块级元素并列，
white-space:nowrap 强制在一行显示
text- overflow:hidden;溢出隐藏
text-overflow:ellipsis 文本溢出显示省略号;
精灵图， 是为了 节省浏览器和服务器的通信；
精灵图 一般用于图片量比较大，才会使用
图片比较少没有必要使用因为后期美工还要进行维护。
滑动门写法
line-height 没有内容不会有效果
过渡css3
transition 0.3 过渡
transition -property 过渡css属性的名称
-duration 过渡效果的时间
-timing-function 过渡效果的时间曲线。 默认是“ease”(不常用)
-delay 过渡效果何时开始。( 不常用)
all属性值。代表全部属性的意思。
拥有多个属性用逗号隔开。
图片无法使用； all
2D变形
transform（变换）
(属性)： - translate(x,y)（移动）
缩放scale（2，2）（括号内的数值是倍数） 也可以缩小到0 比1大就是放大，比1小就是缩小。
《旋转rotate（deg）（deg代表度数） 顺时针（-代表逆时针）
t ransform-grigin(修改制定的旋转点) 例如（left top）（ 0px 0px ） 就是0点 -50px 会在原点在负出去。
这样写会重叠
可以使，定位居中方式更便捷,
定位居中方式. tranfrom:translate(-50%,-50%)
transform（变换）
(属性)： - translate(x,y)（移动）
缩放scale（2，2）（括号内的数值是倍数） 也可以缩小到0 比1大就是放大，比1小就是缩小。
《旋转rotate（deg）（deg代表度数） 顺时针（-代表逆时针）
t ransform-grigin(修改制定的旋转点) 例如（left top）（ 0px 0px ） 就是0点 -50px 会在原点在负出去。
移动 translate(x, y) translate 移动平移的意思
缩放 scale(x, y)
旋转 rotate(deg)
transform-origin可以调整元素转换变形的原点
倾斜 skew(deg, deg)
3D变形(CSS3)transform
rotateX()
就是沿着 x 立体旋转.
rotateY()
沿着y轴进行旋转
rotateZ()
沿着z轴进行旋转
要配合 透视用。
跟缩小效果是有区别的。
透视(perspective)
动画 animation
声明动画 @keyframes ; 声明过后可以多次调用，
例子
![技术分享图片]()
infinite 次数的无穷循环。
反方向，是走出去 是否还回到初始点。
@
