HTML
    1、一套规则，浏览器认识的规则。
    2、开发者：
        学习Html规则
        开发后台程序：
            - 写Html文件（充当模板的作用） ******
            - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

    3、本地测试
         - 找到文件路径，直接浏览器打开（单个文件测试时，无需使用socket服务端）
         - pycharm打开测试
    4、编写Html文件
        
        - doctype对应关系  
        - html标签，标签内部可以写属性 ====> 只能有一个， ==>html标签，lang="en"叫html标签的属性。
        - 注释：  
    5、标签分类
        - 自闭合标签
            只写了一个标签，没有标签，自己就闭合了。
            例如：  
        - 主动闭合标签
            例如：老男孩  
    6、
        
        -  编码，跳转，刷新，关键字，描述，IE兼容
         6.1 编码：
          6.2 跳转： 5秒钟后跳转至baidu.com
          6.3 刷新：  该页面默认30秒刷新一次
          
          6.4 关键字：
          6.5 描述： 
          6.6 兼容：
            
            - title标签   ,网站的标题
            -  搞图标，欠
            - 欠
            - 
9 position
    position: fixed;  <: ;: ;: ;: ;: ;: ;:;: >返回顶部
    position: absolute;   父标签里定义一个position:relative;子标签里定义一个position:absolute; 子标签就会相对父标签定位。
    bottom:20px;  right: 20px;  margin-top: 50px;  

10 background
    background-p_w_picpath:url('img/1.gif')  background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat; background-position-x:0;
    background-position-y:-20px;
    background-position:0 -20px;

11 hover   
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{ 
background-color:yellow;
}

12 overflow  
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

13 z-index   
层级。设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值最大的，在顶层。

14 opacity
设置元素的不透明级别，规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
   
    
三、JavaScript：(独立的编程语言，跟java半毛钱关系也没有。浏览器就自带js代码的解释器)
3.1 js代码书写方法和位置：
法一：以代码形式存在html里的head中，但是不够灵活

    
    Title
    
    


法二：js代码以文件的形式存放，html里调用这个文件

    
    Title
    
    


法三： 临时书写，可以在浏览器终端的console里

小结：
    一般js都不放在head里，为了提高网页的打开效率和友好度，通常会把js的js代码放在html代码下面
    
3.2 js注释：   
     当行注释  //内容
     多行注释  /* 内容*/
     
3.3 js基本语法：  
3.4变量：
        python中：
            name = "xiaoming"   
        js中：
            name = "xiaoming"    #全局变量
         var name = "xiaoming" #局部变量，切记，使用过程中变量一般都要加上var
         
3.5 基本数据类型：
详见：


 
    注意： 
        null、undefinednull是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
           undefined是一个特殊值，表示变量未定义。
           
3.5.1 数字
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
parseInt(..)    将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
 NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
更多数值计算：

3.5.2字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
obj.length                           获取当前字符串长度
obj.trim()                           移除空白
obj.trimLeft()                                                  移除左面
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符,n是索引位置
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置，比如字符串索引位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列,from是开始位置，to结束位置
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号
                                                                        

                                                                    

3.5。3 数组
JavaScript中的数组类似于Python中的列表
常见功能
obj.length          数组的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

3.5.4 字典
a={'k1':'v1','k2':'v2'}
执行a[k1]，值为v1

3.5.5 布尔值
布尔类型仅包含真假，与Python不同的是其首字母小写。
==      比较值相等
!=       不等于
===   比较值和类型相等
!===  不等于
||        或
&&      且
        

3.6 For循环
此种方法循环的是元素的索引


        
3.7 条件语句
语法：
if(条件){
}else if(条件){
}else if(条件){
}else{
}

条件符号：  
        ==    只要值相同就相等
        !=
        ===   不仅要比对值，类型也要相等才会相等
        !==
        
        ||    或，相当于python里的or
        
        &&    且，相当于python里的and
        
    函数的定义：
        function func(){
            ...
        }
        
4、Dom
详看：
http://www.cnblogs.com/wupeiqi/articles/5643298.html  
  
4.1 找标签
4.1.1直接找 $('#id')  $('.c1').siblings()
document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取多个标签(获取的是列表)
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作：
                innerText    仅文本
                innerHTML    全内容
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值（selectedIndex）
                    textarea value获取当前标签中的值
                
                搜索框的示例

4.1.2 间接找
先找到一个标签，然后根据这个标签去找其他标签；例如
var tag = document.getElementById('i1')  //先找到id=i1的标签
var content = tag.parentElement     //然后找i1的父标签
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素


parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

4.2 操作：
4.2.1 内容
var tag = document.getElementById('i1')  //先找到id=i1的标签
var content = tag.innerText    //获取i1标签的文本内容

innerText   文本
outerText
innerHTML   HTML全内容
innerHTML   
value     值 
    input    value获取当前标签中的值
    select   获取选中的value值（selectedIndex）
    textarea value获取当前标签中的值
    
4.2.2 样式操作：
    className
    classList
        classList.add
        classList.remove
       
       
    obj.style.fontSize = '16px';
    obj.style.backgroundColor = 'red';
    obj.style.color = "red"
    
    
4.2.3 属性操作 
attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
removeAttribute 

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/ 
        innerText
        
        checkbox: 
            checked    
        
        className
        classList

    
4.2.4 创建标签，并添加到HTML中：
    a. 字符串形式
    
    b. 对象的方式
        document.createElement('div')
    
    
4.2.5 提交表单
    任何标签通过DOM都可提交表单
    
    document.geElementById('form').submit()

4.2.6 其他：
    console.log()
    alert
    var v = confirm(信息)  v:true false
    
    location.href
    location.href = ""  # 重定向，跳转
    location.reload()   # 页面刷新
    location.href = location.href   < === > location.reload()
    
    
    var o1 = setInterval(function(){}, 5000)
    clearInterval(o1);
    
    var o2 = setTimeout(function(){}, 50000);
    clearTimeout(o2);
    
    var obj = setInterval(function(){
        
    }, 5000)
    
    clearInterval(obj); 

事件：
    onclick，onblur，onfocus
    
    行为  样式  结构 相分离的页面？
    js    css   html  
    
    绑定事件两种方式：
        a. 直接标签绑定 onclick='xxx()'  onfocus
                
                                  b. 先获取Dom对象，然后进行绑定             document.getElementById('xx').onclick             document.getElementById('xx').onfocus                  this，当前触发事件的标签         a. 第一种绑定方式                                       function ClickOn(self){                 // self 当前点击的标签                              }         b. 第二种绑定方式                          document.getElementById('i1').onclick = function(){                              // this 代指当前点击的标签             }                           作用域示例：             var myTrs = document.getElementsByTagName("tr");             var len = myTrs.length;             for(var i=0;i      function f1(){         console.log(1);      }     //创建一个定时器,5000是毫秒，相当于5秒执行一个alert命令，弹出一个框，内容是123      setInterval("alert(123)",5000);                 4.2.8 其他：            alert()  console.log()                                    4.3 搜索框的示例 操作：           样式操作：         className         classList             classList.add             classList.remove                                 obj.style.fontSize = '16px';         obj.style.backgroundColor = 'red';         obj.style.color = "red"                       属性操作：         attributes         getAttribute         removeAttribute              创建标签，并添加到HTML中：         a. 字符串形式                  b. 对象的方式             document.createElement('div')                       提交表单         任何标签通过DOM都可提交表单                  document.geElementById('form').submit()          其他：         console.log()         alert         var v = confirm(信息)  v:true false                  location.href         location.href = ""  # 重定向，跳转         location.reload()   # 页面刷新         location.href = location.href   < === > location.reload()                           var o1 = setInterval(function(){}, 5000)         clearInterval(o1);                  var o2 = setTimeout(function(){}, 50000);         clearTimeout(o2);                  var obj = setInterval(function(){                      }, 5000)                  clearInterval(obj);                       5 实战     欢迎领导莅临指导