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 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的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+