近期應粉絲要求，出多個前端大總結，適合小白復習查閱

#第一章 Web基礎知識

Web開發基本概念

1、萬維網是一個由許多相互鏈接的超文本組成的系統，通過互聯網訪問，

2、web：worldwideweb，萬維網，簡稱web，www，通常稱為網頁，

3、web開發：進行網頁頁面制作及其閣下你給功能開發，

4、瀏覽器：顯示網頁內容，并讓用戶與這些檔案互動一種軟體，（常用：IE、谷歌、火狐）

5、web服務器：提供web服務的計算機，

6、URL（統一資源定位符）：互聯網上標準資源的地址，可以從互聯網上得到資源的位置和訪問方法，

組成：協議、服務器地址、資源路徑，

7、網頁檔案的擴展名：html、htm，檔案內容：HTMl代碼和文本內容，

8、網頁：瀏覽器中打開的一個頁面，網站：一組域名相同的網頁的集合，

9、B/S架構：不需要下載客戶端，通過URL訪問，有跨平臺能力，無縫升級，客戶端免維修，不能直接使用客戶端硬體資源，用戶體驗單一，

10、C/S架構：需要安裝特定的客戶端程式，針對不同平臺開發不同版本，升級應用需要重新安裝，充分應用客戶端硬體資源，構建大型3D效果應用，

11、互聯網發展：web1.0 web2.0 移動互聯網

12、web開發程序：專案提出、需求分析、設計（UI設計、系統設計）、開發（前端開發、后臺開發）、系統測驗、發布維護，

13、網站型別：(1)、按網站主體性質劃分：政府網站、教育科研網站、企業網站、商業網站、個人網站

(2)、按網站功能劃分：宣傳展示型網站、營銷型網站、電子商務、網上購物、門戶網站

14、樹形結構：有主頁有分支有葉子，扁平結構：扁平結構可以理解為是一種特殊的樹形結構，只有主干和樹葉，是當前流行的一種網站結構，對搜索引擎特別友好，

15、頁面分類：首頁：也稱主頁，是一個網站的入口網頁，

串列頁：一般都是二級頁面，是欄目的具體展示頁，

內容頁：一般就是具體內容的頁面，

16、頁面元素：文字、表單、視頻、圖片、音頻、影片，

萬維網:www，通常也稱網頁，

網頁：瀏覽器中打開的一個頁面，

網站：一組域名相同的網頁的集合，

瀏覽器：顯示網頁內容，并讓用于與這些檔案互動的一種軟體，

服務器：提供web服務的計算機，

URL：統一資源定位符，協議、域名、資源路徑，

網站訪問程序：

⑴ 通過輸入網址（URL）指定要訪問的網頁，

⑵ 瀏覽器向服務器發送請求：請把XXX網頁檔案傳送給我，

⑶ 服務器做出回應：把XXX網頁檔案傳送給瀏覽器，

⑷ 瀏覽器決議網頁檔案，呈現出網頁，

軟體架構分類及各自特征：

B/S架構

無需安裝特定客戶端程式，通過URL訪問

跨平臺能力（Windows、Linux、Android、IOS…） ?

無縫升級，客戶端免維護 ?

不能直接使用客戶端硬體資源，用戶體驗單一 ?

C/S架構 ?

需要安裝特定客戶端程式 ?

針對不同平臺開發不同版本 ?

升級應用須重新安裝 ?

充分應用客戶端硬體資源，構建大型3D效果應用

web系統開發程序，及相關知識體系，

專案提出--需求分析--設計（UI、系統）--開發（前端、后臺）--系統測驗--發布/維護

網站型別

主體性質（政府網站、教育科研網站、企業網站、商業網站、個人網站）

功能劃分（宣傳展示型網站、營銷型網站、電子商務、網上購物、門戶網站、企業門戶、在線交易平臺、政府門戶）

網站結構（樹型結構、扁平結構（特殊））

網站頁面

頁面分類（主頁、串列頁、內容頁）

頁面元素（文字、圖片、表單、視頻、音頻、影片）

學習Web開發的意義

?掌握HTML、CSS語言

能夠構建內容豐富、界面美觀的Web頁面

掌握相關開發、除錯工具的使用方法

為后續Java、PHP等課程打下基礎

#第二章 HTML語言基礎

網頁與網頁檔案，

網頁：瀏覽器中打開的一個頁面

網頁檔案：文本檔案，擴展名html、htm，內容為HTML代碼和文本內容，

網頁與網頁檔案的關系：?瀏覽器中看到的網頁實質為：網頁檔案

網頁頁面的組成：內容+結構，

HTML簡介

語言特點

發展程序

應用領域

HTML基本語法：語法、語意、詞匯，

HTML標記分類（單/雙標記），HTML屬性的概念，

HTML檔案結構（檔案宣告、html、head、body、title、meta），

開發工具簡介

編輯器

瀏覽器

瀏覽器開發工具

幫助手冊

#第三章構建頁面（一）

網頁元素包含內容：圖片、文字、串列、超鏈接

在網頁中插入文字（文字、物體、注釋）

標題<h1>--<h6>

段落<p>

換行<br/>

水平線<hr/>

物體:

  < > & "

注釋:

在網頁中插入串列及相關屬性的設定，

有序串列

<ol>

</ol>

無序串列

<ul>

</ul>

#第四章構建頁面（二）

在網頁中插入圖片及常用相關屬性（src、alt），

在網頁中設定熱區，

</map>

·id屬性和name屬性表示名稱，設定為相同值，與<img />標簽的usemap屬性匹配，創建影像與熱區之間的關系

·alt屬性：該區域的替代文本；

shape屬性：該區域的形狀；（rect、circle、poly）

coords屬性：該區域在原始圖片上的坐標值，

href屬性：該區域的鏈接地址；

在網頁中插入超鏈接及常用相關屬性（href、target）

href:鏈接地址

target：目標視窗在何處打開

_blank：在新視窗打開

_self：在當前視窗打開

_parent：在父視窗打開

_top：在頂層視窗打開

錨的應用，

錨點：網頁中的某一位置，

錨點鏈接：在同一個頁面跳到指定位置的方式，

創建錨點鏈接：

①建立錨點

<a name=“錨點名稱”>錨（顯示在頁面上的文本）</a>

②創建指向該錨的鏈接

相對路徑、絕對路徑的概念，

在網頁中使用行內框架（iframe），

src：檔案的路徑

width： “行內框架”區域的寬度

height：“行內框架”區域的高度

scrolling：規定是否在 iframe 中顯示滾動條：

No：不出現滾動條 Yes：顯示滾動條 Auto：自動出現滾動條

frameBorder：設定是否顯示框架的邊框，(1，0)

name：框架的名字，用來進行識別，

#第五章構建頁面（三）

在網頁中插入表格及簡單樣式修飾，

?詞匯(標簽)：<tr></tr>

語法：1. 成對出現 2. 嵌套于<table></table>標簽內

語意：定義一行 ?

詞匯(標簽)：<th></th>

語法：1. 成對出現 2. 嵌套于<tr></tr>標簽內

語意：定義表頭 ?

詞匯(標簽)：<td></td>

語法：1. 成對出現 2. 位于<tr></tr>內

語意：定義一個單元格

相關屬性

width:規定表格元素的寬度（pixels或%）

bgcolor：表格背景顏色

background：表格背景圖

align：表格的對齊方

border：表格邊框的寬度（pixels）

bordercolor：表格邊框的顏色

cellpadding : 單元邊沿與其內容之間的距離

cellspacing : 單元格之間的空白（pixels或%）

colspan:跨列

rowspan:跨行

在網頁中插入表單及簡單樣式修飾，

標簽：<form action="" method=""> </form>

action：規定當提交表單時向何處發送表單資料值：URL

method：規定用于發送 form-data 的 HTTP 方法，值：get/post

標簽：<input type=".." name=".." value="..">

text

password

radio

checkbox

file

submit

button

reset

</select>

#第六章 HTML4.01與HTML5

HTML5與HTML4.01，

<emject> 定義外部互動內容或插件 html5

<audio> 定義聲音內容 html5

<video> 定義視頻 html5

HTML多媒體概述，

video與audio，

object與embed

多媒體元素基本屬性和常用方法，

Canvas基礎知識，

使用canvas繪制簡單圖形，

HTML樣式修飾性標簽介紹

font規定文本的字體、字體尺寸、字體顏色，

< font color=“red” size=“5” face=“黑體”>< /font >

strong用于強調文本

b規定粗體文本

#第七章 CSS語言基礎

為什么使用CSS，

1、針對元素樣式設定的屬性太少

2、修改元素樣式太麻煩

3、控制元素樣式的代碼冗余度過高

更專業的樣式修飾方法

更簡約的布局方法

更簡便的樣式修飾方法

改一處動全域的方法

CSS簡介，

CSS是 Cascading Style Sheet 的縮寫，譯作「層疊樣式表」，是用于(增強)控制網頁樣式并允許將樣式與網頁內容分離的一種標記性語言，

CSS的基本語法：CSS代碼是由一條條陳述句構成，而每一條陳述句的結構，都基本相同

樣式寫法：選擇器 {屬性：屬性值；屬性：屬性值；..... }

選擇器

1、標簽選擇器——選擇器是HTML標簽，影響整個頁面中該種標簽的樣式，

2、類選擇器——以“.”開頭定義的選擇符，影響所有以class屬性參考該類的標簽樣式，

注意：類名的第一個字符不能使用數字

元素可以加入多個類，把各個類名放在class屬性中，各個類名之間用一個空格分隔，類名的順序并不重要，

3、id選擇器——以“#”開頭定義的選擇符，影響以id屬性參考該選擇符的標簽樣式，

單一頁面中，一個id選擇器只能使用一次！

樣式表

1、行內樣式——在元素標簽內通過style屬性添加樣式

用途：指定網頁中個別元素的顯示效果，不符合樣式與內容分離原則不推薦用

2、頁內樣式——在head部分的style標簽內添加樣式

用途：對頁面中某些標簽或元素設定樣式風格，控制當前頁面樣式，維護較困難

3、外部樣式——參考外部建立的.css檔案

用途：可同時控制多個頁面，適用于各類大型網站，可用性最強，推薦使用，

樣式優先級：

1、ID選擇器 > 類選擇器> 標簽選擇器

2、行內樣式>頁內樣式>外部樣式

3、就近原則，距離元素最近的樣式優先級最高

注釋方法： /*…*/ 多行注釋

多個樣式，在同一內容上共同實作，叫做：CSS樣式的疊加

檔案中的某些元素，將沿用為其父元素所設定的樣式，這種特點叫做：CSS樣式的可繼承性

結構和樣式分離思想，

CSS基本應用示例，

#第八章文本樣式和字體樣式

CSS字體相關類樣式修飾，

字體系列：font-family：‘宋體’，‘仿宋’；

字體大小：font-size：20px;(2em;)

字體風格：font-style:italic(normal\italic\oblique);

字體加粗：font-weight:900;(100~900;)(lighter\normal\bold\bolder)

字體綜合設定：font:italic bold 36px '宋體';

CSS文本類樣式修飾，

文本縮進：text-indent:2em;(20px;)

水平對齊：text-align:left(right\center)

文本修飾：text-decoration:none;(underline\line-through\blink)

文本顏色：color:red;(#000000;)

行高：line-height:2em;(20px;)

#第九章超鏈接和偽類

CSS超鏈接的修飾，

未被訪問的超鏈接a:link

滑鼠經過超鏈接a:hover

鏈接被點擊的那一刻a:acitve

訪問過的超鏈接a:visited

特定順序設定： :link ，:visited，:hover, :active

超鏈接應用

CSS偽類的使用方法，

CSS偽元素的使用方法，

#第十章背景樣式和串列樣式

CSS背景類樣式修飾

背景色：background-color

關鍵字（gray）

? 十六進制表示方式（#808080）

? rgb表示方式，如：rgb（128,128,128）

背景影像：background-image

background-image:url(images/f1.png)

背景重復：background-repeat:repeat-x;

repeat;默認

repeat-x;

repeat-y;

no-repeat;

inherit;繼承父元素

背景定位：background-position:50%50%;

center

top

bottom

right

left

背景綜合屬性：background

background:red url(images/11.png) no-repeat center;

CSS串列類樣式修飾

串列型別：list-style-type

none 無

circle 空心圓

square 實心方塊

decimal 數字

lower-alpha 小寫英文

串列項影像：list-style-image

url（images/f1.png）

串列標志位置：list-style-position

outside

inside

串列綜合設定

list-style:square inside url(images/f1.png)

#第十一章網頁布局

布局簡介: 網頁布局是指網頁內容在頁面上所處位置的設計，

布局概念

頁面尺寸：

解析度:800x600時，頁面尺寸:780x428個像素

解析度:640x480時，頁面尺寸:620x311個像素

解析度:1024x768時，頁面尺寸:1005x600個像素

布局常見版式

布局的方法

布局思想：由整體到區域

結構性標簽div、span

Div

? div相當于一個容器（盒子）

? div標簽可以把檔案分割為獨立的、不同的部分

? 通過id或class屬性區分不同的容器

div具有盒子模型的所有屬性，布局時用來控制元素之間的距離和相對位置

應用浮動float

浮動：定義元素在哪個方向浮動，改變頁面中物件的前后流動順序

Left 左浮動

Right 右浮動

None 不浮動

Inherit 繼承父元素float屬性

float所產生的問題

1. 浮動元素距離父元素邊框的位置，是該側的父元素padding+自身margin的值

2. 通常不會超過父元素的邊界

3. 元素一旦浮動就不屬于父元素了

4. 浮動元素不會相互重疊

5. 不能上下浮動，通常只設一種浮動即可

6. 如果父元素寬度不夠，浮動元素會另起一行顯示，

Overflow

1、父元素不設高度并且子元素浮動時，使父元素高度自動適應子元素高度，

2、父元素設定的高度或寬度小于子元素時，使父元素出現相應滾動潭訓隱藏子元素超出部分內容

Clear

用來設定該元素邊上沒有其他元素可以浮動

clear: left / right / both / none

相對定位、絕對定位

? 絕對定位

? position:absolute

?1、與left，right，top，bottom等屬性共同使用

?2、如果父元素未設定position屬性，則以瀏覽器視窗左上角為起始位置

?3、如果父元素設定了position屬性，則以父元素左上角為起始位置

? 相對定位

? position:relative

?1、與left，right，top，bottom等屬性共同使用

?2、以自身本應在的位置為起始位置

float和position相似點：

1、都是將元素浮動起來

2、元素一旦設定就與父元素沒關系了 float和position

不同點：

1、position與top、left等配套使用

2、float位置移動通過margin、padding等實作

3、overflow和clear對position無效

4、布局通常使用float，而不是position

布局示例，

#第十二章 CSS盒子模型

行內元素、塊級元素的概念及display屬性的用法，

CSS盒子模型簡介，

Web中的盒子：一個矩形區域，內容包裹在盒子中，盒子的堆疊與嵌套形成整個頁面的內容排布，

盒子模型

寬度

高度

邊框

內邊距

外邊距

根據HTML元素的顯示特征，可分為：

?塊級元素（block level element）

? 元素在顯示時會獨占一行，并同時具有寬、高、內外邊距特征，

? 舉例：form – 互動表單，h1 – 1級標題，hr – 水平分隔線，p – 段落，table – 表格，ul – 無序串列

?行內元素（inline element）

? 在顯示時通常不會以新行開始，橫向排列，到最右端自動折行，

? 舉例：a – 鏈接，img – 圖片，input – 輸入框，select – 專案選擇，font – 字體設定，b – 粗體，i – 斜體，strong – 粗體強調

Display：block/inline/none；

border-top 上邊框

border-right 右邊框

border-bottom 下邊框

border-left 左邊框

?邊框的寬度：border-width

?邊框的顏色：border-color

?邊框的樣式：border-style

border-width：20px；四面

border-width：20px 10px；上下，左右

border-width：20px 10px 5px 10px；上右下左

復合

border：width style color； border:1px solid #cccccc；

padding、margin與border相同

#第十三章 CSS高級內容

CSS高級選擇器

分組選擇器

派生選擇器

屬性選擇器

后代選擇器

子元素選擇器

相鄰兄弟選擇器

導航欄

圖片庫

圖片透明

CSS顏色

CSS單位

網路安全字體

CSS聽覺參考手冊

#第十四章 div+CSS布局實戰

瀏覽器除錯工具的使用方法，

網頁中選定需要修改或查看樣式的網頁元素，右鍵，審查元素，

根據實體資料，完成頁面搭建，

網頁設計基本流程
- 需求獲取
- 制作UI效果圖
- 網頁設計與實作
  - 分析網頁結構
  - 用HTML實作網頁結構
  - 用CSS實作網頁結構布局
  - 填充網頁內容
  - 修飾網頁樣式
- 調整瀏覽器兼容性
- 網站上線運營

布局技巧總結，

1. 1. 網頁布局遵循從整體到區域的原則，
  2. margin容易產生邊界的重合，邊界重合時利用padding或border來避免，
  3. 使用浮動功能時記得適當清除指令，

#第十五章瀏覽器兼容性調整

瀏覽器兼容性問題簡介，

常見的瀏覽器兼容性問題，

1、網頁居中問題，問題癥狀：IE6下常規設定無法使頁面居中，

解決方案：body{text-align:center}

2、某些瀏覽器不支持某些屬性，問題癥狀：IE6下不支持min-width、max-height等屬性，

解決方案：具體情況具體分析

3、png透明圖片支持問題，問題癥狀：IE6下不支持透明圖片，

解決方案：js方法或css濾鏡

4、不同瀏覽器的標簽默認的外邊距和內邊距不同，問題癥狀：不加樣式控制的情況下，各自的margin 、padding、p等差異較大，

解決方案：CSS里 *{margin:0; padding:0;}

5、塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設定的大

問題癥狀：常見癥狀是IE6中后面的一塊被頂到下一行，

解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性；或使用hack方法

CSS Hack跨瀏覽器解決方案，

1、使用合適的檔案宣告（DOCTYPE）

2、對標準瀏覽器進行兼容

- 撰寫代碼時，要了解客戶群的瀏覽器使用情況，
- 撰寫代碼時，以標準瀏覽器（Firefox/Chrome）為參考，暫時不考慮特殊瀏覽器行為（IE6類），
- 一般情況下，先做一些通用設定，把兼容性問題扼殺在萌芽中，

3、標準的網頁代碼

- 盡量使代碼符合w3c標準
- 借助w3c提供的HTML驗證器和CSS驗證器對代碼進行網上標準化驗證

4、借助瀏覽器開發者工具除錯

IE條件注釋，

1、HTML頭部參考Hack（條件注釋法）

2、CSS類內部Hack（類內屬性前綴法）

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果，

W3C驗證，

#第十六章網頁視覺設計

網頁布局

網頁尺寸

柵格布局（頁面柵格、產品柵格）

柵格系統
- 柵格設計系統（又稱網格設計系統、標準尺寸系統、程式版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格，（維基百科）

網頁設計中的柵格系統
- 以規則的網格陣列來指導和規范網頁中的版面布局以及資訊分布，

柵格系統的設計原理及應用

- 在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A” ，

留白

１、版塊間距均為10px

２、版塊與內容間距為10px

３、內容單元之間間距為10px

4、內容的間距均為10px

網頁風格

版式（軸型、自由型、框型、T字型、標準T字型、同字型、混合型）

1、軸型：圖片和文字內容集中在頁面的中軸位置，可以是橫軸也可以是縱軸分布，

2、焦點型：圖片和文字集中在頁面的某一位置，用對比強烈的顏色或者圖片表達，

3、格型：圖片和文字被比較均勻的方格所劃分，

4、框型：主要內容在中間的較大區域，而導航欄和常規欄目則分布在類似邊框的周圍區域，

4、自由型：沒有固定的版式和風格，完全隨意安排文字和圖片的位置，

5、混合型：兩種或兩種以上的頁面版式結合使用，

風格

歐美風格
歐美國家慣用的設計風格，一類簡潔明了、色彩單一；一類構圖復雜、色彩濃烈，

韓國風格

韓國慣用的界面設計，色彩清爽、多用藍、綠色、多用大圖片、漸變色、人物和卡通矢量圖，

中國風格
具有中國古典風格的設計，古色古香，以具有中國特色的花紋或圖案來裝飾，

網頁用色（色彩原理、色彩的心理感受、網頁色彩運用）

網頁設計趨勢

#第十七章網頁元素設計

文字設計

字體、字體

標題、正文文字設計

文字顏色

行、與段落

圖片設計

logo設計

banner設計

背景圖片設計

網頁配圖

圖文混排

表單設計

Tab設計

按鈕設計

圖示設計

#第十八章網頁設計規范

頁面規劃

尺寸兼容

欄目

布局

頁面元素

顏色運用

創意設計

細節設計

互動設計

統一設計

醒目

用戶體驗友好性設計

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279610.html

標籤：其他

上一篇：深入JavaScript之JS引擎如何執行JS代碼

下一篇：前端校招面試指南，校招面試題精編大全（350頁）

超硬核萬字！web前端學霸筆記，學完就去找作業吧

#第一章 Web基礎知識

#第二章 HTML語言基礎

#第三章 構建頁面（一）

#第四章 構建頁面（二）

#第五章 構建頁面（三）

#第六章 HTML4.01與HTML5

#第七章 CSS語言基礎

#第八章 文本樣式和字體樣式

#第九章 超鏈接和偽類

#第十章 背景樣式和串列樣式

#第十一章 網頁布局