內(nèi)聯(lián)框架：使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁(yè)面尼桶，使用iframe來(lái)創(chuàng)建一個(gè)內(nèi)聯(lián)框架

屬性：src：指向一個(gè)外部頁(yè)面的路徑掺出，可以使用相對(duì)路徑

?????????? width：設(shè)置寬度

?????????? height：設(shè)置高度

???????? ? name：可以為內(nèi)聯(lián)框架指定一個(gè)name屬性

在現(xiàn)實(shí)開(kāi)發(fā)中不推薦使用內(nèi)聯(lián)框架翎承，因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎所檢索

超鏈接：使用超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面

?????????????? 使用a標(biāo)簽來(lái)創(chuàng)建一個(gè)超鏈接

屬性：href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址，可以寫一個(gè)相對(duì)路徑，也可以寫一個(gè)完整的地址

a標(biāo)簽中的target屬性可以用來(lái)指定打開(kāi)鏈接的位置

可選值：

????????????? _self：表示在當(dāng)前窗口中打開(kāi)（默認(rèn)值）

????????????? _blank：在新的窗口中打開(kāi)鏈接

可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值络拌，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開(kāi)

center標(biāo)簽中的內(nèi)容奋隶，會(huì)默認(rèn)在頁(yè)面中居中顯示

我們可以將要居中的元素全都放到center中

CSS：

內(nèi)部樣式表：將CSS樣式編寫到head中的style標(biāo)簽里

將樣式表編寫的style標(biāo)簽中沛慢，然后通過(guò)CSS選擇器選中指定元素

然后可以同時(shí)為這些元素一起設(shè)置樣式，這樣可以使樣式進(jìn)一步的復(fù)用

將樣式表編寫到style標(biāo)簽中达布，也可以使表現(xiàn)和結(jié)構(gòu)進(jìn)一步分離团甲，它也是我們推薦的使用方式

還可以將樣式表編寫到外部的CSS文件中，然后通過(guò)link標(biāo)簽來(lái)將外部的CSS文件引入到當(dāng)前頁(yè)面中

這樣外部文件中的CSS樣式表將會(huì)應(yīng)用到當(dāng)前頁(yè)面中

將CSS樣式統(tǒng)一編寫到外部的樣式表中黍聂，完全使結(jié)構(gòu)和表現(xiàn)分離躺苦，可以使樣式表在不同的頁(yè)面中使用

最大限度地使樣式可以進(jìn)行復(fù)用，將樣式統(tǒng)一寫在樣式表中产还，然后通過(guò)link標(biāo)簽引入

可以利用瀏覽器的緩存匹厘，加快用戶訪問(wèn)的速度，提高了用戶體驗(yàn)

所以在開(kāi)發(fā)中我們最推薦使用的方式就是外部的CSS文件

可以將CSS樣式編寫到元素的style屬性當(dāng)中脐区，這種樣式稱為內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素中的內(nèi)容起作用愈诚，內(nèi)聯(lián)樣式不方便復(fù)用

內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合，不方便后期的維護(hù)，不推薦使用的

CSS的注釋炕柔，作用和HTML注釋類似酌泰，只不過(guò)它必須編寫在style標(biāo)簽中，或者是CSS文件中

CSS的語(yǔ)法：選擇器????????? 聲明塊

選擇器：通過(guò)選擇器可以選中頁(yè)面中指定的元素匕累，并且將聲明塊中的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上

聲明塊：聲明塊緊跟在選擇器的后邊陵刹，使用一對(duì){}括起來(lái)

????????????? 聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)

????????????? 這一組一組的名值對(duì)我們稱為聲明

? ? ? ? ? ? ? 在一個(gè)聲明塊中可以寫多個(gè)聲明，多個(gè)聲明之間使用;隔開(kāi)

????????????? 聲明的樣式名和樣式值之間使用:來(lái)連接

開(kāi)發(fā)工具：

文本編輯器：在windows中我們只需要使用最簡(jiǎn)單的記事本就可以完成所有的網(wǎng)頁(yè)的開(kāi)發(fā)

????????????????????? 但是一般我們會(huì)使用一些具有提示功能的

純文本編輯器：Notepad++(免費(fèi))欢嘿；Sublime(收費(fèi))

???????????????????????? 當(dāng)然還有很多其他的工具

IDE: DreamWeaver(收費(fèi));?WebStorm(收費(fèi));?Hbuilder(免費(fèi))

???????? 當(dāng)然也有其他的IDE

工具的選擇

其實(shí)使用哪個(gè)工具都不重要衰琐，我們也不用費(fèi)勁心機(jī)去討論工具的好壞，找一個(gè)自己喜歡用的即可炼蹦。

而且我們也要做到不依賴于某一個(gè)工具羡宙，我們要做到，即使只使用最簡(jiǎn)單的記事本掐隐，我們也可以照常開(kāi)發(fā)辛辨。

塊元素和內(nèi)聯(lián)元素

塊元素：所謂的塊元素就是會(huì)獨(dú)占一行的元素

????????????? 無(wú)論它的內(nèi)容有多少，它都會(huì)獨(dú)占一整行

?????????????? 常見(jiàn)的塊元素：div p h1 h2 h3……

?????????????? div這個(gè)標(biāo)簽沒(méi)有任何語(yǔ)義瑟枫，就是一個(gè)純粹的塊元素

?????????????? 并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式

?????????????? div元素主要用來(lái)對(duì)頁(yè)面進(jìn)行布局的

內(nèi)聯(lián)元素（行內(nèi)元素）：所謂的行內(nèi)元素指的是只占自身大小的元素斗搞，不會(huì)占用一行

??????????????????????????????????????? 常見(jiàn)的內(nèi)聯(lián)元素：span a img iframe

??????????????????????????????????????? span沒(méi)有任何語(yǔ)義，span標(biāo)簽專門用來(lái)選中文字慷妙，然后為文字來(lái)設(shè)置樣式

塊元素主要用來(lái)做頁(yè)面中的布局僻焚，內(nèi)聯(lián)元素主要用來(lái)選中文本設(shè)置樣式

一般情況下只使用塊元素去包含內(nèi)聯(lián)元素，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素

a元素可以包含任意元素膝擂，除了他本身

p元素不可以包含任何其它的塊元素

常用選擇器

元素選擇器：

????????????????????? 作用：通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素

????????????????????? 語(yǔ)法：標(biāo)簽名{}

id選擇器：

?????????????? 作用：通過(guò)元素的id屬性值選中唯一的一個(gè)元素

?????????????? 語(yǔ)法：#id屬性值{}

類選擇器：

??????????????? 作用：通過(guò)元素的class屬性值選中一組元素

??????????????? 語(yǔ)法：.class屬性值{}

選擇器分組（并集選擇器）：

???????????????????????????????????????????? 作用：通過(guò)選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素

???????????????????????????????????????????? 語(yǔ)法：選擇器1,選擇器2,選擇器N{}

通配選擇器：

??????????????????? 作用：可以用來(lái)選中頁(yè)面中的所有的元素

??????????????????? 語(yǔ)法：*{}

復(fù)合選擇器（交集選擇器）：

????????????????????????????????????????????? 作用：可以選中同時(shí)滿足多個(gè)選擇器的元素

????????????????????????????????????????????? 語(yǔ)法：選擇器1選擇器2選擇器N{}

子元素和后代元素選擇器

后代元素選擇器：

?????????????????????????? 作用：選中指定元素的指定后代元素

?????????????????????????? 語(yǔ)法：祖先元素 后代元素{}

子元素選擇器：

?????????????????????? 作用：選中指定父元素的指定子元素

?????????????????????? 語(yǔ)法：父元素 > 子元素

IE6及以下的瀏覽器不支持子元素選擇器

元素之間的關(guān)系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或間接包含后代元素的元素虑啤，父元素也是祖先元素

后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：擁有相同父元素的元素叫做兄弟元素

偽類選擇器

偽類專門用來(lái)表示元素的一種特殊的狀態(tài)

比如：訪問(wèn)過(guò)的超鏈接架馋、普通的超鏈接狞山、獲取焦點(diǎn)的文本框

當(dāng)我們需要為處在這些特殊狀態(tài)的元素設(shè)置樣式時(shí)，就可以使用偽類

為沒(méi)訪問(wèn)過(guò)的鏈接設(shè)置一個(gè)顏色為綠色

:link 表示普通的鏈接（沒(méi)訪問(wèn)過(guò)的鏈接）

為訪問(wèn)過(guò)的鏈接設(shè)置一個(gè)顏色為紅色

:visited 表示訪問(wèn)過(guò)的鏈接

瀏覽器是通過(guò)歷史記錄來(lái)判斷一個(gè)鏈接是否訪問(wèn)過(guò)

由于涉及到用戶的隱私問(wèn)題叉寂，所以使用:visited偽類只能設(shè)置字體的顏色

:hover和:active也可以為其它元素設(shè)置

IE6中萍启，不支持對(duì)超鏈接以外的元素設(shè)置:hover和:active

為p標(biāo)簽中選中的內(nèi)容使用樣式可以使用::selection偽類

注意：這個(gè)偽類在火狐中需要采用另一種方式編寫

兼容大部分瀏覽器：p::selection{}

兼容火狐：p::-moz-selection{}

偽元素

使用偽元素來(lái)表示元素中的一些特殊的位置

:before表示元素最前邊的部分

:after表示元素最后邊的部分

一般它都需要結(jié)合content這個(gè)樣式一起使用

通過(guò)content可以向before或after的位置添加一些內(nèi)容