一、精灵图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 ...
一、 对象1. 字面量创建对象1var obj = {}; // 一个名为 obj 的空对象
12345678var obg = { uname: "张三疯", age: 18, sex: "男", satHi: function () { console.log("hi~"); },};
注意：
里面的属性 或 方法 采用键值对的形式；
多个属性 或 方法 中间用 逗号隔开；
方法冒号后面跟的是 匿名函数；
调用对象属性12345// 方法1console.log(obj.uname); // 张三疯// 方法2console.log(obj["age"]); // 18
调用对象方法1obj.satHi(); // hi~
2. 利用 new Object() 创建对象1var obj = new Object(); // 创建一个名为 obj 的空对象
向对象中填写属性123456obj.uname = "张三疯"; ...
一、 DOM
web API 是浏览器 提供的一套操作 浏览器功能（BOM）和 页面元素（DOM）的 API。
DOM：处理 HTML 的标准 编程接口
1. 获取元素
通过 document 查找元素，是查找整个页面所有的元素；
通过 标签元素查找，是查找的该标签元素下的 子元素；
id 获取 元素 （ getElementById() ）
获取的元素的返回值是一个对象；
console.dir(元素对象) ：可以查看元素的 属性 和方法；
如果没有找到元素，则返回 null；
123456<div id="time"></div><script type="text/javascript"> var el = document.getElementById('time') console.log(el)</script>
标签名 获取元素 （ getElementsByTagName() ）
getElementsByTagName() : 返回一个 ...
