整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
廢話，直接干貨
學(xué)習(xí)前端的幾個(gè)階段：
一階段：html標(biāo)簽、html5新增標(biāo)簽、css樣式、css3樣式、媒體查詢等
二階段：JavaScript、jQuery、ajax、面向?qū)ο蟆ttp傳輸協(xié)議等
三階段：canvas、js高級(jí)應(yīng)用、JS-SDK、H5新增技術(shù)
四階段：node.js、vue.js
第一階段——HTML的學(xué)習(xí)
超文本標(biāo)記語(yǔ)言(HyperText Mark-up Language 簡(jiǎn)稱HTML)是一個(gè)網(wǎng)頁(yè)的骨架，無(wú)論是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因 此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性
HTML 的學(xué)習(xí)是一個(gè)記憶和理解的過(guò)程，在學(xué)習(xí)過(guò)程中可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計(jì)”視圖中看效果，在“代碼”視圖中學(xué)本質(zhì)， 將各種視圖的優(yōu)勢(shì)發(fā)揮到極致，這種對(duì)照學(xué)習(xí)的方法彌補(bǔ)了單純識(shí)記HTML標(biāo)簽和屬性的枯燥乏味，想必對(duì)各位初學(xué)的小盆友們來(lái)說(shuō)，必定是極好的!
在學(xué)習(xí)了HTML之后，我們只是掌握了各種“原材料”的制作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們?cè)O(shè)計(jì)的方案組合布局在一起并進(jìn)行一些樣式的美化。
第二個(gè)階段——CSS的學(xué)習(xí)
CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的，這樣就極大地提高了我們開發(fā)的速度，降低了維護(hù)的成本。
同時(shí)CSS中的盒子模型、相對(duì)布局、絕對(duì)布局等能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)中各對(duì)象的位置排版進(jìn)行像素級(jí)的，精確控制。通過(guò)此階段的學(xué)習(xí)，我們就可以順利完成“一幢樓房”的建設(shè)。
“樓房”建設(shè)完成之后，我們可以交給用戶使用，但是如果想讓用戶獲得更佳的體驗(yàn)，我們還可以對(duì)“樓房”進(jìn)行更深一步的“裝修”，讓它看起來(lái)更“豪華”一些。
第三個(gè)階段——JavaScript的學(xué)習(xí)
JavaScript是一種在客戶端廣泛使用的腳步語(yǔ)言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對(duì)象和DOM操作，借助這些內(nèi)容我們可以來(lái)實(shí)現(xiàn)一些客戶端的特效、驗(yàn)證、交互等，使我們的頁(yè)面看起來(lái)不那么呆板，屌絲瞬間逆襲高富帥!有么有?
此時(shí)，也許你還沉浸在JavaScript給你帶來(lái)的驚喜之中，但你的項(xiàng)目經(jīng)理卻突然對(duì)你大吼道
這個(gè)效果在××瀏覽器下不兼容，重新搞……”
“不兼容?”瞬間石化了有木有?
我擦，坑爹啊!那可是花了我一個(gè)晚上寫了幾百行代碼搞定的啊，吐血了都!”
JavaScript的兼容性和復(fù)雜性有時(shí)候的確讓我們頭疼，還好有“大神”幫我們做了封裝。
Web前端的學(xué)習(xí)建議
最后給大家聊聊在學(xué)習(xí)Web前端中的一些建議和方法：
在CSS布局時(shí)需要注意的一個(gè)問(wèn)題是很多同學(xué)缺乏對(duì)頁(yè)面布局進(jìn)行整體分析，不能夠從宏觀上對(duì)頁(yè)面中盒子間的嵌套關(guān)系進(jìn)行把握，就急于動(dòng)手去做，導(dǎo)致頁(yè)面中各元素間的關(guān)系很混亂，容易出現(xiàn)盒子在浮動(dòng)時(shí)錯(cuò)位等情況。建議大家在布局時(shí)采用“自頂向下，逐步細(xì)化”的思想，先用幾個(gè)盒子將頁(yè)面從整體上劃分，然后逐步在盒子中繼續(xù)嵌套盒子。
“君子生非異也，善假于物也”，在學(xué)習(xí)的過(guò)程中還要多瀏覽一些優(yōu)秀的網(wǎng)站，善于分析借鑒其設(shè)計(jì)思路和布局方法，見(jiàn)多方能識(shí)廣，進(jìn)而才可以融會(huì)貫通，取他人之長(zhǎng)為我所用。
計(jì)思路和布局方法，見(jiàn)多方能識(shí)廣，進(jìn)而才可以融會(huì)貫通，取他人之長(zhǎng)為我所用。面，另一方面我們可以使用Firebug方便地查看、分析別人網(wǎng)站的源代碼，“偷”也是一種技能!
每個(gè)人的成長(zhǎng)與基礎(chǔ)不一樣，結(jié)合自己的實(shí)際情況，在執(zhí)行。還是重復(fù)一下，前端的核心是html，js，css不難，但需要來(lái)積累。對(duì)前端我是這么看的
html，css就像一瓶酒，得品。
html,css總共就那些標(biāo)簽跟選擇器屬性什么的，但是要寫一個(gè)有擴(kuò)展性，健壯性或維護(hù)性的頁(yè)面不容易。現(xiàn)在寫頁(yè)面基本條件反射，不是如何快速的完成，而是思考如果有界面需求修改，怎么在修改代碼最少的情況下快速完成需求任務(wù)。這是對(duì)前端耐力，體力，智力的三重考驗(yàn)。
js就像一把劍，得磨。
js剛開始只是為了較驗(yàn)，隨便技術(shù)社會(huì)的發(fā)展，承擔(dān)的角色越來(lái)越重，剛開始玩玩jQuery感覺(jué)已經(jīng)會(huì)js了，其實(shí)只是冰山一角。隨著對(duì)js的了解越來(lái)越多，他即變態(tài)又可愛(ài)，即好玩又難控，即有很多兼容問(wèn)題，但解決兼容是我們基本生存之道。從ajax到j(luò)smvc一路走一路看，高載潮一浪高過(guò)一浪。
人生就是一場(chǎng)夢(mèng)，得作。
技術(shù)只是生活的一部分，曾經(jīng)雄心斗志，如今低頭寫碼。改變能改變的，接受不能改變的。人生有限，只爭(zhēng)朝夕啊。人生學(xué)習(xí)的態(tài)度是：不急不躁，不快不慢。持之以恒，相信自己。不求能改變世界，但求能改變自己的生活。不求健步如飛，但求一步一腳印。感謝磨難，他使我們內(nèi)心更為堅(jiān)強(qiáng)。感謝挫折，他使我們不斷的成長(zhǎng)，感謝bug，他使我們的思維更加深邃。感謝前端，他使我們更加的相信，撐起一片天空需要十八般武藝。
序列表
經(jīng)過(guò)之前關(guān)于表格、表單的學(xué)習(xí)后，再來(lái)學(xué)習(xí)列表，就顯得非常的簡(jiǎn)單和容易理解了。
學(xué)習(xí)是構(gòu)建知識(shí)體系的過(guò)程，沒(méi)有形成體系的知識(shí)學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話，請(qǐng)務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。
列表分為有序列表、無(wú)序列表和定義列表，同時(shí)列表之中還能嵌套列表，和表格非常相似。
首先介紹有序列表
要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。
然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可。
示例代碼如下
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>大家可以把它放到一個(gè)新的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>頁(yè)面效果如下：
通過(guò)修改<ol>標(biāo)簽中的type屬性我們可以改變序號(hào)顯示的樣式，默認(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>頁(yè)面效果如下：
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。
step1.點(diǎn)擊"輸入方式"
step2.點(diǎn)擊"特殊符號(hào)"后選擇數(shù)字序號(hào)，找到羅馬數(shù)字即可
除此之外我們還可以使用CSS的方法為有序列表的序號(hào)提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"
示例代碼如下：(使用日語(yǔ)中的片假名表示序號(hào))
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>頁(yè)面效果如圖所示：
是不是很有趣，這里的測(cè)試就不一一做了。為大家奉上list-style-type的值的列表與說(shuō)明，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無(wú)序列表的值。
如圖：
資料來(lái)自w3school
無(wú)序列表
無(wú)序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。
有一個(gè)記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。
無(wú)序?yàn)閡norder，無(wú)序列表為unorder list，縮寫為ul。
無(wú)序列表<ul>標(biāo)簽的type屬性用來(lái)控制列表前的標(biāo)記顯示演示。
示例代碼如下：
<h>無(wú)序列表</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>頁(yè)面效果如下：
通過(guò)圖片我們可知，無(wú)序列表默認(rèn)的列表標(biāo)識(shí)就是type="disc"。
style屬性的話大家自己試試吧，這里就不啰嗦了。
定義列表
這個(gè)列表比較特殊，也比較不常見(jiàn)，主要就是顯示名詞定義的。
首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表，和<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ì)算機(jī)</dt>
<dd>用來(lái)計(jì)算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>頁(yè)面效果如下：
今天的內(nèi)容結(jié)束了！
列表嵌套列表的測(cè)試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！
如果您喜歡我的教程請(qǐng)關(guān)注我，點(diǎn)贊也能讓我充滿動(dòng)力！
如果您有任何疑問(wèn)請(qǐng)給我留言，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
TML 中的預(yù)留字符必須被替換為字符實(shí)體。
一些在鍵盤上找不到的字符也可以使用字符實(shí)體來(lái)替換。
HTML 實(shí)體
在 HTML 中，某些字符是預(yù)留的。
在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。
如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。 字符實(shí)體類似這樣：
&entity_name;
或
&#entity_number;
如需顯示小于號(hào)，我們必須這樣寫：< 或 < 或 <
提示： 使用實(shí)體名而不是數(shù)字的好處是，名稱易于記憶。不過(guò)壞處是，瀏覽器也許并不支持所有實(shí)體名稱（對(duì)實(shí)體數(shù)字的支持卻很好）。
不間斷空格(Non-breaking Space)
HTML 中的常用字符實(shí)體是不間斷空格( )。
瀏覽器總是會(huì)截短 HTML 頁(yè)面中的空格。如果您在文本中寫 10 個(gè)空格，在顯示該頁(yè)面之前，瀏覽器會(huì)刪除它們中的 9 個(gè)。如需在頁(yè)面中增加空格的數(shù)量，您需要使用 字符實(shí)體。
結(jié)合音標(biāo)符
發(fā)音符號(hào)是加到字母上的一個(gè)"glyph(字形)"。
一些變音符號(hào), 如 尖音符 ( ?) 和 抑音符 ( ?) 。
變音符號(hào)可以出現(xiàn)字母的上面和下面，或者字母里面，或者兩個(gè)字母間。
變音符號(hào)可以與字母、數(shù)字字符的組合來(lái)使用。
以下是一些實(shí)例:
| 音標(biāo)符 | 字符 | Construct | 輸出結(jié)果 |
|---|---|---|---|
| ? | a | à | a? |
| ? | a | á | a? |
| ? | a | â | a? |
| ? | a | ã | a? |
| ? | O | Ò | O? |
| ? | O | Ó | O? |
| ? | O | Ô | O? |
| ? | O | Õ | O? |
HTML字符實(shí)體
實(shí)體名稱對(duì)大小寫敏感！ |
| 顯示結(jié)果 | 描述 | 實(shí)體名稱 | 實(shí)體編號(hào) |
|---|---|---|---|
| 空格 | |   | |
| < | 小于號(hào) | < | < |
| > | 大于號(hào) | > | > |
| & | 和號(hào) | & | & |
| " | 引號(hào) | " | " |
| ' | 撇號(hào) | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 鎊 | £ | £ |
| ￥ | 日元 | ¥ | ¥ |
| | 歐元 | € | € |
| § | 小節(jié) | § | § |
| ? | 版權(quán) | © | © |
| ? | 注冊(cè)商標(biāo) | ® | ® |
| ? | 商標(biāo) | ™ | ™ |
| × | 乘號(hào) | × | × |
| ÷ | 除號(hào) | ÷ | ÷ |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
