HTML5学习记录_HTML5入门教程
2014-07-02 11:15:11  By: dwtedx

<abbr>标签是缩写标签属性 title放全称
例如：js 是javascript的缩写，可以这样些<abbr title="javascript">js</abbr>Code
显示出来的效果是 ‘js Code’鼠标放到js上面会显示javascript。


<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
<area>标签套在<map>标签内部使用
<img>中的usemap属性关联<map>标签的id写法如下：
<img src="......" usemap="MapIsID" alt="这里是图片的描述"/>
<map>
<!--shape属性是形状 常用有rect矩形和circle圆形polygon多边形；coords属性是坐标-->
<!--矩形有2个点4个坐标前两个坐标是一个点，后两个坐标是另一个点0，0坐标是图片的左上角-->
<area shape ="rect" coords ="0,0,110,260" href ="url1" />
<!--圆形就1个点即圆心 前两个数值是圆心坐标，后一个数值是半径-->
<area shape ="circle" coords ="129,161,10" href ="url2" />
<area shape ="circle" coords ="180,139,14" href ="url3" />
</map>


<audio src="****.wav">
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
</audio>
属性controls向用户显示控件，比如播放按钮。值和属性名一样
属性autoplay音频在就绪后马上播放。值和属性名一样
属性loop每当音频结束时重新开始播放。值和属性名一样
属性preload音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。值和属性名一样



<base href="http://www.***.com/i/" /> 标签是为页面上的所有链接规定默认地址或默认目标。正文内的链接都可以写相对路径了
属性有href和target， target属性会被各自链接中的target覆盖


<bdo> 标签覆盖默认的文本方向。
属性dir值rtl反ltr正
效果：
<bdo dir="rtl">蛋疼的标签</bdo>输出效果为：签标的疼蛋；ltr值就正常显示


<canvas>标签只是图形容器，必须使用js脚本来绘制图形。

目前所有支持 canvas 标签的浏览器都支持 2D 渲染上下文。

定义路径轮廓：
在每个 canvas 实例对象中都拥有一个 path 对象，创建自定义图形的过程就是不断对 path 对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用 beginPath() 方法来重置 path 对象至初始状态，进而通过一系列对 moveTo/lineTo 等画线方法的调用，绘制期望的路径，其中 moveTo(x, y) 方法设置绘图起始坐标，而 lineTo(x,y) 等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用 closePath() 方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。

绘制路径
定义完路径的轮廓，此时 canvas 画面中没有显示任何路径，开发人员还可以对路径进行修改。一旦确定完成，则需要继续调用 stroke()/fill() 函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由 strokeStyle 和 fillStyle 属性决定。

save() 和 restore() 两种方法来保存和恢复 canvas 状态，每调用 save 方法，都会将当前状态压入堆栈中，而相应的 restore 方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。没有使用 save/restore 操作保持住原来的绘图状态，那么后续的绘图操作，都会在当前所应用的变形状态下完成。

用法如下：

<script type="text/javascript"> window.onload=function test(){ var canvas = document.getElementById(´canvas´); if (canvas.getContext){ var ctx = canvas.getContext(´2d´); // 获取 2D 渲染 ctx.clearRect(0,0,300,200) ;// 清除以（0,0）为左上坐标原点，300*200 矩形区域内所有像素 ctx.fillStyle = ´#00f´; // 设置矩形的填充属性，#00f 代表蓝色 ctx.strokeStyle = ´#f00´; // 设置矩形的线条颜色，#f00 代表红色 ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一个 150*80 大小的矩形 ctx.strokeRect(45,45, 160, 90); // 以 strokeStype 属性为边的颜色绘制一个无填充矩形 } var canvas2 = document.getElementById(´canvas2´); if (canvas2.getContext){ var ctx = canvas2.getContext(´2d´); ctx.fillStyle = ´#00f´; ctx.strokeStyle = ´#f00´; ctx.beginPath(); ctx.arc(75,45,50,0,Math.PI, false); // 绘制一条半圆弧线 ctx.closePath(); // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧 ctx.fill(); // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化 ctx.stroke(); } var canvas3 = document.getElementById(´canvas3´); if (canvas3.getContext){ var ctx = canvas3.getContext(´2d´); ctx.translate(150,80); // 将 canvas 的原点从 (0,0) 平移至（150,80） for (i=1;i<=2;i++){ // 绘制内外 2 层 if ((i % 2) == 1) {ctx.fillStyle = ´#00f´;} else{ ctx.fillStyle = ´#f00´; } ctx.save(); // 保持开始绘制每一层时的状态一致 for (j=0;j<=i*6;j++){ // 每层生成点的数量 ctx.rotate(Math.PI/(3*i)); // 绕当前原点将坐标系顺时针旋转 Math.Pi/(3*i) 度 ctx.beginPath(); ctx.arc(0,20*i,5,0,Math.PI*2,true); ctx.fill(); // 使用 fillType 值填充每个点 } ctx.restore(); } } } </script>

<canvas>
你的浏览器不支持此功能
</canvas>
<canvas>
你的浏览器不支持此功能
</canvas>
<canvas>
你的浏览器不支持此功能
</canvas>

<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
每个表格只能规定一个标题。通常标题会居中显示在表格上方。所有主流浏览器都支持 <caption> 标签。
<table>
<caption>内容</caption>
<tr>
<td>内容</td>
</tr>
</table>

下回分解<datalist> 标签...