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. 最初级的ajax程序

    该文章实现的ajax功能是实现了在<span>上面添加内容 jsp代码 <html><head><title>Ajax</title>< ...

  2. mysql 索引和视图

    第五节:创建索引5.1 创建表的时候创建索引 CREATE TABLE 表名(属性名数据类型[完整性约束条件], 属性名数据类型[完整性约束条件], .... 属性名数据类型 [UNIQUE | FU ...

  3. 用VS2013进行调试

    首先新建一个简单的C++程序 打开VS2013-文件-新建-项目-选择Win32 控制台程序 添加-新建项-选择C++源文件 编写如下代码 #include<iostream> using ...

  4. PHP正则表达式-修饰符

    我们在PHP正则表达式的学习中会碰到修饰符,那么关于PHP正则表达式修饰符的理解以及使用我们需要注意什么呢?那么我们来具体的看看它的概念以及相关内容.在学习PHP正则表达式修饰符之前先来理解下贪婪模式 ...

  5. Swift iOS实现把PCM语音转成MP3格式

    最近折腾了swift的语音录制识别和转码,这块还是比较坑的,由于语音识别的准确度实测大概也就80%左右,所以还是需要上传录音文件啊.首先是用讯飞语音SDK实现语音录制和识别(语音听写),第一个坑是讯飞 ...

  6. Python——7列表生成式

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  7. C++走向远洋——59（项目三、图形面积、抽象类）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  8. Pandorabox固件路由器上申请Let's Encrypt证书，为内网里的多个web服务提供SSL支持

    对于家中宽带有公网IP的用户,有时我们需要将路由器内部网络的某些web服务通过端口转发暴露到外网(例如NAS远程访问),但HTTP是明文传输,有被监听的风险:如果在NAS上使用自签名证书,再端口转发, ...

  9. USB小白学习之路（2）端点IN/OUT互换

    端点2(out)和端点6(in)的out_in互换 注:这里的out和in都是以host为标准说的,out是host的out,在设备(Cy7c68013)这里其实是输入端口:in是host的in,在设 ...

  10. Docker实战之Zookeeper集群

    1. 概述 这里是 Docker 实战系列第四篇.主要介绍分布式系统中的元老级组件 Zookeeper. ZooKeeper 是一个开源的分布式协调服务,是 Hadoop,HBase 和其他分布式框架 ...