知识梳理HTML篇

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 id="canvas">浏览器不支持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:

function saveStorage(){
            var data = new Object;
            data.name = document.getElementById('name').value;
            data.email = document.getElementById('email').value;
            data.tel = document.getElementById('tel').value;
            data.memo = document.getElementById('memo').value;
            console.log(data);
            var str = JSON.stringify(data);//把对象解析成字符串
            console.log(str);
            localStorage.setItem(data.name,str);
            alert('数据已保存~');
            loadStorage('show');
        }
        function loadStorage(id){
            var show = document.getElementById(id);
            var result = '<table border="1">';
            for(var i=0;i<localStorage.length;i++){
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                var data = JSON.parse(value);//从字符串解析出json对象
                result += '<tr><td>姓名:' +data.name +'</td>';
                result += "<td>EMAIL:" +data.email +'</td>';
                result += "<td>电话号码："+data.tel + '</td>';
                result += "<td>备注："+data.memo + '</td></tr>';
            }
            result+='</table>';
            show.innerHTML = result;
        }
        function findStorage(id){
            var find = document.getElementById('find').value;
            var str = localStorage.getItem(find);
            var data = JSON.parse(str);//从字符串解析出json对象
            var result = "姓名：" +data.name +'<br />';
            result += "EMAIL:" +data.email +'<br />';
            result += "电话号码："+data.tel + '<br />';
            result += "备注："+data.memo + '<br />';
            var target = document.getElementById(id);
            target.innerHTML = result;
        }
        function clearStorage(){
            localStorage.clear();
            alert('数据清除成功~');
            loadStorage('show');
            loadStorage('find');
        }

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