Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

Html表格

1.表格中的表头：<th></th>。其中表头部分字体加粗，颜色深绿色

 <h4>水平标题:</h4>

 <table border="1">

 <tr>

   <th>Name</th>

   <th>Telephone</th>

   <th>Telephone</th>

 </tr>

 <tr>

   <td>Bill Gates</td>

   <td>555 77 854</td>

   <td>555 77 855</td>

 </tr>

 </table>

 <h4>垂直标题:</h4>

 <table border="1">

 <tr>

   <th>First Name:</th>

   <td>Bill Gates</td>

 </tr>

 <tr>

   <th>Telephone:</th>

   <td>555 77 854</td>

 </tr>

 <tr>

   <th>Telephone:</th>

   <td>555 77 855</td>

 </tr>

 </table>

2.带有标题的表格：<caption></caption>

<table border="1">

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

Html列表

自定义列表

 <dl>

 <dt>Coffee</dt>

 <dd>- black hot drink</dd>

 <dt>Milk</dt>

 <dd>- white cold drink</dd>

 </dl>

Html5新元素

1.定义音频内容<audio></audio>，每个标签内只能放置1个音频。支持的格式：mp3、Ogg、Wav。

新增的属性：

（1）autoplay如果出现该属性，则视频在就绪后马上播放。

（2）controls如果出现该属性，则向用户显示控件，比如播放按钮。

（3）loop如果出现该属性，则每当音频结束时重新开始播放。

（4）muted如果出现该属性，则音频输出为静音。

 <audio controls>

   <source src="file:///F|/歌曲/¤画地为牢』.mp3" >

 </audio>

2.定义视频内容<video></video>，每个标签内只能放置1个视频，视频可以全屏。支持的视频格式：MP4、WebM 、Ogg 。

新增的属性：

（1）autoplay如果出现该属性，则视频在就绪后马上播放。

（2）controls如果出现该属性，则向用户显示控件，比如播放按钮。

（3）height设置视频播放器的高度。

（4）loop如果出现该属性，则当媒介文件完成播放后再次开始播放。

（5）muted如果出现该属性，视频的音频输出为静音。

（6）poster规定视频正在下载时显示的图像，直到用户点击播放按钮。

（7）width设置视频播放器的宽度。

 <video width="320" height="240" controls>

   <source src="file:///F|/内涵段子/1444887748923.mp4"  type="video/ogg">

 </video>

3.嵌入的 flash 动画片<embed>，单标签元素。嵌入动画的格式：gif、swf。

 <embed src="file:///F|/内涵段子/图片/1449223698957.gif">

4.定义不同类型的输出，比如脚本的输出。<output></output>

0-100可以拖动滚动条调整，右边的50也可以调整大小，相加等于右边的值。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

Html5 Canvas

1.<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，必须要使用脚本来绘制图形。

Canvas 坐标

 <body>

 <canvas id="myCanvas" width="200" height="100"

 style="border:1px solid #000000;">

 </canvas>

 </body>

 <script>

 var c=document.getElementById("myCanvas");

 var ctx=c.getContext("2d");

 ctx.fillStyle="#FF0000";

 ctx.fillRect(0,0,200,75);

 </script>

第10行中的(0,0,200,75)是指开始位置（0,0）至结束位置（200,75）。

Canvas - 路径

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

ctx.moveTo(0,0); ctx.lineTo(200,100);分别是开始位置和结束位置。

Canvas - 画圆

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

Canvas - 文本

30px高，实心（fillText）。（10,50）是指距离左侧和顶部（字的底部距离边界顶部）的距离。

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

</script>

30px高，空心（strokeText）。

 <body>

 <canvas id="myCanvas" width="200" height="100"

 style="border:1px solid #000000;">

 </canvas>

 </body>

 <script>

 var c=document.getElementById("myCanvas");

 var ctx=c.getContext("2d");

 ctx.font="30px Arial";

 ctx.strokeText("Hello World",10,50);

 </script>

Canvas - 渐变

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);//四个参数分别为 1.渐变开始的x坐标；2.渐变开始的y坐标； 3.渐变结束的x坐标； 4.渐变结束的y坐标；

grd.addColorStop(0,"red");//渐变开始的颜色

grd.addColorStop(1,"white");//渐变结束的颜色

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);//整个渐变的开始坐标和结束坐标

Canvas - 图像 drawImage(image,x,y)

需要注意的是要将使用的图片移动到网页的根目录下，否则Canvas 不能使用该图片。

<body>

<p>Image to use:</p>

<img id="scream" src="file:///D|/wamp/www/爵迹.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("scream");

img.onload = function() {

    ctx.drawImage(img,10,10);

}

</script>

</body>