HTML
-
超文本标记语言
-
是有一个个标签组成，如果我们要创建一个HTML文档，第一行必须先声明我们要创建的是一个h5页面
-
<!doctype html>
-
html页面值雨荨有一个外层标签，html;所有的标签都要包裹在HTML标签以内 ；…
-
html标签不分（标签名）大小写；
-
xml要严格区分大小写；
-
下边有两个字标签，一个页面的各种信息 页面要显示的内容
- 中页面的标题
- 页面的配置，不包国任何内容，单标签
- Google可以不写
- 用于搜索引擎优化
- 跟搜索引擎有关
css样式
- 第一个地方可以写在style属性，任何一个标签都有style属性
- 写在head标签中的style标签内
- 写在一个外部的css文件中，页面中可以用link标签引入；
- 复用性高写在css文件，复用性不高写在head中的style标签中；一般不用style属性
选择器
- 1、id选择器，以#开头，允许两个id一样
- 2、class选择器，以.开头，匹配class相同的标签
- 一个标签可以有多个class值，用空格分隔；
- 3、元素选择器，直接用标签名来命名，匹配标签名相同的标签
- 4、*通配符，匹配所有的标签
选择器的优先级
- 范围越小优先级越高
- 内联样式(标签的style属性)优先级最高>id选择器>class>元素>*
常用样式
- 常用单位：
- 大小：px固定大小，表示像素
- 百分比 % 参照父元素的大小
- vh百分比，参照屏幕的高度，vw参照屏幕的宽度
- em 参照的是父元素的font-size,1em=父元素的font-size;
- rem参照的是HTML的font-size
- 角度
- deg**********
- 大小：px固定大小，表示像素
- 常用样式
-
宽度
-
高度
-
background 背景色，背景图，平铺，背景定位等等
-
background-positon: 背景定位********* background-position: left top;
-
margin外边距
-
padding内边距
-
border边框线，大小 样式 颜色
-
样式：solid 实线 dashed虚线（线段） dotted虚线（点） inset(凹陷感觉) outset(凸起感觉)
-
border-left…
-
内边距和边框线会会改变元素的实际宽度和高度****
-
实际高度= height+上边内边距+上线边框线
-
box-sizing: border-box;内边距和边框线都在宽度和高度以内绘制
-
display: block,inline,inline-block，none（隐藏模型）,flex将元素转换成弹性模型；**********
-
flex-direction: row-reverse/column-reverse
-
子元素flex-grow；1 2 。。弹性比例扩展
-
display:none ; 隐藏元素并且脱离文档流；*****
-
就是不占用任何位置
-
不脱离文档流：visibility:hidden;******
-
浮动
- float: 浮动 脱离文档流、left:左浮动，right: 有浮动
一旦设置了浮动，该元素自动变成inline-block;***** - clear 清除浮动，在浮动的统计元素中设置，
- left 清除左浮动， right: 清除有浮动 both: 清除左右浮动
- 清除浮动后，浮动的元素回到了文档流，但是仍然保持并排；
transform 元素转换
-
3d转换，transform-style: preserve-3d;
-
父元素设置镜头的 距离： perspective: 800-1200px
-
rotateX 沿着x轴旋转； rotateY: 沿着y轴。 rotateZ:。。
-
translateX: 沿着x轴平移。。。
-
rotate 沿着z轴旋转(2d)
定位 position
-
reletive 相对定位 特点：不脱离标准流，参照无定位的位置
-
static 静态****
-
absolute 绝对定位：脱离标准流，参照上一个非static定位的父元素
-
fixed 固定定位： 参照屏幕的位置，随着滚动条滚动
-
覆盖规则：
-
1、非static覆盖static定位
-
2、后写的定位覆盖先写的
-
3、有z-index覆盖 wu z-index
-
z-index大的覆盖 z-index小的
动画样式
- css3中的动画是一个相对位置的移动，所以一定要定位： relative或者absolute;*********
- 1、定义动画
- @keyframes 动画名{ 过度效果}
@-webkit-keyframes wy{
0% {left：0}
100% {left: 600px}
}
@-o-keyframes wy {
}
-
2、执行动画
-
用的是animation；
-
-webkit-animation: wy 1s
-
在选择器中animation:
-
动画名 过度时间 速度曲线（ease默认) 延迟时间（默认是0) 播放次数（默认是1） 偶数次是否逆序 停留位置
-
速度曲线：ease 低速-快-特别慢
- ease-in 特别慢- 快
- ease-out 特别快- 越来越慢
- ease-in-out 特别慢- 快- 减速
- linear: 匀速
-
播放次数
-webkit-animation: wy 3s linear 1s 4 -
infinite无限次
-
偶数次，是否逆序
-
normal不逆序 alternate逆序
-
停留位置： forwards 停留在动画执行的最后一帧上
day01下午 js
- js浏览器脚本语言，浏览器运行js代码
- 动态控制html css 的获取和创建 修改
- head标签或者body的script标签里
- 单独封装js文件 用script 标签引入
- 如果用script标签引入 就不要再标签内写代码了，应该另外再写一个script
变量
-
let 临时变量
-
const 定义常量
-
var已经废弃，别再使用了
- var的坑
- var是全局变量
- var的坑
-
typeof 变量名字 返回变量类型
-
js是 弱类型语言 定义变量的啥时候不必预先说明 该变量 是什么类型，赋值的时候 付了什么类型的数值， 该变量就是什么类型
-
js和java直接的关系，语言上没有什么关系
-
TS语言全程 typescript ：他支持所有的js，编码，概念，思维都可以用
-
ts使用了类型和接口： 作用是规范了数据类型
-
循环 分支判断
-
dom document object model 页面对象模型
-
页面中每一个标签都对应着js中的一个页面对象
-
标签中的每一个属性 都可以通过dom来获取或者设置
-
dom中 事件 为 用户进行函数触发的 一种机制
事件
- 点击是左键，按下是3个键都行******看看回放
jquery
- jquery 快速获取dom和操作dom的 一种工具