web前端開發(fā)自學(xué)路線，html+css+JavaS

web前端開發(fā)自學(xué)路線，html+css+JavaScript的學(xué)習(xí)方法

廢話，直接干貨

學(xué)習(xí)前端的幾個階段：

一階段：html標(biāo)簽、html5新增標(biāo)簽、css樣式、css3樣式、媒體查詢等

二階段：JavaScript、jQuery、ajax、面向?qū)ο蟆ttp傳輸協(xié)議等

三階段：canvas、js高級應(yīng)用、JS-SDK、H5新增技術(shù)

四階段：node.js、vue.js

第一階段——HTML的學(xué)習(xí)

超文本標(biāo)記語言(HyperText Mark-up Language 簡稱HTML)是一個網(wǎng)頁的骨架，無論是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性

HTML 的學(xué)習(xí)是一個記憶和理解的過程，在學(xué)習(xí)過程中可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計”視圖中看效果，在“代碼”視圖中學(xué)本質(zhì)，將各種視圖的優(yōu)勢發(fā)揮到極致，這種對照學(xué)習(xí)的方法彌補(bǔ)了單純識記HTML標(biāo)簽和屬性的枯燥乏味，想必對各位初學(xué)的小盆友們來說，必定是極好的!

在學(xué)習(xí)了HTML之后，我們只是掌握了各種“原材料”的制作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們設(shè)計的方案組合布局在一起并進(jìn)行一些樣式的美化。

第二個階段——CSS的學(xué)習(xí)

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的，這樣就極大地提高了我們開發(fā)的速度，降低了維護(hù)的成本。

同時CSS中的盒子模型、相對布局、絕對布局等能夠?qū)崿F(xiàn)對網(wǎng)頁中各對象的位置排版進(jìn)行像素級的，精確控制。通過此階段的學(xué)習(xí)，我們就可以順利完成“一幢樓房”的建設(shè)。

“樓房”建設(shè)完成之后，我們可以交給用戶使用，但是如果想讓用戶獲得更佳的體驗，我們還可以對“樓房”進(jìn)行更深一步的“裝修”，讓它看起來更“豪華”一些。

第三個階段——JavaScript的學(xué)習(xí)

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對象和DOM操作，借助這些內(nèi)容我們可以來實現(xiàn)一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那么呆板，屌絲瞬間逆襲高富帥!有么有?

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經(jīng)理卻突然對你大吼道

這個效果在××瀏覽器下不兼容，重新搞……”

“不兼容?”瞬間石化了有木有?

我擦，坑爹啊!那可是花了我一個晚上寫了幾百行代碼搞定的啊，吐血了都!”

JavaScript的兼容性和復(fù)雜性有時候的確讓我們頭疼，還好有“大神”幫我們做了封裝。

Web前端的學(xué)習(xí)建議

最后給大家聊聊在學(xué)習(xí)Web前端中的一些建議和方法：

在CSS布局時需要注意的一個問題是很多同學(xué)缺乏對頁面布局進(jìn)行整體分析，不能夠從宏觀上對頁面中盒子間的嵌套關(guān)系進(jìn)行把握，就急于動手去做，導(dǎo)致頁面中各元素間的關(guān)系很混亂，容易出現(xiàn)盒子在浮動時錯位等情況。建議大家在布局時采用“自頂向下，逐步細(xì)化”的思想，先用幾個盒子將頁面從整體上劃分，然后逐步在盒子中繼續(xù)嵌套盒子。

“君子生非異也，善假于物也”，在學(xué)習(xí)的過程中還要多瀏覽一些優(yōu)秀的網(wǎng)站，善于分析借鑒其設(shè)計思路和布局方法，見多方能識廣，進(jìn)而才可以融會貫通，取他人之長為我所用。

計思路和布局方法，見多方能識廣，進(jìn)而才可以融會貫通，取他人之長為我所用。面，另一方面我們可以使用Firebug方便地查看、分析別人網(wǎng)站的源代碼，“偷”也是一種技能!

每個人的成長與基礎(chǔ)不一樣，結(jié)合自己的實際情況，在執(zhí)行。還是重復(fù)一下，前端的核心是html，js，css不難，但需要來積累。對前端我是這么看的

html，css就像一瓶酒，得品。

html,css總共就那些標(biāo)簽跟選擇器屬性什么的，但是要寫一個有擴(kuò)展性，健壯性或維護(hù)性的頁面不容易。現(xiàn)在寫頁面基本條件反射，不是如何快速的完成，而是思考如果有界面需求修改，怎么在修改代碼最少的情況下快速完成需求任務(wù)。這是對前端耐力，體力，智力的三重考驗。

js就像一把劍，得磨。

js剛開始只是為了較驗，隨便技術(shù)社會的發(fā)展，承擔(dān)的角色越來越重，剛開始玩玩jQuery感覺已經(jīng)會js了，其實只是冰山一角。隨著對js的了解越來越多，他即變態(tài)又可愛，即好玩又難控，即有很多兼容問題，但解決兼容是我們基本生存之道。從ajax到j(luò)smvc一路走一路看，高載潮一浪高過一浪。

人生就是一場夢，得作。

技術(shù)只是生活的一部分，曾經(jīng)雄心斗志，如今低頭寫碼。改變能改變的，接受不能改變的。人生有限，只爭朝夕啊。人生學(xué)習(xí)的態(tài)度是：不急不躁，不快不慢。持之以恒，相信自己。不求能改變世界，但求能改變自己的生活。不求健步如飛，但求一步一腳印。感謝磨難，他使我們內(nèi)心更為堅強(qiáng)。感謝挫折，他使我們不斷的成長，感謝bug，他使我們的思維更加深邃。感謝前端，他使我們更加的相信，撐起一片天空需要十八般武藝。

序列表

經(jīng)過之前關(guān)于表格、表單的學(xué)習(xí)后，再來學(xué)習(xí)列表，就顯得非常的簡單和容易理解了。

學(xué)習(xí)是構(gòu)建知識體系的過程，沒有形成體系的知識學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時間允許的話，請務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。

列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標(biāo)簽，在這個標(biāo)簽中添加內(nèi)容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁面效果如下：

通過修改<ol>標(biāo)簽中的type屬性我們可以改變序號顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。

step1.點擊"輸入方式"

step2.點擊"特殊符號"后選擇數(shù)字序號，找到羅馬數(shù)字即可

除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語中的片假名表示序號)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁面效果如圖所示：

是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。

有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無序為unorder，無序列表為unorder list，縮寫為ul。

無序列表<ul>標(biāo)簽的type屬性用來控制列表前的標(biāo)記顯示演示。

示例代碼如下：

<h>無序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁面效果如下：

通過圖片我們可知，無序列表默認(rèn)的列表標(biāo)識就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。

與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計算機(jī)</dt> 
  <dd>用來計算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

頁面效果如下：

今天的內(nèi)容結(jié)束了！

列表嵌套列表的測試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！

如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML 中的預(yù)留字符必須被替換為字符實體。

一些在鍵盤上找不到的字符也可以使用字符實體來替換。

HTML 實體

在 HTML 中，某些字符是預(yù)留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認(rèn)為它們是標(biāo)簽。

如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。字符實體類似這樣：

&entity_name;

或

&#entity_number;

如需顯示小于號，我們必須這樣寫：< 或 < 或 <

提示： 使用實體名而不是數(shù)字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱（對實體數(shù)字的支持卻很好）。

不間斷空格(Non-breaking Space)

HTML 中的常用字符實體是不間斷空格( )。

瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數(shù)量，您需要使用   字符實體。

結(jié)合音標(biāo)符

發(fā)音符號是加到字母上的一個"glyph(字形)"。

一些變音符號, 如尖音符 ( ?) 和抑音符 ( ?) 。

變音符號可以出現(xiàn)字母的上面和下面，或者字母里面，或者兩個字母間。

變音符號可以與字母、數(shù)字字符的組合來使用。

以下是一些實例:

音標(biāo)符	字符	Construct	輸出結(jié)果
?	a	à	a?
?	a	á	a?
?	a	â	a?
?	a	ã	a?
?	O	Ò	O?
?	O	Ó	O?
?	O	Ô	O?
?	O	Õ	O?

HTML字符實體

	實體名稱對大小寫敏感！

顯示結(jié)果	描述	實體名稱	實體編號
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分	¢	¢
￡	鎊	£	£
￥	日元	¥	¥
	歐元	€	€
§	小節(jié)	§	§
?	版權(quán)	©	©
?	注冊商標(biāo)	®	®
?	商標(biāo)	™	™
×	乘號	×	×
÷	除號	÷	÷

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：sendmsg系統(tǒng)調(diào)用
下一篇：2016年終總結(jié)中：凝聚365天的APP開發(fā)技術(shù)精華

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

web前端開發(fā)自學(xué)路線，html+css+JavaS

HTML完整學(xué)習(xí)目錄

您的項目需求