标签兼容问题
IE9+
低版本解决方法：
// 1 设置display:block，创建这个标签
document.creatElement("header");
// 2 引入html5shiv.js
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
语义化标签
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
- <figure> 规定独立的流内容（图像、图表、照片、代码等等）
- <figcaption> 为 <figure>元素定义标题，应该被置于<figure> 元素的第一个或最后一个子元素的位置
- <mark> 定义带有记号的文本,在需要突出显示文本时使用
- <canvas>
- <meter>
- <time>
- <iframe>
对<div>的使用的几点建议
- 如果你觉得用HTML5中的新的标签比用<div>合适就一定要用新的标签，因为<div>没有任何的语义，这个是HTML5所不倡导的；
- 如果效果需要的话可以在HTML5新标签的外面加一个<div>标签，这样对HTML中的语义不会产生太大的影响。
- 更多参见： https://segmentfault.com/a/1190000002695791#articleHeader4 http://www.jianshu.com/p/830321c3666d
多媒体
audio
<!--
controls: 音频控件
autoplay: 自动播放
loop: 循环
-->
<audio src="" controls></audio>
video
<!--
controls: 音频控件
autoplay: 自动播放
muted: google静音自动播放
loop: 循环
-->
<video controls>
<!-- 多种格式支持 -->
<source src="1.mp4">
<source src="1.ogg>
浏览器需要升级
</video>
表单
<!--
autocomplete="off": 关闭提示
novalidate: 关闭验证功能
-->
<form action="" method="get" id="fm" autocomplete="off">
<!-- 自动校验 -->
<!--
autofocus: 自动获取焦点
placeholder="": 提示信息
required: 不允许为空
-->
<input type="email" name="">
<input type="number" name="">
<input type="url" name="">
<input type="range" name="">
<input type="color" name="">
<input type="time" name="">
<input type="submit" name="">
</form>
<!--
form="[id]" 可随指定表单提交
list="id" 可提供表单提示数据列表
-->
<input type="text" name="" from="fm" list="url_list">
<datalist id="url_list">
<option value=""></option>
</datalist>
文件读取
FileReader 对象,读取文件的方法
- readAsBinaryString 读取为二进制编码
- readAsText 读取为文本
- readAsDataUrl 读取为DataUrl
提供的事件
- onabort 中断时
- onerror 出错时
- onload 读取成功时
- onloadend 读取完成，无论成功失败
- onloadstart 读取开始时
- onprogress 读取中
var f1 = document.querySelector("#f1");
f1.onchange = function(){
// 读取图片,首先创建FileReader对象
var imgRead = new FileReader();
// 获取到文件
imgRead.readAsDataURL(this.files[0]);
// 文件加载完之后
imgRead.onload = function(){
document.querySelector("#img").src = this.result;
}
// 读取文件
var fReader = new FileReader();
fReader.readAsText(this.files[0]);
fReader.onload = function(){
var result = fReader.result;
console.log(result);
}
}
地理定位
window.navigator.geolocation.getCurrentPosition(function(position){
// 得到positon对象
console.log(position + "定位成功");
console.log("经度" + position.coords.latitude);
console.log("纬度" + position.coords.longitude);
},function(msg){
console.log(msg + "定位失败");
});
本地存储
感兴趣可以看看我的笔记cookie、localStroage与sessionStroage
canvas
画一条线
// 获取画布
var can = document.querySelector("canvas");
// 获取绘图的对象
var line = can.getContext("2d");
// 起始坐标
line.moveTo(0,100);
line.lineTo(600,100);
// 颜色
line.strokeStyle = "red";
// 宽度
line.lineWidth = 10;
// 绘制
line.stroke();
其他
元素选择、类操作
// 元素选择
// document.querySelector() 获取第一个
// document.querySelectorAll() 获取第一个
var it = document.querySelector("div p");
// classList.add("") 添加类
// classList.remove("") 移除类
// classList.toggle("") 切换类
// classList.contains("") 是否包含类
it.classList.add("test")
自定义属性 data-*
<div id="dv" data-name="person"></div>
// 获取自定义属性对象
var dv = document.querySelector("#dv").dataset;
网络状态检测
var state = window.navigator.onLine;
if(state) {
console.log("在线");
}
// 联网触发
window.ononline = function(){};
// 断网触发
window.onoffline = function(){};
