- 安装Sublime Text3和谷歌浏览器
- 了解HTML
Html：超文本标记语言
1、HTML主要构成
<!DOCTYPE html> 声明html版本
<html> 告知浏览器文档类型是html
<head>声明html头部信息
<meta /> 定义html元信息规则
<title></title> 定义页面的名称
<link /> 加载外部内容 (比如：css和页面图标)
<style></style> 定义样式
<script></script> 加载脚本文件
</head>
<body>声明html主体内容
...
</body>
</html>
2、HTML元素分类
文档元素：<html>、<head>、<body>、<title>、<meta>、<link>、 <style>、<script>
文章元素：<h1> - <h6>、<p></p>、<br>、<span>、<pre>
字体样式元素：<i>、<b>、<strong>
布局元素：<div>
框架元素：<iframe>、<frameset>、<frame> => HTML5 不再支持 <frameset> 和 <frame>
链接元素：<a>
多媒体元素：<img>
表单元素：<from>、<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<label>、<fieldset>表单元素半包围边框、<legend>标题
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格元素：<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption>
特殊元素：<!DOCTYPE>、<!-- -->、<hr>
3、<a>元素的链接方式：文本和图片
<a>元素的作用：
1、指向另一个站点 href=”http://www.xiankesi.cn/”
2、指向站内的一个文件 href=”./myfile.html”
3、锚点定位
4、回到顶部
5、下载文件
<a>target属性打开链接方式：_self (默认)、_blank、_parent、_top
_parent：指向父frameset文档
_top：去掉所有页框并用document.html取代frameset文档
补充知识点：HTML 字符实体 ( 比如： > < ¥ )
- JS基础
1、JavaScript基础语法
语句
变量
常量
数据类型
运算符
注释
1.1语句
JavaScript 语句：程序需要执行的命令。语句的作用是告诉浏览器该做什么。
JavaScript程序的执行单位为行，也就是一行一行地执行。一般情况下，每一行就是一个语句。
语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句：var a = 1 + 3;
解释说明：以上条语句先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。
1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。
一条语句可以包含多个表达式。比如：var a = 1 + 2, b = 3 + 4;
语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。
比如：var a = 1 + 3 ; var b = 2 + 5;
分号前面可以没有任何内容，JavaScript引擎将其视为空语句。
比如：;;; 表示3个空语句
表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。
比如：1 + 3; 'abc';
这两行语句有返回值，但是没有任何意义，因为只是返回一个单纯的值，没有任何其他操作。
1.2变量
变量：存储一个数据的空间的容器，主要作用是保存数据。
var a = 1;
上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，也称为将数值1“赋值”给变量a。以后，引用变量a就会得到数值1。最前面的var，是变量声明命令。它表示通知解释引擎，要创建一个变量a。
变量的声明和赋值，是分开的两个步骤，上面的代码将它们合在了一起，实际的步骤是下面这样。
var a;
a = 1;
如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个JavaScript关键字，表示“未定义”。
var a;
a // undefined
如果变量赋值的时候，忘了写var命令，这条语句也是有效的。
var a = 1;
// 基本等同
a = 1;
但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。
严格地说，var a = 1 与 a = 1，这两条语句的效果不完全一样，主要体现在delete命令无法删除前者。
如果一个变量没有声明就直接使用，JavaScript会报错，告诉你变量未定义。
console.log(x);
// ReferenceError: x is not defined
上面代码直接使用变量x，系统就报错，告诉你变量x没有声明。
可以在同一条var命令中声明多个变量。
var a, b;
JavaScirpt是一种动态类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
var a = 1;
a = 'hello';
上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。
如果使用var重新声明一个已经存在的变量，是无效的。
var x = 1;
var x;
x // 1
上面代码中，变量x声明了两次，第二次声明是无效的。
但是，如果第二次声明的同时还赋值了，则会覆盖掉前面的值。
var x = 1;
var x = 2;
// 等同于
var x = 1;
var x;
x = 2;
变量提升
JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
console.log(a);
var a = 1;
上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。
var a;
console.log(a);
a = 1;
最后的结果是显示undefined，表示变量a已声明，但还未赋值。
变量的标识符（identifier）是用来识别具体对象的一个名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。
标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript引擎遇到非法标识符，就会报错。
简单说，标识符命名规则如下：
第一个字符，可以是任意字母，以及美元符号（$）和下划线（_）。
第二个字符及后面的字符，除了字母、美元符号和下划线，还可以用数字0-9。
下面这些都是合法的标识符。
arg0
_tmp
$elem
下面这些则是不合法的标识符。
1a // 第一个字符不能是数字
23 // 同上
*** // 标识符不能包含星号
a+b // 标识符不能包含加号
-d // 标识符不能包含减号或连词线
JavaScript有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
另外，还有三个词虽然不是保留字，但是因为具有特别含义，也不应该用作标识符：Infinity、NaN、undefined。
1.3常量
常量就是一旦声明就无法改变的量
常量的声明方式：const a = 1;
以上使用const关键字声明了常量a，然后将右边的值 1 赋值给a;
常量的规范写法： const A = 1; 使用大写字母A来表示常量
常量没有声明提前
console.log(B); //Uncaught ReferenceError: B is not defined
const B = 2;
常量不能和变量同时声明相同的标识
const C = 3;
var C = 4;
console.log(C);//Uncaught SyntaxError: Identifier 'A' has already been declared
1.4数据类型
数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如”Hello World”）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示“未定义”或不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象（object）：各种值组成的集合
对象又可以分成三个子类型
狭义的对象（object）
数组（array）
函数（function）
判断数据类型 (typeof 操作符)
typeof操作符可以返回一个值的数据类型
（1）原始类型
数值、字符串、布尔值分别返回number、string、boolean。
typeof 123; // "number"
typeof '123'; // "string"
typeof false ; // "boolean"
（2）函数
函数返回function。
function f() {}
typeof f ; // "function"
（3）undefined
undefined返回undefined。
typeof undefined; // "undefined"
利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。
v
// ReferenceError: v is not defined
typeof v
// "undefined"
上面代码中，变量v没有用var命令声明，直接使用就会报错。但是，放在typeof后面，就不报错了，而是返回undefined。
（4）其他
其他情况都返回object。
typeof window // "object"
typeof {}; // "object"
typeof [] ;// "object"
typeof null; // "object"
另外，null的类型也是object，这是由于历史原因造成的，当时，只设计了五种数据类型（对象、数值、undefined、字符串和布尔值），完全没考虑null，只把它当作object的一种特殊值。这是typeof null返回object的根本原因。
null 和 undefined
null 一般用来释放内存资源
undefined 一般用来表示一个变量是否已经被定义
undefined == null
// true
undefined === null
//false
1.5运算符
加法运算符 ( + )
算数运算符 ( +、-、*、/、% )
余数运算符 ( x%y )
自增和自减运算符 ( ++x )、(x++)、( --x )、(x--)
数值运算符，负数值运算符 ( +x )、( -x )
赋值运算符 ( = )、( += )、( -= )、( *= )、( /= )、( %= )
比较运算符 (>、<、>=、<=、!=、!==、==、===、)
比较运算符的算法 ( true > false )
字符串的比较 ( “a” > “A” )
严格相等运算符 ( === )
相等运算符 ( == )
布尔运算符
逻辑非 ( ! )
逻辑且 ( && )
逻辑或 ( || )
三目条件运算符( ? : )
1.6js注释
js注释方式：
双斜杠注释：// hello world
斜杠星星斜杠注释：/*hello world*/
- css
4.1 CSS引入方式
1、内联样式 ( 样式位于元素内部 )
2、内部样式 ( 样式位于head元素的style元素中 )
3、外部样式 ( 独立的CSS文件 )
4.2 CSS优先级分配
1、浏览器缺省样式
2、外部样式
3、内部样式
4、内联样式
4.3 css基础样式属性
文本样式属性
1、text-indent ( 缩进文本 ，属性值可以为负数，也可以为百分比)
2、text-align ( 文本对齐方式 )
3、letter-spacing ( 字母或者字符的间距 )
4、word-spacing ( 单词的间距 )
5、text-transform ( 文本转换 )
6、text-decoration ( 文本装饰 )
7、white-space ( 文本空白 )
8、color ( 文本颜色 )
9、background-color ( 背景颜色 )
10、line-height ( 行高，多数浏览器默认的行高是20px)
字体样式属性
1、font-family ( 字体系列 )
2、font-style ( 字体风格 )
3、font-weight ( 字体加粗 )
4、font-size ( 字体大小 )
5、font ( 字体简写方式 )
( font-style font-weight font-size/line-height font-family )
背景样式属性
1、background-color ( 背景颜色 )
2、backgroud-image ( 背景图片 )
3、backgroud-position ( 背景偏移位置 )
4、backgroud-repeat ( 背景平铺 )
5、backgroud ( backgroud-image backgroud-position backgroud-repeat )
链接样式属性
1、a:link ( 未被访问的链接 )
2、a:visited ( 已被访问的链接 )
3、a:hover ( 鼠标悬浮 )
4、a:active ( 链接被点击时 )
a的书写样式顺序：LVHA
列表样式属性
1、list-style-image ( 图片标志 )
2、list-style-type ( 标志类型 )
3、list-style-position ( 标志位置 )
4、list-style ( list-style-image list-style-type list-style-position )
表格样式属性
1、border-collapse ( 折叠表格边框为单一边框 )
2、border-spacing ( 分隔单元格的距离 )
3、table-layout ( 表格布局 )
automatic ( 默认，列宽由单元格内容设定 )
fixed ( 列宽由表格宽度和列宽度设定 )
固定表格算法快，但是不灵活，而自动表格算法比较慢
轮廓样式属性
1、outline-color ( 轮廓颜色 )
2、outline-style ( 轮廓样式 )
3、outline-width ( 轮廓宽度 )
4、outline ( outline-width outline-style outline-color)
4.4 css选择器
1、元素选择器
2、关系选择器
3、属性选择器
4、伪类选择器
5、伪对象选择器
元素选择器
1、通配符选择器 ( * )
2、类型选择器 ( E )
3、id选择器 ( E#id )
4、类选择器 ( E.class )
关系选择器
1、后代选择器 ( E F )
2、子代选择器 ( E>F )
3、相邻选择器 ( E+F )
4、兄弟选择器 ( E~F )
属性选择器
1、选择具有att属性的E元素 ( E[att] )
2、选择具有att属性且属性值等于val的E元素 ( E[att=”val”] )
3、选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素 ( E[att~=”val”] )
4、选择具有att属性且属性值为以val开头的字符串的E元素 ( E[att^=”val”] )
5、选择具有att属性且属性值为以val结尾的字符串的E元素 ( E[att$=”val”] )
6、选择具有att属性且属性值为包含val的字符串的E元素 ( E[att*=”val”] )
7、选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择 ( E[att|=”val”] )
- 事件和bom
5.1 事件
1、window.onload //页面加载完成事件
2、onclick //点击事件 **
3、onmouseover //鼠标悬浮时事件 **
4、onmouseout //鼠标离开时事件 **
5、onmousemove //鼠标移动时事件 **
6、onchange //用户改变域的内容时事件 **
7、onfocus //获取焦点时事件 **
8、onblur //失去焦点时事件
9、onkeydown //键盘某个键被按下时事件 **
10、onkeypress //键盘某个键被按下或者按住时事件 **
11、ondblclick //双击事件 **
12、onresize //浏览器窗口大小被调整时事件
13、onscroll //滚动条滚动时事件 **
5.2 定时器
setTimeout()
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
function f(){
console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){console.log(2)},1000);
如果省略setTimeout的第二个参数，则该参数默认为0。
除了前两个参数，setTimeout还允许添加更多的参数。它们将被传入推迟执行的函数（回调函数）。
setTimeout(function(a,b){
console.log(a+b);
},1000,1,1);
上面代码中，setTimeout共有4个参数。最后那两个参数，将在1000毫秒之后回调函数执行时，作为回调函数的参数。
除了参数问题，setTimeout还有一个需要注意的地方：如果被setTimeout推迟执行的回调函数是某个对象的方法，那么该方法中的this关键字将指向全局环境，而不是定义时所在的那个对象。
var x = 1;
var o = {
x: 2,
y: function(){
console.log(this.x);
}
};
setTimeout(o.y,1000);
// 1
上面代码输出的是1，而不是2，这表示o.y的this所指向的已经不是o，
而是全局环境了。
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
<input type="button" οnclick="clearInterval(timer)" value="stop">
<script>
var i = 1
var timer = setInterval(function() {
console.log(2);
}, 1000);
</script>
上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。
扫一扫
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
