第1章 html基本結(jié)構(gòu)
認識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基本標簽：
span標簽
對被用來組合文檔中的行內(nèi)元素
注意：span沒有固定的格式表現(xiàn)，當對它應(yīng)用樣式時，才會產(chǎn)生視覺上的變化
<pre>標簽
文字的格式按源碼的排版來顯示，我們稱之為預(yù)處理格式
<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ù)滾動
圖片標簽與路徑：
常見圖片格式j(luò)pgpnggif
Gif（只支持全透明）
Jpeg/jpg
Png半/全透明都支持
圖片標簽寫法 ：
<img src="" alt="" width="" height="" />
圖片四要素：
src=""圖片路徑
alt=""圖片含義
width=""圖片寬度 和圖片大小保持一致
height=""圖片高度 和圖片大小保持一致
title=""
路徑知識：
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對于該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
<img src="" …… align="" />align屬性–設(shè)置圖片與后面文字的位置關(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>學(xué)習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：設(shè)置列表項圖標的位置，位于文本內(nèi)或者文本外
list-style-type： 設(shè)置列表項圖標的類型
list-style-image：使用圖像設(shè)置列表項圖標
表單標簽:
<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ā)送到服務(wù)器
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)于表單中的設(shè)置默認值：
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屬性應(yīng)當與相關(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ù)提交給服務(wù)器時包括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屬性設(shè)置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并
第一部分總結(jié)：
非可視化標簽：headmetastylescrpit...
可視化標簽：imgdivspanaulli…
只有可視化標簽，才能用css改變它
單標簽：metalinkbaseimginputbrhr
雙標簽：htmlheadbodydivapspan..ullioldl….
常用可視化標簽
div
一般用它來布局
a超鏈接標簽
href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址
target屬性：設(shè)置跳轉(zhuǎn)的目標
結(jié)論：凡事頁面可以點擊跳轉(zhuǎn)或者表單提交的文字，都用a標簽
img
src*屬性用來設(shè)置圖片的url數(shù)據(jù)
alt提供給搜索引擎搜索的
width
height
結(jié)論 ：顯示圖片
ul li
列表
結(jié)論：只要將來設(shè)計頁面中有固定樣式的列表，就用ul和li
tablecaptiontrtd (th)
慢慢已經(jīng)被淘汰了 被ul li代替
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）
HTML部分導(dǎo)圖總結(jié)
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個預(yù)先確定的顏色，它們是
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)部樣式表
當單個頁面需要設(shè)置樣式時，就應(yīng)該使用內(nèi)部樣式表。
使用<style></style>標簽在文檔<head></head>里面定義內(nèi)部樣式表
1
2
3
4
5
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應(yīng)用于很多頁面時，就需要用到外部樣式表，首先需要創(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標簽里面的文字顏色設(shè)置為紅色
區(qū)別：外鏈樣式與導(dǎo)入樣式
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é)來說，就是——就近原則（離被設(shè)置元素越近優(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)先級順序為：
一個元素同時應(yīng)用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
css選擇器：
class類選擇器可以重復(fù)利用
id選擇器唯一
標簽選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器p{color:red;}
ID選擇器
選擇id命名的元素 以#開頭#p1{color:#0f0;}
類選擇器
class選擇器，選擇clas命名的元素 以.開頭.first{color:#00f;}
css代碼寫完后上線前要經(jīng)過壓縮處理
本地和服務(wù)器分兩個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;}
<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”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性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來設(shè)置background-size的取值可為數(shù)值和百分值。
background-size的數(shù)值取值
background-size:x y;
background-size的數(shù)值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
background-attachment:fixed;固定，不隨內(nèi)容的滾動而滾動
background-attachment:scroll;滾動，隨內(nèi)容的滾動而滾動
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;上 右 下 左（設(shè)置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設(shè)置內(nèi)邊距的時候會把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進行減小，根據(jù)width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設(shè)置了外邊距，會進行一個外邊距合并
補充盒子模型內(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
那應(yīng)該選擇哪中盒子模型呢？當然是“標準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%，除非設(shè)定一個寬度。
④、它可以容納內(nèi)聯(lián)元素和其他塊元素
四、inline元素的特點
①、和其他元素都在一行上；
②、高，行高及外邊距和內(nèi)邊距不可改變；
③、寬度就是它的文字或圖片的寬度，不可改變
④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素，需要注意如下:
設(shè)置寬度width無效。 設(shè)置高度height無效，可以通過line-height來設(shè)置。 設(shè)置margin
只有左右margin有效，上下無效。
設(shè)置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– 字體設(shè)定(不推薦)
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ū)別二：
塊級：塊級元素可以設(shè)置寬高
行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
區(qū)別三：
塊級：塊級元素可以設(shè)置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一樣的設(shè)置方法）
<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屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
一切皆為框
塊級元素:div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
行內(nèi)元素:span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級元素，display:none;沒有框
相對定位：
如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。
通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
.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)頁的路徑
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等
CSS部分導(dǎo)圖總結(jié)
css常見簡寫
企業(yè)DIV使用頻率高的命名方法
網(wǎng)頁內(nèi)容類
標題:title
摘要:summary
箭頭：arrow
商標：label
網(wǎng)站標志：logo
轉(zhuǎn)角/圓角：corner
橫幅廣告：banner
子菜單：subMenu
搜索：search
搜索框：searchBox
登錄：login
登錄條：loginbar
工具條：toolbar
下拉：drop
標簽頁：tab
當前的：current
列表：list
滾動：scroll
服務(wù)：service
提示信息：msg
熱點：hot
新聞：news
小技巧：tips
下載：download
欄目標題：title
熱點：hot
加入：joinus
注冊：regsiter
指南：guide
友情鏈接：friendlink
狀態(tài)：status
版權(quán)：copyright
按鈕：btn
合作伙伴：partner
投票：vote
左右中：leftrightcenter
注釋的寫法:/* Footer */內(nèi)容區(qū)/* End Footer */
id的命名:
頁面結(jié)構(gòu)
容器:container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：leftrightcenter
導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標題:title
摘要:summary
功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的:current
小技巧：tips
圖標:icon
注釋：note
指南：guild
服務(wù)：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
class的命名:
顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字體大小,直接使用”font+字體大小”作為名稱,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
標題欄樣式,使用”類別+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事項::
一律小寫;
盡量用英文;
不加中杠和下劃線;
盡量不縮寫，除非一看就明白的單詞.
推薦的CSS書寫順序：
顯示屬性
display
list-style
position
float
clear
自身屬性
width
height
margin
padding
border
background
文本屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
CSS精靈原理以及應(yīng)用
CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。
該圖片使用CSSbackground和background-position屬性渲染，這也就意味著你的標簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標簽。
一個簡單的例子：
一張圖片作出一個按鈕的三個狀態(tài)
一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態(tài)，a:link，a:hover，a:active<a class="button" href="#">鏈接</a>
加入右側(cè)的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態(tài)。則可以使用CSS進行定義。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態(tài)*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0;
/*定義鏈接的普通狀態(tài)，此時圖像顯示的是頂上的部分*/
}
a:hover {
background-position:0 -66px;
/*定義鏈接的滑過狀態(tài)，此時顯示的為中間部分，向下取負值*/
}
a:active {
background-position:0 -132px;
/*定 義鏈接的普通狀態(tài)，此時顯示的是底部的部分，向下取負值*/
}
更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確。可能會用到大量的數(shù)值
如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優(yōu)點：
減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
可以合并多數(shù)背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)，降低服務(wù)器壓力，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
提高頁面的加載速度
sprite技術(shù)的其中一個好處是圖片的加載時間(在有許多sprite時，單張圖片的加載時間)。由所需圖片拼成的一張GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的GIF只有相關(guān)的一個色表，而單獨分割的每一張GIF都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張JPEG或者PNGsprite在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預(yù)加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。
不足：
CSS雪碧的最大問題是內(nèi)存使用
影響瀏覽器的縮放功能
拼圖維護比較麻煩
使CSS的編寫變得困難
CSS雪碧調(diào)用的圖片不能被打印
錯誤得使用Sprites影響可訪問性
從下面的幾個方面可以進行頁面的優(yōu)化：
減少請求數(shù)
圖片合并
CSS文件合并
減少內(nèi)聯(lián)樣式
避免在CSS中使用import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS值縮寫（Shorthand Property)
文件壓縮
頁面性能
調(diào)整文件加載順序
減少標簽數(shù)量
調(diào)整選擇器長度
盡量使用CSS制作顯示表現(xiàn)
增強代碼可讀性與可維護性
規(guī)范化
語義化
模塊化
不要使用過小的圖片做背景平鋪
這就是為何很多人都不用1px的原因，這才知曉。寬高1px的圖片平鋪出一個寬高200px的區(qū)域，需要200200=40, 000次，占用資源
無邊框
推薦的寫法是border:none;，哈哈，我一直在用這個。border:0;只是定義邊框?qū)挾葹榱?，但邊框樣式、顏色還是會被瀏覽器解析，占用資源
慎用 通配符
所謂通配符，就是將CSS中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
CSS的十六進制顏色代碼縮寫
習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優(yōu)孰劣，有待仔細考證。
樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
堅決不用CSS表達式
使用 引用樣式表，而不是通過@import導(dǎo)入。
一般來說，PNG比GIF要小，小得多。再者，GIF中有多少顏色是被浪費的，很值得優(yōu)化。
千萬不要在HTML中縮放圖片，一者不好看，二者占資源。
正文字體最好用偶數(shù)
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。
段落之間，至少要有一倍行距
強行指定某些元素的line-height，正文1.6倍于文字大小，標題1.3倍。
中文標點用全角
英文夾雜在中文中，左右空格，半角。
中文字體的粗體和斜體，遠離較好
雅虎工程師提供的CSS初始化示例代碼【僅供參考】
可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
mobile meta標簽
1
表格不被撐開
1table-layout:?fixed;?word-break:?break-all;;?border-collapse:?collapse
不設(shè)寬高居中
1
2
3
4
5
?
?
透明度的兼容代碼
1
2
3
4
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
文字溢出點點省略
1
2
3
white-space?:nowrap;
text-overflow?:ellipsis;
overflow?:hidden;
清除浮動的幾種方法
方法一：投機取巧法– 不推薦
直接一個放到當作最后一個子標簽放到父標簽?zāi)莾?，此方法屢試不爽，兼容性?/p>
方法二：overflow + zoom方法 –不推薦
.fix{overflow:hidden; zoom:1;}
此方法優(yōu)點在于代碼簡潔，涵蓋所有瀏覽器
方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
clearfix只應(yīng)用在包含浮動子元素的父級元素上
1
2
3
4
5
6
7
8
.fix{?zoom:?1;}
.fix?:after{
display:block;
content:?'clear';
clear:both;
line-height:?0;
visibility:hidden;
}
更多代碼片段詳情
自動繼承屬性：
color
font
text-align
list-style
…
非繼承屬性：
background
border
position
…
具有破壞性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除圖片底部間隙的方法
圖片塊狀化-無基線對齊
img{display:block;}
圖片底線對齊
img{vertical-align:bottom;}
行高足夠小 - 基線位置上移
.box{line-height:0;}
