HTML5是HTML4的升級版，不是特定的的開發語言。

標簽

音樂播放器

controls="controls" 為顯示音樂播放器面板

----mp3格式-----

視頻播放器

controls="controls" 為顯示視頻播放器面板

width=""

height=""

----mp4格式------

document.getElementById("").load 重新加載

document.getElementById("").play 播放

document.getElementById("").pause 暫停

表單

數字

url

郵箱

顏色拾取

日期選擇

范圍

input 常用屬性

max 最大

min 最小

placeholder 默認提示

autocomplete 自動提交

autofocus 自動聚焦

novalidata 提交時不要驗證(默認自動驗證)

required="required" input驗證不能為空

HTML5 canvas 畫布

canvas本身不能畫圖，只能借助于javascript畫圖

由于jquery不能保證完全支持html5的特性，所以建議使用于原生的js語法

canvas 一般的前兩個步驟為：

1、var can=document.getElementById("");獲取canvas對象

2、var con=can.getContext("2d");獲取上下文

fill stroke分別表示實心，空心。

stroke(fill)Text空心(實心)文本

stroke(fill)Style空心(實心)樣式

stroke(fill)開始繪制空心(實心)

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=""

con.stroke();

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;

con.fillRect(x,y,width,height)

5、漸變圓形

var can =document.getElementById("");

var con=can.getContext("2d");

var grd=con.createLinearGradient(x,y,r(開始),x,y,r(結束))

grd.addColorStop(0,開始漸變的顏色)

grd.addColorStop(1,結束漸變的顏色)

con.fillStyle=grd;

con.fillRect(x,y,width,height)

6、畫圖

var img=document.getElementById("")圖片的id

drawImage(img,x,y)

拖拽：其實是兩個動作。

在HTML5中，特指把一個控件拖拽到另一個控件中。

drag ?drop

使用步驟：

1、設置被拖拽的事件 onDrag

2、設置開始拖拽的事件 dragstart

3、設置被放入的事件 onDrop

4、設置開始放入事件 dropover

地圖定位：定位經緯度。 //有瀏覽器兼容性限制

navigator.geolocation.getcurrentposition( 回調位置函數名)

position.coords.latitude; //緯度

position.coords.longitude; //經度

CSS3 是在CSS2的基礎上加了一些特性

CSS3 有如下特性：

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 這兩種元素必須具有相同的父元素。

總結：

通過這一周的學習，了解了什么叫酷炫，但是酷炫的東西自己卻做不出來，只是學了canvas畫布的一點皮毛，對于這周所學的，經過練習，發現主要用正弦余弦做的那個loading圖并不能轉化為自己的東西，所以還是欠缺很多。這周的知識很多都是以記為主，只有多練才能熟練，同時希望自己在下一周的php課程里更加專注。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php专周总结,【嘉兴东臣php】HTML5、CSS3学习周总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。