知识梳理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:

 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 = '<table border="1">';

17             for(var i=0;i<localStorage.length;i++){

18                 var key = localStorage.key(i);

19                 var value = localStorage.getItem(key);

20                 var data = JSON.parse(value);//从字符串解析出json对象

21                 result += '<tr><td>姓名:' +data.name +'</td>';

22                 result += "<td>EMAIL:" +data.email +'</td>';

23                 result += "<td>电话号码："+data.tel + '</td>';

24                 result += "<td>备注："+data.memo + '</td></tr>';

25             }

26             result+='</table>';

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 +'<br />';

34             result += "EMAIL:" +data.email +'<br />';

35             result += "电话号码："+data.tel + '<br />';

36             result += "备注："+data.memo + '<br />';

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是永久存储。