HTML5 | 吕神的自我修养

超绚丽的HTML5地图分布动画

2018.09.20

之前我们分享过不少HTML5地图插件，有很多种类型，但大部分都是数据统计类型的。这次要分享同样也是一款基于HTML5的地图应用，但它不同的地方在于它主要是在地图上实现分布动画，可以利用这款插件实现各个地区之间的客流流向，给人非常直观的数据展现。

阅读详细 »

html5shiv.js的作用 – 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签问题。

2016.12.13

HTML5增加的语义元素，
在最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。
Internet Explorer 9 将支持某些 HTML5 特性。
针对IE6|IE7|IE8 不支持HTML5新增加的语义元素。
在IE6|IE7|IE8 环境下，给HTML5新增加的语义元素写CSS，没有作用。
解决方法：
在head中引用，一定要在head中引用！！！一定要在head中引用！！！一定要在head中引用！！！重要的事情说三遍。

<!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>

然后在CSS中加入下面代码：

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

—————————–
如果http://html5shiv.googlecode.com/svn/trunk/html5.js文件访问不了，你也可以把下面代码复制粘贴新建一个html5.js文件
html5.js文件内容：

(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

引用<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
也可以替换为：

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

关于工作原理可以读读这篇文章：
http://www.jb51.net/html5/151265.html

—————————–
HTML5 的改进主要集中在一下几个方面：

1.新元素

2.新属性

3.完全支持 CSS3

4.Video 和 Audio

5.2D/3D 制图

6.本地存储

7.本地 SQL 数据

8.Web 应用

HTML5添加了很多语义元素如下所示：

标签描述

<article> 定义页面独立的内容区域。

<aside> 定义页面的侧边栏内容。

<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command> 定义命令按钮，比如单选按钮、复选框或按钮

<details> 用于描述文档或文档某个部分的细节

<dialog> 定义对话框，比如提示框

<summary> 标签包含 details 元素的标题

<figure> 规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 定义 <figure> 元素的标题

<footer> 定义 section 或 document 的页脚。

<header> 定义了文档的头部区域

<mark> 定义带有记号的文本。

<meter> 定义度量衡。仅用于已知最大和最小值的度量。

<nav> 定义导航链接的部分。

<progress> 定义任何类型的任务的进度。

<ruby> 定义 ruby 注释（中文注音或字符）。

<rt> 定义字符（中文注音或字符）的解释或发音。

<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<section> 定义文档中的节（section、区段）。

<time> 定义日期或时间。

<wbr> 规定在文本中的何处适合添加换行符。

HTML5的FileReader接口封装 – FileReader.js

2015.02.07

FileReader.js 封装了 HTML5 的 FileReader interface ，使用上更加简单。

浏览器支持：

Internet Explorer: 10+
Firefox: 10+
Chrome: 13+
Opera: 12+
Safari: partial

var opts = {
    dragClass: "drag",
    accept: false,
    readAsMap: {
        'image/*': 'DataURL',
        'text/*' : 'Text'
    },
    readAsDefault: 'BinaryString',
    on: {,
        beforestart: function(e, file) {
        	// return false if you want to skip this file

    	},
        loadstart: function(e, file) {
        	// Native ProgressEvent

    	},
        progress: function(e, file) {
        	// Native ProgressEvent

    	},
        load: function(e, file) {
        	// Native ProgressEvent

    	},
        error: function(e, file) {
        	// Native ProgressEvent

    	},
        loadend: function(e, file) {
        	// Native ProgressEvent

    	},
        abort: function(e, file) {
        	// Native ProgressEvent

    	},
        skip: function(e, file) {
        	// Called when a file is skipped.  This happens when:
        	// 	1) A file doesn't match the accept option
        	// 	2) false is returned in the beforestart callback
    	},
        groupstart: function(group) {

    	},
        groupend: function(group) {

    	}
    }
};

项目主页：http://www.open-open.com/lib/view/home/1338651006609

扩展阅读：

html5将图片转换base64进行上传、解决微信内置浏览器上传图片问题
 HTML5学习之FileReader接口
 HTML5的FileReader接口封装 – FileReader.js

HTML5学习之FileReader接口

2015.02.07

用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

3、FileReader接口的使用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5学习之FileReader接口</title>
</head>

<body>
<script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");

//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
    //使选择控件不可操作
    file.setAttribute("disabled","disabled");
}

function readAsDataURL(){
    //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("看清楚，这个需要图片！");
        return false;
    }
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML='<img src="' + this.result +'" alt="" />';
    }
}

function readAsBinaryString(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以二进制形式读入页面
    reader.readAsBinaryString(file);
    reader.onload=function(f){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML=this.result;
    }
}

function readAsText(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以文本形式读入页面
    reader.readAsText(file);
    reader.onload=function(f){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML=this.result;
    }
}
</script>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onClick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onClick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onClick="readAsText()" />
</p>
<div id="result" name="result"></div>
</body>
</html>

扩展阅读：

html5将图片转换base64进行上传、解决微信内置浏览器上传图片问题
 HTML5学习之FileReader接口
 HTML5的FileReader接口封装 – FileReader.js

html5将图片转换base64进行上传、解决微信内置浏览器上传图片问题

2015.02.07

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5将图片转换base64进行上传、解决微信内置浏览器上传图片问题</title>
</head>

<body>
<script>
function readFile(obj){   
        var file = obj.files[0];      
        //判断类型是不是图片  
        if(!/image\/\w+/.test(file.type)){     
                alert("请确保文件为图像类型");   
                return false;   
        }   
        var reader = new FileReader();   
        reader.readAsDataURL(file);   
        reader.onload = function(e){   
                alert(this.result); //就是base64  
   
        }   
}   
</script>
<input type="file"  id="picFile" onchange="readFile(this)" />   
</body>
</html>

扩展阅读：

html5将图片转换base64进行上传、解决微信内置浏览器上传图片问题
 HTML5学习之FileReader接口
 HTML5的FileReader接口封装 – FileReader.js