天天看點

傳統html學習路線---2個月從小白變菜鳥第一階段——HTML的學習第一階段——CSS的學習第二階段——JavaScript的學習第二階段——jQuery的學習第三階段-H5+移動端開發(手機app,手機端網站)第三階段-BootStrap(手機app,手機端網站)

傳統html學習路線---2個月學會html(個人學習路線僅供參考)

  • 第一階段——HTML的學習
    • 知識點: Html标簽和屬性
  • 第一階段——CSS的學習
  • 第二階段——JavaScript的學習
  • 第二階段——jQuery的學習
  • 第三階段-H5+移動端開發(手機app,手機端網站)
  • 第三階段-BootStrap(手機app,手機端網站)
傳統html學習路線---2個月從小白變菜鳥第一階段——HTML的學習第一階段——CSS的學習第二階段——JavaScript的學習第二階段——jQuery的學習第三階段-H5+移動端開發(手機app,手機端網站)第三階段-BootStrap(手機app,手機端網站)

第一階段——HTML的學習

HTML的中文全稱為超文本标記語言,它是一個網頁的骨架,無論是靜态網頁還是動态網頁最終傳回到浏覽器端的都是HTML代碼。浏覽器将HTML代碼解釋渲染後呈現給使用者,是以我們必須掌握HTML的基本結構和常用标記及屬性。

HTML的學習實際就是一個記憶和了解的過程,在學習的過程中我們可以借助開發工具的“邊看邊練”視圖來輔助學習,然後在“設計”視圖中看效果,最後,在“代碼”視圖中學本質,将各種視圖的優勢發揮到極緻。利用這種對照學習的方法可以在很大程度上彌補單純識記HTML标簽和屬性的枯燥乏味。

知識點: Html标簽和屬性

  1. 段落标簽
  2. 文字标簽
  3. 圖檔标簽
  4. 超連結标簽
  5. 清單标簽
  6. 表格标簽
  7. 表單标簽
  8. 架構标簽
  9. Canvas标簽
  10. 媒體标簽

案例練習。。。。

第一階段——CSS的學習

其實整個web前端的學習路線就像是蓋樓房一樣,以上HTML的學習隻是掌握了原材料的制作,我們接下來還需要對樓房進行修繕與裝修。這就涉及到CSS的學習了。

CSS的中文名稱為層疊樣式表,是能夠真正做到網頁表現與内容分離的一種樣式設計語言,相對于傳統的HTML表現而言其樣式是可以複用的,這樣就可以極大的提高我們的開發速度,降低我們的維護成本。另外,CSS中的盒子模式、相對布局、絕對布局等能夠實作對網頁中各對象的位置排版進行像素級的精确控制。

知識點:

  1. CSS文法
  2. CSS選擇器

    ID選擇器

    類選擇器

    複合選擇器

  3. CSS樣式

    背景

    文本

    字型

    連結

    清單

    表格

  4. 盒子模型

    邊框

    外邊距

    内邊距

  5. CSS定位

    相對定位

    絕對定位

    浮動

  6. CSS3新增屬性
  7. CSS3布局執行個體練習
傳統html學習路線---2個月從小白變菜鳥第一階段——HTML的學習第一階段——CSS的學習第二階段——JavaScript的學習第二階段——jQuery的學習第三階段-H5+移動端開發(手機app,手機端網站)第三階段-BootStrap(手機app,手機端網站)

第二階段——JavaScript的學習

JavaScript是一種在用戶端廣泛使用的腳本語言,在JavaScript當中為我們提供了一些内置函數、對象和DOM操作,借助這些内容我們可以來實作一些用戶端的特效、驗證、互動等。是我們的頁面看起來不再那麼呆闆。

知識點:

  1. 基本文法
  2. 變量
  3. 資料類型
  4. 函數
  5. 運算符
  6. 流程控制
  7. JS對象

    String 對象

    Array對象

    Date對象

    Window對象

    Document對象

  8. DOM操作
  9. JS與CSS綜合操作

第二階段——jQuery的學習

jQuery是一個免費、開源的輕量級JavaScript庫,并且相容各種浏覽器(jQuery2.0及後續版本放棄了對IE6/7/8浏覽器的支援),同時現在有很多基于jQuery的插件可供選擇,這樣我們在實作一些豐富的動态效果時更加的友善快捷,在一定程度上可以大大的節省我們的開發時間,提高我們的開發速度。

知識點:

  1. 基礎文法
  2. 選擇器

    基本選擇器

    層次選擇器

    過濾選擇器

    表單選擇器

  3. DOM選擇器

    查找節點

    建立節點

    插入節點

    删除節點

    複制節點

    替換節點

    包裹節點

    屬性操作

    樣式操作

    周遊節點

  4. 事件

    事件綁定

    合成事件

    事件冒泡

    移除事件

  5. 動畫

    Show() hide()

    Fadeln() fadeout()

    slideUp() slideDown()

    自定義動畫animate()

    動畫回調函數

    停止動畫

  6. 表單,表格操作
  7. 常用jQuery插件
  8. jQuery UI

綜合案例

第三階段-H5+移動端開發(手機app,手機端網站)

mui最接近原生APP體驗的高性能前端架構,追求性能體驗,是我們開始啟動MUI項目的首要目标,輕量必然是重要特征;

MUI不依賴任何第三方JS庫,MUI以iOS平台UI為基礎,補充部分Android平台特有的UI控件流暢體驗

應用工具(HBuilder)

MUI架構學習(近原生APP體驗的高性能前端架構)

  1. UI元件

    *折疊面闆accordion

    actionsheet(操作表)

    badge(數字角标)

    button(按鈕)

    cardview(卡片視圖)

    checkbox(複選框)

    dialog(對話框)

    圖檔輪播

    grid(栅格)

    icon(圖示)

    ipnut (表單)

    list(清單)

    遮罩蒙版

    numbox(數字輸入框)

    側滑導航

    彈出菜單

    picker(選擇器)

    progressbar(滾動條)

    transparentBar(透明标題欄)

    radio(單選框)

    range(滑塊)

    scroll(區域滾動)

    slide(輪播元件)

    switch(開關)

  2. 視窗管理

    頁面初始化

    建立子頁面

    打開新頁面

    打開帶原生導航欄的新頁面

    關閉頁面

    預加載

  3. 極簡的JS函數

    事件綁定

    事件取消

    事件觸發

    手勢事件

    自定義事件

  4. mui架構Ajax
  5. 5+Runtime(重要、app開發必備,調用各種原生功能,原生40萬API随意調用)
  6. Native.js(重要、app開發必備,不是js庫)

第三階段-BootStrap(手機app,手機端網站)

簡潔、直覺、強悍的前端開發架構,讓web開發更迅速、簡單。

自學網站

w3school http://www.w3school.com.cn

菜鳥教程 http://www.runoob.com/

Mui架構官網 http://dev.dcloud.net.cn/mui/

BootStrap架構 https://v3.bootcss.com/

以上僅代表個人觀點,不喜勿噴------我學習的年代!