HTML(5)学习笔记

作者: smallBear | 来源:发表于2017-03-22 23:14 被阅读0次

HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
HTML5基本介绍
cocos2d-html5 学习笔记
HTML5存储
HTML(5)学习笔记
2021-12-20
App与HTML的交互

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

<script src="html5shiv.js"></script>

HTML5:
html4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5
<!doctype html>

新标签

新增标签(结构性语义化标签)：没有实质用处
    <header></header>       页眉
    <hgroup></hgroup>       标题组合
    <nav></nav>             导航
    <footer></footer>       页脚
    <section></section>     区块
    <article></article>     文章
    <aside></aside>         侧边栏
    <time></time>           时间
    <dialog></dialog>       对话框
    <datalist></datalist>   数据列表
    <details></details>     描述
    <summary></summary>     对details的简介
    <address></address>     地址
    <mark></mark>           标记
    <keygen></keygen>       秘钥  （报废了）
    <progress></progress>   进度条
    <meter></meter>         进度条
    ....

选择器：

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

自定义属性：

统一规范:
        1.向后兼容
        2.优势:可以遍历属性
以前:<input type="button" index="123">
现在:<input type="button" data-index="123">
data-开头必须添加！

好处：
1.使用方便：
obj.dataset.xxx
<input type="button" value="按钮" data-abc="123" id="btn" data-show-index="456">
alert(this.dataset.showIndex);
<input data-a-b-c-d="888">

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，反选