HTML5学习记录_HTML5入门教程
2014-07-02 11:15:11 By: shinyuu
<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 id="MaoIsID">
<!--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 id="canvas" style="border:1px solid #c3c3c3;">
你的浏览器不支持此功能
</canvas>
<canvas id="canvas2" style="border:1px solid #c3c3c3;">
你的浏览器不支持此功能
</canvas>
<canvas id="canvas3" style="border:1px solid #c3c3c3;">
你的浏览器不支持此功能
</canvas>
<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
每个表格只能规定一个标题。通常标题会居中显示在表格上方。所有主流浏览器都支持 <caption> 标签。
<table>
<caption>内容</caption>
<tr>
<td>内容</td>
</tr>
</table>
下回分解<datalist> 标签...
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
