学习html5-新特性

写此博客前提：朋友想学习前端知识，让我帮着布置一些作业，不知道该怎么帮，又在网上找了些视频学习怎么给她讲，同时也是自己在回顾一下以前学习的东西，今天在视频上看到的是关于html5新特性的东西，简单记录一下

html5的优点：跨平台

html5的缺点：PC端浏览器支持不是特别好，造成用户体验不佳（IE低版本不支持）

一、html5几个常用新特性

1、语义化标签

2、画布（Canvas）

3、表单控件（calendar,date,time，email,url,search）

4、本地离线存储  localStorage

5、一些API

二、语义化标签

语义化标签在用法上与div无区别，只是比div多了些语义化（此前提是兼容了IE）

1、列举几个语义化好的内容标签

（1）header

（2）footer

（3）nav

（4）section

（5）artical

（6）aside

2、解决语义化标签低版本IE问题的方法（3种）

例：

    
    
    
    
    


    

    
这是导航区域：提现语义性
    
这是导航区域：没有语性

以上代码nav标签在谷歌生效，但在IE8没有生效

（1）document.createElement('nav');

    
    
    
    
    


    

    
这是导航区域：提现语义性
    
这是导航区域：没有语性

在IE8下展示

需在nav标签下添加diaplay:block,将其设置为块级元素即可，这里就不在贴代码和展示效果了，很简单。

（2）以上方法若出现多个语义标签需要重复document.createElement，并设置css的display:block,这样就很麻烦了。这时可以通过引用js插件解决出现多个语义标签的兼容性问题

    
    
    
    
    


    

    
这是导航区域：提现语义性
    
这是导航区域：没有语性

（3）以上代码也并不是最简洁的，若在谷歌上，也请求了兼容插件的地址，实际上时没有用的

上图全红的地方实际上并没有用，这样来看，兼容IE8的插件地址的求请在谷歌上其实是浪费的，所以，可以写成如下形式的

    
    
    
    
    
     
    


    
这是导航区域：提现语义性
    
这是导航区域：没有语性

 

注意上面的腻子程序：终极解决方案即为最佳解决方案！！