第一章HTML 基礎1.html 的基本結構？解析：2.HTML 全稱Hyper Text Markup Language（超文本標記語言）擴展XML:Extendsible Markup Language(可擴展性標記語言)3.高級記事本Ue（UltraEdit）nodepad++Editplus...
第一章HTML 基礎
1.html 的基本結構？
解析：
2.HTML 全稱
Hyper Text Markup Language（超文本標記語言）
擴展XML:Extendsible Markup Language(可擴展性標記語言)
3.高級記事本
Ue（UltraEdit）
nodepad++
Editplus
快捷鍵用熟一個即可。
4.編寫html 文檔的註意點
01.所有標簽字母均小寫。
02.有開始就要有閉合標簽
03.每個層次的標簽有一定程度的縮進。
解析：如果發現body 內書寫了內容，用瀏覽器打開後發現沒有內容，那麼
就需要檢查下title 標簽有沒有閉合。
5.三種文檔類型
嚴格類型，過渡類型，框架類型
6.編碼方式
gb2312
Gbk
Gb2312 和gbk 的區別
GB2312 是中國規定的漢字編碼，也可以說是簡體中文的字元集編碼;GBK 是GB2312 的
擴展,除了相容GB2312 外，它還能顯示繁體中文，還有日文的假名
utf-8:全球通用編碼
用在網頁上可以同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
7.W3C：組織
解析：是一個組織，專門用來給各個瀏覽器廠商等指定規範的。
8.標簽
01.h 標簽：從h1 到h6 字體逐漸減小。
效果：自身加粗，並且可以控制字型大小。
02.p 標簽：和其他的內容行之間有一個空行。
03.br 換行標簽：是自身閉合標簽。<br/>
04.hr 水平線標簽，是自身閉合標簽。
05.strong（加粗）、06.em（傾斜）
07.特殊符號：所有的特殊符號都是包括在&;中
空格：
大於號：>
小於號:<
雙引號:"
版權符號:©
林徽因：冰心(謝婉瑩)，小桔燈() 99
你是人間的四月天
9.圖像標簽
夏洛特的網
html 中兩種路徑：
第一種：絕對路徑，就是掛著盤符的路徑形式，例如：c:\\123\\01.jpg
相對路徑：相對的對象時當前你訪問的html 文檔。符號是../(上一級目錄)
註意問題：相對路徑../：去該html 文件對應的上層文件夾
一般不會使用絕對路徑：D:\\1.html
<img src=”美女.jpg” alt=“網路異常的時候，顯示的文本” title=”滑鼠懸浮在圖片上
顯示的文字”/>
自身閉合標簽
10.超鏈接
分類：頁面間鏈接，錨鏈接，功能性鏈接。
頁面間鏈接：
<a href=”http://www.baidu.com”>去百度</a>
錨鏈接：
01.同頁面間錨鏈接
分兩步：第一步：在頁面目標位置設置一個錨記。<a name=”star”><img src=”01.jpg”
/></a>
第二步：在另一處創建出一個超鏈接：<a href=”#star”>去看明星的隱私信
息吧</a>
02.跨頁面的錨鏈接
功能性鏈接：
<a href=”mailto:[email protected]”>站長信箱</a>
<a href="tencent://message/?uin=QQ">打開QQ</a>
迅雷
電驢
ek2k://
QQ 旋風
第二章列表、表格與框架
第二章列表、表格與框架
收作業
聽寫
補充a 標簽的一個屬性target
1._blank:在新選項卡中打開
2._self:如果沒有設置target 屬性，預設取值是_self
01.列表
001.無序列表：
<ul>
<li></li>
</ul>
002.有序列表
<ol>
<li></li>
</ol>
003.定義描述標簽：應用場景：在圖文混編的情況下使用
<dl>
<dt>放置圖片</dt>
<dd></dd>
....
</dl>
02.表格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
重點：表格的跨行跨列
步驟：1、有幾行幾列？
解析：3 行兩列
2.該跨行的跨行(rospan)，該跨列的跨列(cospan)
3.核心原則：跨行和跨列只能出現在td 中
一定要註意的是：所有的跨行和跨列操作都出現在td 中。
表格跨行跨列步驟：
01.確定表格的行和列
02.搭建出表格架構
03.根據需求，刪除多餘的td(單元格)
3.框架集和內嵌框架
再來一遍Frameset
作用：當我們需要將一個比較大的頁面切割成多個小頁面的時候，可以使用FrameSet，它
一般用於後臺管理員佈局方式。
重要內容：FrameSet 和body 不能共存。
實現：
首先：創建出top.html, left.html right.html 三個子頁面
然後，在主頁面index.html 中通過frameset 標簽來引入三個子頁面
<!--如何將3 個小頁面整合到一個index 大頁面中-->
<frameset rows="20%,*">
<!--頂部的top 頁面-->
<frame src="top.html"/>
<!--下半部分對應的框架-->
<frameset cols="20%,*">
<!--左半部分頁面left.html-->
<frame src="left.html"/>
<!--有半部分的頁面right.html-->
<frame src="right.html" name="rightFrame"/>
</frameset>
</frameset>
註釋：01.border 可以設置邊框的寬度，如果是20，那麼代表邊框寬度是20px，如果設置為
0，代表無邊框。
02.noresize=”noresize”不允許用戶拖動框架
03.scrolling=”no” 不顯示滾動條
Iframe 用法：
應用場景：鏈接外部的頁面，實現樣式的代碼重用。
FrameSet:
01.不能和body 共存
02.將index 頁面用三個頁面組合起來，將一個大
頁面Index 切成3 小塊，每一個小塊兒對應一個頁面
top.html
left.html
right.html
04.框架集Frameset 和內嵌框架iframe
frameset 用於進行網頁佈局，對多個頁面進行組
合。比較複雜，而iframe 一般用於引入站外鏈接，天氣預
報
frameset 關鍵屬性：
border：設置邊框：可以取值100
frameborder:0 和1
borderColor:顏色
frame:noresize srcolling
iframe：noresize srcolling width height
第三章表單
第三章表單
01.什麼是表單？？
解析：表單就是form
<form action=”http://www.baidu.com”
method=”post”>
重置按鈕必須放入到表單中，才能發揮到作用
</form>
註意點：
02.表單元素？
解析：在表單中的標簽就是表單元素
03.老濕：你說get 和post 提交方式有什麼區別？
解析：get 在地址欄顯示提交的數據（危險）
2k
1byte=8bit(位)）
（1kb=1024byte(位元組)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/s 512k/s
post 在表單，通過開發人員工具可以看到（安
全）沒有上限
要想讓表單元素中的value 值提交到伺服器，
表單元素必須有name 屬性
重置和清空？？
解析：
表單元素：
input: type="text" 文本框
type="passsword" 密碼框
type="radio" 單選框
type="checkbox" 覆選框
type="submit" 提交按鈕
type="reset" 重置按鈕
type="button" 普通按鈕
type="image" 圖片按鈕
type="file"文件域
type="hidden" 隱藏域
下拉框
select ---option 下拉框
多行文本域
<textarea>多行文本域</textarea>
屬性
：只讀readonly="readonly"
禁用： disabled="disabled"
-->
第四章初識CSS
1.任務
1.第三章和第四章單詞
2.考試
3.前三章總結
4.第四章內容講解
引入dreamweaver 工具使用
2.內容：
1.使用css 的意義：為了實現代碼和樣式的分離
01.什麼是CSS：(Cascading Stylesheet)層疊樣式表
02.CSS 在頁面中的應用：
解析：
<style type=”text/css”>
P{
font-size:20px;
Color:red;
}
</style>
03.CSS 的優勢
CSS 的基本語法
01.CSS 基本語法結構
02.認識<style>標簽
03.CSS 選擇器
標簽選擇器:通過標簽名來設置元素的樣式。
類選擇器
解析：兩步：第一步：在要設置樣式的目標標簽中起一個名字為class 的屬性名
第二步：在style 標簽中，通過.屬性名{}設置
ID 選擇器
解析：
第一步：在要設置樣式的標簽中起一個名稱為id 的屬性，
第二步：在style 標簽中通過#屬性名{}設置
在HTML 中引入CSS 樣式
01.行內樣式
解析：直接在html 代碼的標簽中設置style 屬性，這種方式缺點做不到代碼和樣式分離。
02.內部樣式表
解析：直接在style 標簽中書寫樣式代碼，但是真正在項目發佈的時候，還是最好將樣式
單獨出一個文件，這樣會提高網站的性能。
03.外部樣式表
解析：通過link 標簽引入當前網站css 文件夾中某一個尾碼名是.css 的文件，
<link href="site.css" rel="stylesheet" type="text/css" />
04.樣式優先順序
規律：
行內>內部樣式表>外部樣式表
也就是遵循的是就近原則。
CSS 高級應用
01.CSS 複合選擇器
A.後代選擇器
B.交集選擇器
C.並集選擇器
02.CSS 繼承特性
A.繼承關係
B.繼承的應用
註意點：
01.如何調整dreamweaver 中代碼視圖的字體大小。
.
2.問：
聲明：下次課的預習大家一定要好好預習，因為裡面的東東很多很雜，所以需要大家多用點
心。
總結：
1.為什麼使用CS
2.CSS 語法
<style type=”text/css”>
標簽類ID 選擇器
</style>
3.選擇器的優先順序
近者優點
4.三種引入樣式表方式
第一種：行內樣式
第二種：內部樣式表
第三種：外部樣式表
5. 複合選擇器
01.後代選擇器空格
02.並集選擇器，，，，
03.交集選擇器連接寫，第一個只能是標簽，後續跟的是類樣式，ID
6.CSS 當中的繼承
作業：
1.預習第五章（難點，希望大家好好預習）
第五章CSS 美化網頁元素
內容回顧：
01.CSS：讓網頁看起來更加美觀，可以實現頁面樣式的復用。層疊樣式表
02.CSS 選擇器：ID 類選擇器標簽
03.複合選擇器：交集，並集，後代
現階段，大家所用的選擇器，只要能滿足題目要求即可，沒有必要刻意去使用複合選擇器，
等到有一天，你發覺使用常見3 種選擇器，定位某一個標簽特別麻煩的時候，思路可以往這
個方向偏移。
交集選擇器：p.name div#name
並集選擇器：p,div
後代選擇器: p ul li
04 選擇器的.優先順序
ID>類選擇器>標簽選擇器
05.CSS 中的繼承
子標簽可以繼承父標簽的樣式
CSS 美化網頁元素
1.span 標簽引入
老師說了，通過span 標簽，我們學了一個知識點，就是行級標簽和塊級標簽。
行級標簽：；所有的行級標簽都顯示在同一行（span，img）
塊級標簽：獨占一行（p ，div）
2.字體樣式
大家教了我一點，就是如果font-family 屬性值有多個，用逗號
隔開。如果英文字體和中文字體同時出現，英文位於前面。
02.如果字體屬性值有空格，必須有””,
03.如果字體屬性是中文，也要有””
分開設置屬性：
設置字體類型:font-family:到底是楷體呢還是宋體”楷體_GB2312”
設置字體大小:font-size：設置字體大小
設置字體風格:font-style;傾斜：font-style:italic
設置字體粗細font-weight:bold; 700px
整體設置屬性：font:字體風格字體的粗細字體大小字體類型;
<div>----------------------------------------------------</div>
水變油
3.文本樣式
設置文本顏色:color:前景色
設置元素水平對齊方式:text-align:center left
設置文本縮進:text-indent:20px;
設置文本的行高line-height:20px;如果我們將line-height 和height 設置成一樣的高度，那麼
就相當於對盒子中內容作了垂直居中，這是一個佈局技巧
設置文本的裝飾:text-decoration:underline;
圖片和文字垂直對齊方式
設置圖片Vetical-align:middle;
4.超鏈接偽類
去除a 標簽中的img 標簽外圍的邊框，有兩種方案：
01.img{border:0px;}
02.img{border:none;}
偽類：選擇器(#div .div div):狀態值(link,visited,hover,active)
a:link:大家的小手還沒有點擊超鏈接時的樣式
A:visited：大家的大手已經點擊過了某個超鏈接的樣式
A:hover：大家的小腳懸停在超鏈接上的樣式
A:active：大家的大腳踩在超鏈接上，但是還未彈起的樣式
設置滑鼠形狀
Cursor:pointer;設置成小手
Cursor:wait:小沙漏忙碌圖標
5.Div
Div 咱們一直在用，知道它是一個塊級標簽，以後佈局的
時候會經常用到它。
6.背景樣式：背景偏移技術！
div {
background-color: pink;//給箱子設置背景顏色。
background-image: url(image/02.jpg);//給某一個標簽，或者說的直白
一些就是給html頁面上的一個箱子，設置背景圖
background-repeat: no-repeat;//圖片比標簽寬高小的時候，只顯示一
張背景圖片
background-repeat:repeat-x;在水平方向上平鋪
background-repeat:repeat-y:在垂直方向上平鋪
background-position:-104px 0px;
//position代表位置：有兩個值，
第一個代表的是水平方向上做偏移，如果需要圖片左移，那麼取負值
第二個代表的是垂直方向上的偏移，如果需要圖片上移動，取值為負值。
width: 300px;
height: 300px;
}
鑒於以上四個屬性寫起來代碼過多，可以將其合成一個屬性，並且嚴重十分非常特別及
其建議要用合寫形式。
Background:pink url(image/美女.jpg) 0px 0px no-repeat;
7.列表樣式
List-style-image:url(image/02.jpg)
List-style:none;將預設的標記去除
List-style:circle:空心圓
List-style:square;方塊
List-style:decimal;實現了從無序列表到有序列表的轉換。
第六章盒子模型
第六章盒子模型
1.盒子模型
盒子模型包括內容和盒子屬性(border,padding,margin)
盒子模型的真實寬度：內容寬度+左右兩側的padding 值+左右兩側的border 值
盒子的真實高度：內容高度+上下的padding 值+上下的border
2.盒子模型常見考題
/*
border:設置顏色後跟參數個數含義
1 個參數:四個邊框顏色都是該顏色
2 個參數(red blue):上下顏色為紅色,左右為藍色
3 個參數(red blue yellow):上邊線顏色為紅色,
左右為藍色,下邊線為黃色
4 個參數()按照上/右/下/左的規律設置顏色
*/
盒子模型對網頁佈局的重要性：
註意：對一個容器設置內邊距，會改變該容器本身的尺寸，所以在佈局的時候要特別小
心。另外能通過margin 實現的功能，儘量不要用padding。
Ul 中的li 是超不出ul 的包圍的。這是一個特例。就是對ul 設置了內邊距，ul 本身的尺
寸不會改變。
2.標準文檔流
塊級標簽和行級標簽
註意：塊級標簽可以和行級標簽轉換
通過display 屬性
display:block;
display:inline;
display 屬性的三個取值：
01.none:將某個元素隱藏display: none;*將div 隱藏*
02.block：將某個元素顯示
03.inline:將某個塊級標簽轉換成了行級標簽
3.滑鼠單擊到img 行的時候圖片隱藏方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:hover img{
display:none;
}
</style>
</head>
<body>
<a href="#">懸停到我身上有驚喜，點壞不用賠！
<br /><br /><br />
<img src="image/pig.jpg" />
</a>
</body>
</html>
第七章浮動
第七章浮動
1.常見的網頁佈局
浮動：簡單理解就是為了佈局網頁，讓兩個div 可以在同一行顯示
清除浮動必須遵循一個重要的原則，就是如果想要清除浮動，那麼原來盒子div 浮動的方
向就決定了清除浮動的方向值。
2.overflow:解決div 的高度塌陷問題
高度塌陷是如何引起的？
解析：當一個div 中所有的子div 都進行了浮動後，那麼會出現該問題，那麼解決方就是在
父div 中設置器overflow:hidden：即可解決高度塌陷問題
方式二：在父div 結束標簽前添加一個子的div，給該div 設置一個id，然後通過樣式清除
浮動。代碼如下:#littlediv{clear:left;}
3.如何將ul 中最後一個li 前提到第一個li 之上?
解析：用的思路就是給ul 設置相對定位:position:reletive ; 給最後一個li 起一個id，設置
其絕對定位:position:absolute: top:-15px;
1.網頁中浮動的應用
浮動就是為了配合網頁佈局中常見的佈局方式，將兩個div 顯示到同一行
01.橫嚮導航菜單
02.圖文混編
1.大div 叫container 360px
2.兩個小div，一個承載標題，。另一個承載視頻列表
3.定義列表來寫。
01.將dl 進行左浮動，讓多個dl 可以在同一行顯示
02 設置dl 寬度保證兩個dl 之前出現一定間隔。
03..通過text-align:center:來居中dl 中內容
04.如果網頁中部分元素應用了浮動，可能會引起高度塌陷，這個時候解決方案
通過在body 中加多一個空的div，然後給該div 設置浮動屬性為both
4.網頁元素三種常見的定位機制
普通流，浮動和絕對定位
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標準里根本就沒有這個
詞。如果把文檔流直譯為英文就是document flow ，但標準里只有另一個詞，叫做普通流
（normal flow)，或者稱之為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯
的書就是這麼來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流normal flow
（普通流） 這一詞，從來沒出現過document flow （文檔流）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。
浮動框不屬於文檔中的普通流，當一個元素浮動之後，不會影響到塊級框的佈局而只會影
響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動
框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”
現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是只能左右浮動。
正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其
他普通流元素了，也就表現出高度為0（高度塌陷）。在實際佈局中，往往這並不是我們所
希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地佈局；
恨，浮動之後遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指windows
平臺的IE 瀏覽器）。
也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理是什
麽？
本文將一步一步地深入剖析其中的奧秘，讓浮動使用起來更加得心應手。
一、清除浮動還是閉合浮動（Enclosing float or Clearing float）？
很多人都已經習慣稱之為清除浮動，以前我也一直這麼叫著，但是確切地來說是不准確的。
我們應該用嚴謹的態度來對待代碼，也能更好地幫助我們理解開頭的三個問題。
1）清除浮動：清除對應的單詞是clear，對應CSS 中的屬性是clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。
兩者的區別請看優雅的Demo
通過以上實例發現，其實我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮
動，
在footer 上設置clear：both 清除浮動並不能解決warp 高度塌陷的問題。
結論：用閉合浮動比清除浮動更加嚴謹，所以後文中統一稱之為：閉合浮動。
二、為何要清除浮動？
要解答這個問題，我們得先說說CSS 中的定位機制：普通流，浮動，絕對定位
（其中"position:fixed" 是"position:absolute" 的一個子類）。
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標準里根本就沒有這個詞。
如果把文檔流直譯為英文就是document flow ，但標準里只有另一個詞，叫做普通流
（normal flow)，
或者稱之為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這麼來的。
比如《CSS Mastery》，英文原書中至始至終都只有普通流normal flow（普通流） 這一詞，
從來沒出現過document flow （文檔流）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。
浮動框不屬於文檔中的普通流，當一個元素浮動之後，不會影響到塊級框的佈局而只會影
響內聯框（通常是文本）的排列，
文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會
出現包含框不會
自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮
雲一樣，但是只能左右浮動。
正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其
他普通流元素了，
也就表現出高度為0（高度塌陷）。在實際佈局中，往往這並不是我們所希望的，所以需要
閉合浮動元素，
使其包含框表現出正常的高度。
第八章定位網頁元素
第八章定位網頁元素
01.只有塊級標簽才可以浮動
02.定位網頁元素的方案
Static：預設
Absolute：絕對定位
Reletive：相對定位，相對的對象是自身
Fixed：固定的，類似於空間的Top 效果
重點中的重點：
絕對定位：
01.涉及到兩個標簽，並且標簽有嵌套
關係。
02.一般給外層標簽設置為相對定位
Position:relative，不需要設置left，top 等
偏移量。
03. 給內層標簽設置絕對定位，
position:absolute;，需要設置left 和top
項目階段
01.經濟半小時
02.噹噹圖書榜
03.噹噹暢銷排行
004.淘寶導航
005.開心網
006.V+首頁
007.曬新貨頁面
008.商品詳細頁
009.家紡頁面
010.幫助中心
011.註冊和登陸頁
