零基礎(chǔ)，怎么自學(xué)好前端？如果想在前端入門(mén)，建議先打好基礎(chǔ)，比如HTML，CSS，JavaScript。你應(yīng)該模仿一些金典網(wǎng)頁(yè)，并嘗試編寫(xiě)自己的網(wǎng)頁(yè)和互動(dòng)動(dòng)畫(huà)。如果在寫(xiě)作過(guò)程中遇到問(wèn)題，可以多百度一下，

零基礎(chǔ)，怎么自學(xué)好前端？

如果想在前端入門(mén)，建議先打好基礎(chǔ)，比如HTML，CSS，JavaScript。你應(yīng)該模仿一些金典網(wǎng)頁(yè)，并嘗試編寫(xiě)自己的網(wǎng)頁(yè)和互動(dòng)動(dòng)畫(huà)。如果在寫(xiě)作過(guò)程中遇到問(wèn)題，可以多百度一下，或者請(qǐng)教一些有經(jīng)驗(yàn)的人。堅(jiān)持前端基礎(chǔ)1-2個(gè)月應(yīng)該沒(méi)問(wèn)題。

其次要注意基礎(chǔ)理論的積累，比如css盒子模型，布局，轉(zhuǎn)場(chǎng)和動(dòng)畫(huà)，定位這些常用的理論。對(duì)于javascript，你要熟悉邏輯運(yùn)算的語(yǔ)法和數(shù)組語(yǔ)法，因?yàn)閖avascript在很多場(chǎng)景下都是在處理邏輯。也可以嘗試寫(xiě)旋轉(zhuǎn)木馬、換卡、拼圖等游戲。，可以加強(qiáng)你對(duì)代碼邏輯的理解。之前寫(xiě)過(guò)關(guān)于高級(jí)javascript的文章，你也可以參考一下。

前端進(jìn)階需要了解底層知識(shí)，如js閉包、閉包的優(yōu)缺點(diǎn)、瀏覽器垃圾收集機(jī)制、dom更新原理及性能優(yōu)化、原型與原型鏈、對(duì)象與繼承等。，這個(gè)應(yīng)該很好理解。

如果后期想做到高級(jí)前端，可以通讀javascript高級(jí)編程，然后了解基本的數(shù)據(jù)結(jié)構(gòu)和算法，比如冒泡排序、快速排序、Hill排序、鏈表、二叉樹(shù)等。熟悉vue、react等主流框架。并能獨(dú)立負(fù)責(zé)項(xiàng)目。

前端架構(gòu)需要非常熟悉前端工程流程，比如配置前端開(kāi)發(fā)工作流，比如webpack和gulp，知道如何封裝團(tuán)隊(duì)公共組件庫(kù)和類(lèi)庫(kù)，比如使用rollup、自動(dòng)部署、sh

怎樣在網(wǎng)頁(yè)中做出精彩的文字排版？

所以這里 這就是訣竅！

1.唐 不要使用太多字體

建議網(wǎng)站排版時(shí)字體類(lèi)型不要超過(guò)三種，否則網(wǎng)站會(huì)顯得松散不專(zhuān)業(yè)。不僅字體太多會(huì)造成這個(gè)問(wèn)題，字體太大也會(huì)破壞頁(yè)面的布局。

通常，字體類(lèi)型的數(shù)量被限制在最低限度(兩種是很多的，一種通常就足夠了)，整個(gè)網(wǎng)站堅(jiān)持同樣的原則。如果使用多種字體，請(qǐng)確保兩種字體協(xié)調(diào)一致。以下面的字體組合為例。格魯吉亞和凡爾登相輔相成，相對(duì)和諧。與右邊的巴斯克維爾和Impact相比會(huì)有明顯的，無(wú)襯線(xiàn)Impact明顯超過(guò)巴斯克維爾 的視覺(jué)沖擊。

在中英文排版中，建議您中文使用標(biāo)準(zhǔn)中文字體，英文、數(shù)字、字符均使用。標(biāo)準(zhǔn)英文字體。以下圖為例，供參考。

左:中文(漢儀橫幅黑)英文(DIN Next LT Pro)標(biāo)點(diǎn)使用半角字符右:中文(漢儀橫幅黑)英文(漢儀橫幅黑)標(biāo)點(diǎn)使用全角字符。

2.盡量使用標(biāo)準(zhǔn)字體。

Google Web Font或者Typekit里面有很多有趣的字體，國(guó)內(nèi)有字體庫(kù)的字體嵌入服務(wù)。對(duì)于國(guó)內(nèi)設(shè)計(jì)師來(lái)說(shuō)，痛苦的是漢字很有體驗(yàn)，一個(gè)字體幾兆甚至更多，會(huì)增加用戶(hù)瀏覽網(wǎng)站的加載時(shí)間。另一方面，大寫(xiě)和小寫(xiě)26個(gè)字母以及帶有數(shù)字標(biāo)點(diǎn)符號(hào)的總共幾百個(gè)K的英語(yǔ)字體在網(wǎng)頁(yè)中易于使用。

盡可能選擇一種標(biāo)準(zhǔn)字體(近幾年網(wǎng)頁(yè)中可以使用思源、方平、Arial、Calibri或其他常見(jiàn)的在屏幕上易讀的粗體字體，如果沒(méi)有特別的概念指導(dǎo)，盡量避免使用襯線(xiàn)字體，如宋體)。不是每個(gè)用戶(hù)都能在終端上看到相同的字體，這意味著用戶(hù)可能看不到您選擇的合適字體。用戶(hù)對(duì)標(biāo)準(zhǔn)字體更熟悉，可以更快地閱讀特殊字體，少量字體可以做成。svg格式。好的排版會(huì)讓用戶(hù)更關(guān)注內(nèi)容本身而不是字體類(lèi)型。

3.限制一行文本的長(zhǎng)度

確保每行的字符數(shù)是文本可讀性的關(guān)鍵。設(shè)計(jì)者不僅要定義文本的寬度，還需要根據(jù)用戶(hù)的可讀性來(lái)定義。太寬-這會(huì)使單行文本太長(zhǎng)，對(duì)讀者來(lái)說(shuō)很難閱讀。;他的眼睛集中在課文上。因?yàn)殚L(zhǎng)時(shí)間閱讀容易連載，在大段文字中很難找到正確的行。太短-它會(huì)使用戶(hù) 眼睛經(jīng)常會(huì)回到下一行文字，打破讀者的閱讀節(jié)奏，長(zhǎng)時(shí)間閱讀會(huì)造成視覺(jué)疲勞。太短還會(huì)傾向于向讀者傳遞一個(gè)信號(hào)，讓讀者在閱讀當(dāng)前行之前跳到下一行，這可能會(huì)忽略潛在的重要單詞。

對(duì)于移動(dòng)設(shè)備，每行應(yīng)該有30-40個(gè)字符(半角)，顯示多少字取決于不同分辨率、文本寬度和字體大小的屏幕。設(shè)計(jì)原則是:保證用戶(hù)能流暢地閱讀文字，文字不能太小也不能太大。以iOS(手機(jī))為例，文字的最小字號(hào)不能小于24px，太小了用戶(hù)看不清。以百度為例，可以作為參考。

4.選擇一種多字重且屏幕顯示良好的字體。

用戶(hù)會(huì)通過(guò)不同屏幕分辨率的終端設(shè)備訪(fǎng)問(wèn)你的網(wǎng)站，大多數(shù)用戶(hù)界面都需要各種大小的文本(標(biāo)題、字幕、文字、注釋等。).選擇可以在不同屏幕分辨率的設(shè)備上運(yùn)行良好的字體，以確保其不同大小的字體具有較高的可讀性和可用性(UsabiLity)也很重要

近兩年流行的思源粗體和方平字體都是不錯(cuò)的選擇。當(dāng)然，個(gè)人認(rèn)為漢儀Banner Black在家族字體數(shù)量、字體質(zhì)量、屏幕顯示、紙張打印等方面并不遜色于前兩種字體。參與過(guò)思源黑體設(shè)計(jì)的設(shè)計(jì)師都表示，思源黑體還是比較粗糙的字體。同樣，為了保證屏幕上的易讀性，盡量避免使用襯線(xiàn)，雖然它們很漂亮。

5.使用識(shí)別度高的字體。

選擇英文字體時(shí)，有些字體的個(gè)別字母容易混淆，尤其是 "我 "和 "L "(如下圖)；以及單詞之間的間距。很多中文字體在使用較小字體時(shí)會(huì)粘在一起(上圖)，不容易分辨；所以在選擇字體類(lèi)型的時(shí)候，請(qǐng)檢查你選擇使用的字體，確保不會(huì)給用戶(hù)和產(chǎn)品造成不必要的損失。

6.避免在界面的大段中使用大寫(xiě)字母。

唐 不要在所有文本中使用大寫(xiě)字母，除非強(qiáng)迫用戶(hù)閱讀大寫(xiě)字母、首字母和有特殊含義的縮寫(xiě)。與小寫(xiě)字母相比，大量大寫(xiě)字母會(huì)嚴(yán)重減少用戶(hù) 閱讀效率和樂(lè)趣。

7.將行距控制在字體的1.5至2.0倍之間。

在文字排版中，我們還有一個(gè)專(zhuān)門(mén)的術(shù)語(yǔ)來(lái)表示行距:行距(或行高)。為了保證文字的可讀性和可讀性，使文字形成線(xiàn)性的閱讀體驗(yàn)，在網(wǎng)頁(yè)設(shè)計(jì)中，行距通常控制在字號(hào)(中文字體)的1.5-2.0倍之間。英文字體建議使用默認(rèn)行距，或者根據(jù)默認(rèn)行距進(jìn)行微調(diào)。

8.適當(dāng)?shù)念伾珜?duì)比通常，盡量避免使用相同或相似的顏色作為文本和背景。

文字越明顯，用戶(hù)瀏覽和閱讀的速度就越快。當(dāng)然，也要學(xué)會(huì)通過(guò)文字顏色、大小、背景的顏色關(guān)系來(lái)控制視覺(jué)層次。小字與背景的對(duì)比度至少要達(dá)到4.5 :1，大字(14px/18px以上)與背景的對(duì)比度要保持3:1。

灰色通常作為輔助色。根據(jù)我自己的項(xiàng)目經(jīng)驗(yàn)，有必要分享一套我一直在用的灰色，需要明確區(qū)分信息層次。

9.避免將文本涂成紅色或綠色。

色盲和色弱是我必須照顧的一些用戶(hù)，尤其是男性(8%的男性是色盲)。建議使用其他區(qū)分重要信息(下劃線(xiàn)、粗體等。).避免分別使用紅色和綠色來(lái)傳達(dá)信息。因?yàn)榧t綠色盲是最常見(jiàn)的色盲形式。(現(xiàn)在想想，那些孩子 s鞋可以 找不到司機(jī)牌照因?yàn)槭羌t綠盲討厭分分鐘制定紅綠燈規(guī)則的人？當(dāng)然，這只是一個(gè)玩笑。使用交通燈是因?yàn)楣鈱W(xué)在物理學(xué)中傳播。原因，此處不解釋)

雖然我們?cè)谌粘Ｉ钪锌偸歉嬖V用戶(hù)綠色表示正確操作，紅色表示錯(cuò)誤操作，但是讓 s反思一下我們有沒(méi)有考慮到色盲用戶(hù)的操作和體驗(yàn)。也許我們可以考慮另一種表達(dá)對(duì)錯(cuò)的？

10.避免文本閃爍

閃爍的文本或內(nèi)容可能會(huì)讓一些用戶(hù)感到不舒服，對(duì)于普通用戶(hù)來(lái)說(shuō)，可能會(huì)分散他們的注意力或讓他們感到煩躁。

雖然網(wǎng)頁(yè)設(shè)計(jì)還有很多需要我們注意的地方，但是最后我想和大家分享一個(gè)想法，排版在網(wǎng)頁(yè)設(shè)計(jì)中是非常重要的。做出正確的排版可以讓你的網(wǎng)站感覺(jué)耳目一新，而糟糕的排版會(huì)分散用戶(hù)的注意力，傾向于關(guān)注自己的感受而不是內(nèi)容。排版的關(guān)鍵是信息層次清晰，便于用戶(hù)閱讀，保證文字可讀性。字符的排版不應(yīng)該增加用戶(hù) 認(rèn)知從眾，從而達(dá)到尊重內(nèi)容和用戶(hù)的目的。