HTMl,CSS,JAVASCRIPT(HTMl书写网页内容，CSS用来修饰网页效果，JS添加网页功能)
HTML：超文本传输语言
标签语言：
标签： 每一个表都提前设置好了特殊的功能 ，xml
单标签：独立功能，跟其他无关，也没有作用范围
双标签：作用范围
属性：
属性 = 赋值
4大属性:
id,class,style,title
DOM标签关系：
嵌套标签 父子关系，兄弟关系，血缘关系
标签：
head：网页的配置信息，相关设置，其他文件的引入，跟具体的内容无关
body：网页实际展示的内容
h1~h6：标题标签，独占一行
hr:居中横线
<!--注释-->
br:回车
p:分段
font:字体
sub：下标
sup：上标
mark：强调
超链接：标准用法：从一个网页链接到另一个网页
<a href="http://www.baidu.com">点我</a>
链接的地址 ，点击的内容
锚点用法：从当前网页的一个位置链接到当前网页的另一个位置
<a href="http://www.baidu.com"><img src="img/1.jpg"/></a>
锚点：
<a href="#top">网上飞</a>
<a name="top">
引入图片：
<img src="img/1.jpg"/>
src:本地资源，建议使用相对路径
列表标签：
ul：无序列表
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
</ul>
ol：有序列表
dl：自定义列表
<dl>
<dt>自定义列表题目1</dt>
<dd>自定义列表项目1.1</dd>
<dd>自定义列表项目1.2</dd>
<dt>自定义列表题目2</dt>
<dd>自定义列表项目2.1</dd>
<dd>自定义列表项目2.2</dd>
</dl>
块标签：一定范文 ，配合CSS 进行布局操作的标签
div：块级标签：无论内容多少独占一行，一般可以指定高度
span：行内标签：允许和其他内容共享一行，无法指定高度
框架：
<frameset rows="30,*">
<frame src="top.html"/>
<frame src="content.html"/>
</frameset>
背景：
background="img/1.jpg"
实体符号：
空格 < < >> © ®
表格：
table
<table border="1px" width="100px" height="100px" cellspacing="0px" cellpadding="10px">
<tr><th colspan="2">1</th><th rowspan="2">3</th></tr>
<tr><td rowspan="2">4</td><td>5</td></tr>
<tr><td colspan="2">8</td></tr>
</table>
表单：一块前后台数据交互的通道
<form method="get" action="http://www.baidu.com">
method:数据传递的方式
get：不安全，效率高，快，地址栏传数据包，最大不能超过2k，不支持中文
post：安全（相对），效率低，慢，不用地址栏传数据，最大不能超过2g，有可能支持中文
控件：协助form采集数据和用户操作的标签
input：输入控件
type: 控件的类型
text:文本类型
password:加密文本
email：简单的@的检查
date:日期格式的问题输入
radio：单选按钮，想实现单选前提name必须相同；value建议把值进行修改，
（ 辅助选中）
label for="id"
checkbox:多选框：checked 默认选中
number:数字
url：网址
hidden：隐藏
file：文件
非type:
select:下拉列表
option：下拉列表项
textarea ：文本框（rows,cols:大小）
常用属性：
size：输入框可见长度
maxlength：最大输入长度
selected：下拉列表默认项目
multiple：下拉列表多选
checked：按钮默认项目
disable：置灰，不可以传输数据，不能改
readonly:不能改，可以传递数据
name:传递的数据的键
id:唯一定位元素的值
value：控件的数据
autofocus：自动获取焦点
placeholder：提示信息
required：必填项
list:提示列表id
type（button）：submit提交，reset重置，button
HTML5中新的语义元素：分担div的语义标签，优化搜索引擎和语义引擎
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
CSS:层叠样式表 ，美化网页内容，布局网页
div：独占一行有高度的区域标签
span：可以和其他元素共处一行的没有高度的范围标签
引入方式：
内联：style属性：值等于css代码，（程序员临时测试用）
内嵌：style标签：只能写在head标签范围内，当前网页独有的效果
外联：link标签：引入css文件，整个网站通用的效果
（引包，导入）不建议用性能差
Css语法：
选择器{
属性:值
}
继承：部分属性默认允许继承
层叠：后续效果覆盖之前的效果，同时发生。
选择器：
基础选择器：
1.标签选择器：必须全选这个标签
2.id选择器：#开头
3.类选择器: .className
复合选择器：
*:所有元素都选择
，：组合选择器
+ ：兄弟选择器（只选弟弟）
' '：后代选择器
>:直接子 元素选择器
[]：属性选择器
:not() :取反选择器
[attribute="value"]:属性值选择器
伪类选择器：
lvha
:link -> 当a标签被链接之前
:hover -> 当元素被鼠标悬浮之时
:active -> 当元素被鼠标左键点击之时
:visitied -> 当a标签发生超链接之后
:focus -> 当元素被获取焦点之时
优先级： 选择器： id>class>标签
引入方式：内联>内嵌>外联
就近原则
!important
属性：
color:颜色 rgba(r,g,b,透明参数)
font-family:字体 ，英文前 中文后
font-size: 字体大小
font-style: italic; 文字斜体
font-weight : bold; 粗细
letter-spacing:字母间距
word-spacing:单词间距
text-indent:字体两倍大小缩进
行内元素的水平居中：
text-align：center
列表：
list-style-type:none
去掉列表的默认选项
表格：
表标题位置
caption-side:bottom ;
其他：
鼠标的皮肤
cursor: text ;
边框：
border: 1px solid red;
border-radius: 400px;
圆角矩形
范围（尺寸）：
height：高
width：宽
针对div有效，对于span无效
背景：
background-image: url( );
background-color: yellow;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment:fixed;
CSS精灵（应用）
布局：
一般的布局模式：
最大的网页内容区准备一个大的父元素，margin： 0 auto
position：relative
默认文档流模式：所有元素默认出现在文档的左上位置
1.table:不灵活
2.盒子模型：格灵活
任何元素（标签+文本）都自带一个矩形的包装盒（所在位置的格子），通过对盒的调整可以间接的调整元素的位置
marging（外边距）+border(边框)+padding(内边距)+content(内容)
默认指定的长宽是 content
盒子中所有元素统一同页面对比换位置建议用marging
box-sizeing ： border-size; 整个盒子的大小
缺点：本质上是很少的格子的表格，比表格灵活简单，但是盒子之间还是容易互相影响
居中：margin: 0 auto;
3.定位：不影响其他盒子，指哪放哪
定位的计算量比较大成本高，坐标原点固定，适配性不强
position：
static:默认文档流
absolute：绝对定位
relative ：相对定位
fixed:固定定位
绝对定位和相对定位的区别：
1.对后元素或者父元素会造成影响，相对定位保留自己所在行的空间，绝对定位放弃自己原来所在行的空间
2.相对定位的基础坐标系是自身左上角
绝对定位的基础坐标系是（特殊（默认的特殊父元素是body））父元素的左上角
4.浮动：不需要计算纵坐标
缺点：浮动会导致后元素，或者父元素异常
清除浮动：
div id="clear"
#clear{
clear:both;
}
#main:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
}
5.弹力..网格..:兼容性
JavaScript:表单验证，各种网页特效，数据传输，
代码使用方式：
a：
<a href="javascript:alert(1)">点我啊</a>
onclick：
<button type="button" onclick="alert('吓死你')">点我</button>
内嵌：
<script type="text/javascript">
var a = 1;
console.log("打出来个xxx");
</script>
外联：
<script type="text/javascript" src="js/js1.js"></script>
ECMAscript：5.0 ：基于对象的语言
变量：动态语言，弱类型
var a; //变量的声明
作用域：1全局变量
2局部变量（函数内声明的叫局部变量）
3没有块这个概念
数据类型：
基础数据类型：
number：数字型
NaN:不是一个数的数，属于number
Infinity：无限大的数
-Infinity：负无穷大
支持16进制，8进制
String：字符串 "" ''
boolean：布尔型
undifiend:未定义类型：只定义不赋值的数
null：空类型 typeof null 返回object 是一个bug
复合（引用）数据类型：
对象：
函数（极其特殊）：
数组：
包装类：
NUMBER
STRING
BOOLEAN
如何确定一个数据的类型：
1.typeof 擅长于基本数据类型，但是对于null和所有的对象无法细分
2.instanceOf 能帮我确认值是否属于某种复合数据类型
3.obj.constructor.toString() ,可以用来区分所有的非null，undefined的复合数据类型
通过自定义函数：
function TypeOf(a){
var s = typeof a;
if(s=="object"){
if(a === null){
console.log(null);
}else{
console.log(a.constructor.name);
}
}else{
console.log(s);
}
}
类型转换：
显示：
Boolean()：
数字，0，NaN为false
字符串，空字符串转为false
undefined false
null false
Number()
true 1
false 0
null 0
undefined NaN
"123" 123
"123xp" NaN
String(): 把一切转成字符串
隐式：
基本数据类型的隐式转换
Boolean()
Number()
String()
如果做比较优先Numnber()
如果在+左右有字符串则使用String（）进行拼接； - 字符串则使用Number();做逻辑运算会优先使用Boolean（）
复合数据类型隐式转换：
obj.valueOf() ,再掉toString()
[]+{} ; {}+[]
运算符：
== 值 相等
=== 值和类型 同时相等（NaN ！= NaN,通过isNaN（）判断是否是NaN）
判断isFinite（是否有限）
运算方法：
0/0 = NaN
1/0 = infinity
运算方法：
||
只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。
&&
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
流程控制：
增强for循环：
for(var i in a){
console.log(a[i]);
}
try{}catch(e){} finally{}
函数：
自定义函数：
1.函数的定义：
function 函数名字(形参...){
}
2.函数表达式（声明）：
var 函数名 = function(形参){}
函数的调用：
函数名字(实参...)
定义：可以先调用后创建函数
表达式：不可以提前调用
函数的高级用法：
自更新：
var haha = function(){
console.log("haha");
haha = function(){
console.log("hehe");
}
}
回调函数：
console.log(getReturn(function() {
return 3 - 1;
}, function() {
return 1 - 2;
}));
arguments是实参的值的数组
重载：
function sum(){
var sums = 0;
for(var i in sum.arguments){
sums = sums + sum.arguments[i];
}
console.log(sums);
}
sum(1,2,3,9,6,8,4);
函数的闭包： function getA(){
var a = 1;
a = a+1;
return function(){
return a;
}
}
系统api函数：
encodeURI：转码
decodeURI：解码
eval：运行js源代码的字符串
isNaN：判断是否NaN
isFinite：判断是否有限
Number(),String(),Boolean基本数据类型转换
parseInt: 可以根据指定的进制把字符串转成数字，碰到第一个字符串就停止转换
parseFloat:
对象：
自定义对象：
var obj = {} //空对象 ，对象字面量
var obj2 = new Object(); //空对象
添加属性：
.属性 = 值
删除属性：
delete obj.属性
增强for循环查看对象的所有属性：
for(var i in o){
console.log("属性名:"+i+" ,属性值为："+ o[i])
}
通过构造器来创建对象：
function Student(name,age){
// {}
this.name = name;
this.age = age ;
this.learn = function (){console.log("学习让我进步")}
//return
}
var chenhao = new Student("陈浩",18);
js面向对象：
function Student(name,age){
this.name = name;
this.age = age ;
}
Student.prototype.learn = function (){
console.log("学习让我进步")
}
var chenhao = new Student("陈浩",18);
var lichongyang = new Student("李重阳",18);
console.log(chenhao.name+" "+lichongyang.name);
chenhao.learn();
lichongyang.learn();
系统api对象：
Number:
parseInt()
parseFloat()
Object
String
：charAt（）指定位置的字符串
charCodeAt()获取unicode编码
indexOf（）指定字符串求位置
lastindexof()
replace:替换
split：根据内容分数组
substr： 起始到昌都截取
substring： 坐标之间截取
tolowerCase:转小写
属性：length
Date：1900年
Math：
Math.floor(Math.random()*10)+1;
RegExp：正则表达式
三种模式：i g m
具体的语法：
背：身份证！
ip地址！
邮箱！
邮编！
中文！
test：判断是否匹配
exec:返回具体的匹配值
Array：
var arr = [1,2,3,4,"56"];
join( ) :指定分隔符号，把所有的数组元素组合成一个字符串
concat():拼接数组，参数直接追加
pop(): 返回数组的最后一个元素，并删除
push(): 追加一个元素到数组的末尾
shift(): 返回数组的第一个元素，并删除
unshift(): 插入一个元素到当前数组的首位，其他元素顺移
reverse()：内容反转
sort():排序
a.sort(function(a,b){ if(a>b){return 1;}else if(a==b){return 0} else{return -1};})
Events:
代码执行：
1.页面加载
2.事件触发：
1级事件 ：onclick 点击
onmousemove 移动 event.clientX/Y
onmouseout
onmousedown
onselect 选中文本
onfocus 获取焦点
onblur 失去焦点
onload 网页加载完成
onkeyDown 按下
onkeyup 抬起
onkeypress 按下或抬起
event.keycode
2级事件: var buttons= document：.getElementsByTagName("button");
buttons[0] = function(){ alert(1)}
3级事件：
chrome:buttons[0].addEventListener('click',haha);
IE：buttons[0].attachEvent('onclick',haha);
选中一个操作对象（html元素）+选择一个事件+书写一个事件处理的函数网页的内容（DOM +Dom可以修改网页的内容和CSS）
BOM:
Window 当前窗口
属性：
name
top:
常用API：
alert(""):通知
confirm(""):请求 确定返回true ，取消返回false
prompt("",""):提问 问题，默认回答 ； 更改的内容作为返回值
close():关闭当前窗口
open():打开指定的窗口 ，通过描述字符串可以指定打开窗口的样式和功能
moveBy():移动多少坐标
moveTo():移动到多少坐标
计时器：
setInterval(回调函数，毫秒数): 每隔多长时间执行一次功能
setTimeOut: 多久之后执行功能
--
setTimeOut 实现 setInterval 的功能
setInterval 实现 setTimeOut 的功能
clearInterval: 清除interval
clearTimeOut: 请成绩tomeOut
location:地址栏
属性：
href：完整url
reload：刷新页面，把当前的地址重新载入
History：历史
length：url数量
go：+ foward - back
Screen ：屏幕
height
width
availheight
availwidth
Navigator :
userAgent
DOM:window对象的一个属性：当前网页的文档内容
当浏览器加载某个网页之后，会把网页中所有内容根据dom树模型生产对应的对象关系
js可以通过dom的api的操作来间接的改变文档内容
三种节点：Node
Element( Attribute) Text
Document：
getElementsByTagName("div"):或者相同标签的数组
getElementById("asd") :通过ID获取对象
getElementsByName("username"):或者相同name属性值的数组
write():书写文本或者标签 ，容易覆盖之前的内容，不建议使用
Element:
属性：
innerHTML:双标签之间的内容
firsetChild:第一个子标签（手写代码中容易是文本标签）
lastChild:最后一个子标签
parentNode:父节点
nextSilbiling:下一个节点
previousSibiling:上一个同级节点
childNodes():返回所有子节点的集合
增加节点：
var el1= document.createElement("div")
//创造新元素节点
var div1 = document.getElementById("div1");
//寻找父元素
div1.appenedChild(el1;)
追加
//指定位置
var span1 = document.getElementById("span1");
div1.insertBefore(el1,span1);
删除子节点：
div1.removeChild(span1)；
替换字节点：
div.replaceChild(span1);
style.css属性（组合属性的单词去掉- ，首字母大写）
Form:
文本框： select()：主动选择文本
focus()：获取焦点
checked：当前是否被选中，true选中，false没有
select.options：下拉列表的列表项目集合
new Option("菠萝",2)：生成一个新的下拉列表项
select.options.length = 0;：清除所有的下拉列表项
selectedIndex：当前选中的下拉列表项
原型链：
闭包： 突破作用域链
找个网页：
练习题：
带背
