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. Lua学习系列（一）

    从现在开始,打算学习一门新的脚本语言-lua. 1.什么是lua? a) lua1 • Lua 1.0 was implemented as a library, in less then 6000 ...

  2. Ubuntu上CUDA和CUDNN的安装

    Ubuntu上CUDA的安装 下载路径: CUDA下载 `sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb` `sudo apt ...

  3. openstack controller ha测试环境搭建记录（二）——配置corosync和pacemaker

    corosync.conf请备份再编辑:# vi /etc/corosync/corosync.conf totem {        version: 2 token: 10000        t ...

  4. Openlayers实现第一张地图

    <html><head><title>OpenLayers Hello World</title> <style type="text/ ...

  5. 系统管理员必须掌握的20个Linux监控工具

    需要监控Linux服务器系统性能吗?尝试下面这些系统内置或附件的工具吧.大多数Linux发行版本都装备了大量的监控工具.这些工具提供了能用 作取得相关信息和系统活动的量度指标.你能使用这些工具发现造成 ...

  6. X-002 Exyson4412芯片启动过程分析

    移植u-boot到FriendlyARM Tiny4412开发板上,首先我们需要对Samsung Exyson4412芯片的启动方式.系统时钟初始化.串口初始化.内存初始化以及开发板的内存地址空间分配 ...

  7. php小知识。

    合并数组的2个方式区别 1)键名为数字时,array_merge()不会覆盖掉原来的值,但+合并数组则会把最先出现的值作为最终结果返回,而把后面的数组拥有相同键名的那些值“抛弃”掉(不是覆盖) 2)键 ...

  8. p1349星屑幻想

    这道题的原题目我也不知道是什么. 大致题意是有一个图,有些点的权值已确定,要求你确定其他点的权值使所有边两个点的权值的xor和最小,输出所有点的最终权值,输出有spj: 解法是最小割,由于题目要求的使 ...

  9. Java Spring MVC项目搭建（一）——Spring MVC框架集成

    1.Java JDK及Tomcat安装 我这里安装的是JDK 1.8 及 Tomcat 8,安装步骤详见:http://www.cnblogs.com/eczhou/p/6285248.html 2. ...

  10. shell 创建带参数的命令方法

    主要用到case in,和shift命令. shift 命令是从参数数组中,删除当前第一个参数. while [ "$1" != "" ] do case $1 ...