- http协议依赖可靠传输，在互联网环境中首选使用是TCP传输协议
- http协议是基于request/response范式的，服务端不主动向客户端发数据
- http 1.0不支持持久连接，每次request/response都要建立一次TCP连接
- http 1.1要求支持持久连接，连接可以复用完成多次request/response,但还不能离开request/response范式，还得依靠轮询。
- http 1.1开始支持协议切换
websocket出现了。
原理就是利用http协议进行协议切换，将TCP连接（大家说它socket）从http协议中解放出来，进行更有效的应用数据通讯。
http 与 webSocket 和 socket.io
http ： client > server 靠客户端发起请求，然后服务端收到请求在进行回应。
webSocket ： server <> client 双向。基于TCP的一种新的网络协议。
socket.io ： 封装了WebSocket以及其他的一些协议，并且实现了WebSocket的服务端代码。
https://www.jianshu.com/p/00e4decb7ac2
https://www.cnblogs.com/ostrich-sunshine/p/7474471.html
cocoscreator 使用的标准网络接口
XMLHttpRequest : 用于短连接
WebSocket: 用于长连接
cocoscreator 未提供SocketIO
通过域名查找ip地址就是dns解析
网络7层协议，每一层都有每一层的协议
http协议要基于传输层的tcp/ip协议来实现
物理层： 物理设备
数据链路层： 软件+物理设备（硬件）创建的电路连接（基础的数据传输）
网络层： 数据在节点（网络设备）之间创建逻辑链路
传输层：向高层屏蔽了下层的通讯数据的细节，两个协议 TCP/IP、UDP
会话层：session Layer，负责两个实体 之间的会话 连接确保点到点之间的传输不被中断。
表示层：加密解密编码格式转换
应用层：http协议，构建在TCP协议之上，为应用软件提供了各种服务，屏蔽了网络传输的相关细节-具体网络传输细节也不需要知道。
NodeJS中
- __dirname2 ： Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。
- ./ 会返回你执行 node 命令的路径，例如你的工作路径。
- 有一个特殊情况是在 require() 中使用 ./ 时，这时的路径就会是含有 require() 的脚本文件的相对路径。
svn使用：
新建一个svn地址：
- 在目标工程中 , .svn 目录下，鼠标右键，选择Repo-browser。（和目标工程无关，其实就是为了打开 svn 浏览器）
- 在弹出框内 单击选择相应文件夹， 新建 add file ， 会在URl栏出现svn地址
- 在本地相对合适的位置 check out 出来，进而在文件内进行添加删除文件。（.svn 同目录下）
在主工程中添加具体游戏软链接：
在主工程引用的位置 添加，Tortoise SVN --> peoperties --> 添加工程的软链接（svn:externals）
在1处（即svn浏览器中），会显示出 对应位置的软链接，标识大概为蓝色↗箭头显示。
添加具体软链接 相当于 引用刚才创建的svn地址的东西
简单介绍工作流：
cocoscreator的底层是cocos2d-x
- 外部导入资源。资源管理器创建资源（场景、预置、动画、脚本、粒子）
- 搭建场景.fire文件
- 场景中的节点挂载，内置组件或自定义组件，控制游戏逻辑
- 脚本组件化 和开放式插件
- 数据驱动的工作流
项目结构：
assets：所有的都在这，本地资源脚本和第三方库
library：无用（导入自动生成信息）
local: 无用（本地配置）
packages： 放置 此项目的自定义扩展插件
settings： 项目设置
temp：无用
project.json：工程配置文件
build：构建目标 项目->构建发布时产生的
编辑器：
资源管理器
场景编辑器
层级管理器
属性检查器
控件库
工具栏
设置
项目设置
代码编辑环境配置：
第一个游戏：
Canvas： 画布
prefab：
基本工作流程：
配置资源–>
配置场景–>
配置脚本–>
一键接入第三方
发布跨平台
=====================================================================================================
配置资源：
一.在资源管理器中： 创建场景 保存场景 切换场景
切换场景中释放资源:1. cc.loader.release
2. 场景的自动释放功能
如切换场景不释放资源，内存越来越大。
若启用了2的场景自动释放功能，我们想让一部分资源不被释放，可使用cc.loader.setAutoRelease或者cc.loade.setAutoReleaseRecursively保留资源.
延迟加载资源
二.在资源管理器中： 添加贴图资源
Texture和它的子资源SpriteFrame
Atlas和它的多个子资源SpriteFrame
使用SpriteFrame
三.在资源管理器中： 添加预制资源
创建、保存。还原预置
预制体的自动同步和手动同步
四.在资源管理器中： 添加Atlas（图集资源）后，资源管理器中显示Atlas和它的多个子资源SpriteFrame
creator提供了自动图集功能，将碎图打成Atlas
五.在资源管理器中： “创建”自动图集资源Auto Atlas。
六.在资源管理器中：压缩纹理
七.在资源管理器中：创建艺术数字资源(LabelAtlas)
八.在资源管理器中：跨项目导入 导出资源
九.在资源管理器中：图像资源的自动剪裁
十.在资源管理器中：创建和使用脚本组件
十一.在资源管理器中：创建和使用字体资源
系统字体
动态字体
位图字体
直接创建label渲染组件，将字体拖入
十二. 粒子资源
十三.在资源管理器中：创建和使用声音资源
1.属性检查器内会有加载模式的选项
2.使用cc.loader.load
十四.在资源管理器中：创建和使用Spine、DragonBone 骨骼动画资源
十五.在资源管理器中：创建和使用瓦片图资源
十六.在资源管理器中的asset目录下将的所有.json文件，都会导入为cc.JsonAsset
1.直接为组件关联一个json
2.也可以动态加载 cc.loader.loadRes(“路径”, function(err, leixing变量){}); //这里的类型变量为jsonAsset
十七.文本资源： 同上
=====================================================================================================
配置场景：
一.组件式开发（组合而非继承）如Sprite节点 是由Node节点和Sprite组件组合而成的。
节点是承载组件的实体，组件来让节点具有各式各样的表现。
二.坐标系
三.层级管理器，节点层级
四.Canvas 渲染根节点
五.摄像机
=====================================================================================================
配置脚本：
一.创建组件脚本：创建js脚本挂载在节点上。
二.使用cc.Class();声明一个类型，如let 类型 = cc.Class();
声明出来的类型可以实例化对象如 var obj = new 类型();
cc是一个对象，调用cc对象的Class方法，class方法的参数是一个匿名对象，匿名对象在properties中包含了一个匿名对象，匿名对象内 使用key：value的方式设置了key属性，当然value也可以是一个匿名对象
1判断类型
2构造函数
3实例方法
4继承
5父构造函数
6脚本中声明属性
简单声明
完整声明
数组声明
get/set 声明
三.访问节点和组件
1.获得组件所在的节点 this.node
2.获得其它组件 this.node.getComponent(cc.Sprite);
3.利用属性检查器设置组件、利用属性检查器设置节点
4.查找子节点 this.node.children; cc.find(); getChildByName();
5.访问已有变量里的值：
①.通过全局变量访问
②.通过require模块访问
四. 模块化脚本
模块化：引用其它文件，访问其它文件导出的参数，
调用其它文件导出的方法
使用其它文件导出的类型
使用或继承其它组件Component
与NodeJs几乎相同的CommonJS标准来实现模块化
每个单独的脚本文件就构成一个模块
每个模块就是一个单独的作用域
以同步的require 方法来引用其它模块
设置module.exports 为导出的 变量
小例子：
在非cc.class组件内
let AA= require(“脚本名”)
导出对象
module.exports = {};
在cc.class组件内
extends AA;
======================================================
require:
可在脚本任意地方任意时刻调用
游戏开始时会自动require所有脚本，这时每个模块内部定义的代码就会被执行一次，之后无论又被require了几次，返回的始终是同一份实例
require 实际上获取的是 目标脚本中的 moudule.exports变量
定义模块：
①定义组件：当在脚本中 cc.Class({extends: cc.Component,});声明了一个组件，Creator会默认把他们导出，其它模块直接require这个模块 就可以直接使用这个组件。
②定义普通JavaScript模块
不单可以定义组件，还可导出任意js对象
导出变量： module.exports默认是一个空对象{}， 可以直接往里面加字段。 module.exports.key = value;
module.exports的值可以是任意JS类型
封装私有变量：
每个脚本都是一个单独的作用域， 在cc.class();外设置的 var 局部变量是私有变量，只能在脚本中使用，外部模块访问不到。
五. 插件脚本
资源管理器选中任意脚本， 属性检查器看到导入为插件 这一设置界面。
对于组件脚本而言默认为普通脚本。
对于第三方或底层插件 可以设置脚本为插件脚本。
普通脚本：可以require。脚本内声明的局部变量不会暴露到全局。use strict 被强制开启。项目构建阶段所有脚本都会被打包成单个脚本文件。
插件脚本：不可require。脚本内不再任何函数内声明的变量 都默认为全局。use strict需要声明，否则未定义的额变量一旦赋值就会变成全局变量。项目构建阶段不进行打包。
脚本加载顺序：Cocos2d引擎–> 插件脚本–> 普通脚本。
======================================================
六.CCClass进阶
CCClass： 使用cc.Class声明的类
原型对象：调用cc.Class 时传入的字面量参数，原型对象里面的参数可以省略，只需声明用的到的部分。
实例成员：成员变量 、 成员方法
静态成员：static 的静态成员和静态方法
运行时：
序列化：解析内存中的对象，将他的信息编码为一个特殊的字符串 ，以便保存到硬盘上或传输到其他地方。
类名： 使用getClassByName方法可以用来查找类名。
使用cc.js.getClassByName(JsName);来查找对应的类。
判断实例： instanceof();
判断类: cc.isChildClass();
成员： 实例变量、实例方法
静态变量、静态方法 在Class的原型对象参数中设置keyValue如 static:{}; 或者。。。
私有的静态成员（局部变量）
除了私有的静态成员，其它静态成员会被子类继承，继承时会将父类的静态变量 浅拷贝 给子类
继承：无论子类是否有定义构造函数，子类实例化前父构造函数都会被自动调用。
重写： 所有成员方法都是虚方法，子类方法可以直接重写父类方法
属性： 属性是特殊的实例变量，能够显示在属性检查器中，也能被序列化
属性参数： 所有属性都是可选的，但是必须要有default get set中的一个
七. 分包加载
以文件夹为单位进行分包加载。
选中文件夹->属性管理器选中分包加载–>点击应用确认
子包名就是文件名
子包名会在加载子包的时候 作为加载的名字传入
分包的作用只会在构建后才会体现。构建后在sbupackages 文件夹下生成 对应子包名文件夹，文件夹下的代码会合并成一个脚本文件，资源会移动到子目录下。
加载子包， 系统会提供一个统一的api来加载子包文件里面的资源cc.loader.downloader.loadSubpackage(‘包名’, function(){});
如果子包被加载成功，则子包中的脚本会自动运行，之后就像使用主包一样的使用子包了。
八. 对象池cc.NodePoor
运行时 创建销毁节点比较耗时，
我们一般在onLoad的时候进行节点的创建，切换场景的时候进行节点的销毁。
如果在游戏过程中，建议使用对象池，
即在onLoad中创建对象池 this poor = new cc.NodePoor();
创建池对象后,对象池插入对象 poor .put.(cc.instantiate(this.prefab));
在对象池中取出对象 let prefab = poor.get();
将用过的节点放回返回值也是 对象池.put（放回的节点）
this.poor = new cc.NodePoor(“脚本组件参数”);
this.poor.get(); 得到对象池中对象的时候 会调用 脚本组件的reuse方法
当this.poor.put(Item); 会调用脚本组件的unuse方法
就是对象池、脚本组件、和对象池对象的联系。
九. 动作系统：是基于Node的
缓动系统 => 动作系统
// 基础动作 --> 1.时间间隔动作 2.即时动作
// 容器动作
// 动作回调
// 不同类型之间的动作复合
// 动作回调，和动作回调的三个参数 ，动作回调不能停止自身动作
// 缓动动作easing 函数
十.替代动作的 cc.tween 新的API系统
// 链式API
cc.tween(this.node).to(1,{position:cc:v2(100,100), rotation:360}).
to(1,{scale:2}).
start() //将之前生成的action队列重新组合生成一个cc.sequence队列
所以cc.tween的链式结构是依次执行每一个API
// 设置缓动性
to ： 绝对
by ： 相对
// 支持缓动任意对象的任意属性
let obj = {key : 100}
cc.tween(obj).to(1,{key:100}).start();
// 同时执行多个属性
cc.tween(this.node).to(1, {scale:2, position:cc.v2(100,100). rotation:90});
//easing 函数
cc.tween().to(1,{scale:2, position:cc.v2(1,2), rotation:20}, {easing: “”});
easing 函数：可以是系统自带的
可以是自己定义的
easing : t=> tt // 参数 => 函数体 也可以这样写 (t)=>{tt};
对多个属性使用easing 函数，对单个属性使用easing函数
//自定义progress(用法类类似于easing)
cc.tween().to(1, {position: cc.v2(10, 2), rotation:45}, {progress : (t1, t2, t3)=>{ return t1 + t2 + t3;}})
// 一个cc.tween()就是一个队列，如果要同时执行多个队列则使用
.parallel(cc.tween.to(1, position: cc.v2(100,100)), cc.tween.by(2, rotation: 52));
// 回调
.call( ()=>{} )
// 重复执行
repeat / repeatForever函数会将前一个action作为作用对象
// 延迟执行
.delay(),
十一.定时器
// Js 的setTimeout 和setInterval
component.schedule()
四个参数： 回调， 时间间隔，重复几次， 延迟多久
component.unschedule();
取消定时器，参数是哪个回调函数。
当然也可以再回调函数中取消定时器， 参数就是这个回调函数本身
十二.脚本的执行顺序
同节点挂载脚本的执行顺序 ABABAB
设置组件执行优先级
properties: {
}
edit: {
execution: -1, //越小越早
},
android：
小知识1：
this project will support instant apps
这个项目将支持即时应用
无需安装app，直接得到代码环境执行的结果。
把所有代码和资源放到instant app模块，用户即时访问时 关联这个模块。
小知识2：
sync project with gradle files
同步项目与gradle文件
小知识3：
Android Studio “Sync project with Gradle Files”按钮消失问题?
发现工程中少了个.iml文件，看来这一切异常基本和这个iml文件有关系.只要重启android studio打开该项目即可生成iml。
小知识4:
iml文件的用途?
用英语在stackoverflow上试试，第一条便是：What are iml files in Android Studio?
IML是由IntelliJ IDEA创建的模块文件，这是一个用于开发Java应用程序的IDE。它存储有关开发模块的信息，可能是Java、插件、Android或Maven组件;保存模块路径、依赖项和其他设置。
然而，Gradle并不是IntelliJ IDEA的本地项目模型——它是独立的，保存在.iml文件和. IDEA /目录中的元数据中。在Android Studio中，这些东西大多是由Gradle构建脚本生成的，这就是为什么当你修改像build. Gradle这样的文件时，你会被提示“与Gradle文件同步项目”。这也是为什么您不必费心将.iml文件或.idea/放入版本控制中，因为它们的内容将被重新生成。
小知识5：
File 目录 —> invalidate caches/restart —invalidate and restart
即缓存失效重启androidStudio
小知识6：
Android Studio是从build.gradle里面定义的Maven 仓库服务器上下载library的。
Apache Maven是Apache开发的一个工具，提供了用于贡献library的文件服务器。
总的来说，只有两个标准的Android library文件服务器：jcenter 和 Maven Central。
小知识7：
jcenter和Maven Central两个标准的仓库。
小知识8：
为什么webView.loadUrl(“file:///android_asset/example.html”)是这种格式,
找assets文件夹下的example.html文件加载。
小知识9：
讲解findViewById的用法&是做什么的
安卓编程的定位函数，主要是引用.R文件里的引用名。
一般在R.java文件里系统会自动帮你给出你在XML里定义的ID或者Layout里面的名称，
例如：Button button=(Button)findViewById(R.id.button01);
这样就引用了XML（res里的布局文件）文件里面的button，使得在写.java的按钮时能与XML里的一致。
小知识10：
R.java是什么？
R.java文件自动生成，用来定义Android程序中所有各类型的资源的的索引。
有控件的id的索引，string字符串资源的索引，layout的索引，drawable资源索引等等
用户可以通过“R.资源类名.索引”来调用定义的资源
=====================================================================================================
2020/06/23
- JS绑定 jsb
- android和ios端写原生平台代码，与creator中打包构建项目
- 怎么接第三方sdk
- 现存项目，如热更新等。马甲包
抽象层
JS绑定的大部分工作其实就是 ，设定JS相关操作的CPP回调，在回调函数中关联cpp对象。
1.注册JS函数，绑定一个CPP回调。
2.注册JS对象的属性读写访问器，分别绑定读与写的cpp回调。
因为script引擎较多，所有我们把它统一了。
使用宏 来抹平不同JS引擎回调函数定义与参数类型的不同。
cocoscreator中 继承自cc.Component的组件所在的脚本一般都会作为组件附加到节点上（被继承的基类可以不用附加到节点上，基类被子类继承，子类就具有了父类的属性）。 在creator中的JavaScript脚本则需要用的时候require此脚本进行使用就可以了。
cc.js.getClassByName(脚本名);//通过名称获取注册类
目前测试的是CocosCreator一旦运行，在assert目录下的继承自extends: cc.Component所有脚本都可以在cc.js的属性里看到
（_registeredClassIds: 和 _registeredClassNames: 属性）。
通过cc.js.getClassByName(脚本名);可以知晓该参数脚本是否被注册。
如果被注册了，说明脚本存在，即脚本可以被挂载在节点上进行使用。
在使用脚本组件时，可以在被挂载节点上getComponent取得该组件进行使用。
在assert目录下的JavaScript脚本，未继承自extends: cc.Component，这个脚本在cc.js的属性里是看不到的。可以使用require(脚本名);获取脚本，如果脚本存在，则可以获取改脚本对象。直接使用require 返回的js脚本对象。
一般浏览器采用CMD规范。CMD规范是非同步加载模块.
CMD规范推崇依赖就近 as lazy as possible
全局函数define(参数);
1.参数是对象或者字符串的时候表示，模块的接口就是该对象或者字符串。
2.当参数是函数的时候，表示是模块的构造方法。
执行该构造方法可以得到模块对外的接口。函数在执行的时候默认会传入三个参数：require，exports，module。
例如：
define(function(require, exports, module){
//-- require函数接收模块标识做参数，用来接收其它模块的接口。require一直就是这么写。
var a = require("./a");
a.doSomething();
});
ADM规范是非同步加载模块，允许指定回调函数。
一般浏览器采用AMD规范。
对于依赖的模块，AMD是提前执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不同）
AMD推崇依赖前置
define([’./a’,’./b’], function(a, b){
//依赖必须一开始就写好
a.doSomething();
…
b.doSomething();
…
});
一般Nodejs采用CommonJS规范
CommonJS规范加载模块是同步的，只有加载完成，才能执行后面的操作。
每个文件就是一个模块，有自己的作用域。
js文件被加载后，每个模块都有一个moudle对象和一个exports对象。
moudle对象有一个exports属性，属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取moudle.exports变量。
为了方便，Node为每个模块提供一个exports变量指向moulde.exports
require函数用于加载模块文件。
注意：不能直接将exports变量指向一个值，因为这样等于切断了exports与moudle.exports的联系。
所以如果一个模块的对外接口，就是一个单一的值，不能使用exports输出，只能使用module.exports.
例子：
// – a.js
// ---------------------- node -------------------------
module.exports = {
a:function(){},
b:‘xxx’,
};
// ---------------------- ADM or CMD--------------------
define(function(require, exports, module){
module.exports = {
a : function(){},
b : ‘xxx’
};
});
// – b.js
// ---------------------- node -------------------------
var m = require(’./a’);
m.a();
// ---------------------- ADM or CMD -------------------
define(function(require, exports, module){
var m = require(’./a’);
m.a();
});
cocosCreator:
再给属性赋值的时候，属性的notify函数一定会被触发，即使新值与旧值是一样的也会触发。
require/exports
require/exports 出生在野生规范当中，即这些规范是 JavaScript 社区中的开发者自己草拟的规则，得到大家的承认或者广泛的应用。比如 CommonJS、AMD、CMD 等等。
CommonJS 是 Node.js 的规范。require/exports 的用法只有以下三种简单的写法：
const fs = require(‘fs’)
exports.fs = fs
module.exports = fs
module.export
ES6中export和import的使用。
import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。
// profile.js
var firstName = ‘Michael’;
var lastName = ‘Jackson’;
var year = 1958;
export {firstName, lastName, year};
// main.js
import {firstName, lastName, year} from ‘./profile’;
function setName(element) {
element.textContent = firstName + ’ ’ + lastName;
}
CommonJS 和 ES6 之间的差异，Node.js 无法直接兼容 ES6。所以现阶段 require/exports 仍然是必要且是必须的。出自 ES6 的 import/export 相对就晚了许多。
这也就是为什么前面说 require/exports 是必要且必须的。因为事实是，目前你编写的 import/export 最终都是编译为 require/exports 来执行的。
jdk java 虚拟机，编译.class的环境
–> sdk (java) 使用java开发android
–> NDK(c/c) 要使用c/c的第三方库，以前是用java 的jni调用c/c。（Java调用C方法）
NDK的使用（java调用C方法）
https://blog.csdn.net/zhufeng1222/article/details/76047128
数据属性 访问器属性
原型属性 实例属性
Object.cerate() 必须接收一个对象参数，创建的新对象的原型指向接收的参数对象，
new Object() 创建的新对象的原型指向的是 Object.prototype.
（表述有点啰嗦，简洁点说就是前者继承指定对象， 后者继承内置对象Object）
可以通过Object.create(null) 创建一个干净的对象，也就是没有原型，
而 new Object() 创建的对象是 Object的实例，原型永远指向Object.prototype
Object.create(proto)方法创建一个新对象，使用现有的对象来提供新创建的对象的 proto.
proto 新创建对象的原型对象。
每个对象都会在内部初始化一个属性,就是__proto__,当我们访问一个对象时，如果对象内部不存在这个属性，那么他就会去__proto__里去找这个属性，这个__proto__又会有自己的__prto__，于是这样一直找下去，也就是原型链。
每个函数都有一个prototype属性（只有函数才有），这个属性是一个指针，prototype属性指向原型对象。
函数的prototype下的属性，在函数实例化对象时可以由对象调用，不可以用函数名调用。但prototype属性可以被所有对象共享。
如果函数直接添加属性，则可以用 函数名.属性 进行调用添加的属性。因为这是类属性，不是对象属性。
逗号分隔， 不是逗号操作符
var a=0, b=5, c=“ss”;
//-- 下面的函数返回的是i，即返回的是1。
testDouhaoUsed(){
var args = 1,s2 ="sss";
cc.log(args);
cc.log(s2);
function ttes(){
var i = 0;
return (i+=1, i);
}
cc.log(ttes());
},
[].slice.call(arguments, 1) //–意思是取得arguments数组的下标为1的元素
//arguments是调用对象，替换了[],1是传递给slice的参数。
//-- 把一些脚本设置为插件， 允许编辑器加载，如编辑器中的其它普通脚本加载过程中会依赖当前脚本，则需要手动开启这个选项。
通常我们在插件中写入：
1.立即执行函数，立即执行函数内部没有加入 window. 的属性，外部是不可访问的，加入即可在外部访问（全局）。如果在函数的外部写入的 属性，则不需要加入 window. 属性。 如果在函数内部，没有定义而立即使用的属性，则也会直接认为是全局变量（在不是strict的情况，在strict的情况直接使用未定义的属性会报错）
2.可以给一些既定存在的类型添加原型属性，例如在cocoscreator中。
cc.Toggle.prototype.setSelectState = function(isSelect) {
cc.log(“isSelect==”, isSelect);
cc.log(“this.toggleGroup==”, this.toggleGroup);
cc.log(“this._toggleContainer==”, this._toggleContainer);
var group = this.toggleGroup || this._toggleContainer;
}
插件脚本需要手动声明 use strict,否则未定义的变量一旦赋值就会变成全局变量
自己的问题：new 出来的ccToggle 和 属性检查器中出来的属性不同。
答：自己new出来的cc.Toggle 是一个组件对象。
属性检查器中的是Node节点上附加了cc.Toggle属性，而且这个Node是由父子节点的。
这两个是不一样的东西，即属性不同。
//-- 关于require的循环引用问题：
//-- item.js
var item = cc.Class({
properties:()=>({
game:{
default:null,
type:require(“other”),
}
})
});
module.exports = item;
//-- other.js
var other = cc.Class({
properties:()=>({
item:{
default:null,
type:require(“item”),
}
})
});
module.exports = other;
即由此可知，在这里require出来的是一个类型。
–> 载入场景 -->自动运行所包含组件的游戏脚本。请深刻理解“包含组件的游戏脚本”
声音加载过程中
插件脚本加载过程中（是否编辑器中的其它普通脚本加载过程中会依赖当前脚本）
get/set 属性
{ item:
{
get:function(){
return this._width;
},
set:function(width){
this._width = width;
}
}
}
属性加载
一般我们这么写
properties:{
}
lambada 属性加载
properties: ()=>({key:{}})
properties: ()=>{ return {};}
properties: function(){
return {};
}
//-- 子类调用基类函数
var rect = cc.Class(){
extends: Shape,
getName : function(){
Shape.prototype.getName.call(this);
return baseName + “(rect)”;
}
//-- 也可以这样调用父类
getName : function(){
this._super();
}
}
C++ 关于宏的一点总结
编译器处理宏是在预处理阶段，是按照文本的顺序进行处理的。遇到宏时就定义一个宏变量。
宏相当一个全局变量，但是在不同cpp中定义是不能相互使用的，除非在.h文件中。
js的方法：
对象方法：
类方法：
原型方法：
function baseClass(){
this.show = function(){console.log(" baseClass : show")};
};
function extendClass(){
this.show = function(){console.log(" extendClass: show")}
};
extendClass.prototype = new baseClass();
let extObj = new extendClass();
//对象方法
extObj.show() //输出 extendClass : show
//类方法不是对象方法
var baseinstance = new baseClass();
baseinstance.show.call(extendClass); //输出 baseClass : show
baseinstance.show.call(extObj); //输出 baseClass : show
extObj.show.call(baseinstance); //输出 extendClass: show
xxx.show.call(yyy); //xxx必须是实例，yyy可以是实例也可以是类型
内置数据类型：string
引用数据类型：Object array date function regExp
array：
array.every 所有为true
some 一些为true
filter//过滤得到符合要求的arra
map //映射得到符合要求的arr
array.forEach(index, index , arrays){
}
push / shift
pop / unshift
原型类型属性：
你不需要显示的声明一个prototype属性，因为在每一个构造函数中都有他的存在。
prototype是一个原型类型对象。
当一个对象呗创建时，这个构造函数 将会把它的属性prototype赋给新对象的内部属性
prototype.
这个__prototype__被这个对象用来查找它的属性。
数据属性
configureable enumeable value writeable
访问器属性
configurwable enumeable set get 通过一个属性的值改变其他属性
实例属性 原型属性
调用构造好函数后生成的每个对象实例都包含 一个原型属性对象。 每个对象实例的原型属性对象都是同一份。
当给与对象实例 覆盖与 原型属性相同的名字的属性，则调用时使用的是 对象实例覆盖的属性。
判断使用的这个属性是否是实例对象自己的，则可以用 实例对象.hasOwnProperty(“属性名”)；
枚举其中的 for in 除了不可枚举的部分都会枚举出来
object.getprototypenames();
例子：证明实例属性和原型属性
function Fish(name, color){
this.name=name;
this.color=color;
}
Fish.prototype.livesIn=“water”;
Fish.prototype.price=20;
var fish1=new Fish(“mackarel”, “gray”);
var fish2=new Fish(“goldfish”, “orange”);
var fish3=new Fish(“salmon”, “white”);
for (int i=1; i<=3; i++){
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}
输出应该是：
“mackarel, gray, water, 20”
“goldfish, orange, water, 20”
“salmon, white water, 20”
Node 类型
属性： 组。坐标。旋转角度。相对父节点缩放。xyz轴缩放。xy轴倾斜角度。 透明度
节点颜色。xy轴锚点位置。节点宽度 高度。zIndex层级排序。
节点的不同明度是否影响子节点。children节点的所有子节点。
childrenCount
active
子节点是否在场景中激活
parent
方法：
on ：this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction, this);
在节点上注册指定的回调函数。可以设置target用于绑定响应函数的this对象
once : 注册节点的特定事件类型回调。回调会在第一时间被触发后删除自身。
off： 删除之前同类型 回调 目标 或useCapture
emit 通过事件名发送自定义事件
我们游戏中使用的fire是 根据数组存储事件对象元素， 在遍历这个数组时候如果存在事件
则使用cb.apply(obj, argument); obj进行即时执行 cb函数。
使用apply
另一种用法： Math.max.apply(null, aray); //null 代表没有对象去执行这个方法，我只需要
用这个方法进行运算，得到返回的结果就行。
（充分利用apply 的特性 自动把第二个数组参数变成一个一个元素 成为函数的参数 ）
array.prototype.push.apply(array, needPushArr);
全局执行上下文 window对象。 他是var 声明的全局变量的载体。
函数执行上下文可以存在无数个，当每一个函数被调用时都会创建一个函数上下文。
执行上下文栈 也叫调用栈，执行栈用于存储代码执行期间创建的所有上下文。
利用JSON转换值达到存储的的方式非常好用
利用json.stringify将存储对象转换成字符串，使用localStorage进行存储，.
当使用localStorge将存储的东西拿出来的后，也是个字符串。
将字符串在使用JSON.parse()从一个字符串中解析出JSON对象 就可以进行使用了
//–JSON.stringify()函数是用来序列化对象的，
无论输入什么，输出的都是字符串类型，可以按自己的需求来定制如何序列化，
输出结果是怎样的格式.
（这个函数可以配置不同的参数：一个参数 object{}/ array []；
二个参数 第二个参数为函数/数组；
三个参数 ）
bool number string 序列化过程中会转为原始值/ undefine null symbol 在序列化过程中会被忽略
（在非数组对象的属性值中时）或者被转换成null（出现在数组中时） 不可枚举的属性会被忽略。
JSON.parse()从一个字符串中解析出JSON对象
浅拷贝与深度拷贝:深拷贝，是拷贝对象各个层级的属性(concat方法与slice也存在这样的情况，他们都不是真正的深拷贝)
（对象的拷贝）
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj===“object”){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象，如果是，递归复制
if(obj[key]&&typeof obj[key] ===“object”){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
除了递归，我们还可以借用JSON对象的parse和stringify
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
js数组和对象的区别：
有序、无序。 对象是关联数组，就是将值与特定的对象关联在一起。
当用点号运算符来存取对象属性时，属性名是用标识符表示的；当用中括号来存取对象属性时，属性名是用字符串表示的，因此可以在运行过程中动态生成字符串。
cocoscreator构建发布， 模板选项生成jsb-default，工程文件在frameworks中。
android studio和eclipse========
因为AS是基于IDEA的，与Eclipse还是有所不同。
Android Studio 项目目录结构
.gradle 文件夹包含的是 gradle 工具的各个版本。
android studio里面的iml是什么文件，android工程的配置文件，这是一个临时文件，编译后出现的。
（IML是由IntelliJ IDEA创建的模块文件，用于开发Java应用程序的IDE。它存储有关开发模块的信息，该模块可能是Java，Plugin，Android或Maven组件; 保存模块路径，依赖关系和其他设置。）
android studio中的build.gradle
英汉互译
//-- Task 任务
//-- plugin插件
//-- Gradle 小秘书
一、什么是Gradle
Gradle是一个构建工具，它是用来帮助我们构建app的，构建包括编译、打包等过程。我们可以为Gradle指定构建规则，然后它就会根据我们的“命令”自动为我们构建app。Android Studio中默认就使用Gradle来完成应用的构建。
有些时候，我们会有一些个性化的构建需求，比如我们引入了第三方库，或者我们想要在通用构建过程中做一些其他的事情，这时我们就要自己在系统默认构建规则上做一些修改。这时候我们就要自己向Gradle”下命令“了，这时候我们就需要用Gradle能听懂的话了，也就是Groovy。Groovy是一种基于JVM的动态语言
我们在开头处提到“Gradle是一种构建工具”。实际上，当我们想要更灵活的构建过程时，Gradle就成为了一个编程框架——我们可以通过编程让构建过程按我们的意愿进行。
当我们把Gradle作为构建工具使用时，我们只需要掌握它的配置脚本的基本写法就OK了；而当我们需要对构建流程进行高度定制时，就务必要掌握Groovy等相关知识了。
二、Gradle的基本组分
- Project与Task
在Gradle中，每一个待构建的工程是一个Project，构建一个Project需要执行一系列Task，比如编译、打包这些构建过程的子过程都对应着一个Task。具体来说，一个apk文件的构建包含以下Task：Java源码编译、资源文件编译、Lint检查、打包以生成最终的apk文件等等。 - 插件
插件的核心工作有两个：一是定义Task；二是执行Task。也就是说，我们想让Gradle能正常工作，完成整个构建流程中的一系列Task的执行，必须导入合适的插件，这些插件中定义了构建Project中的一系列Task，并且负责执行相应的Task。
在新建工程的app模块的build.gradle文件的第一行，往往都是如下这句：
apply plugin: ‘com.android.application’
这句话的意思就是应用“com.android.application“这个插件来构建app模块，app模块就是Gradle中的一个Project。也就是说，这个插件负责定义并执行Java源码编译、资源文件编译、打包等一系列Task。实际上"com.android.application"整个插件中定义了如下4个顶级任务：
assemble: 构建项目的输出（apk）
check: 进行校验工作
build: 执行assemble任务与check任务
clean: 清除项目的输出
当我们执行一个任务时，会自动执行它所依赖的任务。比如，执行assemble任务会执行assembleDebug任务和assembleRelease任务，这是因为一个Android项目至少要有debug和release这两个版本的输出。
3. Gradle配置文件
+png
上面我们说过，Android Studio中的一个Module即为Gradle中的一个Project。上图的app目录下，存在一个build.gradle文件，代表了app Module的构建脚本，它定义了应用于本模块的构建规则。我们可以看到，工程根目录下也存在一个build.gradle文件，它代表了整个工程的构建，其中定义了适用于这个工程中所有模块的构建规则。
接下来我们介绍一下上图中其他几个Gradle配置文件：
gradle.properties: 从它的名字可以看出，这个文件中定义了一系列“属性”。实际上，这个文件中定义了一系列供build.gradle使用的常量，比如keystore的存储路径、keyalias等等。
gradlew与gradlew.bat: gradlew为Linux下的shell脚本，gradlew.bat是Windows下的批处理文件。gradlew是gradle wrapper的缩写，也就是说它对gradle的命令进行了包装，比如我们进入到指定Module目录并执行“gradlew.bat assemble”即可完成对当前Module的构建（Windows系统下）。
local.properties: 从名字就可以看出来，这个文件中定义了一些本地属性，比如SDK的路径。
settings.gradle: 假如我们的项目包含了不只一个Module时，我们想要一次性构建所有Module以完成整个项目的构建，这时我们需要用到这个文件。比如我们的项目包含了ModuleA和ModuleB这两个模块，则这个文件中会包含这样的语句：include ‘:ModuleA’, ‘:ModuleB’。
- 构建脚本
首先我们来看一下工程目录下的build.gradle，它指定了真个整个项目的构建规则，它的内容如下：
buildscript {
repositories {
jcenter() //构建脚本中所依赖的库都在jcenter仓库下载
}
dependencies {
//指定了gradle插件的版本
classpath ‘com.android.tools.build:gradle:1.5.0’
}
}
allprojects {
repositories {
//当前项目所有模块所依赖的库都在jcenter仓库下载
jcenter()
}
}
我们再来简单介绍下app模块的build.gradle的内容：
//加载用于构建Android项目的插件
apply plugin: ‘com.android.application’
android { //构建Android项目使用的配置
compileSdkVersion 23 //指定编译项目时使用的SDK版本
buildToolsVersion “23.0.1” //指定构建工具的版本
defaultConfig {
applicationId "com.absfree.debugframwork" //包名
minSdkVersion 15 //指定支持的最小SDK版本
targetSdkVersion 23 //针对的目标SDK版本
versionCode 1
versionName "1.0"
}
buildTypes { //针对不同的构建版本进行一些设置
release { //对release版本进行的设置
minifyEnabled false //是否开启混淆
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' //指定混淆文件的位置
}
}
}
dependencies { //指定当前模块的依赖
compile fileTree(dir: ‘libs’, include: [’*.jar’])
testCompile ‘junit:junit:4.12’
compile ‘com.android.support:appcompat-v7:23.1.1’
compile ‘com.android.support:design:23.1.1’
}
三、常见配置
整个工程的build.gradle通常不需我们改动，这里我们介绍下一些对模块目录下build.gradle文件的常见配置。
- 依赖第三方库
当我们的项目中用到了了一些第三方库时，我们就需要进行一些配置，以保证能正确导入相关依赖。设置方法很简单，比如我们在app模块中中用到了Fresco，只需要在build.gradle文件中的dependencies块添加如下语句：
dependencies {
…
compile ‘com.facebook.fresco:fresco:0.11.0’
}
这样一来，Gradle会自动从jcenter仓库下载我们所需的第三方库并导入到项目中。 - 导入本地jar包
在使用第三方库时，除了像上面那样从jcenter仓库下载，我们还可以导入本地的jar包。配置方法也很简单，只需要先把jar文件添加到app\libs目录下，然后在相应jar文件上单击右键，选择“Ad As Library”。然后在build.gradle的dependencies块下添加如下语句：
compile files(‘libs/xxx.jar’)
实际上我们可以看到，系统为我们创建的build.gradle中就已经包含了如下语句：
compile fileTree(dir: ‘libs’, include: [’*.jar’])
这句话的意思是，将libs目录下的所有jar包都导入。所以实际上我们只需要把jar包添加到libs目录下并“Ad As Library"即可。 - 依赖其它模块
假设我们的项目包含了多个模块，并且app模块依赖other模块，那么我们只需app\build.gradle的denpendencies块下添加如下语句：
compile project(’:other’) - 构建输出为aar文件
通常我们构建的输出目标都是apk文件，但如果我们的当前项目时Android Library，我们的目标输出就是aar文件。要想达到这个目的也很容易，只需要把build.gradle的第一句改为如下：
apply plugin:‘com.android.library’
这话表示我们使用的插件不再是构建Android应用的插件，而是构建Android Library的插件，这个插件定义并执行用于构建Android Library的一系列Task。 - 自动移除不再使用的资源
只需进行如下配置：
android {
…
}
buildTypes {
release {
…
shrinkResources true
…
}
}
} - 忽略Lint错误
在我们构建Android项目的过程中，有时候会由于Lint错误而终止。当这些错误来自第三方库中时，我们往往想要忽略这些错误从而继续构建进程。这时候，我们可以只需进行如下配置：
android {
…
lintOptions {
abortOnError false
}
} - 集成签名配置
在构建release版本的Android项目时，每次都手动导入签名文件，键入密码、keyalias等信息十分麻烦。通过将签名配置集成到构建脚本中，我们就不必每次构建发行版本时都手动设置了。具体配置如下：
signingConfigs {
myConfig { //将"xx"替换为自己的签名文件信息
storeFile file(“xx.jks”)
storePassword “xx”
keyAlias “xx”
keyPassword “xx”
}
}
android {
buildTypes {
release {
signingConfig signingConfigs.myConfig //在release块中加入这行
…
}
}
…
}
真实开发中，我们不应该把密码等信息直接写到build.gradle中，更好的做法是放在gradle.properties中设置：
RELEASE_STOREFILE=xxx.jks
RELEASE_STORE_PASSWORD = xxx
RELEASE_KEY_ALIAS=xxx
RELEASE_KEY_PASSWORD=xxx
然后在build.gradle中直接引用即可：
signingConfigs {
myConfig {
storeFilefile(RELEASE_STOREFILE)
storePassword RELEASE_STORE_PASSWORD
keyAlias RELEASE_KEY_ALIAS
keyPassword RELEASE_KEY_PASSWORD
}
}
四、延伸阅读
-
深入理解Android之Gradle:http://blog.csdn.net/Innost/article/details/48228651
邓凡平老师的一篇博文，从原理到使用非常深入细致地介绍了Gradle。而且重点介绍了怎样把Gradle当做一个编程框架来使用，介绍了Groovy语法基础、Gradle常用API，想要高度定制项目构建过程的小伙伴们一定不要错过这篇文章哦：）
-
Gradle构建最佳实践: http://www.figotan.org/2016/04/01/gradle-on-android-best-practise/
这篇文章主要从使用者的角度介绍了Gradle在使用过程中的最佳实践，同样非常精彩。
转自http://mp.weixin.qq.com/s?__biz=MzIzMjE1Njg4Mw==&mid=2650117738&idx=1&sn=cfaf39a23d9ebe655f687e4abb90312c#rd
============================================================================
AndroidStudio、gradle、buildToolsVersion概述
每次gradle 或者studio 有推荐更新后,项目重新sync后都会报错，提示更新相应的其他版本，比如AndroidStudio、gradle、buildToolsVersion版本；
概念：
Android SDK Build-Tools： 是编译 Android 应用所需 Android SDK 的一个组件，安装在 /build-tools/ 目录中。（而buildToolsVersion是android构建工具的版本，其中包括了打包工具aapt、dx等等。这个工具的目录位于…your_sdk_path/build-tools/XX.XX.XX，通过SDK Manager 更新；）您应始终让 Build Tools 组件保持最新状态。为此，您可以使用 Android SDK 管理器下载该组件的最新版本。如果您使用的是 Android Plugin for Gradle 3.0.0 或更高版本，那么您的项目会自动使用该插件指定的默认版本的 Build Tools。要使用其他版本的 Build Tools，请在模块的 build.gradle 中使用 buildToolsVersion 进行指定，如下所示：
android {
buildToolsVersion “29.0.0”
…
}
Gradle：是一个工具，同时它也是一个编程框架。使用这个工具可以完成app的编译打包等工作；
compileSdkVersion：编译版本，就是运行我们这个项目的需要的android SDK版本；
comileSdkVersion 和buildToolsVersion区别
新建一个项目，看build.gradle文件的配置，如下：
CompileSdkVersion:是告诉gradle 用哪个SDK版本来编译，和运行时要求的版本号没有关系；使用任何新添加的 API 就需要使用对应 Level 的 Android SDK。
buildToolsVersion: android构建工具的版本,在SDK Manager中安装选择版本，buildToolsVersion的版本需要>=CompileSdkVersion; 高版本的build-tools 可以构建低版本编译的android程序；
gradle版本和com.android.tools.build:gradle配置的版本关系
之前会奇怪，为什么一更新gradle 插件版本，会报错
如下图，红色部分配置的就是android gradle 插件的版本，gradle插件的版本号和gradle版本号是对应的，较新的插件版本需要要求较新版的gradle，所以提示你更新gradle；
和apk有关的是targetSdk， compileSdk只是开发编译时候用的sdk版本，在咱们写代码时候编译报黄或者包红都是跟compilesdk进行的比较，不过为了确保输出版本apk的api和编译时候相同，我们一般都会讲compileSdk和targetSdk设置一样。
=========================
1.Gradle
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置，抛弃了基于XML的各种繁琐配置。
2.Gradle插件
其实应该是AndroidStudio Gradle Plugin，也就是AndroidStudio用于开发Android项目的gradle插件。
所以说，Gradle插件和Gradle不是一个东西。
Gradle和Android Gradle Plugin的关系？
①Gradle插件会有版本号，每个版本号又对应有一个或一些 Gradle发行版本（一般是限定一个最低版本），也就是我们常见的类似gradle-4.1-all.zip这种东西；如果这两个版本对应不上了，那你的工程构建的时候就会报错。对应关系参看Gradle插件和Gradle版本对应关系。
②Android Studio 3.0 之后自动将插件版本升级到3.0.0，所以我们也需要对应地把Gradle升级到4.1才行。（后面就是因为这个填坑）
Android Gradle Plugin和 Android SDK BuildTool的关系？
③Android Gradle Plugin又会跟 Android SDK BuildTool有关联（版本有对应的关系），因为它还承接着AndroidStudio里的编译相关的功能，这也是我们要在项目的 local.properties 文件里写明Android SDK路径、在build.gradle 里注明 buildToolsVersion 的原因。Android Gradle Plugin 本质上就是 一个AS的插件，它一边调用 Gradle本身的代码和批处理工具来构建项目，一边调用Android SDK的编译、打包功能，从而让我们能够顺畅地在AS上进行开发。
https://my.oschina.net/huangyong/blog/361751
default package是缺省包的意思!也就是没有名字的包.其它的包如果要调用缺省包中的类,必须插入包名.但是缺省包却无名,所以不能够直接调用!
解决办法:
你右击default package,然后再建立一个新包(例如是:mypackage),把你先前建立的.java文件直接拖到新包(mypackage)中,缺省包会自动消失的!
//-- 一二三步骤可以用来建立一个Jar包，然后其他工程可以引用。
一、创建一个工程，创建一个接口。（编写的服务接口）
二、 将此工程的接口，制作成一个Jar包
既然叫JAR包，一定记着建工程的时候记得建包！不能是default package
1.写好以后右键,然后选择导出
2.选择以JAR文件导出
3.选择导出路径
三、编写服务接口实现类
4.导出成功,然后导入 Build Path->Add External Aarchives
5.右击工程->属性->选择Libraries,选择 Add External JARs
6.选择之前保存的JAR文件
7.并在Order and Export中，在你要导入的包的前面打钩
8.导入成功，利用import关键字导包即可使用
什么是jar包，做什么用的？
@是什么？严格说@符号并未在java 语言中作为操作符使用。而是在其他附属技术中使用
如果导入了jar包，在人为的把jar包路径变更，则会出错。
Java的框架还算比较多的，像spring框架算是很成熟的框架了
Java的配置文件.properties文件和xml文件。
一、properties文件
.properties配置文件是什么？
答：Properties文件是java中很常用的一种配置文件，文件后缀为“.properties”，属文本文件，文件的内容格式是“键=值”的格式，可以用“#”作为注释，java编程中用到的地方很多，运用配置文件，可以便于java深层次的解耦。
例如java应用通过JDBC连接数据库时，可以把数据库的配置写在配置文件 jdbc.properties：
driver=com.mysql.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/user
user=root
password=123456
二、Properties类
java中提供了配置文件的操作类Properties类（java.util.Properties）：
读取properties文件的通用方法：根据键得到value
/**
* 读取config.properties文件中的内容，放到Properties类中
* @param filePath 文件路径
* @param key 配置文件中的key
* @return 返回key对应的value
*/
public static String readConfigFiles(String filePath,String key) {
Properties prop = new Properties();
try{
InputStream inputStream = new FileInputStream(filePath);
prop.load(inputStream);
inputStream.close();
return prop.getProperty(key);
}catch (Exception e) {
e.printStackTrace();
System.out.println(“未找到相关配置文件”);
return null;
}
}
把配置文件以键值对的形式存放到Map中：
/**
* 把.properties文件中的键值对存放在Map中
* @param inputStream 配置文件（inputstream形式传入）
* @return 返回Map
*/
public Map<String, String> convertPropertityFileToMap(InputStream inputStream) {
try {
Properties prop = new Properties();
Map<String, String> map = new HashMap<String, String>();
if (inputStream != null) {
prop.load(inputStream);
Enumeration keyNames = prop.propertyNames();
while (keyNames.hasMoreElements()) {
String key = (String) keyNames.nextElement();
String value = prop.getProperty(key);
map.put(key, value);
}
return map;
} else {
return null;
}
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
在XML配置文件中使用properties文件的键值作为变量化参数
https://www.jb51.net/article/158921.htm
@Java注解又叫java标注（Annotation）
注解，就是元数据，即描述数据的数据。注解就是源代码的元数据。
@Override
public String toString() {
return “This is String Representation of current object.”;
}
上面的代码中，我重写了toString()方法并使用了@Override注解。但是，即使我不使用@Override注解标记代码，程序也能够正常执行。那么，该注解表示什么？这么写有什么好处吗？事实上，@Override告诉编译器这个方法是一个重写方法(描述方法的元数据)，如果父类中不存在该方法，编译器便会报错，提示该方法没有重写父类中的方法
这部分内容很重要，Annotations仅仅是元数据，和业务逻辑无关。
如果Annotations不包含业务逻辑，那么必须有人来实现这些逻辑。
元数据的用户来做这个事情。
Annotations仅仅提供它定义的属性(类/方法/包/域)的信息。
Annotations的用户(同样是一些代码)来读取这些信息并实现必要的逻辑。
当我们使用Java的标注Annotations(例如@Override)时，JVM就是一个用户，它在字节码层面工作。到这里，应用开发人员还不能控制也不能使用自定义的注解。因此，我们讲解一下如何编写自定义的Annotations。
我们来逐个讲述编写自定义Annotations的要点。上面的例子中，你看到一些注解应用在注解上。
开发类库 运行环境 部署环境
JavaEE JavaME
Java的垃圾自动收集（无c c++的垃圾自动收集功能， 运算符重载，多重继承等）
Java语言以面向对象为基础，不能再类外定义单独的数据和函数，所有的对象都要派生于同一个基类，并共享其所有功能。所以说，Java语言最外部的数据类型是对象，所有元素都要通过类和对象来访问。
分布式：
由于Java中内置了TCP/IP, HTTP, FTP等协议，因此在Java应用程序可以通过URL地址访问网络上的对象。
多线程、高效、可移植性。
JDK是Java的开发工具包，也是Java开发者必须安装的软件环境。
JDK包含了JRE与开发Java程序所需的工具，如编译器、调试器、反编译器、文档生成器
JRE是Java程序运行的必要环境，包含类库和JVM,如果只运行Java程序，就没必要安装JDK,只安装JRE即可。
Java是跨平台开发语言，根据平台的不同，要选择不同的JDK
安装Eclipse前需要先安装JDK
Java中最基本的类java.long.Object是Java中所有类的祖先。
java.lang包它包含着Java最基础和核心的类，在编译时会自动导入。Object类没有定义属性，一共有13个方法。
Java 中，用native关键字修饰的函数，表明该方法的具体实现在dll文件中，对于不同平台，其具体实现应该有所不同。
整个类的定义包括其所有成员都是在一对大括号中完成的，这标志着类定义块的开始和结束。
main() 方法，程序从这里开始执行，所有的Java应用程序都必须有一个main()方法。main()方法是所有Java应用程序的起始点。
void static main(String[] args){}
static 表示无需创建类的实例，可以直接调用main方法。
java程序的运行原理：Javac 编译器变异HelloWord.java文件，生成HelloWord.class文件。
Java 解释器解释 .class 文件。
Java程序的基本组成
Java数据类型
Java语言的运算符和表达式
Java语言的流程控制语句
组的定义和使用方法
方法和方法的重载
在Java中声明一个类的方式主要有两种，即class类名称和public class 类名称。
类是Java的基本存储单元，Java中所有的操作都是由类组成的。
一般习惯把main方法放在public class声明的类中，
public static void main(String[] args) 是程序的主方法，
即所有的程序都以此方法为起点并运行下去。
！！！ public class类名称的“类名称”必须与文件名相同。
在一个Java文件中可以有多个class类的定义，但只能有一个public class的定义
Java的标识符和关键字
常量和变量
作用域嵌套
Java数据类型：
（原始类型“简单类型：整数、字符、浮点、布尔”
和引用类型“复合类型”： 类、接口、数组 ）
基本数据类型默认值
类型转换： 自动转化和强制转换
类型提升：提升的规则就是将表达式的运算结果的类型提升为
所有操作数数据类型中范围最大的数据类型。
操作数、运算符、表达式
类声明的基本格式：
访问说明符 class 类名 extends 超类名 implements 接口名
如果访问说明符为public ， 则类名必须和文件名保持一致。
类体：
成员变量： 访问说明符 数据类型 变量名
方法： 访问说明符 数据类型 方法名
类的单继承性： 允许用extends关键字从一个类扩展出一个新类，新类继承超
类的成员变量和方法，并可覆盖该方法。
类中有两个特殊变量super和this
super: 类声明中用关键字extends扩展了其超类之后，super用在扩展类
中引用其超类中的成员变量。
this
构造函数
Package为关键字，包名为标识符。
1.Package语句要作为程序非注释语句的第一行语句
2.包内的类名唯一
3.引用包中的类时，使用import语句。import语句的基本格式为import 包名.类名
接口：
Java禁止多继承属性，但可以通过接口来帮助类扩展方法.接口中可以定义大量的常量和方法,
但其中的方法只是一种声明,没有具体的实现,使用接口的类自己实现这些方法.
接口与类不同在于:
1.没有变量的声明,但可以定义常量.
2.只有方法的声明,没有方法的实现.
接口声明的基本格式:
public interface 接口名 extends 接口列表
Java源程序中可以有多个定义的类，但必须有一个主类，这个主类是Java程序运行的入口点。
主类为包含main方法的类：
在Java源程序中，主类的名字同文件名一致。
标识符，关键字，转义符
运算符和表达式
2的a次方
8 >> a
运算符
流程控制： 顺序 循环 选择
数组声明实际是创建一个引用，通过代表引用的这个名字来引用数组。
由于数组是对象，所以可以使用关键字new来创建一个数组。
new int[10]; //int[10]是一个类型。
数组创建时，每个元素都按它所存放数据类型的缺省值被初始化。
类
类声明：
例如： public class HelloApplet extends Applet
访问说明符 public
类名 HelloApplet
扩展类为 JDK 自带的java.applet.Applet类
由于public的存在，所以文件名必须为HelloApplet.java 同类名保持一致。
类体：
类体包括成员变量和方法
创建类的实例：
类的单继承性：extends关键字从有一个类扩展出一个新类，新类继承超类的成员变量和方法，并可以覆盖方法。
特殊变量： super和this
构造函数：类中的构造函数用来初始化一个类，构造函数为public类型，
用来从类实例中访问类时初始化此类的是一样变量； new object(参数1， 参数2, …);
包：包在物理上 就是一个文件夹，逻辑上代表一个分类的概念。
包就是指一组类。例如一个包名 叫Company的包，可以包含一组类，如Employee/Manager/Department等。
import 包名.类名
根据官方文档
如何在android平台 使用javaScript调用 Java方法？
答：使用反射机制。
使用cocoscreator中的 jsb.reflection 调用Java中的静态方法。
//参数即， 类名 方法名 方法签名
即： jsb.reflection.callStaticMethod(className, methodName, methodSignature, …);
javaScript 下调用Java代码，使得Java执行原生平台的功能：
gg.log(“现在我开始通过JavaScript调用 java的接口了”, jsb);
jsb.reflection.callStaticMethod(“org/cocos2dx/javascript/Test”, “hello”, “(Ljava/lang/String;)V”, “this is msg from js”);;
// 调用第一个sum方法
var result = jsb.reflection.callStaticMethod(“org/cocos2dx/javascript/Test”, “sum”, “(II)I”, 3, 7);
cc.log(result); //10
java下的类和类内的静态函数:
在org/cocos2dx/javascript路径下建立 org/cocos2dx/javascript/Test文件
建立Test类，类内定义三个static 函数。
一.CocosCreator的扩展编辑器
以包（package）的形式进行加载，扩展编辑器的功能。
①创建并安装扩展包：就是在项目路径下创建一个packages文件夹包含两个文件main.js和package.josn
package.json （包描述文件）来告诉编译器这个包来扩展什么。
包描述文件指定的main : main.js 是包的入口程序。入口程序会在CocosCreator的主进程中被加载，加载成功后，会调用入口程序的load函数。
并且会将定义在 messages 字段中的函数注册成 IPC 消息。
②全局扩展包/项目扩展包：它们存放的路径不一样。
③每个新开启的窗口就是 一个独立的渲染进程，每个进程独享自己的javaScript内容，彼此之间无法直接访问，如需访问则要进行IPC通讯。
CocosCreator的扩展包也分为主进程和渲染进程两部分：主进程的脚本程序main.js，用户界面是另一个渲染进程。
④扩展包工作流程模式：
入口程序完成全部工作。（main.js的load生命周期里 / 或者使用菜单项触发）
入口程序和编辑面板配合：就是主进程和渲染进程之间的通讯，Editor.Ipc.sendToPanel，Editor.Ipc.sendToMain
⑤插件只提供组件和资源：指的是扩展包可以作为组件和相关资源（如预制体、贴图、资源）的载体。
⑥扩展主菜单： package.json --> main-menu字段添加 菜单路径 和菜单选项
菜单专用菜单分类：插件专用的菜单分类路径是 i18n:MAIN_MENU.package.title, 在中文语言环境会显示为一级子菜单 “插件”，
接下来的二级菜单路径名应该是插件的包名，最后的三级路径是具体菜单项功能。
如：i18n:MAIN_MENU.package.title/FooBar/Bar
⑦扩展编辑器面板: package.json --> panel字段 添加面板的入口程序
如：
{
“name”: “simple-package”,
“panel”: {
“main”: “panel/index.js”,
…
}
定义入口程序：通过Editor.Panel.extend({…})函数来注册面板。参数是一个对象来描述这个面板。
// panel/index.js
Editor.Panel.extend({
});
通过在主进程中（入口程序）调用Editor.Panel.open(‘simple-package’)
使用udl文件获取数据库的连接字符串
如果我们在没有编译器的情况下，想获得数据库的连接地址，我们可以使用udl格式的文本来获取，非常方面简单；远程服务器的操作也一样，只是将代表本地服务器的.改变成ip地址。
js的函数：
//-- 第二个参数替换第一个参数
replace( ，要被替换文本或生成替换文本的函数) 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
//-- 全局替换正则表达式中的+
gangFen[j] += parseInt(gangItem[j].replace(/＋/g, “”));
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。返回-1表示没有找到。
js如何将变量作为对象的key？
答： 将取出的key用【】括起来
for (const key in keyItem) {
qpData[keyItem.strName].push({ [key] : keyItem[key] })
}
合并对象
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
cocoscreator 注册消息注册一次就可以了， 注册多次则会多次调用回调
this.jmAni.on(dragonBones.EventObject.COMPLETE, this.aniCallBackFunc.bind(this));
html 标记语言是一套标记标签，浏览器使用标签来解释内容。
html 元素：是指从开始标签（开放标签）到结束标签（闭合标签）之间的所有代码。
元素的 标签： 开始标签 结束标签
元素的 内容： 在两个标签之间，某些元素具有空内容。
大多数HTML元素可拥有属性。称为标签属性（总是在开始标签中添加 比如： 属性名 = “属性值”）。注意始终为属性值加引号。’"" ’
属性的例子：
对其方式：
背景颜色：
查找属性可以找 HTML标准属性参考手册
大多数HTML元素可以嵌套。
文档主体：
标题：
段落：
链接：a this is a link
图片：
空的元素（没有内容的元素称为空元素），空的元素是在开始标签中关闭的。
在开始标签中加/，是关闭空元素的正确方法。
换行：
元素是一个空的HTML元素，由于关闭标签没有意义，因此它没有结束标签。
水平线：
HTML标签对大小写不敏感。
注释： ctrl+?
鼠标右键：查看源文件，或查看网页源代码
在html代码中，所有的连续空格都将显示成一个空格。
html样式元素：html中元素的style属性，改变所有html样式的通用方法。
有若干的标签和属性将被废弃
背景颜色：<p style:background-color:“red”> 也可以是h1、body
字体、颜色、字的大小：
A paragraph.
居中对齐：
上面的标题相对于页面居中对齐。
文本格式化元素：
黑体：文本格式化黑体
定义加重语气：
斜体
subscript写在下方的，下标脚注
superscript标在上方的，上标
预格式文本元素：
这是 预格式文本。 它保留了 空格 和换行。
删除字效果和插入字效果：
html 引用元素：
短的引用， 加引号
长引用
用于缩略词：WHO
var元素定义数学变量：
E = m c2
code元素定义编程代码示例
var per = {}
html的样式表 CSS
1.外部样式表：在中外部引入 <link rel:“stylesheet” type:“text/css” href:“路径/mystyle.css”>
2.内部样式表：中直接加入样式表 <style type:text/css> p{margin-left:20px}
标签：
盒子，写多个是会换行的。 它的显示是display:block样的，可以修改成display:line 或display:line-block 写多个可以列入一行的。 它的显示是display:line样的，可以修改成display:block ----------------------------------------------------------------------------------- 超链接元素： a好像是anchor 的缩写 在新的浏览器中打开链接： baidu(显示的内容是链接文本，改内容可以是文本，也可以是图片，或其它html元素) a的属性： a 链接标签的属性，target = "_blank" 表示定义链接的文档显示在（从新开启一个浏览器） 例如： Visit W3School!如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。
a 链接标签的属性，name
基本的注意事项 - 有用的提示
有用的提示
有用的提示
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了.(就是上述的 #tips)
链接到同一个页面的不同位置：
即点击标签内容：查看 Chapter 4。 会跳转到 name="C4"的位置上
Chapter 4
-------------------------- 创建电子邮件链接 ----------------------------------------------------------------------------------- 图像元素： 空标签，意思是说只包含属性，且没有闭合标签。 图像标签img和它的源属性Src和它的alt属性联用
//-- 在类中 _currentState 的值变化，notify会被执行。
cc.Class({
extends: BaseComponent,
properties: {
nodeLogin : cc.Node, //–登录相关节点
toggleYinsi : cc.Toggle, //-- 隐私选择
nodeUpdate : cc.Node, //-- 热更新节点
progressBar : cc.ProgressBar, //-- 热更新进度条
labelInfo : cc.Label, //-- 热更新信息
labelProgress : cc.Label, //-- 更新进度
nodeBtnWX : cc.Node,
nodeBtnYK : cc.Node,
nodeBtnZH : cc.Node,
manifestUrl : {
default : null,
type : cc.Asset
},
_currentState : {
default : StateEnum.waitting,
type : StateEnum,
notify() {
gg.log("状态改变------", this._currentState);
switch (this._currentState) {
测试分包加载
onBtn1(){
this.label.string = “加载BundleAsset”;
this.functionloadScenceBundle();
},
onBtn2(){
console.log(“game1场景中onBtn2按钮被点击begin–”);
let bundle = cc.assetManager.getBundle('game1');
if (bundle == null || typeof bundle == "undefined") {
this.label.string = "没有正确获取bundle，点击btn1加载AssetBundle";
} else {
//-- 成功加载bundle后记载bundle中的场景，并运行改场景
bundle.loadScene('g1', function (err, scene) {
cc.director.runScene(scene);
});
}
console.log("game1场景中onBtn2按钮被点击over--");
},
//-- 加载Asset Bundle
functionloadScenceBundle() {
//-- 加载 Asset Bundle
let result = cc.assetManager.loadBundle('game1', (err, bundle) => {
if (err) {
gg.log("加载Asset Bundle失败");
return false;
}
this.sceneBundle = bundle;
return true;
//-- 如下利用bundle上的 load 方法来加载 Asset Bundle 中的各类资源
// // 加载 Prefab
// bundle.load(`prefab`, cc.Prefab, function (err, prefab) {
// let newNode = cc.instantiate(prefab);
// cc.director.getScene().addChild(newNode);
// });
// // 加载 Texture
// bundle.load(`image`, cc.Texture2D, function (err, texture) {
// console.log(texture)
// });
批量加载资源
// //加载场景
// bundle.loadScene('game', function (err, scene) {
// //-- 运行场景
// //cc.director.runScene(scene);
// if (isError) {
// return;
// }
// gg.gggInit(qipaiType, isReconnect, isGold);
// self.addGameSceneJs(scene, isVideo, videoData);
// ggBase.init(function (baseError) {
// if (baseError) {
// return;
// }
// self.pretreatmentGameSceneJs(function () {
// // gg.globalNode.changeOrientationH(true);
// gg.globalNode.adaptive(true);
// self.changeScene("game", cb);
// gg.uiManager.clearView();
// if (gg.global.isDebug || gg.global.isStand) {
// gg.debug.openGame(gg.global.curQipaiId);
// }
// });
// }, isGold);
// });
});
return result;
},
// //-- 得到当前的sence bundle
// getCurrentSceneBundleAsset(sceneName, cb) {
// //加载场景
// this.sceneBundle.loadScene(sceneName, function (err, scene) {
// if (err) {
// cb(scene);
// return null;
// }
// cb(scene);
// return scene;
// });
// }
杂项记载：
Big-Endian： 大端模式
& 0xFF： 取得低8位，就是一个字节。 （它通常可以配合移位操作符使用）
16比特位： 2的16次方，就等于65536。
forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
html
浏览器渲染页面的原理及流程：
浏览器将域名通过网络通信从服务器拿到html文件后，渲染页面。
第一步：根据html文件构建DOM树 和 CCSOM树。
构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载Js文件，加载完毕没再继续构建DOM树以及CSSOM树。
第二步：构建渲染树。
第三步：页面的重绘与重排。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
1.1、构建DOM树
HTML文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子、兄弟关系等。
最常见的几种节点有：文档节点、元素节点、文本、属性、注释节点。 （：两个标签产生一个节点）
读取html --> 字节二级制转换成字符 --> 确定tokens(标签 html/head/body) --> 再将tokens转换成节点
1.2、构建CSSOM树
CSS文档中的所有 元素都是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系。
在构建DOM树的过程中，在HTML文档的head标签中遇到link标签，该标签引用了一个外部CSS样式表。
由于预见到需要利用该css资源来渲染页面，浏览器会立即发出对该css资源的请求，并进行CSSDOM数的构建。
CSSOM树的构建与DOM树构建流程一致。
.CSS文件，又名层叠 样式表。
当CSSOM树生成节点时，每一个节点首先会继承其父节点的所有样式， 层叠覆盖， 然后再以“向下级联”的规则，为该节点应用更具体的样式，
递归生成CSSOM树。
譬如，上右图中第二层的p节点，有父节点body，因此该p将继承body节点的样式：“font-size: 16px;”。然后再应用该p节点自身的样式：“font-weight: bold;”。所以最终该p节点的样式为：“font-size: 16px;font-weight: bold;”。
1.3、加载JS
在构建DOM树的过程中，当HTML解析器遇到一个script标记时，即遇到了js， 将立即阻塞DOM树的构建，将控制权移交给js引擎，等js引擎运行完毕，浏览器才会从终端的地方恢复DOM的构建。
其根本原因在于js会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM的创建。
一般将JS文件放到HTML底部进行加载，或是对JS文件执行async 或 defer加载
构建渲染树：由DOM树、CSSOM树合并而成，一边加载，一边解析，一边渲染。
3.重绘与重排
页面布局和几何属性发生改变时就需要重排。
①.添加或者删除可见的DOM元素。
②.元素位置改变–display float position overflowr 等
③.元素尺寸改变–边距、填充、边框、宽度和高度
④.内容改变，文本或者图片大小的改变而引起计算值宽度和高度的改变
等。
浏览器
web服务器：上网时看到的音频、视频、图文资源是以文件的形式存放在Web服务器上的。
web服务器上的资源并不是随意堆放的，网页制作人在发布网站前，把各类资源进行规范分类和命名----图片放入图片文件夹，样式放入样式文件夹，脚本归入脚本文件夹。
文件夹之间是通过超文本标记语言（HTML）等建立的。
html学习重点：
几十个标签和几十个标签的属性
元素（又叫节点）： 开始标签、结束标签。 标签内内容。 开始标签内的属性（又叫元素属性）。
一个完整的元素 = 开始标签 + 标签内内容 + 结束标签
元素属性： 属性后面跟着一个等号，等号后面跟着一个属性值。属性值用双引号或单引号包裹。
元素的嵌套
块级元素 p
内联元素 em strong
空元素:空元素没有结束标签和标签内容。依然能够正常显示。
![]()
超链接
有序列表:orderList 一排黑点
无序列表unOrderList 一排123456
除此之外还有定义列表和嵌套列表
CSS学习重点：
选择器（选择哪个标签）和样式（将标签变成什么样子）
p标签选择器，
{}内多有内容声明
color属性
red 属性值
p{
color:“red”;
height:200px;
width:100px;
} //这个整体是一个独立的规则集
CSS选择器不必被{ }包围。被{ }包围的是CSS的属性和属性值。
CSS盒子模型
块级元素可拥有一下三种属性
padding 内边距 上右下左
border 边框
margin 外边距
img{
display:block; //img 是内联元素，block赋予img块级元素行为
margin: 0 auto;
}
学着把css文件与html文件绑定
js增加网页的动态交互性
比如：验证输入表单的正确性；改变网页上的文字；在网页上设置实时时钟等。
JS基于浏览器运行，可以快速的响应用户动态行为。
JS脚本可与HTML混用，也可单独存为JS文件然后在HTML中引用。我们推荐后者。
JS的交互功能多且其语法复杂，它还关联到HTML的Dom结构。又由于各厂商（如微软，它出品的浏览器是edge;厂商如Alphabet,它出品的浏览器是google）的浏览器对JS有差异化的处理，使JS难以调试。
document.querySelector和alert是浏览器内置的函数，随时可用。
事件
事件为网页添加交互能力，它可以捕获浏览器操作，并运行代码作为响应。
document.querySelector(‘html’).onclick = function() {
alert(‘别来找我，我好烦！’);
}
将事件与元素绑定有许多方法。本例选用了元素，把一个匿名函数（即未命名的函数，此匿名函数包含单击鼠标时要运行的代码）赋值给了html的onclick属性。
学着把js文件与html文件绑定
浏览器访问网页的原理
使用浏览器访问网页其实有物理传输的，浏览器会先将网页内容缓存到本地，然后在渲染出来。
一个网页包括css js html 图片等等多个文件。
html 超文本标记语言。 添加语义的。
请求报文： 请求行+请求头+空行+请求体
响应报文： 响应行+响应头+响应体
响应体是最终在页面上渲染的html代码
在浏览器的地址栏输入的就是url
http://127.0.0.1:80/index.html
URL拆分
http:// URL协议的类型 : 浏览器和服务器之间是怎么沟通的
127.0.0.1 服务器IP地址
:80 服务器端口号
index.html 需要访问的资源名称
html
head
指定网站的标题 / 指定网站的小图片
添加网站的SEO相关的信息（指定网站的关键字、自定网站的描述信息）
外挂一些外部的cssjs文件
添加一些浏览器适配相关内容
title
body
写网站内容的地方
字符集问题
在head里添加这个标签，指定当前网页的字符集
字符集就是字符的集合。也就是很多字符堆积在一起。需要用的时候取出对应的字符拿出来用。
在网页中指定字符集的意义就是告诉浏览器，使用哪个盒子。
如果网站仅仅包含中文，推荐使用GB2312
如果除了中文还有英文 使用UTF-8
注意： 在HTML文件中指定的字符集必须和保存这个文件的字符集一致，否则还是会出现乱码。
所以仅仅指定字符集不一定能解决乱码问题，还需要保存文件的时候，文件的保存格式必须和指定的字符集一致，才能保证不会出现乱码问题
标签分类：
单标签：只有开始标签没有结束标签
双标签：都有
标签的并列（兄弟）关系。
标签的嵌套（父子）关系。
DTD 文档类型定义
DTD文档声明：由于HTML有很多版本的规范，每个版本的规范有一定的差异。告诉浏览器我们写的html用什么写的。
在html的第一行写 使用h5规范写的。
DTD文档声明必须写在第一行，而且不区分大小写。
DTD文档声明不是标签，W3C规定的
DTD文档声明
每三大项（xhtml html h5）分别有三小项，分别是严格strict / 普通ransitianal / 带框架的
html是修改语义的不是修改样式的。修改样式就用css
xhtml html h5 三者之间的区别
1.严格和不严格
2.功能多和功能少
html更宽容
xhtml更严格，比如大小写，必须严格闭合，标签中的属性的值必须加引号
h5是HTML的下一个版本，所以除了非常宽松容错性强以外，还增加了许多新特性。
DOS操作系统只能支持长度为3的后缀名（win95或win98）
windows后缀可以大于三维，htm是兼容以前的系统
基础标签
h1—h7
p
hr
img: 标签属性height width 指定了一个，系统会自动计算出另一个值，不必全部写入height和width。 标签属性title 告诉浏览器，鼠标悬停上面显示的提示。标签属性alt 表示图片不存在时 显示的提示文字。
img并不会独占一行。
a标签：指定所要跳转的目标界面。 点击跳转 1.a标签不仅可以让文字可以点击，也可以让图片可以点击。2.一个a标签必须有一个href属性，标记跳转的地址。 3.href可以也可以使用本地地址。
a标签有一个target属性，这个属性用来控制如何跳转。_self当前页面 _blank新建一个空白页面
a标签有一个title标签，这个标签和img的title的标签作用一致。
base标签：就是专门用来统一的指定当前网页中所有的超链接，需要如何打开，. 注意base标签必须写在head标签之间。
如果想要特化某一个a标签，则可在某个a标签内 使用target 属性特化就可以了。
假链接：点击之后不会跳转的链接。
href="#" 该假链接点击后可以回到顶部
href=“javascript:” 该假链接点击之后不能回到顶部
锚点a：
1.要想通过a标签跳转到一个指定的位置，那么必须给a标签提供一个独一无二的id
2.在html中给一个标签添加独一无二的id属性
注意：
1.通过我们的a标签跳转到指定的位置，是没有过度动画的，是直接一下子就跳转到了指定位置。
2.a标签除了可以跳转到当前页面的指定位置以外，
还可以在跳转到其它界面的时候 直接跳转到其它界面的指定位置。写法是直接在原有href=“xxx#id” (即在原有href后加id)
列表标签：
列表标签的作用：就是告诉浏览器，给一堆数据表示一个整体。
列表分类：
1.无序列表： unordered list 没有先后之分
2.有序列表： ordered list 有先后之分
3.定义列表： definition list
1.1
unorder list
list item
注意：可以在li标签内添加其他的标签，用来丰富整个ul。
ul 和 li 可以实行嵌套，即:
简化的写法：
ul>li
含义：生成一对ul标签，ul标签内包含一对li标签。
ol li 有序列表
dl dt和dd 定义列表
1.一对dt和dd相当于一组。
2.和ul/ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，都是一起出现。
3.dl标签建议只放dt/dd (可以放多个，建议只放一个)
4.和li标签一样，当需要丰富界面时，我们可以在dt/dd标签内添加别的标签
比如：在dt中添加img标签
在dd中添加h2和p标签
dt 是definition title用来定义列表中的标题
dd 是definition description的缩写，所以dd是用来定义标题对应的描述的
表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性是0。
现如今大多数表格标签被div+css给取代了
表格标签table 和 tr td也是成对的，要么一起出现，要么不出现。
表格标签属性：
1.宽度和高度的属性
可以给table标签和td标签使用
1.1表格的宽度和高度默认为内容的尺寸调整的，也可以通过给table标签设置width、height属性的方式来手动指定表格的宽度和高度。
1.2如果给td标签设置width/height属性，会修改当前单元格的宽度和高度，不会影响到整个表格的宽度和高度。
- 水平对齐和垂直对齐的属性
水平对齐可以给table标签和tr标签和td标签使用
垂直对齐只能给tr标签和td标签使用
2.1给table标签设置align属性，可以控制表格在是水平方向的对齐方式
2.2给tr标签设置align属性，可以控制当前行所有单元格内容的水平对齐方式
2.3给td标签设置align属性，可以控制当前单元格中内容的水平对齐方式
注意： 如果在td中设置了align属性，那么单元格中的内容最终会按照td中设置的来对齐
2.4给tr标签设置valign属性，控制当前行所有
2.4给td标签设置valign属性，控制当前单元格
注意：如果在td中设置了valign属性，那么单元格中的内容最终会按照td中设置的来对齐
3.外边距和内边距的属性
只能给table标签使用
外边距：单元格和单元格之间的距离 cellspacing。默认情况下单元格和单元格之间的外边距的距离是2px
内边距：就是单元格的边框和文字内容之间的间隙，我们称之为内边距。默认的情况下内边距是1.
注意以上讲解的内容仅仅作为了解，以后所有的样式都是通过css进行控制的。
细线表格的制作方式：
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = "1px
表格的caption标签。 就是表格的标题。
caption标签写在table标签的里面，标题就会自动居中。
caption标签写在table标签的后面
标题单元格标签：
在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签叫做th标签，只要将当前列的标题存储在这个标签中就会自动居中 + 加粗文字。
到此为止，其实表格中有两种单元格，一种是td，一种是th，td是用来存储数据的，th是用来存储列的标题的。
了解：
表格的数据
1.表格的标题
2.表头信息
3.主体信息
4.表格 的页尾信息
表格的完整的结构： 在企业中没人这么写
caption：表格的标题
thead：表格的表头
tbody：表格的主体
tfoot：指定的表格附加信息
合并单元格：
水平方向合并 含义： 把当前单元格当做两个单元格看待 单元格合并永远都是向后，或者向下合并。 垂直方向合并表单
1.表单就是用来专门收集用户信息的。
2.表单元素： 在HTML中 标签/标记/元素 都是指HTML中的标签。
例如： a标签/a标记/a元素
表单元素其实还是HTML中的一些标签。
3.表单格式：
<表单元素> 4.常见的表单元素 input标签， input标签有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观。 明文输入框： type = "text"; 暗文输入框： type = "password"; 单选框: type = "radio"; 默认情况下，单选框不会互斥，要想互斥那么必须给每一个单选框标签都设置一个name属性，然后name属性还必须设置相同的值。 要想让单选框默认选中一个，则可增加属性checked = “checked”; 即如果属性名和属性值相同，则可省略属性的值， 但一般我们不建议这么做。 多选框： type = "checkbox" 默认选中方式和radio一样input标签有一个value属性
给输入框设置默认值: value = “112233”;
input标签有一个type属性，这个属性有一个 button 类型的取值
按钮：type= “button”; 它的作用是可以配合js完成一些操作。
按钮: type= “image”; 这是一个图片按钮，可以配合js完成一些操作。
按钮: type= “reset” 清空表单中的数据。 注意：这个按钮要写在表单form之中。
重置按钮有默认的按钮标题，默认叫做重置。 可以利用value属性来修改默认标题。
按钮: type= “submit” 定义提交按钮，将表单中的数据提交到远程服务器。
注意点：
1.告诉表单需要提交到哪个服务器
可以通过form标签的action属性告诉表单，需要提交到哪个服务器。
2.告诉表单，哪些数据需要提交
加上name属性，通过name的key和text输入的value， 以键值对的形式确认提交的内容
(表单form中的一些数据要提交，得要有name属性)
注意：在单选框或多选框中，他们的那么name要相同，在提交数据前要配合value一起使用，
这样才能确定用户点击了哪个单选/多选框。
即：在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要提交到服务器的数据。
3.最后用submit按钮进行提交到服务器
input标签有一个type属性，这个属性有一个 hidden 类型的取值
隐藏域:type = “hidden”
作用：用于偷偷手机用户的一些数据，隐藏域不会出现在页面中。
label标签：
1.默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，如果想点击文字时让对应的输入框聚焦，那么就需要让文字和输入框进行绑定。
2.要想让输入框和文字绑定在一起，那么我们可以使用Label标签。
//label的for对应的是input的id
注意：我们通常是使用上面这种写法。一般不会使用
虽然上述可以实现绑定，但绑定的时候不能通过id绑定，进而不能变更绑定的对象，所以此方法有缺陷。
因为很多浏览器不支持，所以仅为了解的标签。
datalist标签：
待选项标签
表单中可有 select标签：
作用：用于定义下拉列表
格式：
表单中可以有textarea标签：
作用：定义一个多行输入框
格式：
//指定2列5行，虽然指定了列数和行数、但是还可以无限往下输入。
输入框的内容
注意点：
1.默认框可以无限的换行
2.textarea 是有默认宽度的
3. cols rows属性 可改变宽高
4. 可以拉伸框 textarea
css可以让它不拉伸
多媒体标签：
可以在w3school中查找h5新增的标签。
先前的html只能处理文字数据和图片数据，现在新增的h5可以处理多媒体数据。
video标签：
作用：用来播放视频。
video标签的属性：
src：video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否显示控制条
poster:用于告诉video标签视频在没有播放之前显示的占位图片
loop:一般用于做广告视频,循环播放
preload: 预加载视频，和autoplay属性相冲，如果设置了autoplay属性，那么preload属性就会失效。
muted:静音
width: 和img标准一样
height:
video标签的第二种格式:
由于视频数据非常非常的重要，所以五大浏览器厂商都不愿意支持别人的格式，所以导致了没有一种视频格式是所有浏览器支持的。
这时候W3C为了解决这个问题，所以推出了第二个video标签的格式。
注意点： 就是浏览器也要必须支持html5，否则也不能播放。
audio标签：
作用：播放音频
audio和video标签一样，同样也有两种格式，第二种格式同样是兼容不同的浏览器
第一种格式
第二种格式
详情和概要标签：
作用：尽可能少的空间显示尽可能多的数据。
marquee标签：
作用：跑马灯的效果
注意点：
marquee标签不是W3C推荐的标签，在W3C官方文档中也无法查询这个标签，但是各大浏览器对这个标签的支持非常好。
direction属性用来标识跑马灯滚动的方向。 left/right/down/up
scrollamount属性用来设置滚动的速度，值越大，滚动的越快
loop属性用来设置滚动的次数，默认是-1。表示无限的滚动。
滚动到边界就停止
滚动到边界结弹回
behavior属性用来设置滚动的内容的方式
在marquee中可以添加img标签，使得img以跑马灯的方式滚动。
HTML中被废弃的标签：
先前我们讲过，html标签只是来用来添加语义，不是用来修改样式的，而以前的html中有的标签是用来修改样式的。
所以现如今，会把一些html的样式标签废弃掉了。
以下标签不提倡用
以下标签没有语义，都是用来修改样式的
b加粗文本 bold
u给文本添加下划线 underlined
i文本倾斜 italic
s文本添加删除线 strikethrough
我们会用
来取代
注意点：
在以后企业开发中，万不得已一定不要使用这些废弃掉的标签。
如果一定要使用，一般情况下都是用来作为CSS的钩子来使用。
//下面四个标签是含有语义的
strong == b
ins == u
em == i
del == s
strong语义：定义重要性强调的文字
ins（inserted）语义：定义插入的文字
em（emphasized）语义：定义强调的文字
del（delete）语义：定义被删除的文字
字符实体：
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，
那么这些东西要想显示出来就必须通过字符实体。
  空格
< 小于号 (less than)
> 大于号 (great than)
© 版权
有很多可以查W3C
路径是 反斜杠 / ,因为大多操作系统都是 /
div
span
br： 写多少个br标签 就换多少行
CSS
文字属性：4个
文字样式属性： font-style
取值：normal/正常的 italic/倾斜的
快捷键：fs fsn
文字粗细的属性： font-weight
取值一：bold/粗的 bolder/更粗 lighter/细的
取值二：也可以是数字如100px
快捷键：fwb fwbr fwl
文字大小的属性： font-size：30px;
单位：px（像素 pixel）
注意点：拖过font-size设置字体大小一定要写px
快捷键：fz fz30
文字字体的属性： font-family：“宋体”
如果取值是中文，就要用引号给括起来。
缩写格式：
font:stype weight size family
注意：缩写后取值是有顺序的。写错了顺序某些值不能显示。
stype weight 顺序可以更改
size family 取值不能省略，否则会不能正常显示。顺序不可以更改要放在最后，否则会不能正常显示。
1.如果设置的字体不存在，那么系统就会使用默认的字体来显示?
答： 宋体
2.如果设置的字体不存在，我们又不想用默认的字体来显示怎么办？
答： 格式：font-family:“字体1”,“备选方案1”,…;
3.如果想给中文和英文分别单独设置字体，怎么办？
但凡是中文字体，里面都包含了英文。（包含中英文）
但凡是英文字体，里面都没有包含中文。（只包含英文）
即可采用备选方案的特性，将英文字体写在前面，将中文字体写在后。
注意：并不是所有的名称是英文都是英文字体。
文本属性：
文本装饰属性：
格式： text-decoration:underline
取值： underline/下划线 line-through/删除线 overline/上划线 none/什么都没有，最常见的用途就是去掉超链接下的下划线。
快捷键： td tdu tdl tdo tdn
文本水平对齐属性：
格式：text-align:right
取值：left right center
快捷键： ta tar tac
文本缩进的属性：
格式：text-indent:2em;
取值：2em，em是单位，em是一个文字的单位。
快捷键：ti ti2e
在CSS中如何通过color属性来修改文字颜色。
格式: color:值;
取值：
1.1英文单词
1.2rgb rgb每个数字是设置三原色的亮度的。 三个数字相同就是灰色， 数字越小偏黑，数字越大偏白
1.3rgba
1.4十六进制
1.5十六进制缩写
例如：#FFEE00 == #FE0 只有这种形式才能简写。
CSS 选择器：
①标签选择器：
②id选择器：
注意点：
1.每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id。
2.在同一个界面中的id的名称是不可以重复的。(身份证)
3.id的名称不能以数字开头，并且只能由字母/数字 下划线
4.在css关联时 使用#加上id的值
在企业开发中一般情况下，如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给js使用的。
③类选择器：
根据指定的类名找到对应的标签，然后设置属性。
格式:
.类名{
属性:值;
}
1.每个HTML标签都有一个属性叫做class，也就是说每个标签都可以设置class。
2.在同一个界面中的class的名称是可以重复的。
3.class的命名规范和id选择器一样。
4.class就是专门用来给某个特定的标签设置样式的。
5.在HTML中每个标签可以同时绑定多个类名。
例如：正确的写法：
错误的写法：
注重冗余代码的抽取： 将同类代码都抽取到一个类中，让需要的标签去使用class="类"去引入。
④后代选择器：
作用：找到指定标签的所有特定的后代标签，设置属性。
格式：
标签1 标签2{
属性：值；
}
先找标签1 在找标签2，在设置标签2的属性
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到指定标签中的都是后代。
3.标签1标签3可以是标签 也可以是类名选择器和id选择器
//-- 这也是后代选择器，可以混用。
#box1 .box2 p{
color: red;
}
⑤子元素选择器：
作用：找到指定标签中所有特定的直接子元素，然后设置属性。
格式：
标签名称1>标签名称2{
属性：值;
}
注意点：
1.子元素选择器只会查找儿子，不会查找其它被嵌套的标签。
2.子元素选择器之间需要用>符号连接，并且不能有空格。
3.子元素选择器不仅仅可以使用标签名称，还可以使用其它选择器。
如果想选中指定标签中的所有特定的标签，就用后代。
如只想选中标签中所有特定儿子标签，就使用子元素选择器。
⑥交集选择器
作用：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：
选择器1选择器2{
属性:值;
}
注意点:
1.选择器和选择器之间没有任何连接符号
//–例如：找p标签选择器和par1类选择器相交的标签。相交的部分标签设置属性。
p.par1{
}
2.选择器同样 也可以使用标签名称/id名称/class名称。
3.交集选择器仅仅作为了解，企业开发中用的并不多。
⑦并集选择器
作用：给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值；
}
注意点：
1.并集选择器必须使用，来连接。
2.选择器同样 也可以使用标签名称/id名称/class名称。
⑧兄弟选择器
1.相邻兄弟选择器 CSS2
作用： 给指定选择器后面 紧跟着的那个选择器选中的标签 设置属性。
格式：
选择器1+选择器2{
属性:值；
}
注意点： 必须通过+连接 选择的是紧跟着的标签（隔一个都不行）
2.通用兄弟选择器 CSS3
作用：给指定选择器后面 所有选择器选中的 所有标签 设置属性。
格式：
选择器1~选择器2{
属性：值；
}
注意点： 必须通过~连接 选择的是所有选择器选中的 所有标签（隔几个都行）
⑨CSS中新增的选择器 最具代表的就是序选择器
1.同级别（级别：父级别子级别孙子级别）的第几个。
2.同级别的同类型的第几个。
//选中同级别的第一个标签。
//-- 同级别的第一个是p，则设置颜色
p:first-child{
color:red;
}
//取出同级别的，同类型的第一个。
p:first-of-type{
color= blue;
}
//选中同级别的最后一个
p:last-child{
color:red;
}
//选中同级别的同类型的最后一个
p:last-of-type{
color:red;
}
//-- 选中同级别中的第3个标签
p:nth-child(3){
color:red;
}
//-- 选中同级别中同类型的第3个标签
p:nth-of-type(3){
color:red;
}
//-- 选中同级别中倒数第二个标签为p的
p:nth-last-child(2){
color:red;
}
//-- 选中同级别的同类型的倒数第二个标签为p的
p:nth-last-of-type(2){
color:red;
}
p:only-child选中父元素中唯一的元素 （那就是p）
p:only-of-type{选中父元素中同类型的唯一的元素
color:red;
}
css产生BFC的四个属性
postion
float
display
overflow
边框：border 包围宽度和高度周围的线条
内边距： padding 边框和内容之间的距离
padding-top
padding-right
padding-bottom
padding-left
注意：内边距那一部分是有背景颜色的。
padding会使得宽度和高度变化。
外边距：margin 标签与标签之间的距离。
margin-top
margin-right
margin-bottom
margin-left
注意：外边距那一部分是没有背景颜色的。
div.box${内容}*2
外边距的合并现象：
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象。
在水平方向上 会叠加。
什么是CSS盒子模型：
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 边框和内容之间的距离
边框 ==
外边距
内容的宽高 width
元素的宽高
元素空间的宽高 +margin
CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变。
margin的本质是用来控制兄弟关系之间的间隙的。
在企业开发中， 我们经常使用padding来进行居中，其次使用margin。
使用margin设置里面的盒子顶部的外边距，则外边的一个盒子也被顶下来，如果不想让外边的盒子顶起来，则可添加一个边框属性。
注意点：margin: 0 auto 只对水平方向有效，对垂直方向无效。
- text-align:center 和 margin: 0 auto 的区别。
text-align:center 使得某个盒子中的 内容，比如文字，图片水平居中。
margin: 0 auto 让盒子自己水平居中
firework 工具，取得颜色和大小。
*{
margin:0;
padding:0;
}
标标准的清空所有的。
通配符选择器会找到 当前界面的所有标签，所以性能不好。
所以企业开发中可以从网址中拷贝 清空margin和padding的代码（也叫作清空默认边距）
行高和字号：
注意点：行高和盒子高不是一个概念。 行高是某一行文字的高度
盒子高是标签的高度。
line-height: 80px; 行高是80.
height: 80px; 盒子高是80.
规律： 文字在行高中是默认居中的。
要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可。
div{
width:100px;
height:80px;
border:1px solid #000;
line-height:20px; //假如文字是2行
padding-top:20px;
padding-bottom:20px;
}
这样总共就是20px*2 + 20px +20px 等于了盒子高。
还原字体和字号；
注意点： 如果一个盒子中存储的是文字，那么一般情况下，我们会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差。
顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。
浏览器是如何对网页中的元素进行排版的。
1.标准（文档流/普通流）流
浏览器默认的排版方式就是 标准流的排版方式。
在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素 （这三个应该是标准流中的概念）
两种排版方式： 垂直排版 行内排版
display:inline-block
2.浮动流
浮动流是一种半脱离标准流的排版方式
浮动流只有一种排版方式，就是水平排版，它只能设置某个元素在它的父元素中左对齐或者右对齐。
在浮动流中是不可以使用 margin:0 auto;
注意点：浮动流没有居中对齐。
特点：在浮动流内是不区分 块级元素 行内块级元素 行内元素的。
在浮动流中，无论是块级元素/行内元素/行内块级元素 都可以设置宽高。（注意：行内元素在标准流内是不能设置宽高的）
综上所述：浮动流中的元素 和 标准流中的行内块级元素很像。
浮动元素脱标：脱离标准流。
当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素脱标。
脱标后的影响： 如果前面的一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会遮盖住后面的一个元素。
浮动元素排序规则：
1.1相同方向上的浮动元素， 先浮动的元素会显示在前面，后浮动的元素会紧跟着显示在后面。
浮动的元素不会盖住浮动的元素的， 浮动的元素只会盖住标准流中的元素。
1.2不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
1.3浮动元素浮动之后的位置，由浮动元素 浮动之前 在标准流中 的位置来确定。
注意理解：“浮动之前在 标准流中的位置”
浮动元素的贴靠现象：
当父元素足够大，则浮动的元素并排放置。让父元素大小不够，则后面浮动的元素位置不够放，则该元素找前一个贴靠的元素摆放，如果位置够了，就放在前一个贴靠元素的后面，如果位置不够，则继续往前找，直到找到最后一个元素为止。
浮动元素字围:浮动元素周围可以用字包围起来。
如何布局一个复杂的界面
①.垂直方向使用标准流， 水平方向使用浮动流。
②.从上到下
从左到右
从外向内
为什么要清除浮动？？？
答：清除设置浮动带来的 附加效果— 即：
清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。（在浮动流中浮动的元素是不可以撑起父元素的高度。）
1.在标准流中内容的高度 才可以撑起父元素的高度。
2.在浮动流中浮动的元素是不可以撑起父元素的高度。
清除浮动：①清除父子元素之间，子元素设置的浮动，所带来的影响父元素的效果。
②清除两个兄弟间，每个兄弟的子元素内容 设置的浮动元素 给其父，也就是两个兄弟元素带来的影响。
----------理解----
div{
border: red solid 2px; //设置边框
//height: 5px; 设置了高度就可清除 p 设置浮动带来的效果
前提是div未设置高度，则：
（p 和div 是标准流则可用p的高度撑开div。
（p 是浮动流，div是标准流，则子元素p撑不开div，给div设置成p的高度，可以呈现/还原出p为标准流在div中的效果，学名为清除浮动）
}
p{
float:left; //-- 如果浮动，则p撑不起div， 否则可以撑起。（如果设置成浮动了，想要清除设置浮动带来的 撑不起div的效果，则需要清除浮动）
}
内容用来撑起div，或者利用css设p的高度
clear:both; 取值后，设置margin无效。
margin失效的原因：如果是父子元素，如果给子元素设置margin，如果父元素没有设置border，则父元素会被顶下来。
清除浮动的方式：外墙法 “注意： 两个盒子中间， 说明两个盒子是并列关系，而不是父子关系”
两个盒子中间加一个额外的块级元素，这样就保证第二个盒子的浮动元素不会去找第一个盒子的浮动元素。
给这个额外的块级元素设置clear:both属性
注意：不要给第一个盒子加margin-bottom 也不要给第二个盒子加 margin-top 而是用外墙法插入的块级元素进行设置。
第一个盒子加margin-bottom有效 ； 第二个盒子加 margin-top有效； 反之不可
清除浮动的方式：内墙法
将墙，也就是指块级元素，添加到第一个盒子的内部，并且放置在内部最后一个元素的后面。
给这个额外的块级元素设置clear:both属性
注意：内墙法可以给第一个盒子加margin-bottom 内墙法也可以给第二个盒子加 margin-top 也可以用外墙法插入的块级元素进行设置
区别：内墙法可以撑起第一个盒子的高度，外墙法不能撑起第一个盒子的高度。
代码中一般 推崇结构和样式分离； 一般墙是只起到修改样式的作用，除此之外他就是没有任何意义的空标签，所以一般不采用外墙和内墙法。
******CSS3新增的
伪元素选择器： 可以用它 在某个标签的 内容前面 添加一个子元素， 或者在某个标签的 内容后面 添加一个子元素。
例如：在div标签的内容前面添加元素 AINI
div::before{
content:“AINI”
width: 50px;
height:50px;
background-color:pink;
display:block; //-- 普通流，只有在块级，或行内块级元素元素才可以设置宽高。
//-- 浮动流，都可以设置宽高
visibility: hidden; //-- 隐藏添加的子元素
}
格式：
标签名称::before{
属性名称:值;
}
标签名称::after{
属性名称:值;
}
清除浮动的方式：使用伪元素选择器 添加墙（块级元素），利用内墙法（添加到第一个元素内容的后面）清除浮动。
.box1{
//-- 兼容IE6
*zoom:1;
}
overflow:hidden;作用
1.1 可以将超出标签范围的内容裁减掉。
1.2 清除浮动，显示出的效果和内墙法类似。
1.3 可以通过overflow:hidden; 让里面的盒子设置margin-top之后，外面的盒子在不设置border的情况下不被顶下来。
这个也需要兼容IE6
.box1{
//-- 兼容IE6
*zoom:1;
}
使用伪元素选择器和 属性overflow:hidden 来清除浮动是最推荐的方式。
3.定位流
①.相对定位：相对自己 以前在 标准流中的位置来移动。（不脱标，老家留坑，形影分离）
position:relative;
相对定位不脱离 标准流的（是标准流，不是定位流），会继续在标准流中占用一份空间。
在相对定位中，同一个方向上的定位属性只能使用一个。
由于相对定位是不脱离标准流的，所以在相对定位中是区分 块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的，所以相对定位的元素会占用标准流中位置，所以当给相对定位的元素设置margin/padding 等属性的时候会影响到标准流的布局。（添加margin属性是给相对定位之前的位置 进行变换，变换后在进行相对定位）
相对定位用于： 元素进行微调或配合绝对定位来使用。
②.绝对定位： 绝对别人
position：absolute;
绝对定位的元素是脱离标准流的（是定位流）。（即和以前的浮动一样，脱离了标准流，就不区分块级、行内块级、行内元素，所有的元素都可以设置宽高）
绝对定位可以相对body来定位。
规律：
默认情况下，所有的绝对定位的元素，无论有没有祖先元素，都会以为body为参考点。
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素 就会以定位流 的那个祖先元素作为参考点。
上述指的祖先元素中的定位流 是指 绝对定位/相对定位/固定定位
定位流中只有静态定位不行。
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流， 则找最近的定位元素作为参考点。
注意点：如果一个绝对定位的 元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点。而不是整个网页的宽度和高度。
一个绝对定位的元素会忽略祖先元素的padding，它不同于相对定位。
在企业开发中，不单独使用相对定位和绝对定位。
相对定位弊端： 相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面。
绝对定位弊端： 绝对定位是以网页body首屏的宽度和高度作为参考点，所以会随着浏览器的宽度高度的变化而变化。
所以在企业开发中使用“子绝父相” 的方法。
子绝父相：子元素绝对定位，父元素相对定位，组合使用。
如何让绝对定位的元素水平居中？
只需设置绝对定位元素的left:50%
然后在设置绝对定位元素的margin-left: -元素宽度的一半px;
③.固定定位
复习：
background-image:url();
background-repeat:no-repeat;
background-attachment:fix; //背景定位：使得这个背景图在页面上 不随着页面的滚动而滚动。
img：html标签，页面元素，内容。可以使用js进行元素操作，img是网页结构（内容）的一部分，会在加载结构的过程中加载。
backgroung-image:CSS修饰性。
即：注意CSS和标签的区别
固定定位的元素也是脱离标准流的（它是定位流），不会占用标准流中的空间。
固定定位和绝对定位一样不区分行内/块级/行内块级
background-attachment:fix;和position:fix; 即背景定位和固定定位的区别？
答：背景定位可以让背景图片不随着滚动条的滚动而滚动，
而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
定位流中的z-index属性：
默认情况下所有的元素都有一个默认的z-index属性，取值是0. z-index属性的作用是专门用于控制定位流元素的覆盖关系的。
默认情况下定位流的元素会盖住标准流的元素。
默认情况下定位流的元素，后面编写的会盖住前面编写的。所以就需要用到z-index了。
④.静态定位： 就是不加任何定位的默认情况。
过渡模块：
taobao
jd
a标签存在某种状态， 未点击过，点击过，点住状态。
衍生出：a标签的伪类选择器，是专门修改a标签不同状态的样式的。
a:link 修改从未被选择状态的颜色
a:visited 修改被访问过状态的样式
a:active 修改鼠标长按状态的样式
a:hover 修改鼠标悬停在上面的状态
a:hover{
color = “red”;
}
//-- 关于z-index属性的使用：
// transition-property 告诉哪个属性执行过度效果
// transition-duration 属性执行的时间
.zindex1{
width: 60px;
height: 60px;
background-color: red;
position: relative;
bottom: -10px;
left: 50px;
z-index: 1; //-- 过渡属性三要素
//–伪类选择器 要有属性
transition-property: width, color; //–哪个属性
transition-duration: 5s, 5s; //–属性效果持续时间
}
.zindex2{
width: 60px;
height: 60px;
background-color: blue;
/* z-index: 100; */
position: relative;
}
.zindex1:hover{
width: 200px;
color:red;
}
例子2：1.使用伪类选择器选择某元素，给选择的元素添加属性的改变 2.给为类选择器选中的标签添加过渡。
.box2{
width: 100px;
height: 100px;
background-color: #666666;
animation-name: rotate;
margin: 0 auto;
margin-top: 100px;
//-- transition 表示过渡（给改标签），属性的值代表 所要过渡的属性和时间。 transition 的翻译（名词：transition 过渡，转换）
/* transition: color 2s; 错误的写法，因为没有color */
/* transition: all 2s; */
/* transition-property:background-color; */ //-- 过渡的属性
/* transition-duration: 5s; */ //-- 过渡的间隔
}
//-- 使用伪类选择器给被选择的标签 添加需要被改变的属性，和属性要改变的值。
.box2:hover{
background-color:red;
transform: rotate(50deg); transform的翻译： vt vi 变换，改变。
transform:translate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）； translate的翻译： vt vi 翻译；转化；解释；转变为；调动
}
例子3：不用手动，用自动（动画）。不用伪类选择器选择元素，使用动画。
.box2{
width: 100px;
height: 100px;
background-color: #666666;
animation: sport 3s; // 播放哪个动画，播放时间
margin: 0 auto;
margin-top: 100px;
/* transition: color 2s; 错误的写法，因为没有color */
/* transition: all 2s; */
/* transition-property:background-color;
transition-duration: 5s; */
}
//-- 设置的动画
@keyframes sport{
0%{
transform:rotate(25deg);
}
25%{
transform:rotate(65deg);
}
50%{
transform:rotate(100deg);
}
100%{
transform:rotate(175deg);
}
}
/* .box2:hover{
background-color:red;
transform: rotate(50deg);
} */
过渡模块的其它属性：
ul li{
transition-property:margin-left; //设置过渡的效果
transition-duration: 5s; //设置过塑的时间
}
//-- 设置伪类选择器中的属性。
// error: ul li:hover{ 区分这两种写法，这种是hover li 使得li变化
ul:hover li{ ，这种是hover ul 使得li变化
margin-left:700px;
}
//-- 使用顺序选择器，告诉系统过渡动画的速度。
ul li:nth-child(1){
//–这个属性有很多取值
transition-timing-function:liner;
}
过渡连写格式：
transition: 过渡属性 过渡时长 运动速度 延迟时间；
过渡连写 如果想要添加多个过渡效果，则可以用逗号分隔；
连写的时候，可以省略后面的两个参数，运动速度 延迟时间。
比如： transition: width 5s, background-color 5s, height 5s;
也可以:transition: all 5s;
动画模块：
.box1{
width: 100px;
height: 50px;
background-color: #255;
animation: lnj 2s ease 1s 6;
/* animation: name duration timing-function delay iteration-count direction fill-mode; /
// 动画名 动画执行时间 速度曲线 延迟执行时间 执行的次数 文本输入方向 指定动画等待状态和结束状态的样式
position: absolute;
}
@keyframes lnj{
/ from{
margin-left: 0;
}
to{
margin-left: 200px;
} */
0%{
left: 0;
top: 0;
}
25%{
left: 200px;
top: 0;
}
50%{
left: 200px;
top: 200px;
}
75%{
left: 0;
top: 200px;
}
100%{
left: 0;
top: 0;
}
}
注意： 要加position，然后在声明的动画里使用left top才会有效。
上述过渡模块有连写、简写的方式，动画模块也有。
动画模块的三要素： 1.单独创建动画， 2.在标签内添加 动画名称， 3.在标签内添加动画间隔时间 animation:
过渡模块的三要素： 1.单独创建选择器，指定改变所选择标签内的属性 2.在标签内添加过渡属性的名称， 3.在标签内添加过渡的时间 transition:
3D转换模块：
perspective：500px;近大远小的效果
和透视perspective一样，想看到某个元素的3d效果，只需要给他的父元素添加一个transform-style的属性然后设置为3d
transform-style:preserve-3d/flat 3d/2d
实战训练指导的内容：
给元素设置相对定位，相对定位是标准流。在排列上有标准流的特性。初始位置就是标准流的初始位置。
给元素设置固定定位和绝对定位，变成定位流，脱离了标准流。但是在不设置 top/right/bottom/left的时候，它的初始位置就是他在脱离标准流之前，在标准流中的初始位置。
绝对定位因为脱离了标准流， 在非标准流中使用 margin:0 auto;进行居中无效。要使用 left:50%; margin-left:-width/2;来进行居中。
- text-align:center 和 margin: 0 auto 的区别?
text-align:center 使得某个盒子中的 内容，比如文字，图片水平居中。
margin: 0 auto 让盒子自己水平居中
当鼠标放到某个元素上时鼠标会显示一个小手指，则这个元素应该会包含一个a标签。显示手指的部分是a标签的内容的部分。可将a标签变成块级，设置a的宽高和其父元素一样，这样就有了鼠标移动到父元素就会显示手指的效果。
一般如果想要有 鼠标移动到一个图片上，会显示一个小手的效果，则可以将img标签写在a标签的内容里。
当给盒子添加padding的时候，盒子的大小会变化，为了使得盒子的大小不再变化，则可以添加box-sizing属性：取值为border-box;
当前例子中ul li标签内部填充了a标签 img标签 p标签，在p标签内部添加了span标签。
color\background-color有什么区别?
color是设置字体颜色， background-color是设置背景颜色。
当图片的宽度大于父元素的宽度是无法利用以前的方法（margin: 0 auto;和text-align:center;）居中的。
只有图片的宽度小于父元素的宽度，使用margin: 0 auto;和text-align:center; 才可以居中显示。
方式一：
当图片的宽度大于父元素的宽度，可以利用定位流 设置left:50%.
例如： position:absolute; left:50%; margin-left:-width/2; //-- 这个宽度是img的宽度。
弊端：需要些三行代码； 需要知道图片的宽度。
方式二：
margin: 0 -100%; 注意点：它的父元素必须设置 text-algin:center
left 和 margin-left的区别？
答：left是定位属性： 设置left生效的前提是必须设置父容器的position:absoulte或relative，如果不设置则会以最近一个定位的父对象作为参考你。
通常情况，元素的position属性的值默认为static，就是没有定位，这时给这个元素设置left，right，bottom，top这些偏移无效，并且设置z-index属性也无效。
margin-left是边距属性：不必设置position属性也可以用。设置元素的左边外边距。
标准流和非标准流的区别？
绝对定位脱标，相对定位是标准流。
标准流：排在前面的元素（标签）内容前面显示，排在后面的元素（标签）内容在后面显示。（当前元素在页面上占位置）
非标准流（脱标），则不会按照标准流的方式显示，它会让出“脱标前 在标准流中” 的位置。（当前元素在页面上不占位置）
脱标后，如果是浮动元素的排列方式是，浮动的排序规则：1.相同方向的浮动元素，先浮动的显示在前面。 2.不同方向的浮动元素，左浮找左浮，右浮找右浮。 3.浮动元素浮动之后的位置，由浮动元素“浮动之前在标准流中的位置”来决定。 4.贴靠现象：如果浮动的最后一个元素超过了父元素的宽度，会自动找上一个元素贴过去，如果宽度还是不够，继续找上一个～如果父元素宽度还是不够的话，那就只能凑合呆着了。
脱标后，如果是绝对定位的排列方式是，1.由定位元素“定位之前在标准流中的位置”是初始位置。
脱标后，如果是固定定位
行内元素在什么情况下可以设置宽高？
答：行内元素在本质上是不能设置宽高的
可以设置的情况如下：
1.在当前元素脱离文档流之后就可以设置宽高。（当前元素在页面上不占位置）。比如设置 postion属性为: absolute或fixed，变成定位流，脱标。（relative相对定位不行，相对定位不脱标）
2.在当前元素脱离文档流之后就可以设置宽高。（当前元素在页面上不占位置）。比如设置float属性为：left或right，变成浮动流，脱标。
3.设置当前元素 变为块级和行内块级。display：block inline-block。
相对定位和绝对定位的区别？
设置绝对定位的元素，是“相对于”最近的已经定位的祖先元素，如果不存在祖先元素，那么会相对进行定位。
margin和padding的区别：
答：尽量使用margin布局，因为padding可能会改变盒子的大小（相当于盒子有弹性，padding增加了内边距的大小）
使用margin，盒子大小没有变化（增加了外边距的大小）。
height和width：就是指的我们设置的宽度和高度的大小，也就是指height和width，也就是元素内容的宽度和高度。
盒子的大小：即盒子的大小的宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框。
元素空间的宽度：左外边距 + 盒子的大小 + 右外边距
得出结论：padding影响盒子的大小， margin不影响盒子的大小，但margin影响空间的大小。
25万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
