更新時間:2017-06-21 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <!-- bad --> < div id = "main" > < div class = "article" > < div class = "header" > < h1 >Blog post</ h1 > < p >Published: < span >21st Feb, 2015</ span ></ p > </ div > < p >…</ p > </ div ></ div > <!-- good --> < main > < article > < header > < h1 >Blog post</ h1 > < p >Published: < time datetime = "2015-02-21" >21st Feb, 2015</ time ></ p > </ header > < p >…</ p > </ article ></ main > |
1 2 3 4 5 | <!-- bad --> < h1 > < figure > < img alt = Company src = logo .png> </ figure ></ h1 > <!-- good --> < h1 > < img alt = Company src = logo .png></ h1 > |
01 02 03 04 05 06 07 08 09 10 11 12 13 | <!-- bad --> <!doctype html>< html lang = en > < head > < meta http-equiv = Content -Type content = "text/html; charset=utf-8" /> < title >Contact</ title > < link rel = stylesheet href = style .css type = text /css /> </ head > < body > < h1 >Contact me</ h1 > < label > Email address: < input type = email placeholder = you @email.com required =required /> </ label > < script src = main .js type = text /javascript></ script > </ body ></ html > |
01 02 03 04 05 06 07 08 09 10 | <!-- good --> <!doctype html>< html lang = en > < meta charset = utf -8> < title >Contact</ title > < link rel = stylesheet href = style .css> < h1 >Contact me</ h1 > < label > Email address: < input type = email placeholder = you @email.com required> </ label > < script src = main .js></ script ></ html > |
1 | <!-- bad --> < h1 >< img alt = "Logo" src = "logo.png" ></ h1 > <!-- good --> < h1 >< img alt = "My Company, Inc." src = "logo.png" ></ h1 > |
1 2 3 | <!-- bad --> <!doctype html>< title >Hello, world.</ title > <!-- good --> <!doctype html>< html lang = en > < meta charset = utf -8> < title >Hello, world.</ title ></ html > |
1 | <!-- bad --> <!doctype html>< meta charset = utf -8>< script src = analytics .js></ script >< title >Hello, world.</ title >< p >...</ p > <!-- good --> <!doctype html>< meta charset = utf -8>< title >Hello, world.</ title >< p >...</ p >< script src = analytics .js></ script > |
1 2 3 | /* bad */div { color: red }/* good */div { color: red; } |
1 2 3 | /* bad */div { width: 100%; padding: 10px; box-sizing: border-box; }/* good */div { padding: 10px; } |
1 2 3 | /* bad */img { display: block; }/* good */img { vertical-align: middle; } |
1 2 3 | /* bad */div { width: 100px; position: absolute; right: 0; }/* good */div { width: 100px; margin-left: auto; } |
1 | display: block;display: flex;position: relative;position: sticky;position: absolute;position: fixed; |
1 | /* bad */div:first-of-type :last-child > p ~ */* good */div:first-of-type .info |
1 2 3 | /* bad */img[src$=svg], ul > li:first-child { opacity: 0; }/* good */[src$=svg], ul > :first-child { opacity: 0; } |
1 2 3 4 5 | /* bad */.bar { color: green !important; }.foo { color: red; }/* good */.foo.bar { color: green; }.foo { color: red; } |
1 2 3 4 | /* bad */li { visibility: hidden; }li:first-child { visibility: visible; }/* good */li + li { visibility: hidden; } |
1 2 3 | /* bad */div h1, div p { text-shadow: 0 1px 0 #fff; }/* good */div { text-shadow: 0 1px 0 #fff; } |
1 2 3 | /* bad */div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; }/* good */div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; } |
1 2 3 | /* bad */:nth-child(2n + 1) { transform: rotate(360deg); }/* good */:nth-child(odd) { transform: rotate(1turn); } |
1 2 3 | /* bad */div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; }/* good */div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; } |
1 2 3 4 5 6 7 | /* bad */div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } }/* good */div:hover { transition: 1s; transform: translateX(100px); } |
1 2 3 | /* bad */div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; }/* good */div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; } |
1 2 3 | /* bad */div { color: hsl(103, 54%, 43%); }/* good */div { color: #5a3; } |
1 2 3 | /* bad */div::before { content: url(white-circle.svg); }/* good */div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } |
1 2 3 4 5 | /* bad */div { // position: relative; transform: translateZ(0); }/* good */div { /* position: relative; */ will-change: transform; } |
Web前端開發(fā)培訓(xùn)之全面的前端開發(fā)指南:JavaScript
2017-06-21Web前端開發(fā)培訓(xùn)之HTML5新手入門指南
2017-06-21Web前端開發(fā)培訓(xùn)之HTML5 如何重新定義web
2017-06-21WEB前端培訓(xùn)之David Geary對HTML5 的 2D 視頻游戲詳細(xì)剖析思路一
2017-06-15WEB前端培訓(xùn)之David Geary對HTML5 的 2D 視頻游戲詳細(xì)剖析思路二
2017-06-15WEB前端培訓(xùn)之David Geary對HTML5 的 2D 視頻游戲詳細(xì)剖析思路三
2017-06-15