html5相关
1.语义化标签：
header\section\aside\footer
2.音视频播放：
video\audio
其中video支持ogg\mpeg4\webm格式的视频；
3.canvas
一.画矩形：
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
二.画线条：
function drawShape(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
}
}
三.画曲线：
function drawShape(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
}
}
其中arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,y：圆心坐标
radius ： 半径
startAngle和 endAngle分别是起末弧度（以 x 轴为基准）
anticlockwise为 true表示逆时针，反之顺时针
4.一些新的input元素
html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
html5新的Input类型有：email , url , number , range , Date pickers(date,month,week,time,datetime,datetime-local) , search , color
input新增的一些属性：
autoconmplete
autoconmplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候，浏览器能把用户写过的值自动填写在相应的input框里。
autofocus
autofocus 可以赋值为 autofocus，也就是在页面加载完成的时候自动聚焦到这个input标签，自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果，至今为止的实现方法是用js。在页面加载完时执行聚焦操作，现在也被一个属性搞定了。
可以想象，一个页面至多只有一个input标签会设置 autofocus，否则必然不会达到预期效果。因为不可能同时聚焦在两个input上。
required
input的有一个强力新增属性，免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的，只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意：这里required属性是需要用户来填写的，所以TYPE是button、submit、reset等等不需要用户填写选择的类型是不可以使用这个属性的。
placeholder
这个新增属性也是非常使用，用在type= text email等等类型的时候，提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。
list属性
这个属性显示类似于百度搜索框那种联想框效果，也是非常实用的一个属性。
注意从这个属性使用的特点：需要有对应的datalist标签；datalist子标签option支持 value和lable两个属性；list的属性值要和datalist的id一致。
min\max属性
可以来限制数值范围，minheight、maxheight属性来限制字符串长度。这次maxlength终于有好朋友minlength了。
5.web storage
存储相关的主要是localStorage和sessionStorage.比较下web storage和cookie:
cookie的存储限制在了4k之内，相比来说，session storage有了更大的存储空间，但至于具体多大，这要参照具体浏览器。
cookie有一个机制，就是在每次客户端请求服务器的时候都会将cookie发送给服务器，这无疑会做很多不必要的操作，因为并不是每次请求服务器都需要cookie的所有信息，而session storage很好的解决了这个问题，它不是采取自动发送的方式，这样就减少了不必要的工作。
通过sessionStorage所存储数据的生命周期，和Session类似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
session storage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的。
setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数)，而是’16’(字符串)。
再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。
当存储中的数据发生改变时，会触发相应的事件（window.onstorage），但目前各浏览器对此事件的支持并不完善，暂时可以忽略。
关于microdata
<ul role="menubar"> <!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu"> <!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem">New</li>
<li role="menuitem">Open…</li>
…
</ul>
</li>
…
</ul>
html5相关的更多相关文章
- 推荐8款HTML5相关的特殊效果
HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaS ...
- html5相关知识点的总结（有一些错误或者不足的地方）
1.页面结构上的一些宽松改变 <!DOCTYPE html>默认为标准模式 <meta charset="UTF-8"> 2.html5中新增的一些语义化标 ...
- 学习笔记之html5相关内容
写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是 input的里面的 ...
- HTML5 相关扩展
一.与类相关的扩展 class属性的应用极其广泛,与class的相关的操作也越来越简化,HTML5增加了 getElementsByClassName来查找元素,通过也增加了classList属性,方 ...
- android Webview Html5 相关文章
Android WebView的使用集锦(支持Html5) http://blog.csdn.net/l_215851356/article/details/69239643 WebView详解与简单 ...
- HTML5相关文章和资源
Polyfills HTML5 Cross Browser Polyfills canvas HTML5 JS实现毛玻璃效果(高斯模糊) 高斯模糊的算法Canvas 内部元素添加事件处理 应用场景 P ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
随机推荐
- Hibernate与MyBatis区别
Hibernate是当前主流的ORM框架,对数据库结构提供了较为完整的封装. MyBatis同样也是非常流行的ORM框架,主要在于pojo与SQL之间的映射关系. 区别: 1.两者最大的区别 针对简单 ...
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- (C#) 调用执行批处理文件
Task: 在Windows的Service里面定时的调用执行一个批处理文件. private ApplicationOutput RunCommandOnPC(string executableP ...
- python （11）文件的读写 按行读文件
读文件: 读取文件 f = open('\info.txt') fil = f.read() f.close() 按行读文件: f = open("info.txt") while ...
- c#unity
using UnityEngine;using System.Collections; public class PacmanMove : MonoBehaviour { public float s ...
- JConsole connection failed
最近用jconsole本地连接eclipse失败 , 如下图 : 在eclipse.ini中添加如下代码即可 -Dcom.sun.management.jmxremote.port=9999-Dcom ...
- java多线程之死锁
产生死锁的条件: 1.有至少一个资源不能共享2.至少有一个任务必须持有一个资源并且等待获取另一个被别的任务持有的资源3.资源不能任务抢占4.必须有循环等待 只要打破其中一个条件就不会产生死锁,通常是打 ...
- Bugtags：移动时代首选 Bug 管理系统
Bug 管理系统之重 回想我们每次开启一个新项目,筹备之初,首要之事就是选择一款 Bug 管理系统.市面上有诸多 Bug 管理系统可供选择:Jira.Redmine.Bugzilla 等.这些系统功能 ...
- AngularJs在单击提交后显示验证信息.
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8& ...
- Codeforces 418d Big Problems for Organizers [树形dp][倍增lca]
题意: 给你一棵有n个节点的树,树的边权都是1. 有m次询问,每次询问输出树上所有节点离其较近结点距离的最大值. 思路: 1.首先是按照常规树形dp的思路维护一个子树节点中距离该点的最大值son_di ...