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，反选
网友评论