边框、阴影
圆角边框
属性名：border-radius
常见取值：数字+px、百分比（左上开始，顺时针）
正圆
盒子必须是正方形
border-radius：50%
胶囊按钮
盒子为长方形
border-radius：盒子高度的一半
overflow
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏
元素本身隐藏
visibility：hidden(占位隐藏)
display:none（不占位隐藏）
二维码显示与隐藏
给二维码加上display:none;
再给按钮加上鼠标移入的状态
盒子 a:hover img{
display:block;
}
元素的整体透明度
opacity会让元素整体透明，包括里面的内容（文字、子元素等）
精灵图
介绍：
场景：项目中将多张小图片，合成一张大图片，这张图片成为精灵图
优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
使用：
创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置
通过PxCook测量小图片左上角坐标，分别去负值设置给盒子的background-position：x y
精灵图的标签都用行内标签（span、b、i...)
需要转化为行内元素
背景图片样式
background-size：宽度 高度；取值：
数字+px: 简单方便，常用
百分比： 相对于当前盒子自身的宽高百分比
contain： 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover： 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
background：color image repeat position/size；
盒子阴影
属性名：box-shadow
取值：
参数 | 作用 |
h-shadow | 必须，水平偏移量。允许负值 |
v-shadow | 必须，垂直偏移量。允许负值 |
blur | 可选，模糊度 |
spread | 可选，阴影扩大 |
color | 可选，阴影颜色 |
inset | 可选，将阴影改为内部阴影 |
过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
参数 | 取值 |
过渡的属性 | all：所有能过渡的属性都过渡 |
过渡的时长 | 数字+是（秒），具体的属性名如：width：只有width能过渡 |
注意点：
过渡需要：只有默认状态和hover状态不同
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同
给默认状态设置，鼠标移入移除都有效果
给hover状态设置，鼠标移入有过渡效果，鼠标移出没有过渡效果
骨架结构标签
文档类型声明，告诉浏览器该网页的HTML版本
网页语言
<html lang="en">标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文/en英文
字符编码
<meta charset="UTF-8">标识网页使用的字符编码</meta>
UTF-8：万国码
GB2312：6000+汉字
GBK：：20000+汉字
SEO三大标签
SEO（Search Engine Optimization ）:搜索引擎优化
JavaScript简介
语言的发展：
-纸带机：机器语言
-汇编语言：符号语言
-现代语言：高级语言
起源：
JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。
前端验证：检查用户输入的内容是否复合一定的规则（用户名的长度，密码的长度，邮箱的格式）
JScript微软推出的，与JavaScript功能一样
ECMAScript是JavaScript标准，所以一般情况下认为是一个意思。
实际上JavaScript的含义要更大一些。
一个完整的JavaScript实现应该由一下三个部分组成：
ECMAScript
DOM（通过js操作网页）
BOM（通过js操作浏览器）
JS的特点
-解释型语言
-类似于C和Java的语法结构
-动态语言
-基于原型的面向对象
HBuilder 返回上一步Ctrl+Z
撤销返回Ctrl+Y
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- JS代码需要编写到script标签中 -->
<script type="text/javascript">
// 控制浏览器弹出一个警告框
// alert("这是一个警告框，谷文静注意");
// 让计算机在页面中（body）输出一个内容
// document.write("看我大显神通");
// console.log()向控制台输出一个内容
// console.log("你猜我在哪出来呢？");
alert("这是一个警告框，谷文静注意");
document.write("看我大显神通");
console.log("你猜我在哪出来呢？");
// JS编译顺序自上而下
</script>
</head>
<body>
</body>
</html>
JS中严格区分大小写
JS中每一条语句都以分号结尾（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，系统会加错分号）
JS会忽略多个空格和换行
字面量和变量
字面量：都是一些不可改变的值（字面量都是可以直接使用的）
变量：变量可以用来保存字面量
声明变量：在JS中使用var关键字来声明一个变量
标识符
-在JS中所以铺的可以由我们自主命名的都可以称为是标识符
-例如：函数名、变量名、属性名都属于标识符
-命名规则与C/java相同
JS底层保存标识符时，实际上采用的Unicode编码
所以理论上来讲，所有的utf-8中含有的内容都可以作为标识符
中文也可以用作变量名
数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象（引用数据类型）
字符串String
--在JS中字符串需要使用引号引起来
--使用单引号和双引号都可以
var str = “Hello”；
str =“我说：\“今天天气真不错！\””；
当表示一些特殊的符号时可以使用\进行转义
\" | " |
\' | ' |
\n | 表示换行 |
\t | 制表符 |
\\ | \ |
Number
包括整数和浮点数
var a =123；
var b =“123”；
可以使用一个运算符typeof来检查一个变量的类型
语法：typeof 变量
检查字符串时，会返回string
检查数值时，会返回number
console.log(typeof b);
JS中可以用Number.MAX_VALUE来表示数字的最大值
1.7976931348623157e+308
如果超过了最大值，则会返回Infinity（字面量，正无穷）
NaN是一个特殊的数字，表示Not A Number
使用typeof检查一个NaN也会返回number
Number.MIN_VALUE表示0 以上的最小值 5e-324
Boolean
true false
Null
Null检查返回值为object
undefined
当声明一个变量，但不给变量赋值时，它的值就是undefined。
强制类型转化
将其他数据类型转化为String
方式一：
--调用被转换数据类型toString（）方法
--该方法不会影响到原变量，它会将转化的结果返回
--但是注意：null和undefined这两个值没有toString，如果调用它们的方法会报错
a.toString();
方式二：
--调用String()函数,并将被转换的数据作为参数传递给函数 a=String(a);
--对于Number和Boolean实际上就是调用的toString()方法;但是对于null和undefined，就不会调用toString（），还是对应类型。
将其它数据类型转换为Number
调用Number函数将a转换为Number类型
字符串-->数字
如果是纯数字的字符串，则直接将其转化为数字
如果字符串有非数字的话，则转化为NaN
如果字符串是一个空串或者是一个全是空格的字符串则转化成0
布尔-->数字
true 转成1
false 转成0
null-->数字 0
undefined->数字 NaN
如果对非String使用parseInt（）或parseFloat（）会先将器转化成String然后再操作
a="123.456.789px";
a=parseInt(a);
a=parseFloat(a);
其他进制的数字
在JS中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
如果需要表示2进制的数字，则需要以0b开头
有时浏览器无法判定进制，可以用a=parseInt(a,10)
a是要被转化的数，数字是要转换的进制
JAVA 与 JS
| JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 |
基础语法
非布尔值进行与或运算
---对于非布尔值进行与或运算时，会先将其转化为布尔值，然后再运算，并且返回原值
&&
如果第一个值为true，则必然返回第二个值。
如果第一个值为false，则必然返回第一个值。
||
如果第一个值是true，则直接返回第一个值。
如果第一个值是false，则直接返回第二个值。
赋值运算符
=、+=、-=、*+、/=、%=
关系运算符
如果关系成立则返回true，如果关系不成立则返回false
非数值会先转化为数值，再进行运算
任何值和NaN做任何比较都是false
如果符合两侧的值都是字符串，不会将其转化为数字进行比较。而会分别比较Unicode编码。比较字符编码时，是一位一位进行比较的。如果两位一样，则比较下一位，所以借用他来对英文进行排序。
Unicode编码表
在字符串中使用转义字符输入Unicode编码
\u（四位编码）
console.log("\u1C00");
在网页中使用Unicode编码
&#编码；这里的编码需要的是十进制
☠
相等运算符
用来比较两个值是否相等==
undefined衍生自null，所以两值判断是为true
NaN不和任何值相等，包括他本身。
可以通过isNaN（）函数来判断是不是NaN
===全等，不会自动做类型转换
条件运算符（三元运算符）
条件表达式？语句1：语句2；
如果条件表达式的求值结果是非bool类型，会先将其转化为bool值，true返回第二个，false返回第一个。
运算符的优先级
&&的优先级高
代码块
在JS中使用{ }来为语句进行分组
对象
对象只是带有属性和方法的特殊数据类型。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
对象的分类
内建对象
由ES标准中定义的对象，在任何的ES中都可以实现
比如：Math String Number Boolean Function Object...
宿主对象
由JS的运行环境提供的对象，目前来讲主要由浏览器提供的对象。
比如BOM DOM
自定义对象
由开发人员自己创建的对象
对象的基本操作
创建对象
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeoof检查一个对象时，会返回object
var obj=new Object ( );
属性
在对象中保存的值称为属性
向对象添加属性
对象.属性名 = 属性值 ；
obj.name="孙悟空";
obj.gender="男"；
obj.age = 18 ;
读取对象中的属性
对象.属性名
如果读取对象中没有该对象，不会报错，而是会返回undefined
修改对象的属性
对象.属性名=新值；
删除对象的属性
delete 对象名.属性值；
对象的属性名不强制要求遵守标识符的规范
如果需要使用特殊的属性名，不能采用.的方式来操作
需要另一种方式： 对象 ["属性名"] = "属性值"
读取时也需要采用这种方式
使用[ ]这种形式去操作属性，更加的灵活
在[ ]中可以直接传递一个变量，这样变量值是多少都会读取那个属性
obj["123"]=789;
obj["nihao "]="你好";
var n= "123";
console.log(obj[n]);
属性值
JS对象的属性值，可以是任意的数据类型
in运算符
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true，没有则返回false
"属性名" in 对象
例：console.log("name".obj);
基本数据类型
字符串（String）
数字(Number)
布尔(Boolean)
空（Null）
未定义（Undefined）
Symbol
注：*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。*
引用数据类型
对象(Object)
数组(Array)
函数(Function)
正则（RegExp）
日期（Date）
JS中的变量值都保存到栈中
基本数据类型的值直接在栈内存中存储；
值与值之间是独立存在的，修改一个变量不会影响其他的变量
对象是保存堆内存中的，每创建一个新的对象，就会在对内存中开辟一个新的空间。而变量保存的是变量的内存地址（对象的引用）。
当比较两个基本数据类型的值时，比较的是值的大小。
当比较两个引用数据类型时，比较的是对象的内存地址。
对象字面量
var obj={name:"猪八戒"，
age：28，
gender：男}；
属性名和属性值是一组一组的名值对结构，名和值之间使用 :连接，多个名值对之间使用，隔开如果一个属性之后没有其他的属性了，就不要写，
函数
函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能。
创建一个函数对象
可以将要封装的代码一字符串的形式传递给构造函数
var fun = new Function（）；
函数对象（）；
调用函数时，按照顺序执行。
使用函数声明来创建一个函数
function 函数名（[形参1，形参2，...形参n]）{ }
如果return语句后不跟任何值就相当于返回一个undefined
如果不写return，则也返回undefined
实参可以是一个对象，也可以是一个函数
返回值可以是任意的数据类型
立即执行函数
（function (){
alert("我是一个匿名函数~~~");
})();
调用函数后立即被执行，往往只会执行一次。
方法
加. 是 调方法
不加.是 调函数
For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:"Bill", lname:"Gates", age:56};
for (x in person)
{ txt=txt + person[x];
console.log(txt)
}
作用域
作用域是可访问变量的集合（一个变量的作用范围）。
全局作用域
a.全局变量在页面打开时创建，页面关闭后销毁。
b.在 HTML 中, 全局变量是 window 对象，所以window 对 象可以调用函数内的局部变量。
c.直接编写在script标签中的JS代码，都在全局作用域。
d.在全局作用域中，
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
注意：所有数据变量都属于 window 对象(创建)。
变量的声明提前
使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），但是如果声明变量是不使用var关键字，则变量不会被声明提前。
函数的声明提前
使用函数声明形式创建的函数function 函数（）{ }
它会在所有代码执行之前就被创建
函数作用域
a.调用函数时，创建函数作用域，函数执行完毕后销毁
每调用一次就会创建一个新的函数作用域，他们之间相互独立
b.在函数作用域中可以访问到全局变量的作用域
在全局作用域中无法访问到函数作用域的变量
c.变量使用：就近原则。如果找不到，则会报错。
在函数作用域中也有 声明提前的特性
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。局部变量，包括 window 对象可以覆盖全局变量和函数。
this关键字
解析器在调用函数时，每次都会向函数内部传递一个隐含的参数
这个隐藏的参数就是this（请忽略我）
1567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
