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. [LC] 56. Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  2. when|nobody|hazard|lane|circuit|

    How can I help them  they won't listen to me? 题目解析 考查从句.此句意为:如果他们要是不听我的话,我怎么帮助他们?此处,when引导的状语从句表示假设事 ...

  3. vue-cli 项目结构介绍

    感谢:https://www.jianshu.com/p/7006a663fb9f 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关 ...

  4. C++中字符串的表示与转换

    转换总结 1.char*转string:可以直接赋值. 2.char[]转string:可以直接赋值. 3.char*转char[]:不能直接赋值,可以循环char*字符串逐个字符赋值,也可以使用st ...

  5. CF580D_Kefa and Dishes

    D. Kefa and Dishes time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. python对csv读写

    1.csv文件读取 with open("C:\\Users\\Administrator\\Desktop\\test.csv", 'r', encoding='utf-8') ...

  7. 吴裕雄--天生自然 Tensorflow卷积神经网络：花朵图片识别

    import os import numpy as np import matplotlib.pyplot as plt from PIL import Image, ImageChops from ...

  8. CentOS7使用firewalld管理防火墙与端口

    firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status fir ...

  9. Dykin's blog

    回归分析是一种很重要的预测建模技术.主要是研究自变量与因变量之间的因果关系.本文将会从数学角度与代码角度分析不同类型的回归.当你想预测连续型的非独立变量,或者对一系列独立变量或输入项有所反应时,就会使 ...

  10. C++走向远洋——48（项目一1、复数类中的运算符重载、类的成员函数）

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