HTML

浏览器内核：

IE：trident         Firefox : gecko        Safari/chrome : webkit        Opera : presto(新版使用与chrome一样的基于webkit开发的blink内核)。

<!DOCTYPE>:

声明位于文档最顶部的位置，用于告知浏览器使用标准模式还是怪异模式来解析HTML或XHTML文档。

怪异模式、标准模式：

怪异模式（Quirks）：在IE6一下浏览器由于对css的解析能力不好，IE产生冠以模式来解析浏览器，在怪异模式下， width 和 height 值为 content+padding+border 。并且为行内元素设置                                宽高可以生效。（应该还有很多，一时间想不起了~等我查完后补上）。

标准模式（Standards）：为W3C的标准模式， width 和 height 值只是content值，所以如果为元素设置 padding 值的话页面显示的宽高就会大于你设置的width和height。这种情况需要计算可能会比较麻烦，所以css3加入新的css属性 box-sizing 具体css属性将在css篇进行详述。

块元素、行内元素：

块元素：  div p h1 h2 h3 h4 h5 h6 ul ol li address form table section article aside header hgroup footer nav (section之后为HTML5新增，关于HTML5的梳理在下面)。

行内元素： span tr td th a label textarea input slelect img time (textarea之后的因为是替换元素或叫做内联块元素，可以使用css为其设置宽高，但不会占据一整行)。

标签语义化：

1.去掉或样式丢失的时候能让页面呈现清晰的结构

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页

3.搜索引擎依赖于标记来确定上下文和各个关键字的权重

4.便于团队开发和维护

HTML5

HTML5新增：

结构标签：section  article  aside  header  hgroup  footer  nav  figure 

表单标签：<input type = "email"> type值的增加  email（必须输入Email地址）url（必须输入URL地址）number（必须输入数值）date（选取年月日）month（选取年月）week（选                 取周和年）time（选取时间小时和分钟）datetime（选取UTC时间）datetime-local（选取本地时间）

功能标签：video（视频播放）audio（音频播放）mark（高亮文字）time（时间日期）canvas（画布）command（命令按钮）

还有很多，因为不常使用所以没有记住，有想全面了解的童鞋可以去看书《HTML5与CSS3权威指南》。

HTML5废除标签：

单纯为了展示样式的，可以使用css替代的标签被废除:basefont  big  center  font  s  strike  tt  u

不再使用frame框架

只有部分浏览器支持的标签：applet  bgsound  blink  marquee

其他：rb  acronym  dir  isindex  listing  xmp  nextid  plaintext

canvas:

     
      浏览器不支持canvas时出现这行文字
     

var canvas = document.getElementById('canvas');//获取画布        var context = canvas.getContext('2d');//设置2d上下文        canvas.width = 500;//画布宽度        canvas.height = 500;//画布高度        //线条绘制        context.moveTo(0,50);//起点        context.lineTo(100,50);//终点        context.strokeStyle = "#f00";//线条样式        context.stroke();//线条绘制        //填充绘制        context.moveTo(10,70);//起点        context.lineTo(60,70);//..        context.lineTo(60,120);//..        context.lineTo(10,120);//..        context.lineTo(10,70);//回到起点形成矩形        context.fillStyle = "#ff0";//填充样式        context.fill();//填充绘制        //矩形绘制函数        context.strokeRect(70,150,70,70);//空心        context.fillRect(150,150,70,70);//实心        //圆形绘制        context.beginPath();//开始一个绘制        context.arc(150,300,50,0,2*Math.PI);        context.stroke();        context.closePath();//结束一个绘制        //线性渐变        context.beginPath();        var g1 = context.createLinearGradient(0,0,100,100);//xStart,yStart,xEnd,yEnd        g1.addColorStop(0,"#f00");//offset(0-1),color        g1.addColorStop(1,"#ff0");//offset(0-1),color        context.fillStyle = g1;//设置样式        context.fillRect(100,0,200,50);        context.closePath();        //径向渐变        context.beginPath();        var g2 = context.createRadialGradient(350,0,0,400,50,80);//xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd        g2.addColorStop(0,"blue");        g2.addColorStop(1,"green");        context.fillStyle = g2;        context.arc(400,50,50,0,2*Math.PI);        context.fill();        //图形变形        //context.translate(x,y);//平移        //context.scale(x,y);//扩大        //context.rotate(angle);//旋转的角度        //文字        context.font = "bold 40px Arial";//字体        context.shadowColor = "#3c3c3c";//阴影颜色        context.shadowOffsetX = 2;//阴影X轴偏移        context.shadowOffsetY = 2;//阴影Y轴偏移        context.shadowBlur = 2;//阴影模糊程度        context.fillText("text",100,400);//绘制文字        //剪辑区域        //context.clip();

HTML存储：

localstorage:

1 function saveStorage(){ 2             var data = new Object; 3             data.name = document.getElementById('name').value; 4             data.email = document.getElementById('email').value; 5             data.tel = document.getElementById('tel').value; 6             data.memo = document.getElementById('memo').value; 7             console.log(data); 8             var str = JSON.stringify(data);//把对象解析成字符串 9             console.log(str);10             localStorage.setItem(data.name,str);11             alert('数据已保存~');12             loadStorage('show');13         }14         function loadStorage(id){15             var show = document.getElementById(id);16             var result = '
     
      ';22                 result += "
     
     
      ';17             for(var i=0;i
';23                 result += "
';24                 result += "
';25             }26             result+='
      
       
        
EMAIL:" +data.email +'
        
电话号码："+data.tel + '
        
备注："+data.memo + '
       
      
     
';27             show.innerHTML = result;28         }29         function findStorage(id){30             var find = document.getElementById('find').value;31             var str = localStorage.getItem(find);32             var data = JSON.parse(str);//从字符串解析出json对象33             var result = "姓名：" +data.name +'
';34             result += "EMAIL:" +data.email +'
';35             result += "电话号码："+data.tel + '
';36             result += "备注："+data.memo + '
';37             var target = document.getElementById(id);38             target.innerHTML = result;39         }40         function clearStorage(){41             localStorage.clear();42             alert('数据清除成功~');43             loadStorage('show');44             loadStorage('find');45         }

     sessionStorage:

     与localStorage使用方法相同，区别在于session是存储在浏览器上，是临时存储，localStorage是永久存储。