前端也能輕松年薪20w+？超詳細前端入門攻略拿去！

前言

來自一名多年工作經(jīng)驗的前端工程師傾情力作！

最近看到有很多小伙伴在提問，我是新手想學(xué)習(xí)前端應(yīng)該怎么入門？我對前端很感興趣但是一直搞不懂什么css、js到底怎么寫的，為什么這個樣式這樣寫總是不行呢？有沒有系統(tǒng)學(xué)習(xí)css知識的書籍、課程推薦？

因此，我在這里特意整理了一份超詳細的《前端入門進階路線規(guī)劃攻略》，主要分為三大方面，分別是：前端小白入門教程、前端進階路線和前端常用工具網(wǎng)站大全。

聲明：以下內(nèi)容全部為最新原創(chuàng)，旨在為新人提供一個入門的要點整理，不會只是簡單的丟一大堆鏈接讓你自己去看。

一、前端小白入門教程

作為一名前端小白，或者剛剛接觸這個領(lǐng)域沒多久的新人，需要關(guān)心的知識點有哪些呢?

1. HTML

什么是html?下面這個就是最簡單的例子：

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

所謂html，全稱是Hyper Text Marked Language，即超文本標(biāo)記語言。

它是1989年被一位英國計算機科學(xué)家：蒂姆·伯納斯-李提出，應(yīng)用于瀏覽器的一種標(biāo)記語言。時至今日，它已經(jīng)經(jīng)過多次的修訂和發(fā)展，最新版是2014年作為W3C推薦標(biāo)準發(fā)布的HTML 5。

簡單了解一下它的歷史，對于我們并沒有壞處，知識需要沉下心來慢慢感悟。

Html的書寫很容易，總是兩個標(biāo)簽的互相嵌套，或者一個標(biāo)簽的自閉合（img、a等）。

關(guān)于html知識點，我們主要了解下面幾點：

  • html文檔頭部的!doctype聲明；
    html發(fā)展史中，有過眾多的版本，例如HTML 4.01 Strict、HTML 4.01 Transitional、HTML 5等等，Doctype主要作用在于告訴瀏覽器應(yīng)該基于Html的哪個版本去解析文檔，上面的<!DOCTYPE html>表示使用HTML 5去解析文檔。
  • 了解常用的html元素有哪些；
    以下是我能想得起來的一些元素，自然就表示是常用的(ww)；

塊狀元素：body、div、p、h1-h6、ul、li、table、tr、td；
行內(nèi)元素：span、a、i、strong;
行內(nèi)塊元素：input、img；

塊狀元素指的是有自身寬高、可以設(shè)置margin和padding、占據(jù)一行、多個塊狀元素排列方式從上到下；

行內(nèi)元素指的是自身沒寬高、可以設(shè)置水平的margin和padding、不占據(jù)一行、多個行內(nèi)元素排列方式從左到右；

行內(nèi)塊元素，自身可設(shè)置寬高、可以設(shè)置margin和padding、但是不占據(jù)一行、多個行內(nèi)塊元素排列方式也是從左到右。

為了方便小伙伴們理解，這里畫了一個草圖，相信能很容易就明白了。

image.png

image.png

image.png
  • 了解標(biāo)簽互相嵌套的原則；
    這些原則我都總結(jié)在下面了（注意這里所講的全部都是本身標(biāo)簽定義的塊元素或者行內(nèi)元素，不是css設(shè)置了display樣式之后的情況）：
    • 塊元素可以包含行內(nèi)元素，行內(nèi)元素不能包含塊元素；
    • p元素里面不能包含塊級元素；
    • 特殊的塊元素只能包含行內(nèi)元素，不能再包含塊元素，包括：h1-h6、p；
    • 特殊的元素下面只能包含特定的標(biāo)簽元素，例如：table下面是thead、tbody，ul下面是li，ol下面是li，dl下面是dt、dd，如果有錯誤嵌套的話html會將其轉(zhuǎn)為正確的嵌套標(biāo)簽，至于轉(zhuǎn)換規(guī)則是如何，這里貼一下很久以前看過的一篇文章：

How browsers work

image.png

文章主要是講瀏覽器的渲染機制的，其中有提到如果有錯誤的嵌套標(biāo)簽，不同瀏覽器會如何如何處理，有興趣的同學(xué)可以去看一下。

2. CSS

接著來到前端三板斧的第二板：CSS；

我想對于沒接觸前端的人來說，如果有某個原因使得ta對前端感興趣，那么絕大部分跟CSS脫不了關(guān)系；

CSS很強大，你可以通過它編寫出任意你想要的網(wǎng)站效果，也可以通過它制作各種各樣酷炫的動畫；

CSS又很矛盾，當(dāng)你只懂點皮毛的時候，它表現(xiàn)出來的樣式效果會讓你崩潰，常常會為了某一處樣式而耗費大半天的調(diào)試，卻想不通為什么會這樣子；

CSS的知識點其實很多很多，這里的話我只整理一些對于入門前端的同學(xué)能在日常開發(fā)中基本能夠正常編寫頁面的必備點，不多說了，請往下看吧~

  • 了解什么是盒子模型；

這個是最基礎(chǔ)，也是面試中常問的考點之一了；

所謂盒子模型，指的其實就是一個html標(biāo)簽元素，這個元素包括margin、border、padding、
width幾個樣式，加上元素本身的content就構(gòu)成了盒子模型；

不過值得注意的是，IE瀏覽器下的盒子模型和W3C標(biāo)準盒子模型是不同的，具體區(qū)別看下面兩個圖相信就能完全了解：

image.png

image.png

簡單來說，也就是標(biāo)準盒子模型的width屬性，僅僅表示內(nèi)容的寬度，而不包含padding和border的寬度；而IE盒子模型的width屬性，包含內(nèi)容、padding和border的寬度；

這已經(jīng)是歷史遺留原因了，從開發(fā)角度來說，IE的盒子模型更加符合我們的心意；w3c后面出了一個折中方案，也就是可以通過設(shè)置box-sizing: border-box;屬性來將盒子模型修改為IE盒子模型；

了解什么是浮動，以及如何清除浮動；

浮動元素的設(shè)置很簡單，只要設(shè)置float: left;或者float: right;屬性之后就可以將元素變?yōu)楦拥臓顟B(tài)，也就是元素會貼在父元素的左邊或者右邊；

浮動元素有什么危害呢？

設(shè)置了浮動的元素，將無法撐開父元素，所以會導(dǎo)致其他的div會堆積在上方，形成樣式錯亂；來看個簡單的代碼例子：

<body>
    <div class="main">
        這里是父元素
        <div class="inside">前端充電營</div>
    </div>
    <div class="other">這里是其他元素</div>
</body>

下面是對應(yīng)的css樣式：

<style>
.main {
    background-color: aqua;
}
.inside {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.other {
    background-color: yellow;
}
</style>
image.png

顯然，浮動的子元素不會把父元素撐開，所以導(dǎo)致看起來子元素排在了兩個元素的上方；

那么，怎么解決這個問題呢？

解決方案有兩個：

  • 給父元素顯示設(shè)置高度；

  • 利用clear:both;屬性清除浮動

設(shè)置高度的方案不再贅述，這里演示一下如何使用clear: both;來清除浮動：

.main:after {
    content: "";
    display: block;
    clear: both;
}

在main元素后方增加上面代碼，看下效果：

image.png

可以看到，浮動被成功清除；

關(guān)于css的浮動知識點，其實可以展開很多，這里只是提了幾個注意的點，小伙伴們下來可以自己再去詳細了解下~

  • 了解CSS渲染權(quán)重規(guī)則

這也是很基本的css必備知識點，也就是當(dāng)css的樣式相同時，應(yīng)該渲染哪一個樣式呢？這里面也是有一套很詳細的標(biāo)準；

我們都知道css有三種方式可以引入：元素style屬性(行內(nèi)樣式)、頭部style(內(nèi)部樣式文件)、link標(biāo)簽引入(外部樣式文件)；

這幾種引入方式的優(yōu)先級為：行內(nèi)樣式 > 內(nèi)部樣式文件 = 外部樣式文件；當(dāng)兩者優(yōu)先級相同時，哪一個文件靠后，則它的優(yōu)先級會更高；

除了文件的優(yōu)先級，同文件的樣式又如何比較呢？

首先我們要知道css是有多種選擇器的，優(yōu)先級從大到小分成四檔，這四檔我們可以看成是一個0.0.0.0的數(shù)字；下面是我總結(jié)的比較詳細的層疊規(guī)則：

  • 四個位置的值組成的一個組合，用a.b.c.d來表示，當(dāng)a相同時，比較b，值較大的組合優(yōu)先級較高，以此類推；

  • 四個位置的值生成規(guī)則如下

    • 如果html標(biāo)簽的style屬性中該樣式存在，則a = 1；

    • 選擇器中id選擇器的個數(shù)作為b的值；

    • 其他屬性以及偽類的總數(shù)量作為c的值，如'.con'，':hover'等；

    • 元素名和偽元素的總數(shù)量作為d的值，如'div'，':after'等；

注意： 的組合值為0.0.0.0*

  • 清晰地知道塊狀元素、行內(nèi)元素和行內(nèi)塊元素在某些場景會有什么表現(xiàn)；

這一點雖然看起來比較空泛，但其實這是在工作中經(jīng)常都會碰到的問題；

前端需要寫頁面，頁面就會涉及到布局，布局就會跟各種div打交道；只有清楚了解它們各自的特性，才會在編寫頁面時候得心應(yīng)手；

這里列舉幾條比較常見但是又容易被忽略的特性：

  • 塊狀元素默認會占據(jù)當(dāng)前行內(nèi)父元素剩余的所有空間，所以有時候不需要設(shè)置width屬性；
  • 行內(nèi)元素只會占據(jù) 元素本身的寬度大小，并且設(shè)置寬高也無效；
  • 行內(nèi)元素?zé)o法設(shè)置上下margin、padding，但是可以設(shè)置左右margin、padding；
  • 要用text-align:center使得元素居中，需要將子元素設(shè)置為行內(nèi)元素或者行內(nèi)塊元素；
  • 當(dāng)發(fā)現(xiàn)行內(nèi)元素上下沒對齊的時候，可以試一下vertical-align屬性，它可以設(shè)置px值、百分比等等，是布局的好手；
  • 元素設(shè)置了width: 100%;的時候你就要小心了，因為所有的border、padding屬性都會導(dǎo)致滾動條的出現(xiàn)，如果想避免這種情況的話，你可以設(shè)置box-sizing: border-box;（使用IE盒子模型）
  • 想要一個div出現(xiàn)滾動條的條件，該div設(shè)置了overflow: auto或scroll，其子元素內(nèi)容足夠多，其父元素或者該div本身有固定高度，并且其父元素設(shè)置了overflow: hidden;

更多特性就不再一一總結(jié)了，這些小伙伴們也可以在以后的編碼過程中自己總結(jié)；不過注意到以上幾點的話，很多時候可以避免不知原因的坑；

還有css樣式中還有position屬性，css3屬性沒有提到，可能以后也會再開一篇新文章來總結(jié)一下我個人的經(jīng)驗；

css篇就先到這里了，剩下還有js的入門篇，但是我看了下篇幅已經(jīng)很長快5000字了，本來沒打算寫到這么多的沒想到展開的有點多（汗...），js的話就放到下一期吧；

喜歡的小伙伴可以點個贊、點個關(guān)注，你的支持是我最大的動力！

image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容