03 - Noi Dung Web - Phan 3 - Html5 - Css3

Bi ging
LP TRNH WEB
L nh Thanh B mn Mng v Truyn thng My tnh Khoa Cng ngh Thng tin Trng i hc Cng ngh, HQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com Mobile: 0987.257.504
Bi 3
Ni dung web
L nh Thanh, Bi ging Lp trnh web.
Ni dung
HTML CSS JavaScript DOM S pht trin: HTML5, CSS3
S pht trin ca HTML: HTML5

HTML 4 c s dng t 1999 HTML 5 ang c xut, tng lai s thnh chun Cc trnh duyt chnh (Safari, Chrome, Firefox, Opera, Internet Explorer) h tr dn HTML 5
Cc lut cho HTML 5

Cc c trng mi da trn HTML, CSS, DOM v javascript Gim cc plugin X l li tt hn Nhiu nh du thay cho kch bn c lp thit b
Cc c trng mi
i tng <canvas> cho ha 2D i tng <video> v <audio> cho media Cc i tng theo ni dung nh <article>, <footer>, <header>, <nav>, <section> Cc iu khin form mi nh calendar, date, time, email, url, search H tr lu tr cc b
i tng nhp mu
i tng nhp ngy
i tng nhp gi
i tng nhp ngy gi
i tng nhp ngy gi a phng
i tng nhp tun
i tng nhp email
i tng nhp thng
i tng nhp s
i tng nhp gi tr trong khong
i tng nhp ni dung tm kim
i tng nhp in thoi
i tng nhp URL
i tng t ng hon chnh nhp
i tng to kha
i tng ra
i tng video
iu khin chy video
i tng audio
Lu tr web: localStorage
Lu tr web: sessionStorage
S dng m
m gip tng tc , gim ti cho server, cho php duyt offline t thuc tnh manifest cho html
<html manifest=cache.appcache">
To tp .appcache
CACHE MANIFEST # Cc tp c t cache /theme.css /logo.gif /main.js
NETWORK: #Cc tp khng c t cache login.asp

FALLBACK: #Tp thay th khi c li /html/ /offline.html Khi cc tp trn server thay i, cn phi cp nht tp .appcache trnh duyt cp nht cache
Web worker
Chng trnh javascript chy nn nh ngha web worker tp .js
S dng postMessage(obj); a thng bo ra trang HTML
To web worker
if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("workers.js"); } w.onmessage = function (event) { //access event.data; }; }
Dng web worker

w.terminate();
S kin server gi
To i tng nhn s kin server gi
if(typeof(EventSource)!=="undefined") { var source=new EventSource("sse.php"); source.onmessage=function(event) { //access event.data }; }
M pha server
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); echo \n\n; echo "data: whatever you want to send to client.\n\n"; flush(); ?>
CSS3
L chun CSS mi nht Thch ng ngc Cc mun quan trng nht
B chn M hnh hp Nn v vin Hiu ng vn bn Bin i 2D/3D Hot cnh Dn nhiu ct Giao din ngi dng
To vin trn gc
border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */
To bng
box-shadow: 10px 10px 5px #888888;
S dng nh lm vin
border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */
nh dng nn
background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box;
Hiu ng vn bn
text-shadow: 5px 5px 5px #FF0000; word-wrap: normal|break-word; word-break: normal|break-all|hyphenate; text-overflow: clip|ellipsis|string;
Bin i 2D
transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */
Bin i 3D
transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari and Chrome */ -moz-transform: rotateY(130deg); /* Firefox */
Chuyn kiu
transition: property1 time1, property2 time2, property3 time3; -moz-transition: width 2s, height 2s, -moztransform 2s; -webkit-transition: width 2s, height 2s, webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s;
Hot cnh
nh ngha cc cnh trong hot cnh
@keyframes kfname { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
S dng hot cnh

animation-name: kfname; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running;
Nhiu ct
-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;
-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:4px outset #ff00ff;
Tip theo
Cng ngh web

03 - Noi Dung Web - Phan 3 - Html5 - Css3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03 - Noi Dung Web - Phan 3 - Html5 - Css3

Uploaded by

Copyright:

Available Formats

Bi ging

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

S pht trin ca HTML: HTML5

L nh Thanh, Bi ging Lp trnh web.

Cc lut cho HTML 5

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

i tng nhp ngy

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

i tng nhp ngy gi

L nh Thanh, Bi ging Lp trnh web.

i tng nhp ngy gi a phng

L nh Thanh, Bi ging Lp trnh web.

i tng nhp tun

L nh Thanh, Bi ging Lp trnh web.

i tng nhp email

L nh Thanh, Bi ging Lp trnh web.

i tng nhp thng

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

i tng nhp gi tr trong khong

L nh Thanh, Bi ging Lp trnh web.

i tng nhp ni dung tm kim

L nh Thanh, Bi ging Lp trnh web.

i tng nhp in thoi

L nh Thanh, Bi ging Lp trnh web.

i tng nhp URL

L nh Thanh, Bi ging Lp trnh web.

i tng t ng hon chnh nhp

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

iu khin chy video

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

NETWORK: #Cc tp khng c t cache login.asp

L nh Thanh, Bi ging Lp trnh web.

Dng web worker

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

S dng hot cnh

L nh Thanh, Bi ging Lp trnh web.

Cng ngh web

L nh Thanh, Bi ging Lp trnh web.

You might also like