1
2
3
4
5
6
7.header {}

1
2
3.header {}

1
2
3
4.page {}

前web前端工程師日均崗位缺口已經超過50000，隨著互聯網+的深入發展，html5作為前端展示技術，市場人才需求量將呈直線上漲。

Web前端工程師的崗位職責是利用HTML、CSS、Java、DOM等各種web技能結合產品的界面開發，制作標準化純手工代碼，并增加交互功能，豐富互聯網的Web開拓，致力于改進用戶體驗。現如今，Web前端工程師已經成為各大互聯網公司不可或缺的熱門職位，從業者隊伍日漸龐大，這其中不乏零基礎學習者和轉行人士。為了方便大家系統而全面的掌握前端基礎知識，小編特意整理了web前端開發入門學習線路圖，涵蓋20大實戰項目的知識點詳細講解，希望對大家的學習有所幫助。

項目一：PC端網站布局

所含知識點：HTML基礎，CSS基礎，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出及元素類型，瀏覽器兼容與寬高自適度，定位，錨點與透明，圖片整合，表格，CSS屬性與濾鏡

項目二：HTML5+CSS3基礎項目

所含知識點：HTML5新增的元素與屬性，表單域增強元素，CSS3選擇器，文字字體相關樣式，CSS3位移與變形處理，CSS3 2D轉換與過度動畫，CSS3 3D轉換與關鍵幀動畫，彈性盒模型，媒體查詢，響應式設計

項目三：WebApp頁面布局項目

所含知識點：移動端頁面設計規范，移動端切圖，文字流式/控件彈性/圖片等比例/特殊設計的100%布局，等比縮放布局，viewport/meta，rem/vw的使用，flexbox詳解，移動web特別樣式處理（reset, 1px border, 高清圖片）

項目四：原生Java交互功能開發項目

所含知識點：基本語法，循環語句，函數與數組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲，正則表達式，Ajax，面向對象基礎，運動與游戲開發

項目五：面向對象進階與ES5/ES6應用項目

所含知識點：Promise/A+，設計模式（觀察者模式等），原型鏈，構造函數，執行上下文棧與執行上下文，變量對象與活動對象，作用域鏈，閉包，this，ES5，ES6

項目六：Java工具庫自主研發項目

所含知識點：DOM庫，事件庫，AJAX庫，原型和繼承庫，MVVM核心庫，基于SPA的路由庫

項目七：jQuery經典交互特效開發

所含知識點：時間軸特效，tab頁面切換效果，網頁定位導航特效，滑動門特效，焦點圖輪播特效，導航條菜單效果，瀑布流特效，彈出層效果，倒計時效果，抽獎效果

項目八：PHP+MySQL后端基礎項目

所含知識點：PHP，MySQL，HTTP(s)協議詳解，Ajax進階、跨域與Defered，Apache與Nginx 環境搭建與配置，接口的定義，Mock數據，Restful，前后端聯調，前端安全(XSS,CSRF,JSON注入)

項目九：前端工程化與模塊化應用項目

所含知識點：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模塊化

項目十：PC端全棧開發項目

所含知識點：大首頁、列表頁與詳情頁展示與交互特效、搜索、登錄與注冊、購物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平臺系統前端

項目十一：應用Vue.js開發WebApp項目

所含知識點：Vue.js基礎，模塊化，單文件組件，路由，與服務器通信，狀態管理，單元測試與生產發布，服務端渲染SSR與Nuxt.js，基于Vue.js企業級項目開發(Mint UI, Element UI)

項目十二：應用React.js開發WebApp項目

所含知識點：ReactJS基礎，JSX語法，組件，flux+Redux，React，Router路由，動畫效果，基于React 企業級項目研發( Antd, Antd Mobile）

項目十三：應用Angular開發WebApp項目

所含知識點：Type 基礎與進階，開發環境配置，Hello World，架構、模塊與組件，模板，元數據、數據綁定與數據顯示，表單，服務與指令，依賴注入，路由，Ionic 3 MUI框架

項目十四：微信公眾號開發

所含知識點：初識微信公眾號，訂閱號的基本功能，使用百度BAE實現代碼的快速上線，使用Git完成線上代碼部署，公眾號開發權限及功能接入，微信JSSDK接口API，微信場景項目開發與接入

項目十五：微信小程序開發

所含知識點：微信小程序初探，小程序入門必學，小程序組件體驗，小程序大功能，項目實戰帶你征服小程序

項目十六：React Native

所含知識點：React Native 初探，React Native 項目導航，React Native 項目文本框，React Native 項目滾動分頁，React Native 項目第三方登錄，React Native 其他組件

項目十七：各類混合應用開發

所含知識點：自主原生Navtive Hybrid(iOS、Android)，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架MUI + HTML5+

項目十八：NodeJS全棧開發

所含知識點：

（1）Node.js基礎項目——NodeJS介紹，開發環境搭建，模塊與包管理工具，CommonJS模塊，URL網址解析，QueryString參數處理，HTTP模塊，HTTP小爬蟲，request方法，事件 events模塊，文件 fs模塊，Stream 流模塊，原生路由與參數接收，讀取圖片文件，npm s，Yarn 與 PM2

（2）MongoDB——MongoDB介紹與環境搭建，數據庫常用命令，Collection聚集集合，document文檔操作，聚集集合查詢，NodeJS連接MongoDB

（3）GraphGL——GraphQL初探：從REST到GraphQL，GraphGL安裝，準備數據源，搭建GraphQL服務器，數據查詢

（4） Express——express 介紹，安裝和創建基于Express的項目，Express 4.1x 初始化項目詳解，路由簡介，模板引擎EJS，模板引擎Pug（Jade）

（5）Koa——Koa入門、Koa應用、中間件、Context、async await、請求與響應

（6）測試框架mocha——搭建框架、斷言assert、項目測試、運行多個測試

（7）socket 即時通信項目——Socket簡介和通訊流程，基于net模塊實現socket，WebSocket，Socket.io

項目十九：Node.js高級全棧項目

所含知識點：基于Vue+Node+MongoDB+微信的高級全棧項目開發

項目二十：大數據可視化

所含知識點：數據可視化入門，數據可視化基礎，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高級應用，D3.js 應用工具：NVD3、n3，charts，Highcharts，FusionCharts，Polymaps

在前端學習的起步階段，最重要的就是要有明確目標和合理的學習規劃，為此小編特別為大家總結了web前端基礎學習階段的四大學習要點，希望能讓大大家的學習變得更加高效：

一、基本知識的掌握 在我們梳理的知識架構中，按照我們分析的兩個維度里最前置的、最淺顯的部分，作為打基礎的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認為這部分知識和內容掌握。

二、常用工具的掌握 對于常用工具的掌握應該掌握一些有大公司或專業團隊背景的流行工具，這些工具的熟練掌握能夠提升專業度、職業度，同時，能提升我們的工作效率。

三、溝通技巧的掌握 在國內，技術人員通常都是自己制定方案、自己執行方案，在執行過程中又缺乏相關產品、交互設計等人員的溝通，大多是在自己的思路貫徹下進行開發，久而久之，我們習慣于信任自己的觀點、在自己的視角看問題，對于挑戰總是百般地“據理”力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在用戶的視角看問題。

四、良好的開發習慣 開發習慣是養成的，一旦有不好的習慣，對于將來去修正帶來的將是很大的麻煩，培養良好的開發習慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文檔、先寫注釋等等。

最后希望大家通過自己的努力與學習，都能成為一名能力全棧的web前端工程師。

瀏覽器訪問網站時，頁面各不相同，你有沒有想過它為何會呈現這個樣子呢？本節中，我們就來了解一下網頁的基本組成、結構和節點等內容。

網頁的組成

網頁可以分為三大部分——HTML、CSS和JavaScript。如果把網頁比作一個人的話，HTML相當于骨架，JavaScript相當于肌肉，CSS相當于皮膚，三者結合起來才能形成一個完善的網頁。下面我們分別來介紹一下這三部分的功能。

1. HTML

HTML是用來描述網頁的一種語言，其全稱叫作Hyper Text Markup Language，即超文本標記語言。網頁包括文字、按鈕、圖片和視頻等各種復雜的元素，其基礎架構就是HTML。不同類型的文字通過不同類型的標簽來表示，如圖片用img標簽表示，視頻用video標簽表示，段落用p標簽表示，它們之間的布局又常通過布局標簽div嵌套組合而成，各種標簽通過不同的排列和嵌套才形成了網頁的框架。

在Chrome瀏覽器中打開百度，右擊并選擇“檢查”項（或按F12鍵），打開開發者模式，這時在Elements選項卡中即可看到網頁的源代碼，如圖2-9所示。

這就是HTML，整個網頁就是由各種標簽嵌套組合而成的。這些標簽定義的節點元素相互嵌套和組合形成了復雜的層次關系，就形成了網頁的架構。

2.CSS

HTML定義了網頁的結構，但是只有HTML頁面的布局并不美觀，可能只是簡單的節點元素的排列，為了讓網頁看起來更好看一些，這里借助了CSS。

CSS，全稱叫作Cascading Style Sheets，即層疊樣式表。“層疊”是指當在HTML中引用了數個樣式文件，并且樣式發生沖突時，瀏覽器能依據層疊順序處理。“樣式”指網頁中文字大小、顏色、元素間距、排列等格式。

CSS是目前唯一的網頁頁面排版樣式標準，有了它的幫助，頁面才會變得更為美觀。

就是一個CSS樣式。大括號前面是一個CSS選擇器，此選擇器的意思是首先選中id為head_wrapper且class為s-ps-islite的節點，然后再選中其內部的class為s-p-top的節點。大括號內部寫的就是一條條樣式規則，例如position指定了這個元素的布局方式為絕對布局，bottom指定元素的下邊距為40像素，width指定了寬度為100%占滿父元素，height則指定了元素的高度。也就是說，我們將位置、寬度、高度等樣式配置統一寫成這樣的形式，然后用大括號括起來，接著在開頭再加上CSS選擇器，這就代表這個樣式對CSS選擇器選中的元素生效，元素就會根據此樣式來展示了。

在網頁中，一般會統一定義整個網頁的樣式規則，并寫入CSS文件中（其后綴為css）。在HTML中，只需要用link標簽即可引入寫好的CSS文件，這樣整個頁面就會變得美觀、優雅。

3. JavaScript

JavaScript，簡稱JS，是一種腳本語言。HTML和CSS配合使用，提供給用戶的只是一種靜態信息，缺乏交互性。我們在網頁里可能會看到一些交互和動畫效果，如下載進度條、提示框、輪播圖等，這通常就是JavaScript的功勞。它的出現使得用戶與信息之間不只是一種瀏覽與顯示的關系，而是實現了一種實時、動態、交互的頁面功能。

JavaScript通常也是以單獨的文件形式加載的，后綴為js，在HTML中通過script標簽即可引入，例如：

<script src="jquery-2.1.0.js"></script>

綜上所述，HTML定義了網頁的內容和結構，CSS描述了網頁的布局，JavaScript定義了網頁的行為。

網頁的結構

我們首先用例子來感受一下HTML的基本結構。新建一個文本文件，名稱可以自取，后綴為html，內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
        </div>
    </body>
</html>

這就是一個最簡單的HTML實例。開頭用DOCTYPE定義了文檔類型，其次最外層是html標簽，最后還有對應的結束標簽來表示閉合，其內部是head標簽和body標簽，分別代表網頁頭和網頁體，它們也需要結束標簽。head標簽內定義了一些頁面的配置和引用，如：

<meta charset="UTF-8">

它指定了網頁的編碼為UTF-8。

title標簽則定義了網頁的標題，會顯示在網頁的選項卡中，不會顯示在正文中。body標簽內則是在網頁正文中顯示的內容。div標簽定義了網頁中的區塊，它的id是container，這是一個非常常用的屬性，且id的內容在網頁中是唯一的，我們可以通過它來獲取這個區塊。然后在此區塊內又有一個div標簽，它的class為wrapper，這也是一個非常常用的屬性，經常與CSS配合使用來設定樣式。然后此區塊內部又有一個h2標簽，這代表一個二級標題。另外，還有一個p標簽，這代表一個段落。在這兩者中直接寫入相應的內容即可在網頁中呈現出來，它們也有各自的class屬性。

將代碼保存后，在瀏覽器中打開該文件，可以看到如圖2-10所示的內容。

可以看到，在選項卡上顯示了This is a Demo字樣，這是我們在head中的title里定義的文字。而網頁正文是body標簽內部定義的各個元素生成的，可以看到這里顯示了二級標題和段落。

這個實例便是網頁的一般結構。一個網頁的標準形式是html標簽內嵌套head和body標簽，head內定義網頁的配置和引用，body內定義網頁的正文。

節點樹及節點間的關系

在HTML中，所有標簽定義的內容都是節點，它們構成了一個HTML DOM樹。

我們先看下什么是DOM，DOM是W3C（萬維網聯盟）的標準，其英文全稱Document Object Model，即文檔對象模型。它定義了訪問HTML和XML文檔的標準：

W3C文檔對象模型（DOM）是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。

W3C DOM標準被分為3個不同的部分。

l 核心DOM： 針對任何結構化文檔的標準模型。

l XML DOM：針對XML文檔的標準模型。

l HTML DOM：針對HTML文檔的標準模型。

根據W3C的HTML DOM標準，HTML文檔中的所有內容都是節點。

l 整個文檔是一個文檔節點；

l 每個HTML元素是元素節點；

l HTML元素內的文本是文本節點；

l 每個HTML屬性是屬性節點；

注釋是注釋節點。

HTML DOM將HTML文檔視作樹結構，這種結構被稱為節點樹，如圖2-11所示。

通過HTML DOM，樹中的所有節點均可通過JavaScript訪問，所有HTML節點元素均可被修改，也可以被創建或刪除。

節點樹中的節點彼此擁有層級關系。我們常用父（parent）、子（child）和兄弟（sibling）等術語描述這些關系。父節點擁有子節點，同級的子節點被稱為兄弟節點。

在節點樹中，頂端節點稱為根（root）。除了根節點之外，每個節點都有父節點，同時可擁有任意數量的子節點或兄弟節點。圖2-12展示了節點樹以及節點之間的關系。

本段參考W3SCHOOL，鏈接：http://www.w3school.com.cn/htmldom/dom_nodes.asp。

選擇器

我們知道網頁由一個個節點組成，CSS選擇器會根據不同的節點設置不同的樣式規則，那么怎樣來定位節點呢？

在CSS中，我們使用CSS選擇器來定位節點。例如，上例中div節點的id為container，那么就可以表示為#container，其中#開頭代表選擇id，其后緊跟id的名稱。另外，如果我們想選擇class為wrapper的節點，便可以使用.wrapper，這里以點（.）開頭代表選擇class，其后緊跟class的名稱。另外，還有一種選擇方式，那就是根據標簽名篩選，例如想選擇二級標題，直接用h2即可。這是最常用的3種表示，分別是根據id、class、標簽名篩選，請牢記它們的寫法。

另外，CSS選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開便可以代表嵌套關系，如#container .wrapper p則代表先選擇id為container的節點，然后選中其內部的class為wrapper的節點，然后再進一步選中其內部的p節點。另外，如果不加空格，則代表并列關系，如div#container .wrapper p.text代表先選擇id為container的div節點，然后選中其內部的class為wrapper的節點，再進一步選中其內部的class為text的p節點。這就是CSS選擇器，其篩選功能還是非常強大的。

另外，CSS選擇器還有一些其他語法規則，具體如表2-4所示。

另外，還有一種比較常用的選擇器是XPath，這種選擇方式后面會詳細介紹。

本節介紹了網頁的基本結構和節點間的關系，了解了這些內容，我們才有更加清晰的思路去解析和提取網頁內容。