首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之全面的前端開發(fā)指南：HTML、CSS

更新時間:2017-06-21 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:

HTML
HTML5為我們提供了很多旨在精確描述內(nèi)容的語義元素。確保你可以從它豐富的詞匯中獲益。
[HTML] 純文本查看 復(fù)制代碼
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>
你需要理解你正在使用的元素的語義。用一種錯誤的方式使用語義元素比保持中立更糟糕
[HTML] 純文本查看 復(fù)制代碼
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>
簡潔
保持代碼的簡潔。忘記原來的XHTML習(xí)慣。
[HTML] 純文本查看 復(fù)制代碼
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>
[HTML] 純文本查看 復(fù)制代碼
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>
可訪問性
可訪問性不應(yīng)該是以后再想的事情。提高網(wǎng)站不需要你成為一個WCAG專家，你完全可以通過修復(fù)一些小問題，從而造成一個巨大的變化，例如：
  • 學(xué)習(xí)正確使用alt 屬性
  • 確保鏈接和按鈕被同樣地標(biāo)記（不允許<div>）
  • 不專門依靠顏色來傳遞信息
  • 明確標(biāo)注表單控件
[HTML] 純文本查看 復(fù)制代碼
1
<!-- bad --><h1><img alt="Logo" src="logo.png"></h1><!-- good --><h1><img alt="My Company, Inc." src="logo.png"></h1>

語言
當(dāng)定義語言和字符編碼是可選擇的時候，總是建議在文檔級別同時聲明，即使它們在你的HTTP標(biāo)頭已經(jīng)詳細(xì)說明。比任何其他字符編碼更偏愛UTF-8。
[HTML] 純文本查看 復(fù)制代碼
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>
性能
除非有正當(dāng)理由才能在內(nèi)容前加載腳本，不要阻塞頁面的渲染。如果你的樣式表很重，開頭就孤立那些絕對需要得樣式，并在一個單獨的樣式表中推遲二次聲明的加載。兩個HTTP請求顯然比一個慢，但是感知速度是重要的因素。
[HTML] 純文本查看 復(fù)制代碼
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>

CSS分號
雖然分號在技術(shù)上是CSS一個分隔符，但應(yīng)該始終把它作為一個終止符。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */div {  color: red
}/* good */div {  color: red;
}
盒子模型
盒子模型對于整個文檔而言是相同的。全局性的* { box-sizing: border-box; }就非常不錯，但是不要改變默認(rèn)盒子模型的特定元素，如果可以避免的話。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */div {  width: 100%;  padding: 10px;  box-sizing: border-box;
}/* good */div {  padding: 10px;
}
流
不要更改元素的默認(rèn)行為，如果可以避免的話。元素盡可能地保持在自然的文檔流中。例如，刪除圖像下方的空格而不改變其默認(rèn)顯示：
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */img {  display: block;
}/* good */img {  vertical-align: middle;
}
同樣，如果可以避免的話，不要關(guān)閉元素流。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */div {  width: 100px;  position: absolute;  right: 0;
}/* good */div {  width: 100px;  margin-left: auto;
}
定位
在CSS中有許多定位元素的方法，但應(yīng)該盡量限制以下屬性/值。按優(yōu)先順序排列：
[HTML] 純文本查看 復(fù)制代碼
1
display: block;display: flex;position: relative;position: sticky;position: absolute;position: fixed;
選擇器
最小化緊密耦合到DOM的選擇器。當(dāng)選擇器有多于3個結(jié)構(gòu)偽類，后代或兄弟選擇器的時候，考慮添加一個類到你想匹配的元素。
[HTML] 純文本查看 復(fù)制代碼
1
/* bad */div:first-of-type :last-child > p ~ */* good */div:first-of-type .info
當(dāng)你不需要的時候避免過載選擇器。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */img[src$=svg], ul > li:first-child {  opacity: 0;
}/* good */[src$=svg], ul > :first-child {  opacity: 0;
}
特異性
不要讓值和選擇器難以覆蓋。盡量少用id，并避免!important。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
5
/* bad */.bar {  color: green !important;
}.foo {  color: red;
}/* good */.foo.bar {  color: green;
}.foo {  color: red;
}
覆蓋
覆蓋樣式使得選擇器和調(diào)試變得困難。如果可能的話，避免覆蓋樣式。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
/* bad */li {  visibility: hidden;
}li:first-child {  visibility: visible;
}/* good */li + li {  visibility: hidden;
}
繼承
不要重復(fù)可以繼承的樣式聲明。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */div h1, div p {  text-shadow: 0 1px 0 #fff;
}/* good */div {  text-shadow: 0 1px 0 #fff;
}
簡潔
保持代碼的簡潔。使用簡寫屬性，沒有必要的話，要避免使用多個屬性。
[HTML] 純文本查看 復(fù)制代碼
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;
}
語言
英語表達(dá)優(yōu)于數(shù)學(xué)公式。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */:nth-child(2n + 1) {  transform: rotate(360deg);
}/* good */:nth-child(odd) {  transform: rotate(1turn);
}
瀏覽器引擎前綴
果斷地刪除過時的瀏覽器引擎前綴。如果需要使用的話，可以在標(biāo)準(zhǔn)屬性前插入它們。
[HTML] 純文本查看 復(fù)制代碼
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;
}
動畫
視圖轉(zhuǎn)換優(yōu)于動畫。除了opacity 和transform，避免動畫其他屬性。
[HTML] 純文本查看 復(fù)制代碼
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);
}
單位
可以的話，使用無單位的值。如果使用相對單位，那就用rem 。秒優(yōu)于毫秒。
[HTML] 純文本查看 復(fù)制代碼
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;
}
顏色
如果你需要透明度，使用rgba。另外，始終使用十六進(jìn)制格式。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
/* bad */div {  color: hsl(103, 54%, 43%);
}/* good */div {  color: #5a3;
}
繪畫
當(dāng)資源很容易用CSS復(fù)制的時候，避免HTTP請求。
[HTML] 純文本查看 復(fù)制代碼
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;
}
Hacks
不要使用Hacks。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
5
/* bad */div {  // position: relative;
  transform: translateZ(0);
}/* good */div {  /* position: relative; */
  will-change: transform;
}

本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/ 
分享到：
在線咨詢 我要報名
和我們在線交談！