HTML5 - Websocket
关键词：
HTML5
网络通讯协议
并肩HTTP
基于TCP
客户端与服务器 全双工通讯
双向数据传输
实现长链接、持久性链接
HTTP是非持久性
总结：
Websocket是一种在单个TCP连接上进行全双工通讯的协议，他能够允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两 ...
HTML5的Video标签的属性,方法和事件汇总
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。
<video>标签的属性##
src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播 ...
基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检
前言
这次为大家展示的是通过 HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统。通过 HTML5 技术实现了桌面和移动端的跨平台性，同时现实了可视化运维。
这次主要跟大家分享里面的漫游巡检功能，完美进行第一人称视角体验整体结构环境，酷似游戏一样给人一种真实的感受，比平面更加直观，随意游离与虚拟 ...
html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件
embed是针对非IE的浏览器的媒体播放器
video是html5出的一种新标准，但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型，但常用的只有mp4。
像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, ...
HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOS ...
html5新特性总结
html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage
十、WebSocket
一、语义标签
html5语义标签，可以使开发者更方便清晰构建页面的布局
标签
描述
<hea ...
HTML5中使用EventSource实现服务器发送事件
在HTML5的服务器发送事件中，使用EventSource对象可以接收服务器发送事件的通知。
示例：
es.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
7 <script src="https://cdn ...
HTML5中的Web Worker技术
为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其 ...
html5 datalist 选中option选项后的触发事件
参考博客: https://blog.csdn.net/qishuixian/article/details/78427951
最近一段时间用到了html5中datalist, 对选择的option选项获取对应的属性值.
<!DOCTYPE HTML>
<html>
<body>
<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascri ...
HTML5&CSS挑战
地址：https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp
开始学习HTML标签：欢迎来到编程训练营的第一个编程挑战！你可以在文本编辑器中编辑我们嵌入到此网页中的代码。界面说明：左边是课程内容区、中间是代码编辑区、右边是运行显示区。你在文本编辑器中看到代码 <h1>Hello</h1> 了吗?这是一个HTML 元 ...
Html5离线缓存详细讲解
实例 - 完整的 Manifest 文件
1,什么是应用程序缓存（Application Cache）
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
离线缓存：
离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，
将需要的文件缓存 ...
HTML5--canvas与svg的使用
一、Canvas
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些 ...
html5 canvas 自定义画图裁剪图片
html5 给我们带来了极大惊喜的canvas标签，有了它我们可以在浏览器客户端处理图片，不需要经过服务器周转。可以实现：
1、照片本地处理，ps有的一些基本功能都有
2、结合js可以实现一些很炫的动画效果
这篇文章实现一个微信上发图片消息的效果最终效果图：
下面我们先介 ...
Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
概述
浏览器窗口有一个history对象，用来保存浏览历史。
如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3。
history.length // 3
history对象提供了一系列方法，允许在浏览历史之间移动。
back()：移动到上一个访问页面，等同于浏览器的后退键。
forward()：移 ...
HTML5--语法
一、标记方法
1、内容类型（ContentType）还是.text/html
2、声明：<!DOCTYPE html SYSTEM “about:legacy-compat”>
3、字符编码：<meta charset="UTF-8" >
二、语法三要点：
1、可以省略标签的元素：
（1）不允许写技术标记的元素，即只能写成<元素/>形式：area、base、br、col、command、embed、hr、img、i ...
HTML5的理解
先说说什么是HTML?
HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。
页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”部分（英语：Head）、和“主体”部分（英 ...
HTML5 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
#box {
width: 500px;
height: 300px;
overflow-x: hidden;
...
基于 HTML5 WebGL 的挖掘机 3D 可视化应用
前言
在工业互联网以及物联网的影响下，人们对于机械的管理，机械的可视化，机械的操作可视化提出了更高的要求。如何在一个系统中完整的显示机械的运行情况，机械的运行轨迹，或者机械的机械动作显得尤为的重要，因为这会帮助一个不了解这个机械的小白可以直观的了解机械的运行情况，以及机械的所有可能发生的动作，对于三 ...
小程序与HTML5的区别
小程序与传统HTML5还是有明显的区别，主要区别在于：
开发工具不同：
区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。
开发语言不同：
小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的H ...
HTML5中的Blob对象的使用
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型，这相当于对文件的储存，其它很多二进制对象也是从这个对象继承的。
在稍低版本的现代浏览器中，这个Blob对象还没规范化，因此需 ...
