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基础教程的更多相关文章

  1. W3Cschool学习笔记——XHTML基础教程

    XHTML 是更严格更纯净的 HTML 代码. XHTML 是什么? XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language). XHTML 的目 ...

  2. W3Cschool学习笔记——HTML基础教程

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  3. go语言 新手学习笔记 go基础教程

    目前这方面的资料相对较少,自己手动整理汇集. 第一章:安装 第一节:下载go语言 第二节:windows 安装 go语言 第三节: 第二章:基本语法 第一节:类型 .

  4. [JavaScript] 学习笔记-JavaScript基础教程

    1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...

  5. SQL学习笔记：基础教程

    SQL语法 在表中选择列 select 列名 from 表名 选择所有列 select * from 表名 返回唯一值 select distinct 列名 from 表名 where select ...

  6. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Django学习笔记（基础篇）

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  9. C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

随机推荐

  1. iOS AFN向接口端传递JSON数据

    NSDictionary *body = @{@"snippet": @{@"topLevelComment":@{@"snippet":@ ...

  2. Unity NGUI UIPanel下对粒子的剪裁

    使用 unity 做游戏开发时,有时需要在scroll view下使用粒子,但粒子是不会被 UIPanel 所裁剪的,本人提供了脚本 ParticleSystemClipper,用来处理这种情况.思路 ...

  3. Part of Speech Tagging

    Natural Language Processing with Python Charpter 6.1 suffix_fdist处代码稍微改动. import nltk from nltk.corp ...

  4. 【转】 完美配置Tomcat的HTTPS

    Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.lang.Exception: Connector attribute SSL ...

  5. hadoop+海量数据面试题汇总（二）

    何谓海量数据处理? 所谓海量数据处理,无非就是基于海量数据上的存储.处理.操作.何谓海量,就是数据量太大,所以导致要么是无法在较短时间内迅速解决,要么是数据太大,导致无法一次性装入内存. 那解决办法呢 ...

  6. Java使用POI实现数据导出excel报表

    Java使用POI实现数据导出excel报表 在上篇文章中,我们简单介绍了java读取word,excel和pdf文档内容 ,但在实际开发中,我们用到最多的是把数据库中数据导出excel报表形式.不仅 ...

  7. 用DMA直接驱动GPIO，实现GPIO最高输出速率（转）

    源:用DMA直接驱动GPIO,实现GPIO最高输出速率 先上图:STM32F303芯片,72M的主频 可以看到GPIO的达到了14.4M的翻转速率,      再来上代码: RCC_AHBPeriph ...

  8. php json_decode返回失败的排查

    参考网址: https://segmentfault.com/a/1190000006154011 返回失败时,通过 json_last_error可以获取其json解析失败的原因.

  9. IOS block 对象强引用和若引用

    1. 在block外面这样:__weak MyController *weakSelf = self 或者 __weak __typeof(self) weakSelf = self;是为了防止强引用 ...

  10. zend framework 配置连接数据库

        Zend_Db_Adapter是zend frmaeword的数据库抽象层api.基于pdo, 你可以使用Zend_Db_Adapter连接和处理多种 数据库,包括:microsoft SQL ...