HTML5 2017.07.21

1. HTML的canvas标签

  canvas 是新增的标签；用于在网页生成实时的图像，它实际上是一个能用Javascript（基于JavaScript）操作的位图，它定义了一个API（application programing interface）来支持脚本画客户端对画布的操作。

canvas对象的属性有很多，包括常见的width,height（默认都为300） 。那么如何canvas一个对象呢，先介绍一个canvas的方法，即getContext();它用于检测canvas的getContext（）方法是否存在，返回画布的绘图环境。

另：使用var与不适用var： 若使用var声明变量，则是当前方法的局部变量；否则默认为全局变量。

 注：

<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

getcontext的语法：

Canvas.getContext(contextID)

canvas示例：

 <mine>This is my ele.</mine>      <br><br>                   <br/>

<canvas id="mine">you web browser does't support canvas!</canvas>

    <script>
     var c=document.getElementById('mine');
     var ctx=c.getContext('2d');
     ctx.fillStyle='#ff0000';
     ctx.fillRect(0,0,80,100);


    </script> 

注意：JavaScript中的大小写敏感。比如fillStyle,fillRect; 以及对它们赋值时的格式，这里的2d代表传入参数2d（two dimension）。

图为使用canvas画出的红色矩形。

2. HTML中的新多媒体元素

1）<audio>....</audio>

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

实例：

<audio controls>you web browser doesn't support this
    <source src="../Music/美人鱼（无和声伴奏）.mp3"  type="audio/mpeg">


    </audio>
    

效果：

另：HTML5中关于<audio>....</audio>的新属性

autoplay（自动播放） ，mute（静音），controls（播放暂停等按钮），loop（循环），preload（预先加载，取值有）

2）<video>......</video>

实例：

  
    <video width="1000" height="600" controls>you web browser doesn't support this
    <source src="test vodeo.mp4" type="video/mp4">
    
    </video>
    

3）<embed    src="url"  > 这个标签定义了一些容器；用来嵌入一些应用程序或者互动程序。

 4）track为audio或video 在外部添加一些文本轨道，例如字幕等，

3. <article>标签

这个标签主要用于定义一些独立的文档，例如评论，博客，新闻故事等等，与<article>相似的还有<section>它们之间并没有太大的区别，当具体使用时要具体分析了。