W3Cschool学习笔记——HTML5基础教程
HTML5 建立的一些规则：
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
如需在 HTML5 中显示视频，您所有需要的是：
<!DOCTYPE HTML>
<html>
<body> <video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video> </body>
</html>
如需在 HTML5 中播放音频，您所有需要的是：
<!DOCTYPE HTML>
<html>
<body> <audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio> </body>
</html>
HTML5 支持内联 SVG。
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
W3Cschool学习笔记——HTML5基础教程的更多相关文章
- W3Cschool学习笔记——XHTML基础教程
XHTML 是更严格更纯净的 HTML 代码. XHTML 是什么? XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language). XHTML 的目 ...
- W3Cschool学习笔记——HTML基础教程
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
- go语言 新手学习笔记 go基础教程
目前这方面的资料相对较少,自己手动整理汇集. 第一章:安装 第一节:下载go语言 第二节:windows 安装 go语言 第三节: 第二章:基本语法 第一节:类型 .
- [JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
- SQL学习笔记：基础教程
SQL语法 在表中选择列 select 列名 from 表名 选择所有列 select * from 表名 返回唯一值 select distinct 列名 from 表名 where select ...
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Django学习笔记（基础篇）
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
- C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
随机推荐
- Linux中后台执行任务
执行时, 可以在命令最后添加 & 使其后台执行, 但是其输出依然会显示, 而且其运行是和当前shell绑定的 如果脚本已经运行, 可以使用Ctrl-Z暂停, 然后使用 bg 让其转入后台, ...
- (简单) POJ 3667 Hotel，线段树+区间合并。
Description The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and e ...
- UVA 1386 Cellular Automaton
矩阵快速幂. 样例是这样构造矩阵的: 矩阵很好构造,但是500*500*500*logk的复杂度显然是无法通过这题的. 其实本题构造出来的矩阵是一个循环矩阵,只需直到第一行或者第一列,即可直到整个矩阵 ...
- bzoj1070 修车&& bzoj2879美食节 【费用流】
bzoj1070: 把每个工人拆成汽车那么多个点,假如说 工人(i, j) 和 汽车k 连边,那就代表第i个工人倒数第j个修汽车k,那么这条边对以后的贡献就是k*time[i修k]. #include ...
- AFNetworing进行POST上传 分类： ios技术 2015-04-01 17:03 73人阅读 评论(0) 收藏
AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; //申明返回的结果是json类型 m ...
- 微信小程序问题2：未配置
app.json 中未配置当前页面 pages/swipertest/swipertest 请检查后重试.console.error(`PAGE DEFINE ERRORapp.json 中未配置,当 ...
- php 模式
设计模式1.单例模式类的计划生育1.让该类在外界无法造对象2.让外界可以造一个对象,做一个静态方法返回对象3.在类里面通过静态变量控 class Dog { static $dx; public $t ...
- poj 3641 ——2016——3——15
传送门:http://poj.org/problem?id=3461 题目大意:给你两个字符串p和s,求出p在s中出现的次数. 题解:这一眼看过去就知道是KMP,作为模板来写是最好不过了.... 这道 ...
- OpenCV点滴2
明天回家了-- 昨天去见了老师,去之前告诉自己不要紧张,去了后还是紧张了,语无伦次,很没礼貌--(不敢看老师的眼睛) 刚才妈打电话说让我早点回去,不知道为什么,在空荡荡的宿舍里听到妈的声音,眼泪会夺眶 ...
- Mybatis中常见的SQL DML
1.sql select 查询 <select id="query" resultType="CfCurrbusilogEntity" > sele ...