Web開(kāi)發(fā)是時(shí)下最流行的技術(shù)之一?，F(xiàn)代Web開(kāi)發(fā)包括PC端網(wǎng)頁(yè)的開(kāi)發(fā)，移動(dòng)端APP的開(kāi)發(fā)，

以及微信生態(tài)系統(tǒng)中公眾號(hào)和小程序的開(kāi)發(fā)?？梢哉f(shuō)Web開(kāi)發(fā)深入到生活的方方面面，用途極其廣

泛。因此，學(xué)習(xí)Web開(kāi)發(fā)，尤其是了解和學(xué)習(xí)Web前端網(wǎng)頁(yè)開(kāi)發(fā)是非常重要的。

Web開(kāi)發(fā)基礎(chǔ)課程是Web前端開(kāi)發(fā)的基礎(chǔ)。Web開(kāi)發(fā)基礎(chǔ)課程主要介紹了基本的網(wǎng)頁(yè)內(nèi)容和樣

式的開(kāi)發(fā)，還增加了動(dòng)態(tài)樣式語(yǔ)言和響應(yīng)式的講解，是一門(mén)實(shí)踐性極強(qiáng)的課程，技術(shù)點(diǎn)多、涉及面

廣，部分章節(jié)存在理解困難的問(wèn)題。為幫助同學(xué)們有效地復(fù)習(xí)這門(mén)課程，下面按照教學(xué)大綱的要求，

對(duì)各章的重點(diǎn)、難點(diǎn)進(jìn)行歸納、總結(jié)，供同學(xué)們?cè)趶?fù)習(xí)時(shí)參考。

一、本課程的復(fù)習(xí)方法

1.復(fù)習(xí)方法

（1）注重上機(jī)實(shí)驗(yàn)。重復(fù)就是記憶。本課程實(shí)踐性強(qiáng)，知識(shí)點(diǎn)比較零散。對(duì)很多屬性名詞和

使用方法，只有通過(guò)反復(fù)實(shí)驗(yàn)才有可能理解并記住，所以上機(jī)實(shí)驗(yàn)很重要。它不僅可以加深對(duì)課本

知識(shí)的學(xué)習(xí)，而且可以使同學(xué)們獲得很多實(shí)際工作的經(jīng)驗(yàn)，這對(duì)于增強(qiáng)動(dòng)手技能，提高分析解決實(shí)

際問(wèn)題的能力和專業(yè)素質(zhì)很有幫助。同學(xué)們應(yīng)該盡量做全、做好實(shí)驗(yàn)。實(shí)驗(yàn)前要三思而后行：想做

出什么效果，分幾步做，可能會(huì)用到哪些知識(shí)。實(shí)驗(yàn)中應(yīng)注意出現(xiàn)的結(jié)果，并分析原因，特別是如

果出現(xiàn)不正常的情況，最好能對(duì)現(xiàn)象、解決辦法、原因進(jìn)行記錄。

例如，在學(xué)習(xí)第四章“4.2.6實(shí)驗(yàn)：實(shí)現(xiàn)首頁(yè)布局結(jié)構(gòu)”時(shí)，首先需要明確自己想實(shí)現(xiàn)什么樣的頁(yè)

面效果，然后嘗試將整個(gè)頁(yè)面劃分為多個(gè)小部分，分塊實(shí)現(xiàn)。對(duì)于那些需要特殊處理的地方，比如

如何讓元素水平排列等，提前回顧課程內(nèi)容，找到解決方案。最后，才是動(dòng)手編碼實(shí)現(xiàn)效果。完成

實(shí)驗(yàn)后，總結(jié)一下：今后，如果再實(shí)現(xiàn)其它頁(yè)面的布局時(shí)，這次案例中有哪些可以吸取的經(jīng)驗(yàn)。其

實(shí)，大多數(shù)網(wǎng)頁(yè)的整體布局結(jié)構(gòu)，無(wú)非優(yōu)先的幾種。只要善于歸納和總結(jié)，就能起到舉一反三，事

半功倍的效果。

（2）梳理思維導(dǎo)圖。思維導(dǎo)圖是公認(rèn)的、幫助歸納總結(jié)和記憶知識(shí)點(diǎn)的有效手段之一。課程

教材中有明確的目錄結(jié)構(gòu)，但是未具體到每個(gè)知識(shí)點(diǎn)。在梳理思維導(dǎo)圖時(shí)，可根據(jù)教材目錄結(jié)構(gòu)為

基礎(chǔ)，邊總結(jié)，邊添枝加葉，豐富思維導(dǎo)圖的內(nèi)容。同時(shí)，思維導(dǎo)圖要嚴(yán)格按照3W1H（WhatWhy

WhereHow）的思想梳理知識(shí)點(diǎn)，并且應(yīng)該只包含最精煉的概念、用法、問(wèn)題以及解決方案。不應(yīng)

包含過(guò)多冗余的描述性內(nèi)容。推薦的思維導(dǎo)圖格式如下：

1

（3）認(rèn)真完成文字教材的練習(xí)與作業(yè)。平時(shí)應(yīng)認(rèn)真、獨(dú)立地完成文字教材的練習(xí)與作業(yè)。在

復(fù)習(xí)時(shí)，應(yīng)把課后知識(shí)點(diǎn)總結(jié)和習(xí)題復(fù)習(xí)一遍，特別對(duì)重點(diǎn)要求的內(nèi)容和在解題過(guò)程中出現(xiàn)的錯(cuò)誤

的地方應(yīng)格外注意。根據(jù)教學(xué)大綱要求，考試難度不會(huì)超出規(guī)定范圍，而文字教材的練習(xí)與作業(yè)就

已經(jīng)充分體現(xiàn)了教學(xué)與考核的重點(diǎn)，所以應(yīng)該認(rèn)真完成。

2.學(xué)習(xí)建議

（1）學(xué)以致用。Web開(kāi)發(fā)基礎(chǔ)是一門(mén)實(shí)踐性非常強(qiáng)的課程，且知識(shí)點(diǎn)非常繁雜。單靠看書(shū)和

背知識(shí)點(diǎn)，很難全部記住。只有反復(fù)的將知識(shí)點(diǎn)，應(yīng)用到動(dòng)手實(shí)驗(yàn)中，才能達(dá)到重復(fù)就是記憶的效

果。因?yàn)閃eb開(kāi)發(fā)基礎(chǔ)課程的實(shí)驗(yàn)，都是綜合性的。所以，后邊的實(shí)驗(yàn)中，就會(huì)反復(fù)用到前邊的知

識(shí)點(diǎn)。所以，反復(fù)的練習(xí)實(shí)驗(yàn)的內(nèi)容，無(wú)形中也是在反復(fù)的復(fù)習(xí)之前的知識(shí)點(diǎn)。比如：“6.3.4實(shí)驗(yàn)：

實(shí)現(xiàn)產(chǎn)品介紹動(dòng)效”中，即用到了普通的CSS樣式屬性，又用到了CSS定位的屬性，又用到了CSS3

變換的屬性和過(guò)渡的屬性。做一個(gè)實(shí)驗(yàn)，等于復(fù)習(xí)了3、4、5、6四章的內(nèi)容。所以，學(xué)以致用，

依靠重復(fù)記憶，才能形成知識(shí)點(diǎn)在頭腦中的條件反射，得到學(xué)會(huì)的目的。

（2）一圖百文。實(shí)踐性非常強(qiáng)的課程，單靠看文字內(nèi)容，很難直觀的想象出運(yùn)行的原理。尤

其是后期的一些動(dòng)態(tài)效果實(shí)現(xiàn)過(guò)程，就更難單靠想象來(lái)設(shè)計(jì)實(shí)現(xiàn)的步驟。比如：“6.3.4實(shí)驗(yàn)：實(shí)現(xiàn)

產(chǎn)品介紹動(dòng)效”，每個(gè)面的CSS3變換過(guò)程，必須自己畫(huà)畫(huà)圖，甚至拿出六張紙，模擬一下變換的過(guò)

程。才能直觀的看到書(shū)中講解的變化過(guò)程，印象深刻。所以，與其盯著文字看，反復(fù)看也百思不得

其解，不如畫(huà)畫(huà)圖，看看視頻中的動(dòng)態(tài)講解過(guò)程。在視頻講解中，包含非常直觀的圖形和動(dòng)態(tài)效果

原理的演示和講解。一目了然，印象深刻。所以，在學(xué)習(xí)過(guò)程中，要善用多媒體的手段與文字相結(jié)

合的方式，兩條腿走路，才能融會(huì)貫通。

（3）深入淺出。學(xué)習(xí)講究先把書(shū)讀厚，再把書(shū)讀薄。其實(shí)，就是深入淺出的過(guò)程。剛開(kāi)始學(xué)

時(shí)，要深挖原理，窮盡可能，正面立論，反面駁斥?？梢宰约航o自己設(shè)定一些異常情況，來(lái)從側(cè)面

檢驗(yàn)原理的正確與否。比如，學(xué)習(xí)樣式表的優(yōu)先級(jí)時(shí)，潛意識(shí)總覺(jué)得外部樣式表的優(yōu)先級(jí)總是低于

內(nèi)部樣式表單的優(yōu)先級(jí)。于是，自己就可以設(shè)定一個(gè)實(shí)驗(yàn)場(chǎng)景，故意將內(nèi)部樣式表和外部樣式表的

上下位置顛倒，來(lái)驗(yàn)證一下到底哪個(gè)優(yōu)先級(jí)高。結(jié)果，經(jīng)過(guò)驗(yàn)證，發(fā)現(xiàn)內(nèi)部樣式表和外部樣式表，

誰(shuí)在下邊，誰(shuí)的優(yōu)先級(jí)就是高的。然后，再往后學(xué)，就會(huì)發(fā)現(xiàn)，其實(shí)是因?yàn)闉g覽器讀取頁(yè)面內(nèi)容，

總是順序加載的。后加載的同名內(nèi)容，會(huì)覆蓋先加載的。最終，你可以得出一個(gè)重要的結(jié)論：瀏覽

器中的內(nèi)容總是順序加載。這個(gè)結(jié)論，將來(lái)可以解決優(yōu)先級(jí)，樣式?jīng)_突等很多問(wèn)題。恭喜你，你成

功的將書(shū)讀厚，又讀薄了。

最后，IT行業(yè)充滿創(chuàng)造力、激情和大量的機(jī)會(huì)。Web前端開(kāi)發(fā)又是時(shí)下最流行的開(kāi)發(fā)門(mén)類(lèi)之一。

Web前端開(kāi)發(fā)，給了很多原本沒(méi)有機(jī)會(huì)的人新的機(jī)會(huì)，改變命運(yùn)。如果你對(duì)現(xiàn)狀不滿意，或希望更

2

上一層樓，也許努力學(xué)習(xí)Web前端開(kāi)發(fā)，將會(huì)為自己爭(zhēng)取人生中又一次起飛的機(jī)會(huì)。努力吧！

3.使用的教材及媒體

(1)本課程使用的文字教材為《Web開(kāi)發(fā)基礎(chǔ)》，由國(guó)家開(kāi)放大學(xué)Web開(kāi)發(fā)基礎(chǔ)課程組編，由

國(guó)家開(kāi)放大學(xué)出版社出版。

(2)文字教材有配套的課程錄像，約1400分鐘，由國(guó)內(nèi)知名培訓(xùn)機(jī)構(gòu)總監(jiān)級(jí)講師張東主講，

涵蓋課程全部?jī)?nèi)容。

(3)網(wǎng)絡(luò)學(xué)習(xí)課程請(qǐng)同學(xué)們通過(guò)國(guó)家開(kāi)放大學(xué)學(xué)習(xí)網(wǎng)使用。

二、學(xué)習(xí)重點(diǎn)和教學(xué)要求

第1章Web的工作方式

1.學(xué)習(xí)重點(diǎn)：

（1）HTML和Web的相關(guān)概念

（2）Web工作原理

（3）創(chuàng)建Web內(nèi)容

1．教學(xué)要求：

（1）掌握：Web內(nèi)容的創(chuàng)建過(guò)程。

（2）理解：Web工作原理。

（3）了解：HTML和WWW概念。

第2章HTML5基礎(chǔ)知識(shí)

1.學(xué)習(xí)重點(diǎn)：

（1）HTML文檔結(jié)構(gòu)

（2）文本標(biāo)記

（3）處理多媒體內(nèi)容與鏈接

（4）表格

（5）列表

（6）結(jié)構(gòu)標(biāo)記

2.教學(xué)要求：

（1）掌握：HTML5基本語(yǔ)法，各種標(biāo)簽的使用方法，文字樣式。

（2）理解：各種標(biāo)簽的應(yīng)用場(chǎng)景。

（3）了解：語(yǔ)義性要求理解：本地用戶賬戶的概念和用途。

第3章HTML5表單元素

1.學(xué)習(xí)重點(diǎn)：

（1）表單的概念

3

（2）input元素

（3）其他表單元素

2.教學(xué)要求：

（1）掌握：HTML5表單以及表單元素的用法。

（2）理解：各種表單元素的應(yīng)用場(chǎng)景。

（3）了解：HTML5新增表單元素的用法。

第4章CSS3基礎(chǔ)知識(shí)

1.學(xué)習(xí)重點(diǎn)：

（1）層疊樣式表

（2）處理尺寸和邊框

（3）背景設(shè)置

（4）處理字體和表格

2.教學(xué)要求：

（1）掌握：CSS3簡(jiǎn)單選擇器使用，常用樣式屬性定義。

（2）理解：CSS3三大特性、框模型、尺寸概念。

（3）了解：外邊距溢出合并現(xiàn)象。

第5章CSS3高級(jí)特性

1.學(xué)習(xí)重點(diǎn)：

（1）浮動(dòng)

（2）顯示方式和顯示效果

（3）列表屬性

（4）定位屬性

（5）復(fù)雜選擇器

（6）內(nèi)容生成

（7）彈性布局

（8）CSSHack

2.教學(xué)要求：

（1）掌握：CSS3高級(jí)選擇器的使用，定位屬性。

（2）理解：高級(jí)選擇器原理，彈性布局。

（3）了解：CSSHack。

第6章CSS3漸變、過(guò)渡與動(dòng)畫(huà)

1.學(xué)習(xí)重點(diǎn)：

（1）實(shí)現(xiàn)漸變

（2）轉(zhuǎn)換

（3）過(guò)渡與動(dòng)畫(huà)

（4）第三方CSS動(dòng)畫(huà)庫(kù)

2.教學(xué)要求：

（1）掌握：CSS3漸變、過(guò)渡屬性，CSS3高級(jí)動(dòng)畫(huà)屬性。

4

（2）理解：高級(jí)動(dòng)畫(huà)屬性的坐標(biāo)軸與方向。

（3）了解：第三方animate.css。

第7章Less

1.學(xué)習(xí)重點(diǎn)：

（1）Less的基本概念

（2）Less語(yǔ)法

2.教學(xué)要求：

（1）掌握：Less基本語(yǔ)法，CSS與Less之間的轉(zhuǎn)換。

（2）理解：Less編寫(xiě)規(guī)范。

（3）了解：Less函數(shù)。

第8章Bootstrap響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)

1.學(xué)習(xí)重點(diǎn)：

（1）響應(yīng)式的概念

（2）編寫(xiě)響應(yīng)式網(wǎng)頁(yè)

（3）媒體查詢

（4）Bootstrap介紹

（5）柵格布局系統(tǒng)

2.教學(xué)要求：

（1）掌握：響應(yīng)式網(wǎng)頁(yè)布局設(shè)計(jì)，媒體查詢技巧，Bootstrap基本使用。

（2）理解：視口概念，媒體查詢概念，Bootstrap柵格布局原理。

（3）了解：不同媒體查詢的實(shí)現(xiàn)方法。

第9章Bootstrap常用組件

1.學(xué)習(xí)重點(diǎn)：

（1）全局樣式

（2）表單

（3）組件

（4）Bootstrap高級(jí)插件

2.教學(xué)要求：

（1）掌握：Bootstrap全局樣式、常用組件使用。

（2）理解：Bootstrap樣式定制。

（3）了解：高級(jí)插件用法。

三、練習(xí)及參考答案

1.單項(xiàng)選擇題（將正確答案序號(hào)填寫(xiě)在題目的括號(hào)中）

（1）Internet上提供的主要服務(wù)有:Telnet、E-mail、（）、FTP。

A．AppB.WindowsC.WWWD.W3C

5

（2）下面定義頁(yè)面編碼格式的元素正確的是（）。

A．<metacharset=utf-8>B.<metacharset："utf-8">

C.<metacharset="utf-8">D.<titlecharset=’utf-8’>

（3）下列選項(xiàng)中，不屬于input元素的type屬性可選內(nèi)容的是（）。

A.textB.passwordC.submitD.hide

（4）網(wǎng)頁(yè)中引入外部樣式表的代碼正確的是（）。

A.<stylerel=”stylesheet”href=”index.css”>

B.<stylerel=”stylesheet”src=”index.css”>

C.<linkrel=”stylesheet”href=”index.css”>

D.<linkrel=”stylesheet”src=”index.css”>

（5）元素一旦浮動(dòng)后，都會(huì)變?yōu)椋海ǎ?/p>

A.行內(nèi)元素B.塊元素C.行內(nèi)塊元素D.浮動(dòng)元素

（6）寬100px的div元素，修改轉(zhuǎn)換原點(diǎn)為右上角，下列屬性設(shè)置正確的是（）。

A.transform-origin:100%0B.transform-origin:0100%;

C.transform-origin:0100pxD.transform-origin:lefttop;

（7）下列在less中定義變量的語(yǔ)法正確的是（）。

A.red:#e4393c;B.@red=#e4393c;

C.@red:#e4393c;D.red=#e4393c;

（8）普通規(guī)則下，如果設(shè)備寬為767px，可認(rèn)為其為（）設(shè)備。

A．超大屏B.PCC.PADD.手機(jī)

（9）Bootstrap的less源碼中保存所有基礎(chǔ)變量的less文件是（）。

A.bootstrap.lessB.progess-bars.lessC.variables.lessD.media.less

（10）希望能自由修改元素的位置，但又不希望默認(rèn)文檔流中原始位置被釋放，應(yīng)選擇（）。

A.position:absoluteB.position:relativeC.position:fixedD.position:static

2.多項(xiàng)選擇題（將答案填寫(xiě)在題目的括號(hào)中）

（1）以下屬于表單元素的是：（）。

A.labelB.inputC.textareaD.select

（2）一個(gè)元素可同時(shí)被多個(gè)樣式類(lèi)修飾，以下寫(xiě)法正確的是:（）。

A.<aclass=”.btn”class=”.btn-danger”>

B.<aclass=”btn”class=”btn-danger”>

C.<aclass=”btn,btn-danger”>

D.<aclass=”btnbtn-danger”>

（3）默認(rèn)可在一行中水平排列的元素有:（）。

A.行內(nèi)元素B.塊元素C.行內(nèi)塊元素D.標(biāo)題元素

（4）下列可分別設(shè)置元素在x軸和y軸兩個(gè)方向上的縮放比例的是：（）。

A.scale(value)B.scale(x,y)C.scaleX(x)和scaleY(y)D.scale必須等比例縮放

（5）流式布局主要使用:（）。

A．使用table顯示網(wǎng)頁(yè)的各個(gè)區(qū)域

B.使用浮動(dòng)定位顯示網(wǎng)頁(yè)的各個(gè)區(qū)域

6

C.使用行內(nèi)塊顯示網(wǎng)頁(yè)的各個(gè)區(qū)域

D.使用塊元素顯示網(wǎng)頁(yè)的各個(gè)區(qū)域

3.判斷題（判斷下列敘述是否正確，正確的畫(huà)，錯(cuò)誤的畫(huà)，標(biāo)記在括號(hào)中）

（1）FTP協(xié)議規(guī)定了Web服務(wù)器與瀏覽器之間如何打包及如何傳輸數(shù)據(jù)。（）

（2）塊級(jí)元素和行內(nèi)元素都具備align屬性，可設(shè)置內(nèi)容的對(duì)齊方式。（）

（3）默認(rèn)情況下，單擊<inputtype="radio">旁邊的文本，不會(huì)選中該單選按鈕。（）

（4）父元素所有樣式屬性，子元素都會(huì)自動(dòng)繼承。（）

（5）塊級(jí)元素默認(rèn)都是從上到下排列的，且每個(gè)塊元素獨(dú)占一行。（）

（6）設(shè)置元素的linear-gradient屬性，可實(shí)現(xiàn)線性漸變。（）

（7）編譯是指將瀏覽器不認(rèn)識(shí)的Less語(yǔ)言代碼轉(zhuǎn)換為CSS語(yǔ)言代碼的過(guò)程。（）

（8）視口在手機(jī)端和在PC端都默認(rèn)始終通過(guò)縮小網(wǎng)頁(yè)方式，全部顯示網(wǎng)頁(yè)內(nèi)容。（）

（9）Bootstrap所有組件，單靠引入bootstrap.css就可執(zhí)行。（）

（10）如內(nèi)部浮動(dòng)元素，高于外部容器元素，則內(nèi)部浮動(dòng)元素超出外部元素范圍的部分自動(dòng)隱藏。

（）

4.編程題（仔細(xì)閱讀題目，從答案選項(xiàng)中選擇正確的選項(xiàng)，將其對(duì)應(yīng)的標(biāo)號(hào)填寫(xiě)在橫線處，從而把

步驟補(bǔ)充完整）

（1）從答案選項(xiàng)中選擇正確的代碼，將其對(duì)應(yīng)的字母填寫(xiě)在空白的步驟中，從而把步驟補(bǔ)充完整：

定義一個(gè)表格，一共2行四列。其中，第一行第一個(gè)格，向下跨2行，且內(nèi)容頂端對(duì)齊。第二行第

二個(gè)單元格位置的格，向右跨3行，且內(nèi)容居左對(duì)齊：

<table>

<tr>

<td___①______②___></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td__③_____④__></td>

</tr>

</table>

其中:①和③請(qǐng)選擇不規(guī)則表格相關(guān)的屬性

②和④請(qǐng)選擇內(nèi)容對(duì)齊方式

[答案選項(xiàng)]

7

a．colspan=”2”

b．rowspan=”2”

c．colspan=”3”

d．rowspan=”3”

e．a(chǎn)lign=”right”

f.valign=”top”

g．a(chǎn)lign=”top”

h.valign=”right”

請(qǐng)?zhí)顚?xiě)：①：______②：______③：______④：______

（2）從答案選項(xiàng)中選擇正確的代碼，將其對(duì)應(yīng)的字母填寫(xiě)在空白的步驟中，從而把步驟補(bǔ)充完整：

如下圖所示需求設(shè)計(jì)圖：外層一個(gè)section元素，包裹著內(nèi)層四個(gè)span元素。

請(qǐng)?jiān)谙铝蠧SS中補(bǔ)充選擇器和css屬性：

<style>

section{___①__}

sectionspan{___②____;___③___;}

section__④__{width:223px;}

</style>

[答案選項(xiàng)]

a．box-sizing:box;padding:10px0;

b．padding:10px0;

c．width:1000px;margin:0auto;padding:015px;margin-top:35px;

d．box-sizing:border-box;

e．width:1000px;margin:auto;padding:15px;margin:35px;

f.padding:010px;

g．span>img