第一，網(wǎng)上找一份好的教程

第二，身邊最好有一個(gè)懂的成手，最起碼在你遇到bug的時(shí)候能幫你調(diào)bug，要不然很可能就會(huì)死在一個(gè)bug上，從入門(mén)到放棄！

第三，勤奮+毅力+耐心

下面是真正的干貨：

《初識(shí)前端與移動(dòng)開(kāi)發(fā)到項(xiàng)目開(kāi)發(fā)視頻》教程分享給大家

下載鏈接：https://pan.baidu.com/s/1o8eL8yI

簡(jiǎn)介：

第一階段（1-2天）

學(xué)會(huì)寫(xiě)出最簡(jiǎn)單的HTML頁(yè)面，認(rèn)識(shí)什么是HTML, HTML基本的語(yǔ)法規(guī)范是什么，HTML基本骨架的組成。學(xué)習(xí)最常見(jiàn)的標(biāo)簽，比如排版標(biāo)簽，圖片標(biāo)簽，鏈接標(biāo)簽， 以及路徑的兩種方式。然后學(xué)習(xí)一些布局標(biāo)簽，比如div，span，列表， 表格 以及表單， 最后通過(guò)前面學(xué)習(xí)的標(biāo)簽，完成注冊(cè)、登錄頁(yè)面。雖然標(biāo)簽很多，會(huì)培養(yǎng)大家查閱文檔的能力，提高自己動(dòng)手，解決問(wèn)題的能力。

第二階段（3-7天）

該階段主要學(xué)習(xí)CSS樣式， 并且能完成 結(jié)構(gòu)與樣式 相分離的靜態(tài)頁(yè)面布局。學(xué)習(xí)CSS基本語(yǔ)法格式，書(shū)寫(xiě)位置， 基本選擇器和復(fù)合選擇器，字體和文本的樣式等， 初步理解CSS如何控制網(wǎng)頁(yè)樣式，以及帶來(lái)的巨大優(yōu)勢(shì)。 能深入理解標(biāo)簽的盒子含義。

還有最重要的浮動(dòng)布局，接下來(lái)會(huì)帶領(lǐng)大家學(xué)習(xí)定位，包括四種定位方式及其區(qū)別，子絕父相的重要性，定位的層級(jí)關(guān)系，完成頁(yè)面常見(jiàn)的定位效果。

最后，會(huì)帶領(lǐng)大家學(xué)習(xí)一些高級(jí)技巧，包括用戶(hù)界面樣式，精靈技術(shù)， 滑動(dòng)門(mén)技術(shù)等，對(duì)前面技術(shù)綜合練習(xí)。

學(xué)完該階段的課程之后，就可以把網(wǎng)頁(yè)美工給與的PSD效果圖還原為HTML+CSS靜態(tài)頁(yè)面，并且是實(shí)現(xiàn)結(jié)構(gòu)與樣式相分離，標(biāo)準(zhǔn)的代碼。

第三階段（8-9天）

學(xué)習(xí)了這么多的基礎(chǔ)知識(shí)，應(yīng)該聯(lián)系一個(gè)案例了，本階段，為大家講解京東的項(xiàng)目

第四階段（10-12）

本帶領(lǐng)大家學(xué)習(xí)HTML5新增的標(biāo)簽，樣式以及屬性。學(xué)習(xí)CSS3過(guò)渡、2D/3D變換，漸變、動(dòng)畫(huà)以及伸縮布局。本階段還有攜程網(wǎng)的小項(xiàng)目，通過(guò)學(xué)習(xí)項(xiàng)目，加深對(duì)所學(xué)知識(shí)的理解

一、CSS選擇器有哪些

CSS中的選擇器很多，比如：ID選擇器，類(lèi)選擇器，通配符選擇器，偽類(lèi)選擇器等等，接下來(lái)主要介紹常用的幾個(gè)。

1.標(biāo)簽選擇器

語(yǔ)法：標(biāo)簽名{}，eg：h1{}//為所有的h1元素設(shè)置樣式。

2.ID選擇器

語(yǔ)法：#id名{}//id值唯一不能重復(fù),eg:#top{}//為id為top的元素設(shè)置樣式。

3.類(lèi)選擇器

語(yǔ)法：.class{},eg：.box{}//為所有的class值為box的元素設(shè)置樣式。

4.組選擇器

語(yǔ)法：選擇器1，選擇器2，選擇器N{},eg:#box1,.box2,p{}//為id為box1，class為box2和p的元素共同設(shè)置樣式。

5、通配符選擇器

語(yǔ)法：*{}，eg：*{font-size：16px}//將整個(gè)頁(yè)面字體大小設(shè)為16px。

6.后代選擇器

語(yǔ)法：選擇器1選擇器2{}，eg：p.aa{}//選中指定祖先元素p的指定后代.aa。

7.子元素選擇器

語(yǔ)法：父元素>子元素{},eg：p>.box{}//選中父元素p的指定子元素.box。注意與后代元素選擇器的區(qū)別

8.偽類(lèi)選擇器

偽類(lèi)可以用來(lái)表示一些特殊的狀態(tài),如：

：link-未訪問(wèn)過(guò)的超鏈接。

：visited-已訪問(wèn)過(guò)的超鏈接。

：hover-鼠標(biāo)經(jīng)過(guò)的元素。

：active-正在點(diǎn)擊的元素。

eg：a:hover{color:red}//鼠標(biāo)經(jīng)過(guò)a標(biāo)簽時(shí)，顏色變?yōu)榧t色。

二、CSS選擇器的優(yōu)先級(jí)順序

當(dāng)同一屬性的不同值都作用到了同一個(gè)元素時(shí)，如果定義的屬性之間有沖突，那么應(yīng)該用誰(shuí)的值的，這個(gè)時(shí)候就涉及到CSS的優(yōu)先級(jí)順序了。

1.在屬性后面使用!important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。

2.作為style屬性寫(xiě)在元素內(nèi)的內(nèi)部樣式

3.id選擇器

4.類(lèi)選擇器

5.標(biāo)簽選擇器

6.通配符選擇器

7.瀏覽器自定義或繼承的

js好學(xué)嗎？

首先得根據(jù)你目前掌握的基礎(chǔ)來(lái)判斷。假如你有了其他語(yǔ)言基礎(chǔ)，那么學(xué)習(xí)js會(huì)很快，因?yàn)楦鞣N數(shù)據(jù)類(lèi)型，約束，都差不多相似的。js比較靈活，是屬于弱類(lèi)型聲明的語(yǔ)言，這一點(diǎn)跟其他語(yǔ)言又不大一樣，但是只要有其他語(yǔ)言基礎(chǔ)的，學(xué)起來(lái)都會(huì)比較快的。你只要看一遍基礎(chǔ)知識(shí)，練習(xí)一下就會(huì)使用，可能在操作dom上需要多下功夫，其他邏輯什么的，都跟其他語(yǔ)言差不多。

其次就是沒(méi)有基礎(chǔ)的。沒(méi)有基礎(chǔ)的話(huà)，前端方面需要學(xué)習(xí)三大件:js，html，css，學(xué)習(xí)方式可以通過(guò)書(shū)本，視頻還有API文檔。開(kāi)發(fā)過(guò)程API文檔都是伴隨左右的，方便隨時(shí)查看不懂的知識(shí)點(diǎn)。js要學(xué)習(xí)語(yǔ)法，數(shù)據(jù)類(lèi)型，閉包，事件模型，獲取dom等基礎(chǔ)的知識(shí)；html需要學(xué)習(xí)常用標(biāo)簽，標(biāo)簽常用屬性，表單的使用等基礎(chǔ)知識(shí)；css需要學(xué)習(xí)選擇器的使用方式，盒子模型的布局實(shí)現(xiàn)，常用的樣式設(shè)計(jì)等知識(shí)。

最后，就是把上面所說(shuō)的三大件融會(huì)貫通的使用，現(xiàn)在開(kāi)發(fā)就是分離型開(kāi)發(fā)，js，html,css文件都是相互獨(dú)立出來(lái)的。后續(xù)需要找項(xiàng)目進(jìn)行練習(xí)設(shè)計(jì)前端界面，并完成一些小功能，提高編碼能力，差不多了，就學(xué)習(xí)vue等框架。除此以外因?yàn)殚_(kāi)發(fā)項(xiàng)目前后端分離，還要學(xué)會(huì)熟練的與后端數(shù)據(jù)交互，學(xué)完這些就算入門(mén)了。

任何語(yǔ)言都是由易到難，就像修煉一樣，一個(gè)境界一個(gè)境界往上走，需要耐心，堅(jiān)持，才能學(xué)好技術(shù)，加油吧！

css的選擇器的分類(lèi)不包括“超文本標(biāo)記選擇器”。

css的選擇器包括類(lèi)選擇器、標(biāo)簽選擇器、ID選擇器、偽類(lèi)選擇器等等。

類(lèi)選擇器，比如class類(lèi)型 class = "nav"的話(huà)，那么css對(duì)應(yīng).nav{}；

標(biāo)簽選擇器，比如body input 就是直接對(duì)應(yīng) body{} input{}；

ID選擇器，比如 id="name"，那么css對(duì)應(yīng) #name{}；

偽類(lèi)、偽對(duì)象：如a:link,a:hover,a:visited等。