新特性

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

浏览器的支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性

基本格式

<!DOCTYPE html>

<html>

<head>

<!--网页的编码-->

<meta charset="utf-8"/>

</head>

<body>

<!--这是一个画布标签，我们这个这个区域绘制图形.-->

<canvas id="can1" width="500px" height="400px" style="border: 1px solid red">

</canvas>

<script type="text/javascript">

//我要在画布画出矩形.

//1. 得到画布

var canvas=document.getElementById("can1");

//2. 得到上下文环境.,我们可以通过cxt这个对象来绘制图形

//你也可以简单的理解，这个cxt就是画笔,cxt提供了很多绘制图形的方法

//通过这些方法就可以绘制图形

var cxt=canvas.getContext("2d");

//我们看看cxt是什么类型

//alert(cxt);

//画出一个矩形,默认是黑色

//改变颜色-红色

cxt.fillStyle="#FF0000";

cxt.fillRect(10,10,30,30);

</script>

</body>

</html>

到这里HTML5的最简单的预热就结束了。

H TML5 之 （1） 初识HTML5的更多相关文章

  1. 初识html5——试试博文编辑器

    1.html5简介 HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处 ...

  2. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  3. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  4. 初识 Html5

    1.1认识HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...

  5. 初识html5 File API实现带有进度提示的文件上传

    Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...

  6. H TML5 之 （6）下雨效果

    在对HTML5进行研究之后,有了一点想法,思考出游戏其实感觉就是四个步骤 1.创建一个你需要的对象,赋予属性(一些影响方法的属性),方法(运动,叫....) 2.实例化这个对象,让它成为一个或者多个个 ...

  7. H TML5 之 （5） 一个在线画图板

    这里加入了点难度了,增加了对HTML很多时间的把握,对象的把握 index.html <!DOCTYPE HTML> <html> <head> <title ...

  8. H TML5 之 （3）转动的圆球

    HTML5 练手之二,一个能够为之圆心转动的圆球,原理和时钟的非常像,只是要把握转动的时间控制,同时加入了点渐变色 HTML5 练手之二,一个能够为之圆心转动的圆球,原理和时钟的非常像,只是要把握转动 ...

  9. H TML5 之 （4） 小项目一 时钟

    这里做一个HTML5 入门的练手,一个小时钟项目,可以再上面拓展很多,程序员培养的就是思想 <!DOCTYPE HTML> <html> <head> <ti ...

随机推荐

  1. [译]GotW #1: Variable Initialization

    原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...

  2. ORACLE数字转换人民币大写

    ORACLE 数字转换人民币大写     示例.   数字                    :183066999230.68 人民币大写        :壹仟捌佰参拾亿陆仟陆佰玖拾玖万玖仟贰佰参 ...

  3. bzoj1486

    这里学了一个新知识叫分数规划这道题目是求∑w[i]/S最小首先二分答案k,然后如果某个环∑w[i]/S<=k即∑w[i]<=k*S-->∑w[i]-k*S<=0--->∑ ...

  4. 转载--C语言运算符优先级和口诀

    转载:http://www.cnblogs.com/zhanglong0426/archive/2010/10/06/1844700.html 一共有十五个优先级: 1   ()  []  .  -& ...

  5. 仿建行JS键盘

    一款比较好用的JS密码输入脚本,效果图如下: 代码如下: <html> <head> <script> /*js文件*/ window.onload=functio ...

  6. 基于WCF大型分布式系统的架构设计

    在大型系统中应用中,一个架构设计较好的应用系统,其总体功能肯定是由很多个功能模块所组成的,而每一个功能模块所需要的数据对应到数据库中就是一个或多个表.而在架构设计中,各个功能模块相互之间的交互点 越统 ...

  7. 理解newid()和newsequentialid()

    原文地址:http://blog.csdn.net/xushichang/article/details/4390957 1.:newsequentialid 函数比起 newid 函数最大的好处是: ...

  8. bzoj 2618 2618: [Cqoi2006]凸多边形（半平面交）

    2618: [Cqoi2006]凸多边形 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 656  Solved: 340[Submit][Status] ...

  9. css权威指南（下）

    第七章 基本视觉格式化 正常流(没有浮动和定位元素).非替换元素(包含在文档中).替换元素(用作其它内容的占位符,如img).块级元素(会和其它元素形成换行,如div).行内元素(span之类的元素) ...

  10. CPSR和SPSR（转）

    转载地址:http://blog.chinaunix.net/uid-28458801-id-3487199.html CPSR:程序状态寄存器(current program status regi ...