一发展历史
1991年出现html，只能简单把网页上传到网站上。
1996年出现了JS和CSS极大美化了网页。
在这儿阶段，html一直没有发展，一直到2009年W3C正式推出H5的草案。
2014年在移动端大力发展，越来越普及的时期，H5在移动端逐步推广开来。
H5的前身是web application 其实H5=css+html+javacript API
只是在原有的基础上的一个提升。是新一代的富客户端应用程序交互的语言。什么是富客户端是具有很强的交互性和用户体验的客户端应用程序。
二应用范围
作用于网页，使得网页更加具有表现力。
PC端比如百度脑图、iclound
APP端
wechat端
简单小游戏
三、H5中增加了什么样子的新的元素
首先是HTML上的变化
1、增加标签使得网页更加具有语义化。<head> <nav> <footer><section> <articel>等都会被看成一个标签。让网页的结构加具有可读性。更有利于SEO的优化。
2、增加新的属性
自定义属性 data-
1.1 可以给HTML里的所有DOM对象都可以添加一些DATA-xxx的属性
1.2 用来记录与当前DOM强相关的数据
有链接关系的描述
音频和视频 <audio><video> 不用依赖第三方的插件完成视频的播放。
ARIA指的是无障碍网页应用技术 给残障人士 准备的让网页在屏幕阅读器下具有很强的可读性。
智能表单
Canva
SVG 可缩放的矢量图形1. iframe
1. iframe的作用就是在网页中挖个坑，在这个坑里再展示一个页面
1.1 svg本身也是文档 所以可以使用iframe的方式载入
1.3 ajax 直接可以修改样式
2D和3D
其次是JS中的变化
1、核心平台 增加新的标签 访问历史API 全屏API
2、网页存储 Appication localstorage sessionStorage webSQL indexedDB
3、设备访问信息 网络状态 硬件访问 设备方向
4、文件 文件系统API
5、网络访问 XMLHtttprequest websocket 桌面通知
最后是CSS上面的提升
1、web Fonts shadows
2、borde image Text style .etc
三、HTML上的提升
###1.1标签上的变化
###1.1.1应用程序标签dataList progress mater数值显示器
<progress></progress>
<!-- 进度条默认最大值是一 --><progress class="my-progress" value="10" max="10"></progress>
<meter min="50" max="100" low="40" high="90" optimum="500" value="91">A+</meter>
</body>
###1.1.2链接关系
<body>
<!-- 通过链接关系属性声明连入的链接和当前文档之间的关系 -->
<a href="02-appliction-tags.html" rel="prev">上一页</a>
<a href="02-xxx.html">next</a>
<a href="02-xxx.html">xxx</a>
<a href="02-xxx.html">3333</a>
</body>
###1.1.3自定义属性
<script>
// 键是ID 值是信息
var data = {
01: {
name: "张三1",
age: 18
},
02: {
name: "张三2",
age: 19
},
03: {
name: "张三3",
age: 20
}
};
// jQuery操作一定要做变量本地化
var list = document.getElementById('list');
for (var id in data) {
var item = data[id];
var liElement = document.createElement('li');
// liElement.innerHTML = item.name;
liElement.appendChild(document.createTextNode(item.name));
liElement.setAttribute('data-age', item.age);
liElement.setAttribute('data-id', item.id);
list.appendChild(liElement); // 变量本地化
// 此处才将元素加到界面上
liElement.addEventListener('click', function() {
// alert(this.name);
// this 是当前点击的元素
// alert(this.getAttribute('data-age'));
console.log(this.dataset['age']);
});
}
</script>
###1.1.4z智能表单
<form action="#" method="">
<input type="text">
<input type="image" src="toy.png">
<input type="submit">
<!-- file text password radio checkbox button image submit reset select button -->
<input type="date">
<input type="color">
<input type="range" min="0" max="10" step="5" value="5">
<hr>
<input type="text" required>
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="search" results="10" placeholder="Search...">
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">
</form>
###1.1.5网页多媒体不用依赖第三方用浏览器内部就能播放音频和视频
音乐播放<audio src="music.mp3" controls="controls" 
id="audio"></audio>
获取audio元素 var audio=document.getElementById("audio");
audio.palY();audio.pause();控制音频的播发和暂停
<video controls="controls" poster="top.png" autoplay="autoplay"></video>
<source src="../html5/demo/html/movie.ogg"></source>
<source src="fun.mp4"></source>
<object type="application/x-shockwave-flash" data="http:/static.youku"></object>
video中套着<object> 是把网页中最为精彩的一页面放置在首页位置，使得我们已进入就能够看到的画面。
###1.1.6SVG图片
<ifame>是以文件的形式把SVG图片导入到网页中。
<iframe src="demo.svg" frameborder="0"></iframe>
可以用标签<iframe>包裹SVG 图片就相当于在网页中挖了一个坑。把图片放进去。
<object>是载入第三方媒体的意思。
<object data="demo.svg" type=""></object>
<svg data-src="demo.svg"></svg>
<script src="jquery.js"></script>
<script>
window.addEventListener('load', function() {
var svgs = document.getElementsByTagName('svg');
for (var i = 0; i < svgs.length; i++) {
// SVG也是文档所以可以载入ifame中。
// console.log(svgs[i].dataset);
var src = $(svgs[i]).data('src');
// 向服务器发送请求 得到svg
$.get(src, function(data) {
var el = data.documentElement;
$(document.body).append($(el));
});
}
});
</script>
四、 JavaScript
###2.1. 基础API提升
###2.1.1 新选择器
JS多了一个原始支持，类似jqueryDOM选择器
document.getElementById() 需要给DOM元素设置ID
document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素
document.getElementsByTagName()
document.querySelectorAll('.item')
$('.item').on
1. document.querySelector(selector);
2. 返回第一个满足选择器条件的元素 一个dom对象
3. document.querySelectorAll('.item');
4. 返回所有满足该条件的元素 一个元素类型是dom类型的数组
5. $('.item')
6. 返回一个jQuery对象（dom元素的数组）
7. 本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员
8. DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册
9. h5就是将我们经常需要的操作又包装一层
###2.1.2 元素.classList
1. 新H5中DOM对象多了一个classList属性，是一个数组
2. add 添加一个新的类名
3. remove 删除一个的类名
4. contains 判断是否包含一个指定的类名
5. toggle 切换一个class element.toggle('class-name',[add_or_remove])
6. toggle函数的第二个参数true为添加 false删除
### 2.1.3 访问历史 API
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态
在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态
1. window.history.forward(); // 前进
2. window.history.back(); // 后退
3. window.history.go(); // 刷新
4. 通过JS可以加入一个访问状态
4. history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)， 改变历史状态)
<body>
<input type="button" value="前进" οnclick="qianjin()">
<input type="button" value="后退" οnclick="houtui()">
<input type="button" value="刷新" οnclick="refresh()">
<script>
function qianjin() {
window.history.forward();
}
function houtui() {
window.history.back();
}
### 2.1.4 全屏 API
> JavaScript中可以通过调用requestFullScreen()方式实现指定元素的全屏显示
> var element = document.querySelector('...');
> element.requestFullScreen();
>
## 2.2 网页存储
### 2.2.1 Web Storage
有localstorage本地存储。是永久存储数据除非手动删除。
而seessionStorage是临时的存储，是在浏览器推出之后就会消失。存储的本质是在我们离线的情况下依然能够访问一些数据。
<body><textarea id="txt_value" cols="80" rows="10"></textarea>
<input type="button" value="SET" id="btn_set">
<input type="button" value="GET" id="btn_get">
<script>
var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click', function() {
// txtValue.value = sessionStorage.getItem('key1');
if (window.sessionStorage)
txtValue.value = sessionStorage.getItem('key1')
// txtValue.value = sessionStorage['key1'];
});
btnSet.addEventListener('click', function() {
// sessionStorage.setItem('key1', txtValue.value);
sessionStorage['key1'] = txtValue.value;
});
</script>
1. getItem方式获取一个不存在的键 返回空字符串
2. []返回 undefined
### 2.2.2 Web SQL
### 2.2.3 IndexedDB
## 2.3 文件系统
### 2.3.1 File API
### 2.3.2 FileReader
## 2.4 拖放操作
### 2.4.1 网页内拖放
### 2.4.2 文件拖入
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
