1.html5主要的设计目的：

互联网语义化，以便更好地被人类和机器阅读

更好的在移动设备上支持web应用

https://www.w3.org/TR/html5

新增内容：

    新的语义标签

    <header>、<footer>、<article>、<nav> ....

    新增表单控件(标签)

    data 、time 、email 、url 、number ...

    新增视频/音频标签

    video 、audio

    新增画布标签

    canvas

    更好支持本地离线数据存储

二

    新的语义标签

    <section> 定义页面中的区域

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

三

    新增输入input标签

    <label for="userEmail">

            输入邮件：

            <input type="email" name="userEmail" id="userEmail" required>

        </label>

        <input type="number" name="age" min="1" max="200">

        color

        tel

        url

        data

        range

    补充一下label的用法：有for属性，需要添加id

                        或者直接不要for属性，包裹元素

四

    video标签

    使用方式：1.

    <video src="video.mp4" controls>

        您的浏览器不支持

    </video>

    2.

    <video width="600" height="350" controls>

        <source src="video.mp4" type="video/mp4"

        <source src="video.webm" type="video/webm"

        <source src="video.ogg" type="video/ogg"

        您的浏览器不支持html5 video

    </video>

    video 标签属性

    src 设置视频url

    controls  是否显示播放按钮（菜单）

    autoplay 视频显示后，自动播放

    loop   是否循环播放

    muted 视屏静音

    height

    width

JS中控制视屏播放

<video id="movie">

var movie = $("#movie");

movie.play() 播放

movie.pause() 暂停

//监听事件 开始播放的时候触发

movie.onplay=function(){

}

movie.onplay=function(){

}

movie.onend=function(){

}

五、audio 音频

    MP3, type:mpeg

    wav, type:wav

    ogg  type ogg

六、本地存储 WebStorage

cookie本地限制存储限制

1.不同浏览器对Cookie大小限制不同，大多数浏览器支持最大为4094（4k)的Cookie数据。

2.浏览器会限制网站可以在用户计算机上存储的Cookie的数量，大多数浏览器只允许每个20个cookie,

如果试图存储更多的Cookie,则最旧的Cookie便会被丢弃。

3.部分浏览器会对其接受的来自所有站点的Cookie 总数做出限制，通常为300个。

html5 本地存储数据通常大小限制在5M（不同浏览器大小限制不同）

1.Local Storage 永久性的本地存储，没有时间限制。（持久化本地）

2.Session Storage:会话级别的本地存储（内存方式存储），关闭浏览器后，数据消失

3.Local Database:支持SQL的本地数据库

LocalStorage Session Storage

setItem(key,value),添加

getItem(key)//获取z值

clear()

key(0) //获得下标为0的key

removeItem(key)

七、canvas

在web绘制图形（基于js）

应用领域：制作Web游戏

         绘制统计图标

         字体设计

         图形编辑器

         echart.js

canvas 编程的方法

定义：<canvas id="" height="" width="">

    你的浏览器不支持...canvas标签

</canvas>

画图形，写文字，加载图片

写一个canvas的例子：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	</style>

</head>

<body>

	<canvas id="canvasDemo" width="700" height="500" style="border:1px solid #000">

		你的浏览器不支持canvas

	</canvas>

	<script>

		var canvasDemo = document.getElementById("canvasDemo");

		var context = canvasDemo.getContext('2d');

			//起点

			context.moveTo(0,0);

			//终点

			context.lineTo(100,200);

			//颜色

			context.strokeStyle = "red";

			//宽度

			context.lineWidth = 5;

			//开始绘制

			context.stroke();

			//绘制正方形

			context.fillStyle = 'green';

			context.fillRect(200,200,400,200);

			context.beginPath();

			context.arc(600,300,60,90*Math.PI/180,270*Math.PI/180);

			context.strokeStyle = "white";

			context.fillStyle = 'white';

			context.fill();

			context.stroke();

			context.closePath();

	</script>

</body>

</html>

　　运行显示：

　　

html5特性简要概括的更多相关文章

  1. css3特性简要概括

    ---恢复内容开始--- css3新增核心知识 背景和边框 文本效果 2d/3d转换 过渡和动画 多列布局 弹性盒模型 媒体查询 增强选择器 css3浏览器兼容性 css3在线工具 css3gener ...

  2. HTML5特性速记图

    今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.

  3. SharePoint 2013 的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  4. SharePoint 2013的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  5. HTML5特性检測

    HTML5特性检測:    1.检測全局对象:诸如window或navigator是否拥有特定的属性    2.创建元素:检測该元素的DOM对象是否拥有特定的属性    3.创建元素:检測该元素的DO ...

  6. ExtJS的4.1新特性简要介绍

    ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...

  7. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  8. 哪些HTML5特性值得期待

    首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...

  9. HTML5 CSS3简要教程

    Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和& ...

随机推荐

  1. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  2. php单例模式的常见应用场景

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  3. Alfresco的安装配置(Centos6系统中安装)

    Alfresco是一款开源的企业内容管理系统(ECMS),为企业提供了日常的文档管理.协同工作.工作记录管理.知识管理.网络内容管理.图片管理等多种功能. Alfresco是目前应用最广泛的开源企业知 ...

  4. orcale 11g安装，创建表空间，用户，授权用户

    一.卸载旧oracle 用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢?那就是直接注册表清除,步骤如下: 1. 开始->设 ...

  5. apache和tomcat的关系

    apache和tomcat的关系: 举个例子:apache是一辆卡车,上面可以装一些东西如html等.但是不能装水,要装水必须要有容器(桶),tomcat就是一个桶(装像JAVA这样的水),而这个桶也 ...

  6. linux基本指令梳理

  7. IT技术团队的管理幅度

    一.先科普下 管理幅度,又称管理宽度,是指在一个组织结构中,管理人员所能直接管理或控制的员工数目.这个数目是有限的,当超这个限度时,管理的效率就会随之下降. 二.经历现状 20左右的中小型团队,不算大 ...

  8. Redis 中 byte格式 写入、取出

    实体类: package com.nf.redisDemo1.entity; import java.io.Serializable; public class News implements Ser ...

  9. Struts2获取request的几种方式汇总

    Struts2获取request三种方法 struts2里面有三种方法可以获取request,最好使用ServletRequestAware接口通过IOC机制注入Request对象. 在Action中 ...

  10. 修改从Maven中心仓库下载到本地的jar包的默认存储位置及远程仓库

    从Maven中心仓库下载到本地的jar包的默认存放在”${user.home}/.m2/repository”中,${user.home}表示当前登录系统的用户目录(如"C:\Users\g ...