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. FPGA 浮点定点数的处理

    大纲: 1浮点数的格式指定 2浮点数的运算(加法) 3浮点数加减法器的实现(难于乘除法器的实现)  1. 在FPGA的设计中,浮点数的概念不同于C语言中的定义,这里的浮点数指的是小数点位置会发生变化的 ...

  2. nodejs 客户端证书设置。

    最近的系统要求较高的安全等级 https+usbkey证书 https的操作很简单 openssl 生成ca 和证书,配置启动即可 生成成功后,类似这样. 类似这样 var options = { k ...

  3. 署名|单位地址|Abstract

    科研论文写作---如何署名单位地址 署名的作者要研究结果负责,其署名作为对所作贡献的认可. 参与设计实验想法,参与实验过程,参与起草论文或重大修改论文,或对论文定稿的学者拥有署名权.而资金资助& ...

  4. SpringMVC学习笔记四:SimpleMappingExceptionResolver异常处理

    SpringMVC的异常处理,SimpleMappingExceptionResolver只能简单的处理异常 当发生异常的时候,根据发生的异常类型跳转到指定的页面来显示异常信息 ExceptionCo ...

  5. Train Problem II （卡特兰数+大数问题）

    卡特兰数: Catalan数 原理: 令h(1)＝1,h(0)=1,catalan数满足递归式: h(n)= h(1)*h(n-1) + h(2)*h(n-2) + ... + h(n-1)h(1) ...

  6. LeetCode 225题用队列实现栈（Implement Stack using Queues） Java语言求解

    链接 https://leetcode-cn.com/problems/implement-stack-using-queues/ 思路 首先演示push()操作:将元素依次进入队1,进入时用top元 ...

  7. 查看网卡信息 - ethtool

    查看网卡是千兆还是万兆网卡,使用ethtool 网络接口名 ethtool eth0

  8. mongoDb性能提升

    最近在弄MongoDB的时候 发现只按照官网的方式进行操作的话,性能不行,想着用单例模式封装一下,提升一下性能,代码如下: //引入mongodb相关的模块 const MongoClient = r ...

  9. c语言之单向链表

    0x00 什么是链表 链表可以说是一种最为基础的数据结构了,而单向链表更是基础中的基础.链表是由一组元素以特定的顺序组合或链接在一起的,不同元素之间在逻辑上相邻,但是在物理上并不一定相邻.在维护一组数 ...

  10. C# 关于位运算的学习笔记

    一.理解什么是位运算 程序中的所有内容在计算机内存中都是以二进制的形式储存的(即:0或1),简单来说位运算就是直接对在内存中的二进制数的每位进行运算操作. 二.学习前先了解一下有哪些运算,运算符都怎么 ...