语义标签
-
<nav>网站导航块
-
<section>表示页面中的一个内容块
-
<article>表示页面中的一块与上下文不相关的内容块
-
<aside>元素表示当前页面或文章的附属信息部分
-
<header>表示页面中一个标题区域
-
<footer>底部标签
-
<hgroup>用于页面中与标题区域组合
-
<figure>一段独立的流内容
-
<address>用来在文档中呈现联系信息
新添元素
带标题的组合元素<figure><figcaption>
强调标签<mark>
软换行<wbr> 对中文无效，仅当浏览器不够显示内容时生效
进度条<progress min="0" max="100" value="" >
进度条<meter min="0" max="100" value="" low="20" high="60" optimun="0">
属性（度量）：low最低 high最高 optimun最优
细节信息<details>
配合<summary>标题
<details>
这里是内容
<summary>这里是标题</summary>
</details>
注音注释<ruby>
配合<rt>
删除的标签
<font> <center> <basefont> <big>
<s> <strike> <tt> <u>
<bgsound> <marquee> <applet> <rb>
<acronym> <dir> <isiindex> <xmp>
<nextid> <plaintext>
HTML5以后也不再支持框架了
添加的其他属性
在<ol>中添加了reversed属性，指定列表倒序显示
为<style>元素新添属性scoped,使这个style局部有效（火狐有效）
为<script>元素添加属性async，使js代码异步传输
注意：async只有使用src引入文件时有效
全局属性（所有标签有效）：
contentEditable是否可以编辑
hidden隐藏元素
spellcheck拼写检查（false/true）
自定义属性
在HTML中，允许为HTML元素自定义属性：data-，可以通过JS进行获取或者操作
<div data-id='1' id='a1' data-username='xiaoming'></div>var a1 = document.getElementById('id')
console.log(a1.getAttribute('data-id')多媒体播放
1. 嵌入视/音频
2. source,指定不同媒体来源
<audio src="./h5API/1.mp3" controls id="myaudio">您的浏览器不支持该播放器</audio>
<button onclick='next()'>下一曲</button>属性
src:播放文件的路径
width,height:播放控件的宽度和高度
controls:默认播放控制条是否显示
autoplay:自动播放
loop:循环播放
currentTime:当前播放时间 00:00/30:00
duration:文件总的播放时间
palyed:是否播放中
paused:是否暂停
playbackRate:设置视频的播放速度 1
方法：
play();播放
pause();暂停
canvas元素（画图）
canvas元素
属性 width height
兼容性元素内容
canvas配套API
获取canvas元素
var Mycanvas = document.getElementById('Mycanvas');
获取canvas元素操作上下文getContext对象
var c = Mycanvas.getContext("2d");
基本使用：
开始绘制：beginPath()
结束绘制：closePath()
清除画布：clearRect(x,y,width,height)
1.绘制线段
strokeStyle线条颜色
linwWidth线条粗细
moveTo(x,y)起始点
lineTo(x,y)经过点
stroke()绘制动作
2.绘制矩形
属性：fillStyle
涉及方法：fillRect(x,y,width,height)实心矩形
strokeRect(x,y,width,height)空心矩形
fill();
3.绘制圆弧
涉及方法：src(x,y,半径,弧度,顺逆时针)
x,y 圆心 弧度(0*Math.PI/180,180*Math.PI/180) 顺逆时针(true/false)
stroke();空心圆
fill();实心圆
4.绘制文字
属性：font='50px 微软雅黑'
涉及方法：strokeText(str,x,y);空心字
fillText(str,x,y);实心字
5.图像翻转
设计方法：
save()；//产生一个与原图相同的一个异次元空间
translate(x,y);设置旋转点
rotate(angle);设置弧度
restore();//把旋转后的异次元空间映入原图
6.绘制渐变图形
涉及方法:
var color = c.createLinearGradient(0,0,0,500);//创建渐变
color.addColorStop(0,"blue");
color.addColorStop(1,"yellow");//追加颜色
c.fillStyle=color;
c.fillRect(0,0,500,500);
js-cookie
//创建简单的cookie
Cookies.set('name','value');
//创建有效期为7天的cookie
Cookies.set('name','value',{expires:7});
//为当前页创建有效期7天的cookie
Cookies.set('name','value',{expires:7,path:''});
//准确时间
var date = new Date(new Date().getTime()+10000);//10秒
Cookies.get('name');//取值
//删除
Cookies.remove('name')
数据存储WebStorage
sessionStorage和localStorage
使用cookie的限制
1. cookies的大小被限制在4KB
2. cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽
3. 要正确操纵cookies是很困难的
WebStorage的两个目标是：
提供一种在cookie之外存储会话数据的途径
提供一种存储大量可以跨会话存在的数据的机制
Storage类型
Storage类型提供了大量的存储空间来存储键值对，Storage实例与其他对象类似，Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串。
Storage对象提供的方法
setItem(name,value) 为指定的name设置一个对应的值
getItem(name) 根据指定的名字name获取对应的值
removeItem(name) 删除由name指定的键值对
clear() 删除所有值;
key(index) 获得index位置处的值的名字
length Storage对象中，键值对的数量
拖放操作
第一步：设置可拖放属性draggable为true
第二步：根据需求选择拖放的事件进行处理（与click、change等事件用法相同）
新添事件
dragstart:开始拖放
drag:拖放中
dragenter:拖放中进入本元素
dragover:拖放中在本元素移动
dragleave:拖放中离开本元素
drop:放开移动元素
dragend:拖放结束
如果你想实现拖放过程，无论是否需要都要取消dragover事件的默认行为
document.ondragover =function(e){e.preventDefault();}
setData(mime_type,data);存储数据
getdata(mime_type);取出数据
属性：
effectAllowed 控制特效
none：被拖动的元素不能有任何行为。
copy：只允许值为”copy”的dropEffect。
WebMessage
当我们的需求为在HTML中内嵌的一个iframe框架，我们想要将主页面中的某个数据传递给iframe时，我们可以使用webMessage进行传递。
//a.html
//1.以 HTML 对象来返回 iframe 中的文档
//2.通过postMessage方法进行数据的传递
//3.需要通过window调用postMessage方法
iframe.contentWindow.postMessage(info.value,"http://127.0.0.1:5500");
//b.html
//添加一个事件监听器，检测是否有数据进行传递
window.addEventListener('message', function receiveMsg(e) {
console.log(e)//传递的数据
}, false);
websocket
当我们的需求为一个聊天室的应用，我们需要时刻知道是否有人发布了新的消息，一般情况下的解决方案：轮询和长连接。
轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
缺点：因为轮询需要在项目的使用过程中，每个一段时间就发送一个请求到后台（比如用户并没有发送新的消息，而轮询是一直在进行的），这样就导致了请求中有大半是无用，浪费带宽和服务器资源。
长连接：客户端项服务器端发起一个请求，服务器和客户端会保持连接。当有新的消息产生时，会将新的消息推送的给连接池（聊天室的所有用户）中的客户，而无消息的情况下，服务器端是不会有其它动作的。
缺点：因为一直保持连接的状态，也造成一部分的资源浪费。
//创建链接
var socket = new WebSocket("ws://127.0.0.1:7788/imserver/1001");
//接收消息
socket.onmessage = function (msg) {
$("#message").text("接收到后端消息:"+msg.data);
};
//发送数据
socket.send(str);
//关闭链接
socket.close();
//打开链接触发
socket.onopen = function () {
$("#message").text("websocket已打开");
};
//关闭事件触发
socket.onclose = function () {
$("#message").text("websocket已关闭");
};
//发生了错误事件触发
socket.onerror = function () {
$("#message").text("websocket发生了错误");
}
地图API
浏览器对定位的支持(火狐有效，谷歌需要https)
if (navigator.geolocation){ //检测是否支持地理定位
navigator.geolocation.getCurrentPosition(function(e){
console.log(e)//定位信息
});
} else{
console.log('error');
}
百度地图
<script type="text/javascript">
// 创建地图实例
var map = new BMapGL.Map("container");
// 创建点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//滚轮缩放
map.enableScrollWheelZoom(true);
//地球模式
map.setMapType(BMAP_EARTH_MAP);
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();
map.addControl(zoomCtrl);
// 添加城市列表控件
var cityCtrl = new BMapGL.CityListControl();
map.addControl(cityCtrl);
//定制功能
var loCtrl = new BMapGL.LocationControl();
map.addControl(loCtrl);
</script>
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
