#第一章 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>
?????? ? <li>..</li>
?????? </ol>
?????? 無序列表
?????? <ul>
?????? ? <li>..</li>
?????? </ul>
#第四章 構建頁面（二）
在網頁中插入圖片及常用相關屬性（src、alt）。
在網頁中設置熱區。
?????? <img src="#" alt=".." usemap="#ming">
?????? <map name="ming" id="ming">
????????????? <area shape="circle" coords="180,139,14" href="url" alt=".."></area>
????????????? <area shape="rect" coords="0,0,110,260" href="url" alt=".."></area>
????????????? <area shape="toly" coords="180,139,14" href="url" alt=".."></area>
?????? </map>
?????? ·id屬性和name屬性表示名稱，設置為相同值，與<img />標簽的usemap屬性匹配。創建?????? 圖像與熱區之間的關系
?????? ·alt屬性：該區域的替代文本；
?????? shape屬性：該區域的形狀；（rect、circle、poly）
?????? coords屬性：該區域在原始圖片上的坐標值。
?????? href屬性：該區域的鏈接地址；
在網頁中插入超鏈接及常用相關屬性（href、target）
?????? href:鏈接地址
?????? target：目標窗口在何處打開
????????????? _blank：在新窗口打開
???????????? _self：在當前窗口打開
???????????? _parent：在父窗口打開
????????????? _top：在頂層窗口打開
錨的應用。
?????? 錨點：網頁中的某一位置。
?????? 錨點鏈接：在同一個頁面跳到指定位置的方式。
創建錨點鏈接：
①建立錨點
?????? <a name=“錨點名稱”>錨（顯示在頁面上的文本）</a>
②創建指向該錨的鏈接
?????? <a href=“#錨點名稱”>……</a>
相對路徑、絕對路徑的概念。
在網頁中使用內聯框架（iframe）。
?????? <iframe>標簽的常用屬性是:
?????? src：文件的路徑
?????? width： “內聯框架”區域的寬度
?????? height：“內聯框架”區域的高度
?????? scrolling：規定是否在 iframe 中顯示滾動條：
?????? ???????????????? No：不出現滾動條? Yes：顯示滾動條? Auto：自動出現滾動條
?????? frameBorder：設置是否顯示框架的邊框。(1，0)
?????? name：框架的名字，用來進行識別。
<iframe? src="URL"? width="x"? height="y"??? scrolling="[OPTION]" frameborder="x"? name="main"></iframe>
#第五章 構建頁面（三）
在網頁中插入表格及簡單樣式修飾。
?????? ?詞匯(標簽)：<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
?????? <textarea? rows="3" cols="2">...</textarea>
?????? <select? name="..">
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
?????? </select>
#第六章 HTML4.01與HTML5
HTML5與HTML4.01。
?????? <object> 定義嵌入對象????? html4???? html5????
?????? <emject>????? 定義外部交互內容或插件?? html5
?????? <audio> 定義聲音內容???????????? html5
?????? <video> 定義視頻???????????????????? html5
?
HTML多媒體概述。
?????? video與audio
?????? object與embed
多媒體元素基本屬性和常用方法。
Canvas基礎知識。
使用canvas繪制簡單圖形。
HTML樣式修飾性標簽介紹
font規定文本的字體、字體尺寸、字體顏色。
?????? < font? color=“red” size=“5” face=“黑體”>< /font >
strong用于強調文本
?????? <strong>你好</strong>
b規定粗體文本
?????? <b>你好</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聽覺參考手冊
?
#第十五章 瀏覽器兼容性調整
?
瀏覽器兼容性問題簡介。
常見的瀏覽器兼容性問題。
?????? 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（條件注釋法）
????????????? <!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->
<!--[if IE 6]>這段文字只在IE6瀏覽器顯示<![endif]-->
<!--[if gte IE 6]>這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->
<!--[if ! IE 8]>這段文字在非IE8瀏覽器顯示<![endif]-->
<!--[if !IE]>這段文字只在非IE瀏覽器顯示<![endif]-->
?????? 2、CSS類內部Hack（類內屬性前綴法）
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。
#第十六章 網頁視覺設計
網頁布局
網頁尺寸
柵格布局（頁面柵格、產品柵格）
- ? 柵格系統
- 柵格設計系統（又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。（維基百科）
?
- ? 網頁設計中的柵格系統
- 以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。
?
?????? 柵格系統的設計原理及應用
-
- 在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A” 。
留白
?????? １、版塊間距均為10px
２、版塊與內容間距為10px
３、內容單元之間間距為10px
?4、內容的間距均為10px
網頁風格
版式（軸型、自由型、框型、T字型、標準T字型、同字型、混合型）
?????? 1、軸型：圖片和文字內容集中在頁面的中軸位置，可以是橫軸也可以是縱軸分布。
?????? 2、焦點型：圖片和文字集中在頁面的某一位置，用對比強烈的顏色或者圖片表達。
?????? 3、格型：圖片和文字被比較均勻的方格所劃分。
?????? 4、框型：主要內容在中間的較大區域，而導航欄和常規欄目則分布在類似邊框的周圍區域。
?????? 4、自由型：沒有固定的版式和風格，完全隨意安排文字和圖片的位置。
?????? 5、混合型：兩種或兩種以上的頁面版式結合使用。
風格
?????? 歐美風格
??? 歐美國家慣用的設計風格，一類簡潔明了、色彩單一；一類構圖復雜、色彩濃烈。
?????? 韓國風格
?????? 韓國慣用的界面設計，色彩清爽、多用藍、綠色、多用大圖片、漸變色、人物和卡通矢量圖。
?????? 中國風格
??? 具有中國古典風格的設計，古色古香，以具有中國特色的花紋或圖案來裝飾。
網頁用色（色彩原理、色彩的心理感受、網頁色彩運用）
網頁設計趨勢
?
#第十七章 網頁元素設計
?
文字設計
字體、字體
標題、正文文字設計
文字顏色
行、與段落
圖片設計
logo設計
banner設計
背景圖片設計
網頁配圖
圖文混排
表單設計
Tab設計
按鈕設計
圖標設計
?
#第十八章 網頁設計規范
?
頁面規劃
尺寸兼容
欄目
布局
頁面元素
顏色運用
創意設計
細節設計
交互設計
統一設計
醒目
用戶體驗友好性設計
?
