html5 (新一代的html)

简介

h5的新特性:

cavas / video / audio / cache / element / form

最小的h5文档:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文档内容...

</body>

</html>

8个语义元素:

header, section, footer, aside, nav, main, article, figure

IE浏览器兼容方案: 引入 html5shiv

<script

src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

cavas, 用JS绘制图形

示例:

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

参考手册: http://www.shouce.ren/api/view/a/654

svg, 用 XML 描述 2D 图形

示例:

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

与cavas比较:

不依赖分辨率;

支持事件处理器;

适合大型渲染区域;

不适合游戏应用'

drag, 拖放元素

示例: http://www.shouce.ren/study/api/s/2992

geolocation, 地理定位

h5新元素

参考手册: http://www.shouce.ren/api/view/a/1509

video/audio

input类型

新增的输入类型:

color、date、datetime、email、month、number、range、

search、tel、time、url、week

参考手册: http://www.shouce.ren/api/view/a/312

新表单元素

datalist: 规定输入域的选项列表

</datalist>

keygen: 提供一种验证用户的可靠方法

用户名: <input type="text" name="usr_name">

加密: <keygen name="security">

</form>

output: 不同类型的输出, 比如计算或脚本输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50"> 100

+ <input type="number" id="b" value="50">

= <output name="x" for="a b"></output>

</form>

表单属性

一、form属性

autocomplete: on或off, 表示自动完成

novalidate: 布尔值, 表示提交时不验证表单

二、input属性

autofocus	布尔值, 设置此域自动获得焦点
form	规定此域所属的一个或多个表单
formaction	规定此域提交表单的URL地址 (会覆盖form元素的action属性; 与type=submit一起使用)
formenctype	规定表单提交到服务器的数据编码 (只对method=post有效; 会覆盖form元素的enctype属性; 与type=submit一起使用)
formmethod	规定表单提交的方式 (会覆盖form元素的method属性; 与type=submit一起使用)
formnovalidate	布尔值, 规定表单在提交时无需被验证 (会覆盖form元素的novalidate属性; 与type=submit一起使用)
formtarget	规定提交表单后的展示方式 (会覆盖form元素的target属性; 与type=submit一起使用)
width / height	规定图像的宽度和高度 (只用于type=image)
list	规定输入域的datalist (详见: 新表单元素 > datalist)
min / max	规定此域的最小和最大值 (只用于date/number/range标签)
multiple	布尔值, 规定此域可选择多个值 (只用于email/file)
pattern	定义一个正则表达式用来验证此域的值 (只用于 text, search, url, tel, email, 和 password)
placeholder	描述此域所期待的值, 即提示用户应该输入什么
required	布尔值, 规定此域不能为空值
step	规定合法的数字间隔 (只用于 number, range, date, datetime, datetime-local, month, time 和 week)

语义元素

6个元素, 一幅图足以了解:

figure: 表示独立的流内容 (图像、图表、照片、代码等)

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

示例代码:

<figcaption>Anything</figcaption>

</figure>

web存储

localStorage: 没有时间限制的数据存储, 只要不删除将会一直存在

sessionStorage: 针对一个session的数据存储, 浏览器关闭后此数据立即被清除

数据以键值对进行存储!!

检查浏览器是否支持:

if(typeof(Storage)!=="undefined"){

//yes...

} else {

//no...

}

示例:

localStorage.lastname="Smith";

应用程序缓存

作用: 缓存web应用, 当在没有因特网连接时仍然可以进行访问.

优势:

1. 离线浏览

2. 访问速度

3. 减少服务器负载

用法:

1. 在文档的<html> 标签中包含 manifest 属性

2. manifest文件扩展名建议是: .appcache

3. mainfest是简单的文本文件: 告知浏览器应该要/不要缓存哪些内容

示例:

demo.html

<!DOCTYPE HTML>

...

</html>

demo.appcache

CACHE MANIFEST

/theme.css

/logo.gif

NETWORK:

FALLBACK:

/html/ /offline.html

示例解释:

1. 可以 * 代表所有文件

2. NETWORK 规定不缓存的文件

3. FALLBACK 规定离线时, 用offline.html替代 html 目录中的所有文件

4. 以 "#" 开头的是注释行

5. 第一行 CACHE MAINFEST 后面没有冒号

缓存效果:

web worker

运行在后台的 JavaScript

最佳使用场景:

1. 执行一些开销较大的数据处理或计算任务;

2. worker会在后台另外开辟一个线程来执行js代码 (因为js计算过程中, 不能响应UI, 这样会对用户体验造成很大影响).

worker线程分为两种:

dedicated worker 和 shared worker, 可在chrome调试器中查看

示例代码:

Main线程代码

<!DOCTYPE html>

<html>

<head>

$(function(){

$("#btn").click(function(){

var worker = new Worker("work.js");

worker.addEventListener("message", function(e){

console.log(e.data);

}, false);

worker.postMessage(3000);

});

</script>

</head>

<body>

<form>

</form>

</body>

</html>

work.js代码

addEventListener("message", function(e){

var date = new Date();

var d = null;

do {

d = new Date();

} while ( d - date < e.data )

postMessage(d); //三秒钟后返回信息

}, false);

error事件:

worker.addEventListener("error", function(evt){

alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename);

}, false);

终止worker:

worker.terminate();

优化worker:

1. 把参数进行序列号, work.postMessage(JSON.stringify(data));

2. 采用二进制的存储方式

var imageData = context.createImageData(img.width, img.height);

var int8s = new Int8Array(imageData.data);

server-sent event

服务器发送事件, 即网页自动获取服务器的更新.

示例代码:

index.html

<!DOCTYPE html>

<html>

<head>

$(function(){

if (typeof(EventSource) !== "undefined") {

var source = new EventSource("sse.php");

source.addEventListener("message", function(event){

document.getElementById("result").innerHTML += event.data + "<br>";

}, false);

} else {

//sorry.

}

});

</script>

</head>

<body>

</body>

</html>

sse.php

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

header('Connection: keep-alive');

$time = time();

echo "data: The server time is: {$time}\n\n";

flush();

web sql

h5数据库操作

示例代码:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

var msg;

db.transaction(function(tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');

tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');

msg = '<p>Log message created and row inserted.</p>';

document.querySelector('#status').innerHTML = msg;

});

db.transaction(function(tx) {

tx.executeSql('SELECT * FROM LOGS', [],

function(tx, results) {

var len = results.rows.length,

msg = "<p>Found rows: " + len + "</p>";

document.querySelector('#status').innerHTML += msg;

for (i = 0; i < len; i++) {

msg = "<p><b>" + results.rows.item(i).log + "</b></p>";

document.querySelector('#status').innerHTML += msg;

}

null);

});

</script>

;

html5 (新一代的html)的更多相关文章

HTML5 学习总结（三）——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
HTML5简介
HTML5简介 HTML5是HTML的最新修订标准.2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成. HTML5的设计目的是在移动设备上使用多媒体. HT ...
html和html5详解
最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对"XP系统" ...
HTML5 学习笔记（三）——本地存储
目录一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
HTML5定稿
HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了本文转载自: http://www.cnblogs.com/tuyile006/p/4103634.html ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
基于HTML5的WebGL电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...
HTML5 ——本地存储
目录一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
基于HTML5的电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...

随机推荐

又见The request sent by the client was syntactically incorrect ()
前几天遇到过这个问题(Ref:http://www.cnblogs.com/xiandedanteng/p/4168609.html),问题在页面的组件name和和注解的@param名匹配不对,这个好 ...
Visual Studio 2015 Update 1 安装到最后 KB3022398 错误解决方法
最后一步遇到一个错误的确让人心寒只是我们还是得一步步解决.别去卸载重装.太费时首先打开 regedit 注冊表,依次进入: 1:HKEY_LOCAL_MACHINE\SOFTWARE\Micros ...
Odoo 11 Backend
Table of Contents 命令入口服务器启动server thread 模式 prefork 模式 gevent模式 wsgi 应用响应客户端请求 xmlrpc web http路由 ...
初探J2EE
还记得在技术交流会上八期给我们讲的J2EE,当时就是云里来屋里去.留在自己脑子中的仅仅有两个字"规范",其他的真是一无全部. 可是如今学了后,又在脑子里留下了两个字"规范 ...
iOS项目开发之Socket编程
有一段时间没有认真总结和写博客了前段时间找工作.进入工作阶段.比较少静下来认真总结,现在静下心来总结一下最近的一些心得前言 AsyncSocket介绍 AsyncSocket详解 AsyncSoc ...
当半年不碰的webpack + vuejs项目重见天日时遇到的神坑！
半年前的Vuejs项目,由于webpack环境一直是1.0的(现在是webpack4.0),倒不是说不会升级或者不敢升级. 总而言之.在我再次启动这个项目时: npm run dev / npm ru ...
mysql中把字符串转成时间戳进行对比
::") ");
Atitit. Atiposter 发帖机版本历史编年史
Atitit. Atiposter 发帖机版本历史编年史 V1 初步实现sina csdn cnblogs V2 实现qzone sohu 的发帖功能顺便重构接口实现分离 V3多文件循环发帖 ...
MBA人物俞洪敏：亿万富翁的生活表
我的智商非常一般,就是比别人勤奋.我的脑袋不属于特别笨的那种,但肯定也不是顶尖聪明的类型.在北大的50个同学当中,我的智商应该属于中下水平,这说明我不是顶尖高智商. 我的勤奋一般人跟不上.我平均每天工 ...
常用PhpStorm 快捷键
函数列表打开某一个源码文件后,保证鼠标焦点在源文件内,按键盘组合键: alt + 7 返回原文件导航:双击最上面的工程名即可 PhpStorm折叠文件内所有函数按下快捷`Ctrl`+`Shift` ...

html5 (新一代的html)

html5 (新一代的html)的更多相关文章

随机推荐

热门专题