為什么是隨筆

好好算下來(lái)，學(xué)習(xí)web前端已有半個(gè)月了，這半個(gè)月來(lái)主要學(xué)習(xí)的是HTML和CSS部分，期間有困惑，也有解決困惑時(shí)的快感，所以想把這段時(shí)間感受到的一些東西記下來(lái)，因?yàn)閮?nèi)容比較雜，所以干脆叫隨筆吧。這里面不會(huì)說(shuō)前端的相關(guān)基礎(chǔ)知識(shí)，只是說(shuō)一些自己對(duì)前端的一些認(rèn)識(shí)。

• html是用來(lái)控制頁(yè)面結(jié)構(gòu)的
  我曾經(jīng)對(duì)這句話有過(guò)疑問(wèn)，覺(jué)得html應(yīng)該是控制頁(yè)面內(nèi)容的，為什么要說(shuō)是控制頁(yè)面結(jié)構(gòu)的呢？在查看京東首頁(yè)的代碼時(shí)，我恍然大悟，html確實(shí)是定義頁(yè)面內(nèi)容的，但同時(shí)它也要控制頁(yè)面的結(jié)構(gòu)。舉例來(lái)說(shuō)，京東商品分類的div包含了頂部的dt，還包含了下面的細(xì)分目錄dd，如果只是想呈現(xiàn)頁(yè)面內(nèi)容的話，其實(shí)完全不必這么做，但從現(xiàn)實(shí)的業(yè)務(wù)邏輯上來(lái)講，div確實(shí)應(yīng)該包含這兩部分，這就是html控制頁(yè)面結(jié)構(gòu)的一個(gè)例子。

jd.png

jd-code.png

• 時(shí)刻關(guān)注元素的樣式和他們?cè)谖臋n流中的位置
  乍看起來(lái)，這好像很容易，但在編程過(guò)程中，如果頭腦沒(méi)有時(shí)刻保持這個(gè)意識(shí)，會(huì)很容易迷失，寫代碼寫到一半，忘了布局，或忘了樣式是加到哪個(gè)元素上了。另一方面，為了減少這種情況，應(yīng)該適當(dāng)?shù)募右恍┳⑨?，選擇器的名字應(yīng)更好識(shí)別。
• 合理利用div
  雖然html是語(yǔ)義化的標(biāo)記語(yǔ)言，但目前html提供的標(biāo)簽還不能充分提供各種語(yǔ)義，div是很好的一個(gè)替代方案，充分的利用div劃分語(yǔ)義單元，同時(shí)不能過(guò)度使用div，這樣才能寫出語(yǔ)義清晰，代碼簡(jiǎn)潔的頁(yè)面。
• 選擇器的使用
  如果想給元素添加樣式，通常要用到選擇器，但注意不要把過(guò)度的描述選擇器，舉個(gè)例子，如果我們給一個(gè)div（class=“box”）加一個(gè)邊框，可以直接寫.box，盡量不要寫div.outer div.inner div.box，這樣只會(huì)增加樣式的特殊性，同時(shí)不會(huì)帶來(lái)什么好處，如果我們想給.box里面的div再加邊框，就得再加上前面那一串選擇器，這只會(huì)讓代碼冗余，并且子元素不好覆蓋樣式。
• 了解一些常見(jiàn)的bug
  代碼沒(méi)有問(wèn)題，可顯示效果就是不對(duì)，相信每個(gè)前端同學(xué)都有過(guò)這種經(jīng)歷，找了半天發(fā)現(xiàn)原來(lái)是瀏覽器的bug，這絕對(duì)增大了程序猿的心理陰影面積。為了保護(hù)自己的玻璃心，建議多了解一些bug。

共勉

自己剛剛踏入前端這條路，還沒(méi)堅(jiān)持過(guò)什么事情，這次我要堅(jiān)持下去！