【嘉興東臣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的基礎上新增了一些特性。

一、:in-range 範圍內
二、:out-range 範圍外
三、:valid 經過
四、:invalid 沒有經過
五、:enabled  能夠填寫
六、:disabled 禁用元素
七、:required 必填選項
八、:optional 可選(默認)
九、:read-only: 只讀
十、:nth-of-type 選擇器
十一、[屬性^=值] 選擇器匹配元素屬性值帶指定的值開始的元素。
注意：從最開始匹配，從左往右

十二、[屬性$=值] 選擇器同理，匹配元素屬性值帶指定的值結尾的元素。
注意：從最後開始匹配，可是仍是從左往右數

1三、[屬性*=值] 選擇器匹配元素屬性值包含指定值的元素。
注意：只要出現匹配值，就會被匹配

1四、元素1~元素2 選擇器匹配出如今 元素1 後面的 元素2。元素1 和 元素2 這兩種元素必須具備相同的父元素。

三.瞭解HTML5中的畫布

canvas 自己不能畫圖，藉助javascript腳本語言來畫圖。jquery不能徹底支持HTML5的特性，因此最好使用原生js。

canvas前2個步驟爲：【畫以前給畫布一個尺寸】
    一、var can = document.getElementById("") //獲取canvas對象
    二、var con = can.getContext("2d");//獲取上下文。

canvas中fill表示實心，stroke表示空心【若是路徑未關閉，那麼 fill() 方法會從路徑結束點到開始點之間添加一條線，以關閉該路徑，而後填充該路徑。】

一、stroke(fill)Text 空心(實心)文本  
二、stroke(fill)Style 空心(實心)樣式
三、stroke(fill) 開始繪製空心(實心)圖
四、stroke(fill)Rect 空心(實心)座標

canvas分類：

一、畫矩形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.fillStyle = "" //設置顏色
        con.fillRect(x,y,width,height) //設置矩形顯示的尺寸 

二、畫線段。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.moveTo(x,y); //起始座標位置

        con.lineTo(x,y); //結束座標位置

三、畫圓。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.beginPath();//開始畫圓
        con.arc(圓心x,圓心y，半徑r，開始弧度，結束弧度)；//順時針
        con.strokeStyle = "white"; //設置空心圓顏色.
        con.stroken(); //開始繪製
        con.closePath();//結束畫圓

四、漸變 矩形。
        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);//這個漸變圖形在畫布上的座標。
五、漸變 圓形。
        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相冊，何時本身也能作一個就行了。接下來後端的大門在敞開着。裏面的世界很神奇，一樣也危機重重。既然是新的開始，想必好戲還在後頭。