初识Html5+Css3

　　未来新一代的web标准Html5虽然还没有正式发布，但不少人已经开始学习甚至在高级浏览器（ie9,firefox,opear,chrome等）中应用了。

既然是未来的趋势，自己也不能落后啊。这两天就在网上找了些资料看看，分享下感受。(http://www.w3school.com.cn/html5/index.asp 上面有很多最新教材可以看看)

　　第一个让我想到的案例就是 “圆角” 问题。当下处理圆角问题多数用png图片或jquery插件等来实现，然而到html5我们就可以用css来轻松完成了。

　　例子：border-radius:20px 20px 0px 0px;就是表示圆角，顺序是从左上角开始顺时针方向。单位表示半径长度

.html5{ width:300px; height:180px; background:#0099FF; -moz-border-radius:20px 20px 0px 0px;}
/*-moz-border-radius是火狐浏览器的写法，火狐同样支持标准写法，各个浏览器可能有自己的标准，不过相信以后会统一*/

<div class="html5"></html>

　　

单独某个角

border-radius-topleft:20px;左上角
border-radius-topright:20px;右上角
border-radius-bottomleft:20px;左下角
border-radius-bottomright:20px;右下角

　　第二个就是表单验证。现在多数都用js+正则来验证，虽然有类似jquery.validate.js的验证插件给我们提供了很大的方便（我就在用，很好用哦，嘻嘻），但引入这些插件或多或少也增加了服务器负担，而且在页面没有加载完全的情况下，手快的人就有可能出现没有验证的误操作。所以多数情况下我们还在处理页面做二次验证。

　　现在html5给我们了更方便的选择。hmtl5增加了许多新的input类型，还有max，min，required等属性限制

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

<form action="abc.aspx" method="post" name="form1" id="form1">
    邮箱: <input type="email" name="user_email" required="required" /><br /><br /><!--验证邮箱，必填-->
    网址: <input type="url" name="user_url" required="required"  /><br /><br /><!--验证网址，必填-->
    <input type="submit" value="提交" /><input type="reset" value="重置" />
    </form>

　　看下火狐下的效果，很不错吧。不知道能不能自己设置提示信息和提示样式，有待研究（了解的大侠们也可发下）

 

　　接着就是在页面上绘制图形了。类似GDI+的东东。东西多就不一一解释了，大家可以到http://www.w3school.com.cn/html5/index.asp 看。

　　

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;"></canvas>//画布
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");//用js获取画布
        var cxt=c.getContext("2d");
        //画线
        cxt.moveTo(100,70);
        cxt.lineTo(200,100);
        cxt.lineTo(0,100);
        cxt.lineTo(100,70);
        cxt.stroke();
        
        //渐变色
        var grd=cxt.createLinearGradient(10,10,175,50);
        grd.addColorStop(0,"#f00");
        grd.addColorStop(1,"#0f0");
        cxt.fillStyle=grd;
        cxt.fillRect(10,10,175,50);
        
        //画图
        var img=new Image()
        img.src="images/jxxn.jpg"
        cxt.drawImage(img,100,120);
        
        if(localStorage.pagecount){
              localStorage.pagecount=Number(localStorage.pagecount) +1;
        }else{
              localStorage.pagecount=1;
        }
        document.write("<br />Visits "+ localStorage.pagecount + " time(s).");
    </script>

　　还有富媒体播放了，以后可能就可以摆脱FLASH或sliverright等插件了。现在支持的文件格式比较少，可能以后会支持更多。

　　

<video src="movie.ogg" width="320" height="240" controls="controls"><!--视频-->

<audio src="song.ogg" controls="controls"></audio><!--音频-->

     好了我也就看了这么多，跟大家分享下。

转载于:https://www.cnblogs.com/softlive/archive/2012/06/15/2550789.html