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

Html表格

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

 1 <h4>水平标题:</h4>
 2 <table border="1">
 3 <tr>
 4   <th>Name</th>
 5   <th>Telephone</th>
 6   <th>Telephone</th>
 7 </tr>
 8 <tr>
 9   <td>Bill Gates</td>
10   <td>555 77 854</td>
11   <td>555 77 855</td>
12 </tr>
13 </table>

 1 <h4>垂直标题:</h4>
 2 <table border="1">
 3 <tr>
 4   <th>First Name:</th>
 5   <td>Bill Gates</td>
 6 </tr>
 7 <tr>
 8   <th>Telephone:</th>
 9   <td>555 77 854</td>
10 </tr>
11 <tr>
12   <th>Telephone:</th>
13   <td>555 77 855</td>
14 </tr>
15 </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列表

自定义列表

1 <dl>
2 <dt>Coffee</dt>
3 <dd>- black hot drink</dd>
4 <dt>Milk</dt>
5 <dd>- white cold drink</dd>
6 </dl>

Html5新元素

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

新增的属性：

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

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

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

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

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

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

新增的属性：

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

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

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

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

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

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

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

1 <video width="320" height="240" controls>
2   <source src="file:///F|/内涵段子/1444887748923.mp4"  type="video/ogg">
3 </video>

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

1 <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 坐标

 1 <body>
 2 <canvas id="myCanvas" width="200" height="100"
 3 style="border:1px solid #000000;">
 4 </canvas>
 5 </body>
 6 <script>
 7 var c=document.getElementById("myCanvas");
 8 var ctx=c.getContext("2d");
 9 ctx.fillStyle="#FF0000";
10 ctx.fillRect(0,0,200,75);
11 </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）。

 1 <body>
 2 <canvas id="myCanvas" width="200" height="100"
 3 style="border:1px solid #000000;">
 4 </canvas>
 5 </body>
 6 <script>
 7 var c=document.getElementById("myCanvas");
 8 var ctx=c.getContext("2d");
 9 ctx.font="30px Arial";
10 ctx.strokeText("Hello World",10,50);
11 </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>