【嘉兴东臣php】HTML5和CSS3学习周总结

一.了解HTML5

       第一天的学习了解了什么是HTML5。HTML5其实就是HTML4的加强版，只是在HTML4的基础上进行了功能上的强化。目前支持的浏览器有 safari、opera 、firefox 、 chrome、ie，较老的版本不支持。

新增标签：

    audio和video
    写法：<audio controls="controls" width="宽" height="高">
    <source src="链接" type="audio/mpeg"/>
      </audio>    
       <video >
     <source src="链接" type="video/mp4"/>
       </video>    

新增特性:
    <input type="number"/>
    <input type="url"/>
    <input type="email"/>
    <input type="color"/>
    <input type="date"/>
    <input type="range"/>

input新增常用属性

min 最小
max 最大
placeholder 默认提示
autocomplete 自动提交
autofocus 自动聚焦
novalidate 提交时不要验证（默认自动验证）        
required="required" input控件不能为空

二.了解CSS3

CSS3不是一门新语言，只是在CSS2.0的基础上新增了一些特性。

1、:in-range 范围内
2、:out-range 范围外
3、:valid 通过
4、:invalid 没有通过
5、:enabled  可以填写
6、:disabled 禁用元素
7、:required 必填选项
8、:optional 可选(默认)
9、:read-only: 只读
10、:nth-of-type 选择器
11、[属性^=值] 选择器匹配元素属性值带指定的值开始的元素。
注意：从最开始匹配，从左往右

12、[属性$=值] 选择器同理，匹配元素属性值带指定的值结尾的元素。
注意：从最后开始匹配，但是还是从左往右数

13、[属性*=值] 选择器匹配元素属性值包含指定值的元素。
注意：只要出现匹配值，就会被匹配

14、元素1~元素2 选择器匹配出现在 元素1 后面的 元素2。元素1 和 元素2 这两种元素必须具有相同的父元素。

三.了解HTML5中的画布

canvas 本身不能画图，借助javascript脚本语言来画图。jquery不能完全支持HTML5的特性，所以最好使用原生js。

canvas前2个步骤为：【画之前给画布一个尺寸】
    1、var can = document.getElementById("") //获取canvas对象
    2、var con = can.getContext("2d");//获取上下文。

canvas中fill表示实心，stroke表示空心【如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。】

1、stroke(fill)Text 空心(实心)文本  
2、stroke(fill)Style 空心(实心)样式
3、stroke(fill) 开始绘制空心(实心)图
4、stroke(fill)Rect 空心(实心)坐标

canvas分类：

1、画矩形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.fillStyle = "" //设置颜色
        con.fillRect(x,y,width,height) //设置矩形显示的尺寸 

2、画线段。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.moveTo(x,y); //起始坐标位置

        con.lineTo(x,y); //结束坐标位置

3、画圆。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.beginPath();//开始画圆
        con.arc(圆心x,圆心y，半径r，开始弧度，结束弧度)；//顺时针
        con.strokeStyle = "white"; //设置空心圆颜色.
        con.stroken(); //开始绘制
        con.closePath();//结束画圆

4、渐变 矩形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        var grd = con.createLinearGradient(开始x,开始y,结束x,结束y);//创建一个渐变矩形
        grd.addColorStop( 0 ， 开始渐变颜色);
        grd.addColorStop( 1， 结束渐变颜色);       
        con.fillStyle = grd; //实心矩形颜色方案为grd
        con.fillRect(x,y,width,height);//这个渐变图形在画布上的坐标。
5、渐变 圆形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        var grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x, 结束的圆心y,结束的圆半径);//创建一个渐变圆 。 实际上就是一个圆向另一个圆渐变！
        grd.addColorStop( 0 ， 开始渐变颜色);
        grd.addColorStop( 1， 结束渐变颜色);     
        con.fillStyle = grd; //实心矩形颜色方案为grd
        con.fillRect(x,y,width,height);

总结：

        这周的课程只有四天，相对来说学的知识点还比较少，这周的重点主要三个，HTNL5的画布，CSS3，还有HTML5新增的一些表单属性，主要还是在画布这块花了不少时间。尽管很多代码都是老黄在打，不过老黄的一些方法还是挺实用的，技巧性十足。看了老黄打这么久的代码，最深的体会就是八个字：”化繁为简，小中见大“。这周记的东西也多，好记性不如烂笔头，这么多的知识点不是一个个去理解就会，而是需要背。HTML5学了2D的画布，然而酷炫3D才是我最喜欢的，略带点遗憾地结束了前端的学习。看了网上那些CSS3和HTML5做出来的各种酷炫的效果，才明白自己学的只不过是这块内容的冰山一角而已。学多学少还是看自己，毕竟师傅领进门，修行在自身。

       新的一年开始了，前端的学习也告一段落了。总的来说自己也稍微接触了前端的知识点，不再像以前那样连前端的分类都不知道。暂时告别前端的学习，其实也不舍得。那么多酷炫的效果都没来得及接触就开始告别了。前段时间看到过一个很好玩的东西叫3D相册，什么时候自己也能做一个就好了。接下来后端的大门在敞开着。里面的世界很神奇，同样也危机重重。既然是新的开始，想必好戏还在后头。

转载于:https://my.oschina.net/u/2545470/blog/596359