第一部分 HTML
第一章 職業(yè)方向和規(guī)劃定位
職業(yè)方向規(guī)劃定位：
web前端開發(fā)工程師
web網(wǎng)站架構(gòu)師
自己創(chuàng)業(yè)
轉(zhuǎn)崗管理或其他
web前端開發(fā)的前景展望：
未來IT行業(yè)企業(yè)需求最多的人才
結(jié)合最新的html5搶占移動端的市場
自己創(chuàng)業(yè)做老板
隨著互聯(lián)網(wǎng)的普及web開發(fā)成為企業(yè)的寵兒和核心
web職業(yè)發(fā)展目標：
第一政冻、梳理知識架構(gòu)
負責內(nèi)容的HTML
負責外觀的css（層疊樣式表）
負責行為的js
ps切圖
第二、分解目標（起步階段干签、提升階段、成型階段）
起步階段：
基本知識的掌握
常用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開發(fā)習慣（加注釋、對齊方式）
提升階段：
熟悉掌握HTML基本標簽和屬性
熟練掌握css的基本語法和使用
瀏覽器兼容和w3c標準的掌握
結(jié)合html+css+js開始系統(tǒng)項目的開發(fā)
成型階段：
精通DIV+CCS布局
精通css樣式表控制html標簽
熟悉運用js制作動態(tài)網(wǎng)站的效果
能獨立開發(fā)完成網(wǎng)站
認識HTML：
html不是一種編程語言，是一種標志語言
標記語言是由一套標識標簽組成的
html使用標簽來描述網(wǎng)頁
html結(jié)構(gòu)：
1
2
3
4
<html>
<head></head>
<body></body>
</html>
不成對出現(xiàn)的標簽
<br><hr><meta><img><input..><option..><link>
HTML 基本標簽的講解：
<html><head><body>標簽
<h1>—-<h6>僅僅用于標題文本，不要為了產(chǎn)生粗體文本使用它們
<p>標簽 段落標簽
<strong><b>標簽
都會讓文字產(chǎn)生加粗效果
<strong>用于強調(diào)文本，強度更深皮钠，表示重要文本—>用于SEO優(yōu)化
<b>只是視覺加粗效果—>單純?yōu)榱水a(chǎn)生加粗
<em><i>標簽
em用于強調(diào)文本
i只是視覺斜體效果
<strong>比<em>強調(diào)更強
特殊符號：
—->空格
> —>大于號
<；—>小于號
"赠法；—>引號
©–>版權(quán)號
第三章 html基礎(chǔ)
HTMl基本標簽：
span標簽
對被用來組合文檔中的行內(nèi)元素
注意：span沒有固定的格式表現(xiàn)麦轰，當對它應用樣式時，才會產(chǎn)生視覺上的變化
<pre>標簽
文字的格式按源碼的排版來顯示砖织，我們稱之為預處理格式
<a>標簽—>他有一個必不可少的屬性 href
target屬性：
_self(在原來頁面打開)
_blank（新窗口打開）
_top（打開時忽略所有的框架）
_parent（在父窗口中打開）
創(chuàng)建錨點和錨鏈接
錨點也是一種超鏈接款侵，是頁面內(nèi)進行跳轉(zhuǎn)的超鏈接
第一步：創(chuàng)建錨點<a name="錨點名稱"></a>
第二步：使用創(chuàng)建好的錨點名稱<a href="#錨點名稱">內(nèi)容</a>
marquee標簽
可以創(chuàng)建一個內(nèi)容滾動效果
1<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>
direction表示滾動方向，取值有（left,right,up,down,默認left）
loop表示滾動循環(huán)的次數(shù)侧纯，默認為無限循環(huán)
1οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滾動速度)
表示當鼠標移上區(qū)域的時候停止?jié)L動新锈，鼠標移開繼續(xù)滾動
第四章 img圖片標簽與路徑
圖片標簽與路徑：
常見圖片格式jpgpnggif
Gif（只支持全透明）
Jpeg/jpg
Png半/全透明都支持
圖片標簽寫法 ：
<img src="" alt="" width="" height="" />
圖片四要素：
src=""圖片路徑
alt=""圖片含義
width=""圖片寬度 和圖片大小保持一致
height=""圖片高度 和圖片大小保持一致
title=""
路徑知識：
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對于該文件的路徑眶熬；
絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑壕鹉；
<img src="" …… align="" />align屬性–設置圖片與后面文字的位置關(guān)系
值–top、bottom聋涨、middle、absmiddle负乡、left牍白、right
在靜態(tài)頁面中：
/開頭表示根目錄；
./表示當前目錄抖棘；（斜畫線前面一個點）
../上級目錄茂腥；（斜畫線前面兩個點）
直接用文件名不帶/也表示同一目錄
這些都是相對于當前文件的位置來說的，如果用絕對路徑的話就是寫全了切省。
第五章 列表的講解
三種列表的知識講解：
<ul>無序列表
無序列表是一個沒有順序項目的列表最岗，此列表項默認粗體圓點進行標識
1
2
3
4
5
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
有序列表也是一列項目，只是列表項目使用的是數(shù)字進行標記朝捆。 有序列表始于<ol>標簽般渡。每個列表項始于<li>標簽。
1
2
3
4
5
<ol>
<li>內(nèi)容一</li>
<li>內(nèi)容二</li>
<li>內(nèi)容三</li>
</ol>
列表符號
無序列表-列表符號:
type="circle"空心圓type=“disc”實心圓 默認值type="square"方塊符
有序列表-列表符號
type="A"A B C D
type="a"a b c d
type="1"1 2 3 4 默認值type=”I” I II III type=”i” i ii iii
列表嵌套
無序列表-嵌套
1
2
3
4
5
6
7
8
9
<ul>
<li>柚子
<ul>
<li>沙田柚</li>
<li>蜜柚</li>
</ul>
</li>
<li>荔枝</li>
<li>蘋果</li></ul>
有序列表-嵌套
1
2
3
4
5
6
7
8
9
<ol>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>果汁</li>
<li>牛奶</li></ol>
定義列表
定義列表不僅僅是一列項目芙盘，而是項目及其注釋的組合驯用。定義列表以<dl>標簽開始。每個定義列表項以<dt>開始儒老。每個自定義列表項的定義以<dd>開始蝴乔。
1
2
3
4
5
6
<dl>
<dt>pc網(wǎng)頁制作</dt>
<dd>學習DIV+CSS JS JQ 項目實戰(zhàn)</dd>
<dt>手機網(wǎng)頁制作</dt>
<dd>手機網(wǎng)頁制作實戰(zhàn)</dd>
</dl>
dd是對dt的解釋
< dl>< /dl>用來創(chuàng)建一個普通的列表,
< dt>< /dt>用來創(chuàng)建列表中的上層項目，
< dd>< /dd>用來創(chuàng)建列表中最下層項目驮樊，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間薇正。
1
2
3
4
5
6
7
8
9
10
<dl>
<dt>中國城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
list-style-position：設置列表項圖標的位置片酝，位于文本內(nèi)或者文本外
list-style-type： 設置列表項圖標的類型
list-style-image：使用圖像設置列表項圖標
第六章 表單和表格元素（上）
表單標簽:
<form>表單標簽
<form>表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容
1
2
3
<form>
<input type="text"/>
</form>
HTML標簽 -Action和確認按鈕：
當用戶單擊確認按鈕時挖腰，表單的內(nèi)容會被傳送到另一個文件雕沿。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理曙聂。
1
2
3
4
<form action="html.do" method="get">
username: <input type="text" name="user" />
<input type="submit" value="提 交" />
</form>
HTML標簽 - 隱藏域隱藏標簽：
隱藏域在頁面中對于用戶是不可見的晦炊，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用宁脊。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候断国，隱藏域的信息也被一起發(fā)送到服務器
1
2
3
<form>
<input type="hidden" name="hid" value="value">
</form>
<input>標簽的掌握
常用type類型：
<input type="" name="" value="" />
type="text"單行文本輸入框
type="password"密碼（maxlength=""）
type="radio"單項選擇（checked="checked"）
type="checkbox"多項選擇
type="button"按鈕
type="submit"提交type="image"圖片提交
type="file"上傳文件
type="reset"重置
type="hidden"隱藏
關(guān)于表單中的設置默認值：
1
2
3
<input type="text" name="" value="今天心情不錯" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
1
2
3
4
<select name="" >
<option value=""></option>
<option value="" selected="selected"></option>
<select>
textarea沒有默認值
<label>標簽的使用
<label></label>
label元素不會向用戶呈現(xiàn)任何特殊效果。
不過，它為鼠標用戶改進了可用性雹姊。
如果您在label元素內(nèi)點擊文本香缺，就會觸發(fā)此控件。
就是說薄疚，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上赊琳。
<label>標簽的for屬性應當與相關(guān)元素的id屬性相同街夭。
例子：（重要—注冊表單–用戶體驗–必做）
1
2
3
<p>單向選擇</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
第七章表單和表格（下）
表單和表格標簽：
<textarea>文本域標簽
<textarea>標簽：
<textarea></textarea>是文本域標簽，可以在其中插入一段文字內(nèi)容躏筏，它有兩個常用屬性rows和cols
注意：
rows表示這個文本域有多少行
cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀板丽，文本域的內(nèi)容無法改變，相當于協(xié)議）和title（鼠標放上提示）
<select>標簽的掌握
注：當提交表單時趁尼，瀏覽器會提交選定的項目埃碱，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數(shù)列表酥泞，并且在將<select>表單數(shù)據(jù)提交給服務器時包括name屬性
1
2
3
4
5
6
<form>
<select name="" id="">
<option value="1">1月</option>
<option value="2">2月</option>
</select>
</form>
常用到的屬性：disabled=“disabled” name="sel" size="2"
<table>表格標簽
<table>表格標簽：<table>是表格標簽砚殿，可以用它定義一個表格。
1
2
3
4
5
6
<table border="1">
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
</table>
注意：<table>的border屬性不能少
<tr><td>標簽的使用
<tr>行標簽：
<tr>可以定義表格中的一行芝囤，一個
1
2
3
4
5
6
7
8
9
10
11
<table border="1">
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
</table>
<td>單元格標簽:
<td>可以定義表格中的一個單元格似炎，<td></td>表示一個單元格。
1
2
3
4
5
6
7
<table border="1">
<tr>
<td >姓名</td>
<td>性別</td>
<td>愛好</td>
</tr>
</table>
border-collapse屬性設置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并
第一部分總結(jié)：
非可視化標簽：headmetastylescrpit...
可視化標簽：imgdivspanaulli…
只有可視化標簽悯姊，才能用css改變它
單標簽：metalinkbaseimginputbrhr
雙標簽：htmlheadbodydivapspan..ullioldl….
常用可視化標簽
div
一般用它來布局
a超鏈接標簽
href*屬性：設置跳轉(zhuǎn)的網(wǎng)頁地址
target屬性：設置跳轉(zhuǎn)的目標
結(jié)論：凡事頁面可以點擊跳轉(zhuǎn)或者表單提交的文字名党，都用a標簽
img
src*屬性用來設置圖片的url數(shù)據(jù)
alt提供給搜索引擎搜索的
width
height
結(jié)論 ：顯示圖片
ul li
列表
結(jié)論：只要將來設計頁面中有固定樣式的列表，就用ul和li
tablecaptiontrtd (th)
慢慢已經(jīng)被淘汰了 被ul li代替
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）
第二部分CSS
第八章css基礎(chǔ)
css基礎(chǔ)知識：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表挠轴；
分類及位置：內(nèi)部樣式-head區(qū)域style標簽里面
外部樣式-link調(diào)用
內(nèi)聯(lián)樣式-標簽元素里面
css內(nèi)的注釋：/*注釋內(nèi)容*/
css樣式表的語法
CSS規(guī)則由兩個主要的部分構(gòu)成：要添加樣式的盒子名或者標簽名传睹、和要添加的樣式。
盒子名或者標簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個預先確定的顏色岸晦，它們是
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,
olive,orange,purple,red,silver,teal,white, andyellow
用十六進制的顏色值表示(紅欧啤、綠睛藻、藍)
#FF0000或者#F00
用rgb(r,g,b)函數(shù)表示
如：rgb(255,255,0)
用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度邢隧、亮度)
如：hsl(120,100%,100%),色調(diào)0代表紅色店印，120代表綠色，240代表
藍色
用rgba(r,g,b,a)函數(shù)表示
其中a表示的是改顏色的透明度倒慧，取值范圍是0~1按摘，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
色調(diào)、飽和度纫谅、亮度炫贤、透明度
例子
1
2
3
4
5
6
7
8
9
background-color:gray?
background-color:#F00?
background-color:#ffff00?
background-color:rgb(255,0,255)?
background-color:hsl(120,80%,50%)?
background-color:rgba(255,0,255,0.5)?
background-color:hsla(120,80%,50%,0.5)?
內(nèi)部樣式表
當單個頁面需要設置樣式時，就應該使用內(nèi)部樣式表付秕。
使用<style></style>標簽在文檔<head></head>里面定義內(nèi)部樣式表
1
2
3
4
5
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應用于很多頁面時兰珍，就需要用到外部樣式表，首先需要創(chuàng)建一個css文件询吴，然后引用到我們的頁面中掠河。
Link樣式表式：<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式：<style type="text/css">@import url("css.css");></style>
內(nèi)聯(lián)樣式表（優(yōu)先級高）
寫在標簽里面的樣式
如：<p style="color:red;"></p>
表示給p標簽里面的文字顏色設置為紅色
區(qū)別：外鏈樣式與導入樣式
link標簽是屬于xhtml范疇，而@import則是css2.1中特有的猛计。link標簽除了可以加載CSS外唠摹，還可以做很多其它的事情，比如定義RSS奉瘤，定義rel連接屬性等跃闹，@import就只能加載CSS了。
加載的順序的區(qū)別毛好，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式苛秕，而@impor則在整個頁面加載完成后才加載肌访。
兼容性的區(qū)別，因@import``CSS2.1才特有的艇劫，所以對于不兼容CSS2.1的瀏覽器來說吼驶，無效。
在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別店煞，此時@import就無能為力了蟹演。
樣式的優(yōu)先級補充
相同權(quán)值情況下，CSS樣式的優(yōu)先級總結(jié)來說顷蟀，就是——就近原則（離被設置元素越近優(yōu)先級別越高）：
內(nèi)聯(lián)樣式表（標簽內(nèi)部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）
權(quán)值不同時酒请，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
層疊優(yōu)先級是:
瀏覽器缺省<外部樣式表<內(nèi)部樣式表<內(nèi)聯(lián)樣式
其中樣式表又有:類選擇器<類派生選擇器
派生選擇器以前叫上下文選擇器鸣个，所以完整的層疊優(yōu)先級是:
瀏覽器缺省<外部樣式表<外部樣式表類選擇器<外部樣式表類派生選擇器<外部樣式表ID選擇器<外部樣式表ID派生選擇器<內(nèi)部樣式表<內(nèi)部樣式表類選擇器<內(nèi)部樣式表類派生選擇器<內(nèi)部樣式表ID選擇器<內(nèi)部樣式表ID派生選擇器<內(nèi)聯(lián)樣式…共12個優(yōu)先級
另外羞反，如果同一個元素在沒有其他樣式的作用影響下布朦，其Class定義了多個并以空格分開，其優(yōu)先級順序為：
一個元素同時應用多個class昼窗，后定義的優(yōu)先（即近者優(yōu)先）是趴，加上!important者最優(yōu)先！
第九章CSS選擇器（上）
css選擇器：
class類選擇器可以重復利用
id選擇器唯一
標簽選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器p{color:red;}
ID選擇器
選擇id命名的元素 以#開頭#p1{color:#0f0;}
類選擇器
class選擇器澄惊，選擇clas命名的元素 以.開頭.first{color:#00f;}
css代碼寫完后上線前要經(jīng)過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除唆途，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開#main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器掸驱，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;}選擇包含title的a標簽
a[title][href]{color:red;}選擇包含title和href的a標簽
>+選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當于包含元素）
p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
p + span{color:red;}
第十章css選擇器（下）
<a>偽類選擇器
a:link {color:#FF0000;}/?未訪問的鏈接?/ （只用于a標簽）
a:visited {color:#00FF00;}/?已訪問的鏈接?/ （只用于a標簽）
a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
*/（可和其他標簽結(jié)合一起用）
a:active {color:#0000FF;}/?選定的鏈接?/
注意
偽類選擇器的排序很重要肛搬，a:linka:visiteda:hovera:active，記作lvha
輸入偽類選擇器（針對表單）
input:focus{color:red;}/?鍵盤輸入焦點?/
其他偽類選擇器
p:first-child{color:red;}/* 第一個p */
:before在元素之前添加內(nèi)容亭敢。
:after在元素之后添加內(nèi)容滚婉。
css優(yōu)先規(guī)則
內(nèi)聯(lián)樣式表->ID選擇器—>Class類選擇器->標簽選擇器
第十一章? 背景屬性
背景屬性：
背景的添加 ：
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現(xiàn)
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置帅刀，通過屬性background-position來實現(xiàn)
background-position的取值可為英文單詞或者數(shù)值和百分值让腹。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數(shù)值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數(shù)值和百分值。
background-size的數(shù)值取值
background-size:x y;
background-size的數(shù)值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設置
background-attachment:fixed;固定扣溺，不隨內(nèi)容的滾動而滾動
background-attachment:scroll;滾動骇窍，隨內(nèi)容的滾動而滾動
第十二章 css文字文本屬性
css文字文本屬性：
文字屬性
color:red;文字顏色
font-size:12px; 文字大小
font-weight:“bold”文字粗細(bold/normal)
font-family:“宋體”文字字體
font-variant:small-caps小寫字母以大寫字母顯示
文本屬性
text-align:center;文本對齊(right/left/center)
line-height:10px;行間距(可通過它實現(xiàn)文本的垂直居中)
text-indent:20px;首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距
第十三章 盒子模型
盒子模型
盒子模型就是一個有高度和寬度的矩形區(qū)域
所有html標簽都是盒子模型
div標簽自定義盒子模型
所有的標簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素）锥余，而id用于標識單獨的唯一的元素腹纳。
盒子模型的組成
盒子模型組成部分：
自身內(nèi)容：width、height寬高
內(nèi)邊距：padding
盒子邊框：border邊框線
與其他盒子距離：margin外邊距
內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border邊框
常見寫法border:1px solid #f00;
單獨屬性：
border-width:
border-style:
dotted點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color(顏色)
padding內(nèi)邊距
值：像素/厘米等長度單位驱犹、百分比
padding:10px;上下左右
padding:10px 10px;上下 左右
padding:10px 10px 10px;上 左右 下
padding:10px 10px 10px 10px;上 右 下 左（設置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內(nèi)邊距的時候會把盒子撐大嘲恍，為了保持盒子原來的大小，應該高度和寬度進行減小雄驹，根據(jù)width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距佃牛，會進行一個外邊距合并
補充盒子模型內(nèi)容
標準盒子模型
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版医舆。其實盒子模型有兩種俘侠，分別是ie盒子模型和標準w3c盒子模型。他們對盒子模型的解釋各不相同蔬将，先來看看我們熟知的標準盒子模型
從上圖可以看到標準w3c盒子模型的范圍包括margin爷速、border、padding霞怀、content惫东，并且content部分不包含其他部分
IE盒子模型
從上圖可以看到ie盒子模型的范圍也包括margin、border毙石、padding凿蒜、content
和標準w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding
IE盒子模型width=padding+border+內(nèi)容
標準盒子模型 = 內(nèi)容的寬度（不包含border+padding）
例：
一個盒子的margin為 20px禁谦，border為 1px，padding為 10px废封，content的寬為 200px州泊、高為 50px，假如用標準w3c盒子模型解釋漂洋，那么這個盒子需要占據(jù)的位置為：寬20*2+1*2+10*2+200=262px遥皂、高20*2+1*2*10*2+50=112px，盒子的實際大小為：寬1*2+10*2+200=222px刽漂、高1*2+10*2+50=72px演训；假如用ie 盒子模型，那么這個盒子需要占據(jù)的位置為：寬20*2+200=240px贝咙、高20*2+50=70px样悟，盒子的實際大小為：寬200px、高50px
那應該選擇哪中盒子模型呢庭猩？當然是“標準w3c盒子模型”了窟她。怎么樣才算是選擇了“標準w3c盒子模型”呢？很簡單蔼水，就是在網(wǎng)頁的頂部加上doctype聲明震糖。
假如不加doctype聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁趴腋，即ie瀏覽器會采用ie盒子模型去解釋你的盒子吊说，而ff會采用標準w3c盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了优炬。
反之颁井，假如加上了doctype聲明，那么所有瀏覽器都會采用標準w3c盒子模型去解釋你的盒子蠢护，網(wǎng)頁就能在各個瀏覽器中顯示一致了雅宾。
用jquery做的例子來證實一下
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
上面的代碼沒有加上doctype聲明糊余，在ie瀏覽器中顯示ie盒子模型，在 ff 瀏覽器中顯示“標準w3c盒子模型”单寂。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
代碼2 與代碼1 唯一的不同的就是頂部加了doctype聲明贬芥。在所有瀏覽器中都顯示“標準w3c盒子模型”
所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標準w3c盒子模型
擴展
第十四章 塊元素宣决、行元素和溢出
基本概念
塊級元素：默認情況下獨占一行的元素蘸劈，可控制寬高、上下邊距尊沸；
行內(nèi)元素：默認情況下一行可以擺放多個的元素威沫，不可控制寬高和上下邊距
行塊轉(zhuǎn)換
display:none; 不顯示
display:block; 變成塊級元素
display:inline; 變成行級元素
display:inline-block; 以塊級元素樣式展示贤惯，以行級元素樣式排列
溢出
overflow:hidden; 溢出隱藏
overflow:scroll; 內(nèi)容會被修剪，瀏覽器會顯示滾動條
overflow:auto; 如果內(nèi)容被修剪棒掠，則產(chǎn)生滾動條
文本不換行：white-space:nowrap;
長單詞換行：word-wrap:break-word;
行內(nèi)元素和快級元素小結(jié)
一孵构、塊級元素：block element
每個塊級元素默認占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）烟很。兩個塊級元素連續(xù)編輯時颈墅，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素雾袱；
塊級元素一般作為容器出現(xiàn)恤筛，用來組織結(jié)構(gòu)，但并不全是如此芹橡。有些塊級元素毒坛，如只能包含塊級元素。
DIV是最常用的塊級元素林说，元素樣式的display:block都是塊級元素煎殷。它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列述么，左右撐滿蝌数。
二、行內(nèi)元素：inline element
也叫內(nèi)聯(lián)元素度秘、內(nèi)嵌元素等顶伞；行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素剑梳，常見內(nèi)聯(lián)元素 “a”唆貌。比如SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素垢乙。例如文字這類元素锨咙，各個字母 之間橫向排列，到最右端自動折行追逮。
三酪刀、block（塊）元素的特點:
①、總是在新行上開始钮孵；
②骂倘、高度，行高以及外邊距和內(nèi)邊距都可控制巴席；
③历涝、寬度缺省是它的容器的100%，除非設定一個寬度。
④荧库、它可以容納內(nèi)聯(lián)元素和其他塊元素
四堰塌、inline元素的特點
①、和其他元素都在一行上分衫；
②场刑、高，行高及外邊距和內(nèi)邊距不可改變丐箩；
③摇邦、寬度就是它的文字或圖片的寬度，不可改變
④屎勘、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素施籍，需要注意如下:
設置寬度width無效。 設置高度height無效概漱，可以通過line-height來設置丑慎。 設置margin
只有左右margin有效，上下無效瓤摧。
設置padding只有左右padding有效竿裂，上下則無效。注意元素范圍是增大了照弥，但是對元素周圍的內(nèi)容是沒影響的腻异。
五、常見的塊狀元素
address– 地址
blockquote– 塊引用
center– 舉中對齊塊
dir– 目錄列表
div– 常用塊級容易这揣，也是CSS layout的主要標簽
dl– 定義列表
fieldset–form控制組
form– 交互表單
h1– 大標題
h2– 副標題
h3– 3級標題
h4– 4級標題
h5– 5級標題
h6– 6級標題
hr– 水平分隔線
isindex–input prompt
menu– 菜單列表
noframes–frames可選內(nèi)容悔常，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
noscript– 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
ol– 有序表單
p– 段落
pre– 格式化文本
table– 表格
ul– 無序列表
六、常見的內(nèi)聯(lián)元素
a– 錨點
abbr– 縮寫
acronym– 首字
b– 粗體(不推薦)
bdo–bidi override
big– 大字體
br– 換行
cite– 引用
code– 計算機代碼(在引用源碼的時候需要)
dfn– 定義字段
em– 強調(diào)
font– 字體設定(不推薦)
i– 斜體
img– 圖片
input– 輸入框
kbd– 定義鍵盤文本
label– 表格標簽
q– 短引用
s– 中劃線(不推薦)
samp– 定義范例計算機代碼
select– 項目選擇
small– 小字體文本
span– 常用內(nèi)聯(lián)容器给赞，定義文本內(nèi)區(qū)塊
strike– 中劃線
strong– 粗體強調(diào)
sub– 下標
sup– 上標
textarea– 多行文本輸入框
tt– 電傳文本
u– 下劃線
七机打，可變元素
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
applet-java applet
button- 按鈕
del- 刪除文本
iframe-inline frame
ins- 插入的文本
map- 圖片區(qū)塊(map)
object-object對象
script- 客戶端腳本
八片迅、行內(nèi)元素與塊級元素有什么不同
區(qū)別一：
塊級：塊級元素會獨占一行残邀，默認情況下寬度自動填滿其父元素寬度
行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行柑蛇。其寬度隨內(nèi)容的變化而變化芥挣。
區(qū)別二：
塊級：塊級元素可以設置寬高
行內(nèi)：行內(nèi)元素不可以設置寬高
區(qū)別三：
塊級：塊級元素可以設置margin，padding
行內(nèi)：行內(nèi)元素水平方向的margin-left;margin-right;
padding-left;padding-right;可以生效耻台。但是豎直方向的margin-bottom;margin-top;padding-top;padding-bottom;卻不能生效空免。
區(qū)別四：
塊級：display:block;
行內(nèi)：display:inline;
替換元素有如下：（和img一樣的設置方法）
<img>、<input>粘我、<textarea>鼓蜒、<select>
<object>都是替換元素，這些元素都沒有實際的內(nèi)容
可以通過修改display屬性來切換塊級元素和行內(nèi)元素
static靜態(tài)定位（不對它的位置進行改變征字，在哪里就在那里）
默認值都弹。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left, right或者z-index聲明）匙姜。
fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
生成固定定位的元素畅厢，相對于瀏覽器窗口進行定位。 元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定氮昧。
relative（相對定位 ）（參照物以他本身）
生成相對定位的元素框杜，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以袖肥，找到參照物–>與它最近的已經(jīng)有定位的父元素進行定位)
生成絕對定位的元素咪辱，相對于static定位以外的第一個父元素進行定位。
元素的位置通過 “l(fā)eft","top","right"以及"bottom"屬性進行規(guī)定
z-index
z-index屬性設置元素的堆疊順序椎组。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面油狂。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素寸癌、另一個元素甚至瀏覽器窗口本身的位置专筷。
一切皆為框
塊級元素:div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
行內(nèi)元素:span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設置為塊級元素蒸苇，display:none;沒有框
相對定位：
如果對一個元素進行相對定位磷蛹，它將出現(xiàn)在它所在的位置上。
通過設置垂直或水平位置溪烤，讓這個元素“相對于”它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
絕對定位：
元素的位置相對于最近的已定位祖先元素味咳，如果元素沒有已定位 的祖先元素，它的位置相對于最初的包含塊氛什。.adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
frameset框架：
<frameset>—- 用來定義一個框架莺葫；雙標簽
不能和<body>一起使用
rows、cols屬性
rows定義行表示框架有多少行（取值px/%/*）
cols定義列表示框架有多少列（取值px/%/*）
frame子框架
—- 表示框架中的某一個部分枪眉；單標簽捺檬，要跟結(jié)束標志
src顯示的網(wǎng)頁的路徑
name框架名
frameborder邊框線（取值 0 / 1）
屬性
提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標簽
1
2
3
4
5
6
7
8
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>內(nèi)容</body>
</noframes>
</frameset>
<iframe>內(nèi)聯(lián)框架
iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
允許和body一起使用
width寬（取值 px / %）
height高（取值 px / %）
name框架名
frameborder邊框線（取值 0 / 1）
src顯示的網(wǎng)頁的路徑
第十七章 CSS高級用法
opacity透明屬性
opacity
對于IE6/7/贸铜，使用filter:alpha(opacity:值;) 值為0-100
對于Webkit堡纬，Opera，F(xiàn)irefox蒿秦，IE9+烤镐，使用opacity:值; 值為0-1
對于早期火狐，使用-moz-opacity:值; 值為0-1
所以寫透明屬性時棍鳖，一般寫法是
1
2
3
4
5
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}
border-radius圓角邊框?qū)傩?/p>
向div元素添加圓角邊框
border-radius:10px;
box-shadow陰影屬性
box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)炮叶。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標簽,媒體嵌入插件標簽碗旅，可以通過<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid.wav.mp3等
