123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 ...
一、元素定位
定位模式
是否脱标
移动位置
是否常用
static（静态定位）
不脱标
不能使用边偏移
很少
relative（相对定位）
不脱标（占有位置）
相对自身位置移动
常用
absolute（绝对定位）
脱标（不占有位置）
带有定位的父级
常用
fixed（固定定位）
脱标（不占有位置）
浏览器可视区
常用
sticky（粘性定位）
不脱标（占有位置）
浏览器可视区
当前阶段少
1. 定位的组成
定位 ： 将盒子定在某个位置，所以 定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式：指定一个元素在文档中的定位方式边偏移 ： 决定了该元素的最终位置
语法：
1position: static | relative | absolute | fixed;
定位模式：
参数
含义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
sticky
粘性定位
边偏移：
边偏移属性
示例
描述
top
top: ...
一、精灵图1. 精灵图（sprites）的使用
使用核心：
精灵图主要针对背景图片使用，可以把多个背景图放到一张大图中，减少服务器的请求次数
移动背景图片位置（background-position）
移动距离就是图片的 x 和 y 轴坐标（与网页坐标不同），一般都是往左往上移动，所以数值都是 负值
语法：
12345background-position: x y;或background: url(图片路径) x y；
代码示例
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"& ...
一、选择器1. 属性选择器
属性选择器：可以根据元素特定的属性来选择元素
类选择器、属性选择器、伪类选择器，他们的权重都是 10
语法：
123元素[属性] { 样式}
选择符
说明
E[att]
选择具有 att 属性 的 E 元素
E[att=”val”]
选择具有 att 属性且值等于 val 的 E 元素
E[att^=”val”]
匹配具有 att 属性且值以 val 开头的 E 元素
E[att$=”val”]
匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*=”val”]
匹配具有 att 属性且值以 val 包含的 E 元素
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF ...
一、 2D 转换（transform）
转换（transform）：可以实现元素的位移、旋转、缩放等效果
2D 转换： 改变标签在二维平面上的位置和形状
如果 既有位移，又有旋转、缩放时，需要先写位移 再写其他，否则方向会跑偏
123/* 位移 旋转 缩放 */transform: translate(50% 50%) rotate(180deg) scale(1.2em);
代码示例
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca ...
1. 标题标签 <h1> to <h6>123456789101112131415<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>这是 1 级标题</h1> <h2>这是 2 级标题</h2> <h3>这是 3 级标题</h3> <h4>这是 4 级标题</h4> <h5>这是 5 级标题</h5> <h6>这是 6 级标题</h6> </body></html>
2. 段落 标签 <p> 、 换行 标签 <br />12345678910111213<!DOCTYPE html><html> ...
一、html5 标签1. 语义标签
header : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 定义文档某个区域
<aside> : 侧边栏标签
<footer> : 尾部标签
注意：
这种语义化标准主要是针对 搜索引擎 的
这些标签可以多次使用
在 ie9 中，需要把这些标签转换为块级元素
2. 多媒体标签
<audio> ：音频标签， 尽可能使用 mp3 格式的文件
<video> ： 视频标签，尽可能使用 mp4 格式的文件
1. 视频标签（video）
标签
描述
video
定义一个视频
source
定义多种媒体资源
track
定义在媒体播放器文本轨迹
123456/* 解决兼容性问题 */<video width="320" height="240" controls> <source src="movie.mp4" t ...
一、 JS 三种引用方式1. 行内式1<input type="button" value="唐伯虎" onclick="alert('点秋香')">
注意：
HTML 推荐使用 双引号，JS 推荐使用 单引号
2. 内嵌式123<script> alert("我爱学习");</script>
3. 外联式
1<script src="./my.js"></script>
</code-block>
1alert("这是一个外联样式");
</code-block></code-group>
二、 JS 输入 输出语句
方法
说明
代码
alert(msg)
浏览器弹出警告框
console.log(msg)
浏览器控制台打印输出信息
浏览器
prompt(info)
浏览器弹出输入框，用户可以输入
浏览器
...
一、运算符运算符优先级：
优先级
运算符
顺序
1
小括号
（）
2
一元运算符
++ 、 —
3
数运算符
先 * / 后 + -
4
关系运算符
> 、>=、<、<=
5
相等运算符
==、!=、 === 、 !==
6
逻辑运算符
先 && 后 \
\
7
赋值运算符
=
8
逗号运算符
，
1. 算术运算符
运算符
描述
实例
+
加
10 + 20 = 30
-
减
10 - 20 = -10
*
乘
10 * 20 = 200
/
除
10 / 20 = 0.5
%
取余数
9 % 2 = 1
不要使用 浮点数 做判断，因 精度 问题，可能导致两个数 不相等
2. 递增、递减运算符
递增（++）、递减（—）
前置递增（递减）：将（++/—) 放在变量的 前 面，先递增或递减，在输出
后置递增（递减）：将（++/—) 放在变量的 后 面，先输出，再递增或递减
12345678var age1 = 10;var age2 = 10;// 前置c ...
一、数组1. 创建数组利用 Array() 创建数组
1var arr = new Array(); // 一个名为 arr 的空数组
利用 字面量（[]) 创建数组
1var arr = []; // 一个名为 arr 的空数组
2. 数组的使用下标:
数组的 下标 从 0 开始
12var arr = [3.14, "JS", "HTML", true];console.log(arr[1]); // JS
遍历元素
变量名.length : 可以获取 数组元素的 个数.
1234var arr = [3.14, "JS", "HTML", true];for (var i = 0; i < arr.length; i++) { console.log(arr[i]);}
获取数组中的最大值:12345678var arr = [3.14, 18, -21, 33, 0, 1];var num = 0;for (var i = 0; i < arr.length; i ...
