html5特性简要概括
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特性简要概括的更多相关文章
- css3特性简要概括
---恢复内容开始--- css3新增核心知识 背景和边框 文本效果 2d/3d转换 过渡和动画 多列布局 弹性盒模型 媒体查询 增强选择器 css3浏览器兼容性 css3在线工具 css3gener ...
- HTML5特性速记图
今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.
- SharePoint 2013 的HTML5特性之响应式布局
今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...
- SharePoint 2013的HTML5特性之响应式布局
今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...
- HTML5特性检測
HTML5特性检測: 1.检測全局对象:诸如window或navigator是否拥有特定的属性 2.创建元素:检測该元素的DOM对象是否拥有特定的属性 3.创建元素:检測该元素的DO ...
- ExtJS的4.1新特性简要介绍
ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...
- 浏览器对HTML5特性检測工具Modernizr
近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...
- 哪些HTML5特性值得期待
首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...
- HTML5 CSS3简要教程
Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和& ...
随机推荐
- 事件和异常的传播 · 农场主的黑科技.
inBound事件的传播 何为inBound事件以及ChannelInboundHandler ChannelRead事件的传播ChannelRead是典型的inbound事件,以他为例了解inbou ...
- 使用junit测试springMVC项目提示ServletContext找不到定义错误
原文链接:https://blog.csdn.net/liu_gan/article/details/78400627 @RunWith(SpringJUnit4ClassRunner.class) ...
- SpringBoot:三十五道SpringBoot面试题及答案
SpringBoot面试前言今天博主将为大家分享三十五道SpringBoot面试题及答案,不喜勿喷,如有异议欢迎讨论! Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一 ...
- mysql中not exists的简单理解
http://www.cnblogs.com/glory-jzx/archive/2012/07/19/2599215.html http://sunxiaqw.blog.163.com/blog/s ...
- fetch API 和 ajax
fetch('/some.json', { method: 'get', body: { id: 22 } }).then(function (resp) { resp.json().then(con ...
- Twitter类社交平台 用比例建立新的“好坏”与社会焦点
用比例建立新的"好坏"与社会焦点" title="Twitter类社交平台 用比例建立新的"好坏"与社会焦点"> 互联网全面 ...
- 使用JavaServer Faces技术的Web模块:hello1 example
该hello1应用程序是一个Web模块,它使用JavaServer Faces技术来显示问候语和响应.您可以使用文本编辑器查看应用程序文件,也可以使用NetBeans IDE. 此应用程序的源代码位于 ...
- 吴裕雄--天生自然 PHP开发学习:在centos7操作系统下使用命令安装ThinkPHP 5框架
前提条件是系统已经安装好了php,一般来说安装好的php根目录是:/var/www/html 系统安装composer(我使用的系统是centos7) .使用命令下载 curl -sS https:/ ...
- 849. Dijkstra求最短路 I
给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出1号点到n号点的最短距离,如果无法从1号点走到n号点,则输出-1. 输入格式 第一行包含整数n和m. 接下来m行每行包 ...
- array-2
数组的基本操作 JS随机操作数组元素 Math.random() 结果为0-1间的一个随机数[0,1) Math.round(num) 参数num为一个数值,函数结果为num四舍五入的整数 Math. ...