HTML(5)学习笔记

HTML5和CSS3:

 PC+移动端
  移动端:app
Hybrid App（混合应用）= Native App（原生应用）+ Web App（网页应用）;
                
Native App: android     java  linux
            ios         oc    unix
            
Web App:开发成本 低    体验差   跨平台     

Native App:开发成本高  体验好   不能跨平台

Hybrid App:开发成本低  体验好   跨平台

PWA:自己去瞅瞅

其实HTML5很多东西:

SVG:地理信息
webSql:前端数据库,没用(只有5MB,不安全)
video:视频
audio:音频
canvas:画表、游戏
webGL:three.js
WebSocket:双向交互
WebWorker:多线程(离能用还有段距离)
.....

html5+css3不兼容 只兼容IE9+
幸福:不需要做兼容处理

如果有病，想去兼容低版本IE：
html5shiv.js

网址：https://en.wikipedia.org/wiki/HTML5_Shiv

HTML5:
html4.0


html5

新标签

新增标签(结构性语义化标签)：没有实质用处
    
       页眉
    
       标题组合
    
             导航
    
       页脚
    
     区块
    
     文章
    
         侧边栏
               时间
    
       对话框
       数据列表
    
     描述
    
     对details的简介
    
     地址
               标记
           秘钥  （报废了）
       进度条
             进度条
    ....

选择器：

document.querySelectorAll('.red');
    一组元素
document.querySelector('#box');
    获取一个

自定义属性：

统一规范:
        1.向后兼容
        2.优势:可以遍历属性
以前:
现在:
data-开头必须添加！

好处：
1.使用方便：
obj.dataset.xxx

alert(this.dataset.showIndex);

2.性能：
    dataset    5000   慢

    Attribute  2000   快

###3.有利于遍历循环！ data-aa='123'

    选项卡：
        aBtn[i].index=i;      
            this.index
        aBtn[i].dataset.index=i;     
            this.dataset.index
###class操作:
              aDiv[i].classList
            .add('active');    添加
            .remove('active'); 删除
            .contains('active');可以判断标签上是否有这个class
            .toggle('active');切换class，反选