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字 ...
随机推荐
- 约瑟夫环（java面向对象实现）
/* * 作者:zhaop * 功能:约瑟夫环 * */ public class Joseph { public static void main(String[] args) { // TODO ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传
<!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...
- opencv图像特征检测之斑点检测
前面说过,图像特征点检测包括角点和斑点,今天来说说斑点,斑点是指二维图像中和周围颜色有颜色差异和灰度差异的区域,因为斑点代表的是一个区域,所以其相对于单纯的角点,具有更好的稳定性和更好的抗干扰能力. ...
- Linux 分区的概念
事实上无论是linux 还是 window 都必须遵循以下分区的规则 分区类型 1.主分区:最多只能四个. 2.扩展分区: - 最多只能一个 - 主分区加扩展分区最多只能有四个 - 不能写入数据,它存 ...
- STM32驱动DS18B20
DS18B20 是由 DALLAS 半导体公司推出的一种的“一线总线”接口的温度传感器.与传 统的热敏电阻等测温元件相比,它是一种新型的体积小.适用电压宽.与微处理器接口简单的 数字化温度传感器.一线 ...
- springMVC+Hibernate配置
本文描述下 sypro 项目中使用 springMVC+Hibernate配置,初学SpringMVC做下简单整理解. 1.web项目首先我们要使用 web.xml文件将 spring配置引入进来 & ...
- Java web入门
1.java 设计模式:http://blog.csdn.net/JAVE_LOVER/article/category/2379703 2.Java web框架的思考:http://www.osch ...
- php中字符串长度和截取的函数
在做PHP开发的时候,由于我国的语言环境问题,所以我们常常需要对中文进行处理. 在PHP中,我们都知道有专门的mb_substr和mb_strlen函数,可以对中文进行截取和计算长度,但是,由于这些函 ...
- ＳVN 备忘录
上传文件夹 svn import distcomp/ svn+ssh://USERNAME@166.120.110.119/mnt/disk1/fserver/svn/distcomp -m &quo ...
- 医院his系统数据库恢复
医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类. 某医院HIS系统SQL2008数 ...