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. OpenCV 改变图像的对比度和亮度

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ios ...

  2. eclipse 设置字体与自动提示

    1.设置字体与字体大小 至此,字体与大小设置完毕. 2.设置自动提示 在输入框中输入 1-9 a-z A-Z .点击“Apply”保存. 开启JavaScript 自动提示 灰色未激活,先点击复选框激 ...

  3. 关于js中的比较时遇到的坑

    关于JavaScript中比较遇到的坑 当你的要比较数字的大小但是你的数字确是字符串时,就会出错比如说: console.log('5' > '6') // fasle consloe.log( ...

  4. [USACO5.1] Musical Themes

    后缀数组求最长重复且不重叠子串. poj 1743 传送门 洛谷 P2743 传送门 1.子串可以“变调”(即1 3 6和3 5 8视作相同).解决办法:求字符串相邻元素的差形成新串.用新字符串求解最 ...

  5. 初等数论-Base-1(筛法求素数，欧拉函数，欧几里得算法)

    前言 初等数论在OI中应用的基础部分,同机房的AuSquare和zhou2003君早就写完了,一直划水偷懒的Hk-pls表示很方,这才开始了这篇博客. \(P.S.\)可能会分部分发表. Base-1 ...

  6. 主成分分析(PCA)模型概述

    数据降维 降维是对数据高维度特征的一种预处理方法.降维是将高维度的数据保留下最重要的一些特征,去除噪声和不重要的特征,从而实现提升数据处理速度的目的.在实际的生产和应用中,降维在一定信息损失范围内,可 ...

  7. 用jekyll和github把网站建起来！

    先把这些天学习的用jekyll在github上搭建网站的步骤记录下来,留作参考. #安装jekyll 确定系统安装 Git, Ruby, RubyGems, Nodejs, Python2.7. 如何 ...

  8. Mysql SQL Mode简介

    MySQL服务器能够工作在不同的SQL模式下,并能针对不同的客户端以不同的方式应用这些模式.这样,应用程序就能对服务器操作进行量身定制以满足自己的需求.这类模式定义了MySQL应支持的SQL语法,以及 ...

  9. Hadoop2.7搭建

    Hadoop最底部是 Hadoop Distributed File System(HDFS),它存储Hadoop集群中所有存储节点上的文件.HDFS(对于本文)的上一层是MapReduce 引擎,该 ...

  10. Ubuntu19.10安装OMNeT++ （omnetpp-5.6）中遇到的问题

    在官网上下载对应版本的安装包,里面有说明性的文档,先在第五章ubuntu那里配置好前期的环境,再到linux那一章,看进行安装,本文即从这里开始记录. 安装包中的文档目录为:omnetpp-5.6/d ...