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>和& ...
随机推荐
- QT "debugger unknow type"问题解决办法
windows上使用qt编译有两种,一种是vs的编译器,一种是MinGW的. 这种问题主要是发生在选择了MSVC2013编译器的版本,这个版本的qt需要再装一个调试器,而MinGW不用. 解决办法:下 ...
- AUTODESK 卸载工具,完美彻底卸载清除干净autodesk各种软件残留注册表和文件
小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...
- zookeeper伪分布式集群搭建
zookeeper集群搭建注意点: 配置数据文件myid1/2/3对应server.1/2/3 通过zkCli.sh -server [ip]:[port]检测集群是否 ...
- 码海拾遗:基于MySQL Connector/C++的MySQL操作(连接池)
1.MySQL安装及简单设置 (1)安装:在OSX系统下,可以使用万能的“brew install”命令来进行安装:brew isntall mysql(默认安装最新版的MySQL) (2)启动:br ...
- 在线做RAID命令
# 安装raid卡管理工具 wget http://10.12.30.102:10800/other/MegaCli-8.07.14-1.noarch.rpm -O /tmp/MegaCli-8.07 ...
- 每日背单词 - Jun.
6月1日裸辞,计划休息到端午节后,这段时间玩的确实很开心,每天和朋友一起吹灯拔蜡:好不自在,可惜假期马上结束了,从今天开始恢复学习状态. 2018年6月1日 - 2018年6月14日 辞职休假 201 ...
- C++扬帆远航——18(项目五2,递归式)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:qiushi.cpp * 作者:常轩 * 微信公众号:World ...
- tcpdump常用方法
tcpdump -i eth0监视制定网络接口的数据包 tcpdump host 10.13.1.135监视所有10.13.1.135主机收到和发出的数据包 tcpdump src host 10.1 ...
- C++中cin的输入分隔符问题及相关
1.C/C++中的类型转换函数(区分类中的类型转换构造函数): 头文件:C中stdlib.h C++中cstdlib atof(将字符串转换成浮点型数) atoi(将字符串转换成整型数) atol(将 ...
- p标签内不能嵌套块级标签
今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...