瀏覽器與服務(wù)器的基本概念
瀏覽器（安裝在電腦里面的一個(gè)軟件）
作用：
①將網(wǎng)頁(yè)內(nèi)容渲染呈現(xiàn)給用戶查看。
②讓用戶通過(guò)瀏覽器與網(wǎng)頁(yè)進(jìn)行交互行施。
常見(jiàn)主流瀏覽器：
①IE瀏覽器? -ms-
②Chrome（谷歌瀏覽器）? -webkit-
③Firefox（火狐瀏覽器）? -moz-
④Safari（蘋果瀏覽器）
⑤Opera（歐朋瀏覽器）? -o-
瀏覽器內(nèi)核，即瀏覽器所采用的渲染引擎，其決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面格式信息。不同的瀏覽器有不同的瀏覽器內(nèi)核料扰，因此瀏覽器有兼容問(wèn)題。
瀏覽器訪問(wèn)網(wǎng)頁(yè)原理：
①當(dāng)利用瀏覽器訪問(wèn)網(wǎng)頁(yè)時(shí)焙蹭，其實(shí)是有真實(shí)的物理文件傳輸?shù)模瑸g覽器會(huì)先將網(wǎng)頁(yè)上的內(nèi)容緩存到本地文件夾中嫂伞，然后再渲染出來(lái)呈現(xiàn)給用戶查看孔厉。
②第二次訪問(wèn)網(wǎng)頁(yè)比第一次訪問(wèn)要快，因?yàn)榈谝淮卧L問(wèn)時(shí)已經(jīng)將這個(gè)網(wǎng)頁(yè)上的信息緩存到了本地帖努。
③一個(gè)網(wǎng)頁(yè)不是一個(gè)文件撰豺，而是一堆文件，網(wǎng)頁(yè)越復(fù)雜那么組成這個(gè)網(wǎng)頁(yè)的文件就越多拼余。
瀏覽器請(qǐng)求數(shù)據(jù)的過(guò)程：
①瀏覽器訪問(wèn)網(wǎng)頁(yè)污桦，發(fā)送“請(qǐng)求報(bào)文”至服務(wù)器；
②服務(wù)器處理瀏覽器請(qǐng)求匙监；
③服務(wù)器將處理結(jié)果返回給瀏覽器凡橱；
④服務(wù)器發(fā)送“響應(yīng)報(bào)文”；
⑤瀏覽器解析服務(wù)器返回的內(nèi)容呈現(xiàn)給用戶亭姥。
請(qǐng)求報(bào)文：請(qǐng)求行+請(qǐng)求頭+空行+請(qǐng)求體
響應(yīng)報(bào)文：響應(yīng)行+響應(yīng)頭+響應(yīng)體
服務(wù)器（專門用于存儲(chǔ)數(shù)據(jù)的電腦稼钩，24小時(shí)不斷電不關(guān)機(jī)，訪問(wèn)者可以訪問(wèn)服務(wù)器獲得服務(wù)器上的資源）
URL及HTTP協(xié)議的基本認(rèn)知
在瀏覽器中輸入的地址就是一個(gè)URL
URL拆分：
URL協(xié)議類型+服務(wù)器ip地址+服務(wù)器端口號(hào)（默認(rèn)80）+需要訪問(wèn)的資源名稱
URL拆分后各部分的作用：
①服務(wù)器ip地址和服務(wù)器端口號(hào)的作用就是告訴瀏覽器需要訪問(wèn)的服務(wù)器的詳細(xì)地址达罗。
②通過(guò)資源名稱告訴服務(wù)器需要獲取服務(wù)器上的哪個(gè)資源坝撑。
HTTP（超文本傳輸協(xié)議）
HTTP協(xié)議用于規(guī)范／約束瀏覽器和服務(wù)器之間如何溝通。
純文本文件
只要能夠被記事本打開(kāi)粮揉，并且能夠正常顯示的文件都是純文本文件巡李。純文本文件中所有文字都是同級(jí)別的。
字符集導(dǎo)致亂碼問(wèn)題
在網(wǎng)頁(yè)中指定字符集的意義在于告訴瀏覽器如何找到對(duì)應(yīng)的正確的內(nèi)容扶认，否則會(huì)導(dǎo)致亂碼問(wèn)題侨拦。
注意：在html文件中指定的字符集必須和保存這個(gè)文件的字符集一致，否則會(huì)出現(xiàn)亂碼蝠引。
GBK（GB2312）和UTF-8的區(qū)別：
①GBK（GB2312）里面存儲(chǔ)的字符比較少阳谍，僅僅存儲(chǔ)了漢字和一些常用外文。體積比較小螃概。
②UTF-8里面存儲(chǔ)了世界上所有的文字矫夯。體積比較大。
HTML基本概念
HTML（超文本標(biāo)記語(yǔ)言）吊洼，一種純文本類型的語(yǔ)言训貌，由瀏覽器解釋執(zhí)行
作用：專門用來(lái)給文本添加語(yǔ)義，而不是用來(lái)修改文本的樣式。
html基本結(jié)構(gòu)：
<html>
? ? <head>
? ? ? ? <title></title>
? ? </head>
? ? <body>
? ? </body>
</html>
html標(biāo)簽：用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè)递沪，即告訴瀏覽器這是一個(gè)html文檔豺鼻。
head標(biāo)簽：一般情況下，寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶查看款慨，用于給網(wǎng)站添加一些配置信息儒飒，如
①指定網(wǎng)站的標(biāo)題／指定網(wǎng)站的小圖片
②添加網(wǎng)站的SEO相關(guān)的信息（指定網(wǎng)站的關(guān)鍵字／指定網(wǎng)站的描述信息）
③外掛一些外部的css/js文件
④添加一些瀏覽器適配相關(guān)的內(nèi)容
title標(biāo)簽：專門用于指定網(wǎng)站的標(biāo)題，并且這個(gè)標(biāo)題會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題檩奠。title標(biāo)簽必須寫在head標(biāo)簽中桩了。
body標(biāo)簽：專門用于定義html文檔中需要顯示給用戶查看的內(nèi)容（文字／圖片／視頻／音頻）。
HTML埠戳、XHTML井誉、HTML5的區(qū)別：
①HTML語(yǔ)法非常寬松容錯(cuò)性強(qiáng)；
②XHTML更為嚴(yán)格整胃，它要求標(biāo)簽必須小寫颗圣，必須嚴(yán)格閉合，標(biāo)簽中的屬性必須使用引號(hào)引起等屁使；
③HTML5是HTML的下一個(gè)版本在岂，所以除了非常寬松容錯(cuò)性強(qiáng)以外，還增加了許多新的特性屋灌。
.html與.htm擴(kuò)展名的區(qū)別：
htm是為了兼容過(guò)去的DOS操作系統(tǒng)命名格式存在的（DOS操作系統(tǒng)只能支持長(zhǎng)度為3的后綴名）洁段，在windows下無(wú)所謂htm與html。
HTML標(biāo)簽
h系列標(biāo)簽（h1~h6）
作用：用于給文本添加標(biāo)題語(yǔ)義（不是用來(lái)修改文本的樣式的）共郭。
注意點(diǎn)：
①在h系列的標(biāo)簽中祠丝，h1最大，h6最小除嘹，最多只能到6写半，超過(guò)6則無(wú)效；
②被h系列標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行尉咕；
③一般情況下一個(gè)界面只能出現(xiàn)一個(gè)h1標(biāo)簽（與SEO有關(guān)）叠蝇。
p標(biāo)簽
作用：用于定義哪些文字是一個(gè)段落。
注意點(diǎn)：被p標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行年缎。
hr標(biāo)簽
作用：在瀏覽器上實(shí)現(xiàn)一條分割線悔捶。
注意點(diǎn)：
①在瀏覽器中單獨(dú)占據(jù)一行；
②hr標(biāo)簽沒(méi)有結(jié)束標(biāo)簽单芜，hr標(biāo)簽可以寫成<hr/>或<hr>蜕该，但是XHTML中hr標(biāo)簽必須正確閉合寫成<hr/>，而在HTML5中洲鸠，由于HTML5兼容HTML和XHTML堂淡，所以HTML5中寫不寫/都可以馋缅。
img標(biāo)簽
作用：告訴瀏覽器需要顯示一張圖片。
格式：
<img src="需要顯示的圖片資源" />
img標(biāo)簽中的src就是用來(lái)告訴img標(biāo)簽绢淀，需要顯示的圖片名稱萤悴。
img標(biāo)簽具有width和height（寬度和高度）兩個(gè)屬性，用于指定需要顯示的圖片的寬度和高度皆的。如果img標(biāo)簽沒(méi)有指定需要顯示的圖片的寬高覆履，系統(tǒng)會(huì)按照?qǐng)D片默認(rèn)的寬高來(lái)顯示，如果img標(biāo)簽指定寬高费薄，則按照指定的寬高來(lái)顯示内狗。
img標(biāo)簽的title屬性用于告訴瀏覽器，當(dāng)鼠標(biāo)懸停在圖片上時(shí)义锥，需要彈出的描述框中顯示什么內(nèi)容。
img標(biāo)簽的alt屬性用于告訴瀏覽器岩灭，當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容拌倍。
注意點(diǎn)：
①img標(biāo)簽在瀏覽器中不會(huì)獨(dú)占一行；
②如果同時(shí)手動(dòng)指定img標(biāo)簽顯示的圖片的寬度和高度噪径，有可能會(huì)導(dǎo)致圖片變形柱恤，可以只指定寬度或高度其中一個(gè)值即可，系統(tǒng)會(huì)根據(jù)指定的值計(jì)算出另外一個(gè)的值找爱，進(jìn)行等比拉伸梗顺，圖片不會(huì)變形。
br標(biāo)簽
作用：換行车摄。
格式：<br>
注意點(diǎn)：
①多個(gè)br可以連續(xù)使用寺谤，使用多少個(gè)br標(biāo)簽就會(huì)換多少行；
②由于HTML的作用是用來(lái)給文本添加語(yǔ)義的吮播，而br標(biāo)簽的語(yǔ)義就是不另起一個(gè)段落換行，在一般開(kāi)發(fā)情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落，因此在開(kāi)發(fā)中很少使用br標(biāo)簽腹泌，而是使用獨(dú)占一行的標(biāo)簽來(lái)解決套菜。
nobr標(biāo)簽
作用：禁止標(biāo)記中間的文本換行。
a標(biāo)簽
作用：用于控制頁(yè)面與頁(yè)面之間跳轉(zhuǎn)环戈。
格式：
<a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
a標(biāo)簽的target屬性專門用于控制跳轉(zhuǎn)的方式：
①_self：用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn)闷板，即不新建界面跳轉(zhuǎn)，默認(rèn)就是_self院塞；
②_blank：用于在新的選項(xiàng)卡中跳轉(zhuǎn)遮晚，也就是新建界面跳轉(zhuǎn)；
③_parent：在上一級(jí)框架中打開(kāi)超鏈接迫悠；
④_top：在整個(gè)瀏覽器窗口中打開(kāi)超鏈接鹏漆。
a標(biāo)簽的title屬性用來(lái)控制鼠標(biāo)懸停時(shí)顯示的提示文本。
注意點(diǎn)：
①a標(biāo)簽不僅可以讓文字能夠點(diǎn)擊，還可以讓圖片能夠被點(diǎn)擊艺玲；
②一個(gè)a標(biāo)簽必須有一個(gè)href屬性括蝠，否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方；
③如果通過(guò)a標(biāo)簽的href屬性指定一個(gè)URL地址饭聚，那么必須在地址前面加上http://或https://忌警；
④a標(biāo)簽的href屬性除了可以指定一個(gè)網(wǎng)絡(luò)地址以外，還可以指定一個(gè)本地地址秒梳。
假鏈接：點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接法绵。
假鏈接的意義：開(kāi)發(fā)前期，多數(shù)界面未完成酪碘，此時(shí)a標(biāo)簽還不知道要跳轉(zhuǎn)到什么地方朋譬，只能用假鏈接來(lái)代替。當(dāng)開(kāi)發(fā)后期其它界面都已經(jīng)完成時(shí)再將假鏈接替換為真鏈接兴垦。
假鏈接的格式：
①<a href="#">需要展現(xiàn)給用戶查看的內(nèi)容</a>
②<a href="javascript:">需要展現(xiàn)給用戶查看的內(nèi)容</a>
假鏈接的兩種格式的區(qū)別：#的假鏈接會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部徙赢，而javascript:的假鏈接不會(huì)自動(dòng)回到網(wǎng)頁(yè)頂部。
a標(biāo)簽的錨點(diǎn)跳轉(zhuǎn)：可以通過(guò)給目標(biāo)位置的標(biāo)簽添加一個(gè)唯一的id屬性探越，然后在a標(biāo)簽的href屬性中指定目標(biāo)位置標(biāo)簽的id值狡赐，即可跳轉(zhuǎn)到目標(biāo)位置。既可以跳轉(zhuǎn)到當(dāng)前界面的指定位置钦幔，也可以跳轉(zhuǎn)到其它界面的指定位置枕屉。（該方法沒(méi)有過(guò)渡效果）
div標(biāo)簽
作用：一般用于配合css完成網(wǎng)頁(yè)的基本布局，把標(biāo)記中的內(nèi)容做為單獨(dú)的一塊處理鲤氢。
span標(biāo)簽
作用：一般用于配合css修改網(wǎng)頁(yè)中的一些局部信息搀擂。
div和span的區(qū)別：
①div會(huì)單獨(dú)占據(jù)一行，而span不會(huì)單獨(dú)占據(jù)一行卷玉。
②div是一個(gè)容器級(jí)的標(biāo)簽哥倔，而span是一個(gè)文本級(jí)的標(biāo)簽。
容器級(jí)標(biāo)簽和文本級(jí)標(biāo)簽的區(qū)別：
①容器級(jí)的標(biāo)簽可以嵌套其它所有的標(biāo)簽揍庄；
②文本級(jí)的標(biāo)簽中只能嵌套文字/超鏈接/圖片咆蒿。
容器級(jí)的標(biāo)簽：div h ul ol dl li dt dd......
文本級(jí)的標(biāo)簽：span p b u i s strong em ins del......
pre標(biāo)簽
作用：預(yù)設(shè)格式文本，可以讓空白字符蚂子、換行字符保存下來(lái)沃测。
base標(biāo)簽
作用：專門用來(lái)統(tǒng)一的指定當(dāng)前網(wǎng)頁(yè)中所有的超鏈接（a標(biāo)簽）的跳轉(zhuǎn)方式。
格式：
<base target="跳轉(zhuǎn)方式">
注意點(diǎn)：
①base標(biāo)簽必須寫在head標(biāo)簽的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中食茎；
②當(dāng)base標(biāo)簽和a標(biāo)簽同時(shí)指定了target屬性蒂破，瀏覽器會(huì)按照a標(biāo)簽中指定的跳轉(zhuǎn)方式來(lái)執(zhí)行。
列表標(biāo)簽
作用：給一堆數(shù)據(jù)添加列表語(yǔ)義别渔，告訴搜索引擎和瀏覽器這一堆數(shù)據(jù)是一個(gè)整體附迷。
列表標(biāo)簽的分類：
1惧互、無(wú)序列表
格式：
<ul>
? ? <li></li>
</ul>
作用：給一堆數(shù)據(jù)添加列表語(yǔ)義，并且這一堆數(shù)據(jù)沒(méi)有先后之分喇伯。
type 屬性取值：
①disc????實(shí)心圓點(diǎn)
②square????實(shí)心方點(diǎn)
③circle????空心圓
注意點(diǎn)：
①ul標(biāo)簽和li標(biāo)簽是一個(gè)整體喊儡，是一個(gè)組合，一般情況下都是一起出現(xiàn)稻据，不會(huì)單獨(dú)使用艾猜。
②由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合，所以u(píng)l標(biāo)簽中不推薦包含其它標(biāo)簽捻悯，但是li標(biāo)簽中還可以添加其它的標(biāo)簽匆赃。
應(yīng)用場(chǎng)景：
①新聞列表
②商品列表
③導(dǎo)航條
2、有序列表
格式：
<ol>
? ? <li></li>
</ol>
屬性：
①type屬性取值：
?阿拉伯?dāng)?shù)字
?大小寫英文字母
?大小寫羅馬數(shù)字
②start????指定序號(hào)的起始值今缚，只能取數(shù)字算柳。
③reversed????反向編號(hào)列表
作用：給一堆數(shù)據(jù)添加列表語(yǔ)義，并且這一堆數(shù)據(jù)有先后之分姓言。
注意點(diǎn)和應(yīng)用場(chǎng)景與無(wú)序列表相同埠居。
3、定義列表
格式：
<dl>
? ? <dt></dt>
? ? <dd></dd>
</dl>
作用：
①給一堆數(shù)據(jù)添加列表語(yǔ)義事期；
②dt標(biāo)簽定義列表中的所有標(biāo)題，再通過(guò)dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息纸颜。
應(yīng)用場(chǎng)景：
①做網(wǎng)站尾部的相關(guān)信息
②做圖文混排
注意點(diǎn)：
①dl標(biāo)簽兽泣、dt標(biāo)簽和dd標(biāo)簽是一個(gè)整體，一般情況下不會(huì)單獨(dú)出現(xiàn)胁孙。
②由于dl和dt/dd是一個(gè)組合標(biāo)簽唠倦，所以dl標(biāo)簽中建議只放dt和dd標(biāo)簽。
③一個(gè)dt標(biāo)簽可以沒(méi)有對(duì)應(yīng)的dd標(biāo)簽涮较，也可以有多個(gè)對(duì)應(yīng)的dd標(biāo)簽稠鼻，但推薦使用一個(gè)dt對(duì)應(yīng)一個(gè)dd。
④當(dāng)需要豐富界面時(shí)狂票，可以在dt和dd標(biāo)簽中繼續(xù)添加其它標(biāo)簽候齿。
表格標(biāo)簽
作用：用來(lái)給一堆數(shù)據(jù)添加表格語(yǔ)義，當(dāng)數(shù)據(jù)量非常大的時(shí)候闺属，表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)方式慌盯。
格式：
<table>
? ? <caption>表格的標(biāo)題</caption>
? ? <thead>
? ? ? ? <tr>? ?
? ? ? ? ? ? <th>表格的標(biāo)頭信息</th>
? ? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? <td>表格的主體信息</td>
? ? ? ? </tr>
? ? </tbody>
? ? <tfoot>
? ? ? ? <tr>
? ? ? ? ? ? <td>表格的附加信息</td>
? ? ? ? </tr>
? ? </tfoot>
</table>
table標(biāo)簽代表整個(gè)表格。
thead標(biāo)簽用于指定表格的表頭信息掂器。
tbody標(biāo)簽用于指定表格的主體信息亚皂。
tfoot標(biāo)簽用于指定表格的附加信息。
tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù)国瓮，即一對(duì)tr標(biāo)簽就是表格中的一行灭必。
th標(biāo)簽專門用來(lái)存儲(chǔ)每一列的標(biāo)題狞谱，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中和加粗文字。
td標(biāo)簽代表表格中一行中的一個(gè)單元格禁漓，即一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格跟衅，專門用于存儲(chǔ)數(shù)據(jù)。
caption標(biāo)簽專門用來(lái)設(shè)置表格的標(biāo)題璃饱，標(biāo)題寫在caption標(biāo)簽中与斤，會(huì)自動(dòng)相對(duì)于表格的寬度居中。
表格標(biāo)簽的屬性：
①寬度和高度（可以給table標(biāo)簽和td標(biāo)簽使用）：
表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來(lái)調(diào)整的荚恶，也可以通過(guò)給table標(biāo)簽設(shè)置width和height屬性的方式來(lái)手動(dòng)指定表格的寬度和高度撩穿。
如果給td標(biāo)簽設(shè)置width/height屬性，會(huì)修改當(dāng)前單元格的寬度和高度谒撼，不會(huì)影響整個(gè)表格的寬度和高度食寡。
②水平對(duì)齊和垂直對(duì)齊（水平對(duì)齊可以給table標(biāo)簽、tr標(biāo)簽和td標(biāo)簽使用廓潜，垂直對(duì)齊只能給tr標(biāo)簽和td標(biāo)簽使用）
給table標(biāo)簽設(shè)置align屬性抵皱，可以控制表格在水平方向的對(duì)齊方式。
給tr標(biāo)簽設(shè)置align屬性辩蛋，可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對(duì)齊方式呻畸。
給td標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前單元格中內(nèi)容在水平方向的對(duì)齊方式悼院。
tr標(biāo)簽和td標(biāo)簽中都設(shè)置align屬性時(shí)伤为，單元格中的內(nèi)容會(huì)按照td標(biāo)簽中設(shè)置的來(lái)對(duì)齊。
給tr標(biāo)簽設(shè)置valign屬性据途，可以控制當(dāng)前行中所有單元格中的內(nèi)容在垂直方向的對(duì)齊方式绞愚。
給td標(biāo)簽設(shè)置valign屬性，可以控制當(dāng)前單元格中的內(nèi)容在垂直方向的對(duì)齊方式颖医。
tr標(biāo)簽和td標(biāo)簽中都設(shè)置valign屬性時(shí)位衩，單元格中的內(nèi)容會(huì)按照td標(biāo)簽中設(shè)置的來(lái)對(duì)齊。
③外邊距和內(nèi)邊距（只能給table標(biāo)簽使用）
外邊距cellspacing就是單元格與單元格之間的距離熔萧，默認(rèn)情況下外邊距的距離是2px糖驴。
內(nèi)邊距cellpadding就是單元格的邊框和文字之間的距離，默認(rèn)情況下內(nèi)邊距的距離是1px佛致。
④背景顏色（table標(biāo)簽遂赠、tr標(biāo)簽和td標(biāo)簽都支持bgcolor屬性）
注意點(diǎn)：
①表格標(biāo)簽有一個(gè)邊框?qū)傩詁order，這個(gè)屬性決定了邊框的寬度晌杰，默認(rèn)情況下這個(gè)屬性的值是0跷睦，所以看不到邊框；
②表格標(biāo)簽是一個(gè)組合標(biāo)簽肋演，所以table/tr/td不會(huì)單個(gè)出現(xiàn)抑诸；
③caption標(biāo)簽一定要寫在table標(biāo)簽中烂琴，緊跟在table標(biāo)簽后面，否則無(wú)效蜕乡；
④如果沒(méi)有編寫tbody標(biāo)簽奸绷，系統(tǒng)會(huì)添加。
⑤如果指定了thead標(biāo)簽和tfoot標(biāo)簽层玲，那么修改整個(gè)表格的高度時(shí)号醉，thead標(biāo)簽和tfoot標(biāo)簽有自身默認(rèn)的高度，不會(huì)隨著表格的高度變化而變化辛块。
細(xì)線表格的制作方式：
①給table標(biāo)簽設(shè)置bgcolor屬性畔派；
②給tr標(biāo)簽設(shè)置bgcolor屬性；
③給table標(biāo)簽設(shè)置cellspacing="1px"润绵。
單元格合并：
①水平方向上的單元格合并：給td標(biāo)簽添加一個(gè)colspan屬性线椰，來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待。colspan="合并單元格數(shù)目"
②垂直方向上的單元格合并：給td標(biāo)簽添加一個(gè)rowspan屬性尘盼，來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待憨愉。rowspan="合并單元格數(shù)目"
單元格合并注意點(diǎn)：
①由于把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待，就會(huì)多出一些單元格卿捎，所以需要?jiǎng)h掉一些多余的單元格才能正常顯示配紫；
②單元格合并永遠(yuǎn)都是向后或者向下合并的，而不能向前或者向上合并午阵。
表單標(biāo)簽
表單就是專門用來(lái)收集用戶信息的躺孝。
格式：
<form>
? ? <表單元素>
</form>
常見(jiàn)表單元素：
（1）input標(biāo)簽：input標(biāo)簽有一個(gè)type屬性，這個(gè)屬性有很多類型的取值趟庄，取值的不同決定了input標(biāo)簽的功能和外觀。
通過(guò)添加value屬性可以給輸入框設(shè)置默認(rèn)值伪很。
通過(guò)添加checked屬性可以給選擇框設(shè)置默認(rèn)選項(xiàng)戚啥。
①明文輸入框：<input type="text">
②密文輸入框：<input type="password">
③單選框：<input type="radio">，默認(rèn)情況下單選框不會(huì)互斥锉试，要想單選框互斥猫十，則必須給每一個(gè)單選框設(shè)置一個(gè)name屬性，然后name屬性必須設(shè)置相同的值呆盖。
④多選框：<input type="checkbox">
⑤普通按鈕：<input type="button">拖云，可以通過(guò)value屬性來(lái)給按鈕指定標(biāo)題。
作用：配合JS完成一些操作应又。
⑥圖片按鈕：<input type="image" src="圖片資源">
作用：配合JS完成一些操作宙项。
⑦重置按鈕：<input type="reset">，可以通過(guò)value屬性修改默認(rèn)的按鈕標(biāo)題株扛。
作用：用來(lái)清空表單中已經(jīng)填寫好的數(shù)據(jù)尤筐。
⑧提交按鈕：<input type="submit">
作用：將表單中已經(jīng)填寫好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器汇荐。
注意點(diǎn)：要想把表單中填寫好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器，必須具備兩個(gè)條件
1盆繁、需要給form表單添加一個(gè)action屬性掀淘，通過(guò)action屬性指定需要提交到的服務(wù)器地址；
2油昂、需要給提交到服務(wù)器的表單元素添加一個(gè)name屬性革娄，除了按鈕類型的input標(biāo)簽以外，其它類型的標(biāo)簽都可以通過(guò)value屬性來(lái)指定提交到服務(wù)器的值冕碟。
⑨隱藏域：<input type="hidden">
作用：配合提交按鈕將一些數(shù)據(jù)提交到服務(wù)器拦惋。
（2）select標(biāo)簽：用于定義下拉列表。
格式：
<select>
? ? <optgroup label="分組名稱">
? ? ? ? <option>列表數(shù)據(jù)</option>
? ? </optgroup>
</select>
注意點(diǎn)：
①下拉列表不能輸入內(nèi)容鸣哀，但可以直接在下拉列表中選擇內(nèi)容架忌；
②可以通過(guò)給option標(biāo)簽添加一個(gè)selected屬性來(lái)指定列表的默認(rèn)值；
③可以通過(guò)給option標(biāo)簽包裹一層optgroup標(biāo)簽來(lái)給下拉列表中的數(shù)據(jù)分類我衬。
（3）textarea標(biāo)簽：文本域叹放，定義一個(gè)多行輸入框。
格式：<textarea></textarea>
注意點(diǎn)：
①默認(rèn)情況下挠羔，輸入框可以無(wú)限換行井仰，有自己的寬度和高度；
②可以通過(guò)cols屬性和rows屬性來(lái)指定輸入框的寬度和高度破加，但是雖然指定了列數(shù)和行數(shù)俱恶，還是可以無(wú)限往下輸入；
③默認(rèn)情況下輸入框是可以手動(dòng)拉伸的范舀，可以通過(guò)CSS樣式{resize:none;}來(lái)控制文本域不可手動(dòng)拉伸合是。
HTML5新增的表單標(biāo)簽
①<input type="email">，可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式锭环。
②<input type="url">聪全，可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否為url地址。
③<input type="number">辅辩，可以限制輸入框中只能輸入數(shù)字难礼。
④<input type="date">，可以通過(guò)日歷來(lái)選擇時(shí)間玫锋。
⑤<input type="color">蛾茉，可以通過(guò)取色板來(lái)選擇顏色。
label標(biāo)簽
默認(rèn)情況下撩鹿，文字和輸入框是沒(méi)有關(guān)聯(lián)關(guān)系的谦炬，即點(diǎn)擊文字輸入框不會(huì)聚焦，要想讓文字和輸入框綁定在一起节沦，可以使用label標(biāo)簽吧寺。
綁定方式：
第一種：
①將文字用label標(biāo)簽包裹起來(lái)窜管；
②給輸入框添加一個(gè)id屬性；
③在label標(biāo)簽中通過(guò)for屬性和輸入框中的id值進(jìn)行綁定即可稚机。
第二種：用label標(biāo)簽將文字及輸入框同時(shí)包裹起來(lái)幕帆。
datalist標(biāo)簽
作用：給輸入框綁定待選項(xiàng)。
格式：
<datalist>
? ? <option>待選項(xiàng)內(nèi)容</option>
</datalist>
綁定方式：
①建立一個(gè)datalist列表赖条，并給其添加一個(gè)id屬性失乾；
②給需要綁定的輸入框添加一個(gè)list屬性，將datalist列表的id對(duì)應(yīng)的值賦值給需要綁定的輸入框中的list屬性即可纬乍。
fieldset標(biāo)簽
作用：可以給表單添加一個(gè)邊框碱茁。可以通過(guò)legend標(biāo)簽給邊框指定一個(gè)標(biāo)題仿贬。
格式：
<form>
? ? <fieldset>
? ? ? ? <legend>邊框標(biāo)題</legend>
? ? ? ? <表單元素>
? ? </fieldset>
</form>
HTML5新增標(biāo)簽：
（1）video標(biāo)簽
作用：播放視頻纽竣。
格式：
①<video src="視頻資源地址">
</video>
②<video>
? ? <source src="視頻資源地址" type="video/視頻格式"></source>
</video>
video標(biāo)簽支持的三種視頻格式：
①webm
②mp4
③ogg
video標(biāo)簽的屬性：
①src屬性：用于告訴video標(biāo)簽需要播放的視頻地址。
②autoplay屬性：用于告訴video標(biāo)簽是否需要自動(dòng)播放視頻茧泪。默認(rèn)情況下不會(huì)自動(dòng)播放蜓氨。
③controls屬性：用于告訴video標(biāo)簽是否需要顯示控制條。
④poster屬性：用于告訴video標(biāo)簽視頻沒(méi)有播放之前顯示的占位圖片队伟。
⑤loop屬性：用于告訴video標(biāo)簽視頻是否需要循環(huán)播放穴吹，一般用于做廣告視頻。
⑥preload屬性：預(yù)加載視頻嗜侮，與autoplay屬性沖突港令，如果設(shè)置了autoplay屬性，則preload屬性就會(huì)失效锈颗。
⑦muted屬性：靜音顷霹。
⑧width屬性/height屬性：設(shè)置視頻的寬度/高度。
注意點(diǎn)：通過(guò)video標(biāo)簽的第二種格式可以指定所有瀏覽器都支持的視頻格式击吱，但前提是瀏覽器必須支持html5標(biāo)簽淋淀，否則同樣無(wú)法播放。有部分瀏覽器是不支持html5標(biāo)簽的姨拥，為了使這部分瀏覽器也能夠通過(guò)video標(biāo)簽來(lái)播放視頻绅喉，可以通過(guò)一個(gè)JS的框架html5media來(lái)實(shí)現(xiàn)渠鸽。
（2）audio標(biāo)簽
作用：播放音頻叫乌。
格式：
①<audio src="音頻資源地址">
</audio>
②<audio>
? ? <source src="音頻資源地址" type="audio/音頻格式"></source>
</audio>
audio標(biāo)簽的屬性：與video標(biāo)簽相同，除了width/height/poster這三個(gè)屬性外徽缚，其它屬性大部分都能夠使用憨奸，并且功能都一樣。
（3）詳情和概要標(biāo)簽
作用：利用summary標(biāo)簽來(lái)描述概要信息凿试，利用details標(biāo)簽來(lái)描述詳情信息排宰。默認(rèn)情況下是折疊展示似芝，想看見(jiàn)詳情必須點(diǎn)擊。
格式：
<details>
? ? <summary>概要信息</summary>
? ? 詳情信息
</details>
marquee標(biāo)簽
作用：用于制作跑馬燈效果板甘。
格式：
<marquee>
</marquee>
屬性：
①direction：設(shè)置滾動(dòng)方向党瓮，left/right/up/down。
②scrollamount：設(shè)置滾動(dòng)速度盐类，值越大就滾動(dòng)越快寞奸。
③loop：設(shè)置滾動(dòng)次數(shù)。默認(rèn)是-1在跳，即無(wú)限滾動(dòng)枪萄。
④behavior：設(shè)置滾動(dòng)類型，slide滾動(dòng)到邊界就停止猫妙，alternate滾動(dòng)到邊界就彈回瓷翻。
注意點(diǎn)：marquee標(biāo)簽不是W3C推薦的標(biāo)簽，無(wú)法在W3C官方文檔中查詢這個(gè)標(biāo)簽割坠，但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好齐帚。
font標(biāo)簽
作用：字體標(biāo)簽。
b標(biāo)簽
作用：設(shè)置標(biāo)記間的文字為粗體韭脊。
i標(biāo)簽
作用：設(shè)置標(biāo)記間的文字為斜體童谒。
u標(biāo)簽
作用：設(shè)置標(biāo)記間的文字帶下劃線。
sup標(biāo)簽
作用：設(shè)置標(biāo)記間的文字為上標(biāo)沪羔。
sub標(biāo)簽
作用：設(shè)置標(biāo)記間的文字為下標(biāo)饥伊。
address標(biāo)簽
作用：表示地址。
q標(biāo)簽
作用：定義引用蔫饰。
kbd標(biāo)簽
作用：用戶鍵入的文字琅豆，字體變細(xì)變輕。
cite標(biāo)簽
作用：一段引用的文字篓吁，斜體茫因。用于書名、電影名杖剪。
small標(biāo)簽
作用：字體變小冻押。
big標(biāo)簽
作用：字體變大。
center標(biāo)簽
作用：設(shè)置標(biāo)記中文本或者圖像居中顯示盛嘿。
HTML中被廢棄的標(biāo)簽
因?yàn)楫?dāng)前HTML中的標(biāo)簽只有一個(gè)作用洛巢，就是用來(lái)添加語(yǔ)義，而早期的HTML標(biāo)簽中有一部分是沒(méi)有語(yǔ)義的次兆，是用來(lái)修改樣式的稿茉，所以這部分標(biāo)簽就被淘汰了。如br標(biāo)簽、hr標(biāo)簽漓库、font標(biāo)簽恃慧、b標(biāo)簽、u標(biāo)簽渺蒿、i標(biāo)簽痢士、s標(biāo)簽等。在開(kāi)發(fā)中茂装，一般情況下不要使用這些標(biāo)簽良瞧。一定要使用時(shí)，一般情況下都是用來(lái)作為CSS的鉤子來(lái)使用训唱。
①strong標(biāo)簽：定義重要性強(qiáng)調(diào)的文字褥蚯，用來(lái)替換b標(biāo)簽。
②ins標(biāo)簽：定義插入的文字况增，用來(lái)替換u標(biāo)簽赞庶。
③em標(biāo)簽：定義強(qiáng)調(diào)的文字，用來(lái)替換i標(biāo)簽澳骤。
④del標(biāo)簽：定義被刪除的文字歧强，用來(lái)替換s標(biāo)簽。
常用字符實(shí)體
在HTML中有的字符是被HTML保留的为肮，有的HTML字符在HTML中是有特殊含義的摊册，是不能在瀏覽器中直接顯示出來(lái)的，那么這些東西要想顯示出來(lái)就必須通過(guò)字符實(shí)體颊艳。
① ：空格茅特，一個(gè) 就是一個(gè)空格，有多少個(gè) 就有多少個(gè)空格棋枕。
②<：小于符號(hào)白修，<。
③>：大于符號(hào)重斑，>兵睛。
④©：版權(quán)符號(hào)，?窥浪。
⑤"：雙引號(hào)祖很，"。
⑥&：and符號(hào)漾脂，&假颇。
HTML標(biāo)簽分類
HTML用于描述功能的符號(hào)稱為“標(biāo)記”， 標(biāo)記（也叫元素/標(biāo)簽）分為：
①非封閉類型標(biāo)記符相，也叫做空標(biāo)記拆融，或者單標(biāo)記/單標(biāo)簽：只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽，也就是由一個(gè)<>組成的啊终，不能包含內(nèi)容镜豹。
②封閉類型標(biāo)記（雙標(biāo)記/雙標(biāo)簽）：有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，也就是由一個(gè)<>和一個(gè)</>組成的蓝牲，必須成對(duì)出現(xiàn)趟脂。
HTML注釋
注釋可以用來(lái)解釋某一段程序或某一行代碼是什么意思，方便程序員之間的交流例衍。適當(dāng)?shù)淖⑨尶梢宰尦绦蚋涌勺x昔期。
注意點(diǎn)：注釋的內(nèi)容并不會(huì)在網(wǎng)頁(yè)中顯示，注釋只在編輯文檔情況下可見(jiàn)佛玄。
DTD文檔聲明
由于html有很多個(gè)版本的規(guī)范硼一，每個(gè)版本的規(guī)范之間又有一定的差異，所以為了讓瀏覽器能夠正確的編譯／解析／渲染我們的網(wǎng)頁(yè)梦抢，需要在html文件的第一行告訴瀏覽器般贼，當(dāng)前這個(gè)頁(yè)面是用哪一個(gè)版本的html規(guī)范來(lái)編寫的，瀏覽器知道了是用哪一個(gè)版本的規(guī)范來(lái)編寫之后奥吩，它就能夠正確的編譯／解析／渲染網(wǎng)頁(yè)哼蛆。
DTD文檔聲明注意點(diǎn)：
①任何一個(gè)標(biāo)準(zhǔn)的HTML網(wǎng)頁(yè)，第一行一定是DTD文檔聲明霞赫，即DTD文檔聲明必須寫在HTML的第一行腮介；
②DTD文檔聲明不區(qū)分大小寫；
③DTD文檔聲明不是一個(gè)標(biāo)簽端衰；
④DTD文檔聲明的作用是用于告訴瀏覽器網(wǎng)頁(yè)是用哪一個(gè)版本的標(biāo)準(zhǔn)編寫的叠洗，以便于瀏覽器解析和渲染，但是瀏覽器并不是完全依賴于DTD文檔聲明旅东，瀏覽器有一套屬于自身的機(jī)制惕味，即DTD文檔聲明不寫網(wǎng)頁(yè)也能正常運(yùn)行，但是由于W3C規(guī)定第一行必須寫上DTD文檔聲明玉锌。
DTD文檔聲明格式：
html5的DTD文檔聲明格式（向下兼容）
<!DOCTYPE html>
路徑問(wèn)題
1名挥、相對(duì)路徑：
相對(duì)路徑就是每次都從.html文件所在的文件夾開(kāi)始查找。
相對(duì)路徑下的情況：
①同級(jí)：需要的資源和.html文件存儲(chǔ)在同一個(gè)文件夾中主守；
②下級(jí)：存儲(chǔ)資源的文件夾和.html文件在同一個(gè)文件夾中禀倔；
③上級(jí)：存儲(chǔ)資源的位置和存儲(chǔ).html文件的文件夾在同一文件夾中，使用../代表從當(dāng)前位置找到上一級(jí)文件夾参淫。
2救湖、絕對(duì)路徑：
絕對(duì)路徑就是每次都從指定的盤符開(kāi)始查找。
注意點(diǎn)：
①路徑中不要出現(xiàn)中文涎才，否則可能出現(xiàn)未知問(wèn)題鞋既；
②如果是通過(guò)相對(duì)路徑來(lái)指定力九，那么不能跨盤符枉氮；
③開(kāi)發(fā)中需要編寫路徑邀杏，統(tǒng)一使用反斜杠/弱贼，不使用正斜杠\践宴，因?yàn)槠渌僮飨到y(tǒng)中路徑都是使用反斜杠/暂殖，如果使用正斜杠\纵潦，可能會(huì)引發(fā)問(wèn)題店归；
④開(kāi)發(fā)中一般不會(huì)使用絕對(duì)路徑仇哆，因?yàn)榭梢浦残圆缓谩?/p>
CSS基礎(chǔ)
CSS的作用：用來(lái)修改樣式靶衍。
格式：
<style type="text/css">
? ? 標(biāo)簽名稱{
? ? ? ? 屬性名稱:屬性對(duì)應(yīng)的值;
? ? ? ? ......
? ? }
</style>
注意點(diǎn)：
①style標(biāo)簽必須寫在head標(biāo)簽之間灾炭；
②style標(biāo)簽中的type屬性可以寫可以不寫，默認(rèn)就是type="text/css"颅眶；
③設(shè)置樣式時(shí)必須按照固定的格式來(lái)設(shè)置蜈出，{key:value;}，其中:不能省略涛酗，分號(hào)大多數(shù)情況下也不能省略掏缎。
CSS樣式的三種寫法
①內(nèi)聯(lián)樣式：使用style作為屬性，樣式語(yǔ)句作為屬性值煤杀。
②外聯(lián)樣式：外部的樣式文件通過(guò)HTML的link元素連接到HTML文檔中眷蜈。
③嵌入樣式：使用<style>標(biāo)記把樣式代碼插入到頁(yè)面的<head>標(biāo)記中。
CSS屬性
規(guī)定文字樣式的屬性font-style
取值：
①normal? ? 正常的沈自，默認(rèn)取值
②italic? ? 傾斜的
規(guī)定文字粗細(xì)的屬性font-weight
取值：
①bold? ? 加粗
②bolder? ? 比加粗更粗
③lighter? ? 細(xì)線酌儒，默認(rèn)取值
④數(shù)字取值：100~900之間的整百數(shù)字
規(guī)定文字大小的屬性font-size
單位：px（像素）
注意點(diǎn)：通過(guò)font-size設(shè)置大小一定要帶單位，即一定要寫px枯途。
規(guī)定文字字體的屬性font-family
注意點(diǎn)：
①如果取值是中文忌怎，需要用雙引號(hào)或者單引號(hào)括起來(lái)；
②設(shè)置的字體必須是用戶電腦里已經(jīng)安裝的字體酪夷，如果設(shè)置的字體不存在榴啸，那么系統(tǒng)會(huì)使用默認(rèn)的字體（宋體）來(lái)顯示；
③如果設(shè)置的字體不存在晚岭，又不想用默認(rèn)的字體來(lái)顯示時(shí)鸥印，可以給字體設(shè)置備選方案，格式：{font-family:"字體1","備選字體1",....;}坦报；
④中文字體可以處理英文库说，英文字體不能處理中文，如果想給中文和英文分別單獨(dú)設(shè)置字體片择，那么英文的字體必須寫在中文的前面潜的。
開(kāi)發(fā)中最常見(jiàn)的字體：
①中文：宋體（SimSun）/黑體（SimHei）/微軟雅黑（Microsoft YaHei）
②英文：Times New Roman/Arial
文字屬性的縮寫格式：
font:style weight size family;
注意點(diǎn)：
①其中style和weight屬性值可以省略，且位置可以交換字管；
②其中size和family屬性值不可以省略啰挪，且位置不能隨便亂放信不，size一定要寫在family的前面，且size和family必須寫在所有屬性的最后面亡呵。
文本裝飾的屬性text-decoration
取值：
①underline? ? 下劃線
②line-through? ? 刪除線
③overline? ? 上劃線
④none? ? 無(wú)抽活，最常見(jiàn)的用途就是用于去掉超鏈接的下劃線
文本水平對(duì)齊的屬性text-align
取值：
①left? ? 向左對(duì)齊
②right? ? 向右對(duì)齊
③center? ? 居中
文本縮進(jìn)的屬性text-indent
單位：em，一個(gè)em代表縮進(jìn)一個(gè)文字的寬度政己，最常用為2em。
顏色控制屬性color
取值：
①英文單詞
注意點(diǎn)：一般情況下常見(jiàn)的顏色都有對(duì)應(yīng)的英文單詞掏愁，但不是所有的顏色都能夠通過(guò)英文單詞來(lái)表達(dá)歇由。
②rgb
格式：rgb(值,值,值)
注意點(diǎn)：rgb其實(shí)就是三原色，r（red紅色）果港，g（green綠色）沦泌，b（blue藍(lán)色），格式中的每個(gè)數(shù)字對(duì)應(yīng)用來(lái)設(shè)置對(duì)應(yīng)三原色中的光源元件顯示的亮度辛掠，取值范圍為0~255之間谢谦，0代表不發(fā)光，255代表發(fā)光萝衩，值越大就越亮回挽。三個(gè)值越小就越偏黑色，越大就越偏白色猩谊。
③rgba
格式：rgb(值,值,值,透明度取值)
注意點(diǎn)：相對(duì)于rgb多了一個(gè)透明度千劈，取值為0~1之間，取值越小就越透明牌捷。
④十六進(jìn)制
在前端開(kāi)發(fā)中通過(guò)十六進(jìn)制來(lái)表示顏色墙牌，其本質(zhì)就是RGB，十六進(jìn)制中是通過(guò)每?jī)晌槐硎疽粋€(gè)顏色暗甥。
⑤十六進(jìn)制縮寫
在CSS中只要十六進(jìn)制的顏色每?jī)晌坏闹刀际且粯拥南脖酰涂梢院?jiǎn)寫為一位。
注意點(diǎn)：
①如果當(dāng)前顏色對(duì)應(yīng)的兩位數(shù)字不一樣撤防，那么就不能簡(jiǎn)寫虽风；
②如果兩位相同的數(shù)字不是屬于同一個(gè)顏色的，那么也不能簡(jiǎn)寫寄月。
補(bǔ)充：十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
用十六進(jìn)制的第一位*16+十六進(jìn)制的第二位=十進(jìn)制
設(shè)置標(biāo)簽背景顏色的屬性background-color
取值：
①英文單詞
②rgb
③rgba
④十六進(jìn)制
設(shè)置標(biāo)簽背景圖片background-image:url()
注意點(diǎn)：
①圖片的地址必須放在url()中焰情，圖片的地址可以是本地的地址，也可以是網(wǎng)絡(luò)的地址剥懒；
②如果圖片的大小沒(méi)有標(biāo)簽的大小大内舟，那么會(huì)自動(dòng)在水平和垂直方向平鋪和填充；
③如果網(wǎng)頁(yè)上出現(xiàn)了圖片初橘，那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片验游；
④同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片充岛，如果顏色和圖片同時(shí)存在，那么圖片會(huì)覆蓋顏色耕蝉。
設(shè)置背景圖片平鋪方式屬性background-repeat
取值：
①repeat 默認(rèn)取值崔梗，在水平和垂直方向都需要平鋪
②no-repeat 在水平和垂直方向都不需要平鋪
③repeat-x 只在水平方向需要平鋪
④repeat-y 只在垂直方向需要平鋪
應(yīng)用場(chǎng)景：可以通過(guò)背景圖片的平鋪來(lái)降低圖片的大小，提升網(wǎng)頁(yè)的訪問(wèn)速度垒在。
控制背景圖片的位置background-position
格式：
background-position:水平方向 垂直方向
取值：
①具體的方位名詞
水平方向：left center right
垂直方向：top center bottom
②具體的像素（一定要寫單位px蒜魄，具體的像素是可以接收負(fù)數(shù)的）
背景屬性的縮寫格式：
background:背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;
注意點(diǎn)：
①background屬性中，任意一個(gè)屬性都可以被省略场躯。
背景關(guān)聯(lián)方式：默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)谈为，如果不想讓背景圖片隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式踢关。
修改背景關(guān)聯(lián)方式：在css中background-attachment屬性伞鲫，專門用于修改關(guān)聯(lián)方式。
格式：
background-attachment:值;
取值：
①scroll 默認(rèn)值签舞，會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
②fixed 不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
背景圖片和插入圖片的區(qū)別：
①背景圖片僅僅是一個(gè)裝飾秕脓，不占位，插入圖片占位儒搭；
②背景圖片有定位屬性吠架，可以控制圖片的位置，插入圖片沒(méi)有定位屬性搂鲫；
③插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要強(qiáng)诵肛，如果圖片想被搜索引擎收錄，推薦使用插入圖片默穴。
邊框?qū)傩詁order
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條怔檩。
格式：
（1）同時(shí)設(shè)置四條邊的邊框
border:邊框的寬度 邊框的樣式 邊框的顏色;
邊框線的樣式：
①solid? ? 實(shí)線
②dashed? ? 虛線
③dotted? ? 點(diǎn)狀線
注意點(diǎn)：
①格式中顏色屬性或?qū)挾葘傩钥梢允÷裕÷灾竽J(rèn)就是黑色蓄诽，還是可以看到邊框薛训；
②格式中邊框的樣式不能省略，省略之后就看不到邊框仑氛。
（2）分別設(shè)置四條邊的邊框
border-top:邊框的寬度 邊框的樣式 邊框的顏色;
border-bottom:邊框的寬度 邊框的樣式 邊框的顏色;
border-left:邊框的寬度 邊框的樣式 邊框的顏色;
border-right:邊框的寬度 邊框的樣式 邊框的顏色;
注意點(diǎn)：
①格式中顏色屬性或?qū)挾葘傩钥梢允÷砸野＃÷灾竽J(rèn)就是黑色，還是可以看到邊框锯岖；
②格式中邊框的樣式不能省略介袜，省略之后就看不到邊框。
（3）分別設(shè)置四條邊的邊框
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
注意點(diǎn)：
①這三個(gè)屬性的取值是按照順時(shí)針來(lái)賦值的出吹；
②取值為上右下遇伞，取值省略左時(shí)，左邊的取值和右邊一樣捶牢；
③取值為上右鸠珠，省略下左時(shí)巍耗，左邊的取值和右邊一樣，下邊的取值和上邊一樣渐排；
④取值為上炬太，省略右下左時(shí)，右下左的取值和上邊一樣驯耻。
（4）單獨(dú)設(shè)置某一方向的邊框（方向+要素）
border-方向-width:值;
border-方向-style:值;
border-方向-color:值;
內(nèi)邊距屬性padding
邊框和內(nèi)容之間的距離就是內(nèi)邊距亲族。
注意點(diǎn)：
①給標(biāo)簽設(shè)置內(nèi)邊距后，標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化可缚；
②當(dāng)標(biāo)簽設(shè)置背景顏色時(shí)霎迫，內(nèi)邊距也會(huì)有背景顏色。
格式：
（1）單獨(dú)給某個(gè)方向設(shè)置
padding-top:值;
padding-bottom:值;
padding-lrft:值;
padding-right:值;
（2）給四個(gè)方向設(shè)置
padding:上 右 下 左;
注意點(diǎn)：
①取值為上右下城看，取值省略左時(shí)女气，左邊的取值和右邊一樣杏慰；
②取值為上右测柠，省略下左時(shí)，左邊的取值和右邊一樣缘滥，下邊的取值和上邊一樣轰胁；
③取值為上，省略右下左時(shí)朝扼，右下左的取值和上邊一樣赃阀。
外邊距屬性margin
標(biāo)簽和標(biāo)簽之間的距離就是外邊距。
注意點(diǎn)：當(dāng)標(biāo)簽設(shè)置背景顏色時(shí)擎颖，外邊距是沒(méi)有背景顏色的榛斯。
格式：
（1）單獨(dú)給某個(gè)方向設(shè)置
margin-top:值;
margin-bottom:值;
margin-lrft:值;
margin-right:值;
（2）給四個(gè)方向設(shè)置
margin:上 右 下 左;
注意點(diǎn)：
①取值為上右下，取值省略左時(shí)搂捧，左邊的取值和右邊一樣驮俗；
②取值為上右，省略下左時(shí)允跑，左邊的取值和右邊一樣王凑，下邊的取值和上邊一樣；
③取值為上聋丝，省略右下左時(shí)索烹，右下左的取值和上邊一樣。
外邊距合并現(xiàn)象：
在默認(rèn)布局的垂直方向上弱睦，默認(rèn)情況下外邊距是不會(huì)疊加的百姓，會(huì)出現(xiàn)合并現(xiàn)象，誰(shuí)的外邊距比較大就聽(tīng)誰(shuí)的况木。
外邊距合并常見(jiàn)兩種情況：
①當(dāng)兩個(gè)元素為父子關(guān)系時(shí)瓣戚，它們的上下邊距會(huì)發(fā)生合并現(xiàn)象端圈，合并后的外邊距大小等于合并前外邊距高的元素的外邊距。
解決方法：
?給父級(jí)元素一個(gè)overflow:hidden;
?讓子級(jí)元素浮動(dòng)子库。
②當(dāng)兩個(gè)元素為兄弟關(guān)系時(shí)舱权，哥哥的下外邊距與弟弟的上外邊距會(huì)發(fā)生合并現(xiàn)象，合并后的外邊距大小等于合并前外邊距高的元素的外邊距仑嗅。
解決方法：讓所有同級(jí)元素浮動(dòng)宴倍。
注意點(diǎn)：外邊距的合并一般只發(fā)生在上下不發(fā)生在左右，元素左右的外邊距可以疊加仓技。
盒子模型：
（1）內(nèi)容的寬度和高度
通過(guò)標(biāo)簽的width/height屬性設(shè)置的寬度和高度
（2）元素的寬度的和高度
寬度=左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框
高度=上邊框+上內(nèi)邊距+height+下內(nèi)邊距+下邊框
（3）元素空間的寬度和高度
寬度=左外邊距+左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框+右外邊距
高度=上外邊距+上邊框+上內(nèi)邊距+height+下內(nèi)邊距+下邊框+下外邊距
box-sizing屬性：
（1）CSS3中新增了一個(gè)box-sizing屬性鸵贬，可以保證給盒子新增padding和border之后，盒子元素的寬度和高度不變脖捻；
（2）box-sizing屬性要保證新增padding和border之后阔逼，盒子元素的寬度和高度不變，則必須減去一部分內(nèi)容的寬度和高度地沮；
（3）box-sizing取值：
①content-box
元素的寬高=邊框+內(nèi)邊距+內(nèi)容寬高
②border-box
元素的寬高=width屬性
盒子模型注意點(diǎn)：
①如果兩個(gè)盒子是嵌套關(guān)系嗜浮，那么設(shè)置了里面一個(gè)盒子頂部的外邊距，外面一個(gè)盒子也會(huì)被頂下來(lái)摩疑，如果外面的盒子不想被一起頂下來(lái)危融，那么可以給外面的盒子添加一個(gè)邊框?qū)傩裕?/p>
②開(kāi)發(fā)中，一般情況下如果需要考慮嵌套關(guān)系盒子之間的距離雷袋，應(yīng)該首先考慮padding吉殃，其次再考慮margin，margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的楷怒；
③在嵌套關(guān)系的盒子中蛋勺，可以利用margin:0 auto;的方式來(lái)讓里面的盒子在外面的盒子中水平居中，margin:0 auto;只對(duì)水平方向有效鸠删，對(duì)垂直方向無(wú)效抱完。
盒子居中和內(nèi)容居中
text-align:center;作用：設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中。
margin:0 auto;作用：讓盒子自身水平居中冶共。
清空默認(rèn)邊距（外邊距和內(nèi)邊距）
①在開(kāi)發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等乾蛤，編寫代碼之前通常會(huì)清空默認(rèn)的邊距；
②清空默認(rèn)的邊距的方式：
*{
? ? margin:0;
? ? padding:0;
}
注意點(diǎn)：通配符選擇器會(huì)遍歷當(dāng)前界面中所有的標(biāo)簽捅僵，性能較差家卖，通常采用并集選擇器選擇多個(gè)標(biāo)簽控制。
yui css reset網(wǎng)址：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
行高line-height
注意點(diǎn)：在CSS中所有的行都有自己的行高庙楚，行高和盒子的高度不是同一個(gè)概念上荡。
規(guī)律：
①文字在行高中默認(rèn)是垂直居中的；
②開(kāi)發(fā)中，經(jīng)常將盒子的高度和行高設(shè)置為一樣酪捡，這樣可以保證一行文字在盒子的高度中是垂直居中的叁征；
③開(kāi)發(fā)中，如果一個(gè)盒子中有多行文字逛薇，就不能使用設(shè)置行高等于盒子高來(lái)實(shí)現(xiàn)讓文字垂直居中捺疼，只能通過(guò)設(shè)置padding來(lái)讓文字垂直居中。
注意點(diǎn)：
①在開(kāi)發(fā)中永罚，如果一個(gè)盒子中存儲(chǔ)的是文字啤呼，一般情況下會(huì)以盒子左邊的內(nèi)邊距為基準(zhǔn)，不會(huì)以右邊的內(nèi)邊距為基準(zhǔn)呢袱，因?yàn)橛疫叺膬?nèi)邊距有誤差（右邊如果放不下一個(gè)文字時(shí)官扣，文字就會(huì)換行顯示，所以文字和右內(nèi)邊距之間的距離就有了誤差）羞福；
②頂部的內(nèi)邊距并不是邊框到文字頂部的距離惕蹄，而是邊框到行高頂部的距離。
overflow:hidden;屬性
作用：
①可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉治专；
②清除浮動(dòng)影響卖陵；
③在嵌套的盒子中，可以通過(guò)給外面的盒子設(shè)置overflow:hidden;讓里面的盒子設(shè)置margin-top之后外面的盒子不被頂下來(lái)看靠。
不透明度opacity
用于設(shè)置元素的不透明度赶促，默認(rèn)取值為1液肌。
取值為1時(shí)完全不透明挟炬，取值為0時(shí)完全透明。
流動(dòng)對(duì)齊方式float
取值：
①left? ? 向左浮動(dòng)
②right? ? 向右浮動(dòng)
③none? ? 不浮動(dòng)
CSS選擇器
標(biāo)簽選擇器
作用：根據(jù)指定的標(biāo)簽名稱嗦哆，在當(dāng)前界面中找到所有該名稱的標(biāo)簽谤祖，然后設(shè)置屬性。
格式：
標(biāo)簽名稱{
? ? 屬性:值;
}
注意點(diǎn)：
①標(biāo)簽選擇器選中的是當(dāng)前界面中所有的標(biāo)簽老速，而不能單獨(dú)選中某一標(biāo)簽粥喜；
②只要是HTML中的標(biāo)簽就可以作為標(biāo)簽選擇器。
id選擇器
作用：根據(jù)指定的id名稱找到對(duì)應(yīng)的標(biāo)簽橘券，然后設(shè)置屬性额湘。
格式：
#id名稱{
? ? 屬性:值;
}
注意點(diǎn)：
①每個(gè)html標(biāo)簽都有一個(gè)id屬性，即每個(gè)標(biāo)簽都可以設(shè)置id旁舰；
②在同一個(gè)界面中id的名稱是不可以重復(fù)的锋华；
③編寫id選擇器時(shí)一定要在id名稱前面加上#；
④id的名稱是有一定規(guī)范的箭窜，只能由字母毯焕、數(shù)字、下劃線組成磺樱，且不能以數(shù)字開(kāi)頭纳猫，也不能是html標(biāo)簽的名稱婆咸。
類選擇器
作用：根據(jù)指定的類名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性芜辕。
格式：
.類名稱{
? ? 屬性:值;
}
注意點(diǎn)：
①每個(gè)html標(biāo)簽都有一個(gè)class屬性尚骄，即每個(gè)標(biāo)簽都可以設(shè)置class；
②在同一個(gè)界面中class的名稱是可以重復(fù)的侵续；
③編寫class選擇器時(shí)一定要在class名稱前面加上.乖仇；
④類名的命名規(guī)范和id名稱的命名規(guī)范一樣，class的名稱是有一定規(guī)范的询兴，只能由字母乃沙、數(shù)字、下劃線組成诗舰，且不能以數(shù)字開(kāi)頭警儒，也不能是html標(biāo)簽的名稱；
⑤在html中每個(gè)標(biāo)簽可以同時(shí)綁定多個(gè)類名眶根。
id選擇器和類選擇器的區(qū)別：
①一個(gè)html標(biāo)簽只能綁定一個(gè)id名稱蜀铲，但可以綁定多個(gè)class名稱；
②id名稱不可以重復(fù)属百，class名稱可以重復(fù)记劝；
③id選擇器以#開(kāi)頭，class選擇器以.開(kāi)頭族扰；
④一般情況下id是給JS使用的厌丑，不使用id去設(shè)置樣式。
后代選擇器
作用：找到指定標(biāo)簽的所有后代標(biāo)簽渔呵，設(shè)置屬性怒竿。
格式：
標(biāo)簽名稱1? ? 標(biāo)簽名稱2{
? ? 屬性:值;
}
注意點(diǎn)：
①后代選擇器必須用空格隔開(kāi)；
②后代不僅僅是兒子扩氢，也包括孫子/重孫子耕驰，只要最終是放到指定標(biāo)簽中的都是后代；
③后代選擇器不僅僅可以使用標(biāo)簽名稱录豺，還可以使用其它選擇器朦肘。
子元素選擇器
作用：找到指定標(biāo)簽中所有特定的直接子元素，然后設(shè)置屬性双饥。
格式：
標(biāo)簽名稱1>標(biāo)簽名稱2{
? ? 屬性:值;
}
先找到名稱叫做標(biāo)簽名稱1的標(biāo)簽媒抠，然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱叫做標(biāo)簽名稱2的元素。
注意點(diǎn)：
①子元素選擇器只會(huì)查找兒子兢哭，不會(huì)查找其它被嵌套的標(biāo)簽领舰；
②子元素選擇器之間需要用>符號(hào)連接，并且不能有空格；
③子元素選擇器不僅僅可以使用標(biāo)簽名稱冲秽，還可以使用其它選擇器舍咖；
④子元素選擇器可以通過(guò)>符號(hào)一直延續(xù)下去。
后代選擇器和子元素選擇器的區(qū)別：
①后代選擇器使用空格作為連接符號(hào)锉桑，子元素選擇器使用>作為連接符號(hào)排霉；
②后代選擇器會(huì)選中指定標(biāo)簽中所有的特定后代標(biāo)簽，子元素選擇器只會(huì)選中指定標(biāo)簽中所有特定的直接標(biāo)簽民轴。
后代選擇器和子元素選擇器的共同點(diǎn)：
①后代選擇器和子元素選擇器都可以通過(guò)使用標(biāo)簽名稱/id名稱/class名稱來(lái)作為選擇器攻柠；
②后代選擇器和子元素選擇器都可以通過(guò)各自的連接符號(hào)一直延續(xù)下去。
交集選擇器
作用：給所有選擇器選中的標(biāo)簽中后裸，相交的那部分標(biāo)簽設(shè)置屬性瑰钮。
格式：
選擇器1選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①選擇器和選擇器之間沒(méi)有任何符號(hào)；
②選擇器可以使用標(biāo)簽名稱/id名稱/class名稱微驶。
并集選擇器
作用：給所有選擇器選中的標(biāo)簽設(shè)置屬性浪谴。
格式：
選擇器1,選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①并集選擇器必須使用,來(lái)連接；
②選擇器可以使用標(biāo)簽名稱/id名稱/class名稱因苹。
兄弟選擇器
（1）相鄰兄弟選擇器（CSS2）
作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性苟耻。
格式：
選擇器1+選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①相鄰兄弟選擇器必須通過(guò)+連接；
②相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽扶檐，不能選中被隔開(kāi)的標(biāo)簽凶杖。
（2）通用兄弟選擇器（CSS3）
作用：給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性。
格式：
選擇器1~選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①通用兄弟選擇器必須用~連接款筑；
②通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽智蝠，無(wú)論有沒(méi)有被隔開(kāi)都可以。
序選擇器（CSS3中新增的最具代表性的選擇器）
（1）同級(jí)別
:first-child????選中同級(jí)別中的第一個(gè)標(biāo)簽
:last-child????選中同級(jí)別中的最后一個(gè)標(biāo)簽
:nth-child(n)? ? 選中同級(jí)別中的第n個(gè)標(biāo)簽
:nth-last-child(n)? ? 選中同級(jí)別中的倒數(shù)第n個(gè)標(biāo)簽
:only-child? ? 選中父元素中唯一的元素
:nth-child(odd)? ? 選中同級(jí)別中的所有奇數(shù)標(biāo)簽
:nth-child(even)? ? 選中同級(jí)別中的所有偶數(shù)標(biāo)簽
:nth-child(xn+y)? ? x和y是用戶自定義的醋虏，而n是一個(gè)計(jì)數(shù)器寻咒，從0開(kāi)始遞增
注意點(diǎn)：不區(qū)分類型哮翘。
（2）同類型
:first-of-type? ? 選中同級(jí)別中同類型的第一個(gè)標(biāo)簽
:last-of-type? ? 選中同級(jí)別中同類型的最后一個(gè)標(biāo)簽
:nth-of-type(n)? ? 選中同級(jí)別中同類型的第n個(gè)標(biāo)簽
:nth-last-of-type(n)? ? 選中同級(jí)別中同類型的倒數(shù)第n個(gè)標(biāo)簽
:only-of-type? ? 選中父元素中唯一類型的某個(gè)標(biāo)簽
:nth-of-type(odd)? ? 選中同級(jí)別中同類型的所有奇數(shù)標(biāo)簽
:nth-of-type(even)? ? 選中同級(jí)別中同類型的所有偶數(shù)標(biāo)簽
:nth-of-type(xn+y)? ? x和y是用戶自定義的颈嚼，而n是一個(gè)計(jì)數(shù)器，從0開(kāi)始遞增
屬性選擇器
作用：根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽饭寺，然后設(shè)置屬性阻课。
格式：
①[屬性名稱]
作用：根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性艰匙。
②[屬性名稱=值]
作用：找到有指定屬性限煞，并且屬性的取值等于指定值的標(biāo)簽，然后設(shè)置屬性员凝。（最常見(jiàn)的應(yīng)用場(chǎng)景就是用于區(qū)分input標(biāo)簽屬性）
③屬性的取值是以什么開(kāi)頭的
[屬性|=值]（CSS2）
[屬性^=值]（CSS3）
兩者之間的區(qū)別：
CSS2中的只能找到指定值開(kāi)頭并且指定值是被-和其它內(nèi)容隔開(kāi)的署驻。
CSS3中的只要是以指定值開(kāi)頭的都可以找到，無(wú)論有沒(méi)有被-隔開(kāi)。
④屬性的取值是以什么結(jié)尾的
[屬性$=值]（CSS3）
⑤屬性的取值是否包含某個(gè)特定的值
[屬性~=值]（CSS2）
[屬性*=值]（CSS3）
兩者之間的區(qū)別：
CSS2中只能找到獨(dú)立的單詞旺上，也就是包含指定值瓶蚂，并且指定值是被空格隔開(kāi)的。
CSS3中只要包含指定值就可以找到宣吱。
通配符選擇器
作用：給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性窃这。
格式：
*{
? ? 屬性:值;
}
注意點(diǎn)：由于通配符選擇器時(shí)設(shè)置界面上所有的標(biāo)簽的屬性，所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽征候，如果當(dāng)前界面上的標(biāo)簽比較多杭攻，那么性能就會(huì)比較差。
偽元素選擇器
作用：給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素疤坝。
格式：
①標(biāo)簽名稱::before{
? ? 屬性名稱:值;
}
給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素兆解。
②標(biāo)簽名稱::after{
屬性名稱:值;
}
給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素。
CSS三大特性
繼承性
作用：給父元素設(shè)置一些屬性跑揉，子元素也可以使用痪宰，這個(gè)稱之為繼承性。
注意點(diǎn)：
①不是所有的屬性都可以繼承畔裕，只有以color/font-/line開(kāi)頭的屬性才可以繼承衣撬；
②在CSS的繼承中只要是后代都可以繼承；
③a標(biāo)簽的文字顏色和下劃線顏色是不能繼承的扮饶；
④h標(biāo)簽的文字大小是不能繼承的具练。
應(yīng)用場(chǎng)景：一般用于設(shè)置網(wǎng)頁(yè)上的一些共性信息。
層疊性
作用：層疊性就是CSS處理沖突的一種能力甜无。
注意點(diǎn)：
①層疊性只有在多個(gè)選擇器選中同一個(gè)標(biāo)簽扛点，并且設(shè)置了相同的屬性，才會(huì)發(fā)生層疊性岂丘。
優(yōu)先級(jí)
作用：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽陵究，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊由優(yōu)先級(jí)來(lái)確定奥帘。
優(yōu)先級(jí)判斷的三種方式：
①是否是直接選中（間接選中就是指繼承）
如果是間接選中铜邮，那么就是誰(shuí)離目標(biāo)標(biāo)簽比較近就聽(tīng)誰(shuí)的。
②相同選擇器
如果都是直接選中寨蹋，并且都是同類型的選擇器松蒜，那么誰(shuí)寫在后面就聽(tīng)誰(shuí)的。
③不同選擇器
如果都是直接選中已旧，并且不是相同類型的選擇器秸苗，那么就按照選擇器的優(yōu)先級(jí)來(lái)層疊。
id>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
important
作用：用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)的运褪，可以將被指定的屬性的優(yōu)先級(jí)提升為最高惊楼。
注意點(diǎn)：
①important只能用于直接選中玖瘸，不能用于間接選中；
②通配符選擇器選中的標(biāo)簽也是直接選中的檀咙；
③!important只能提升被指定的屬性的優(yōu)先級(jí)店读，其它屬性的優(yōu)先級(jí)不會(huì)被提升；
④!important必須寫在屬性值的分號(hào)前面攀芯，而且前面的感嘆號(hào)不能省略屯断。
優(yōu)先級(jí)的權(quán)重
作用：當(dāng)多個(gè)選擇器混合在一起使用時(shí)，可以通過(guò)計(jì)算權(quán)重來(lái)判斷誰(shuí)的優(yōu)先級(jí)最高侣诺。
權(quán)重的計(jì)算規(guī)則：
①首先先計(jì)算選擇器中有多少個(gè)id殖演，id多的選擇器優(yōu)先級(jí)最高；
②如果id的個(gè)數(shù)一樣年鸳，再看類名的個(gè)數(shù)趴久，類名個(gè)數(shù)多的優(yōu)先級(jí)最高；
③如果類名的個(gè)數(shù)一樣搔确，再看標(biāo)簽名稱的個(gè)數(shù)彼棍，標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級(jí)最高；
④如果id個(gè)數(shù)膳算、類名個(gè)數(shù)座硕、標(biāo)簽名稱個(gè)數(shù)都一樣，誰(shuí)寫在后面聽(tīng)誰(shuí)的涕蜂。
注意點(diǎn)：只有選擇器直接選中的標(biāo)簽才需要計(jì)算權(quán)重华匾。
CSS元素顯示模式
在html中html將所有標(biāo)簽分為兩類，分別是容器級(jí)和文本級(jí)机隙；
在css中css將所有標(biāo)簽分為兩類蜘拉，分別是塊級(jí)元素和行內(nèi)元素。
塊級(jí)元素和行內(nèi)元素的區(qū)別：
①塊級(jí)元素會(huì)獨(dú)占一行有鹿，行內(nèi)元素不會(huì)獨(dú)占一行旭旭；
②塊級(jí)元素如果沒(méi)有設(shè)置寬度，那么默認(rèn)和父元素一樣寬葱跋，設(shè)置了寬高持寄，就按照設(shè)置的來(lái)顯示；
③行內(nèi)元素是不可以設(shè)置寬度和高度的年局，大小由內(nèi)部填充物決定际看。
行內(nèi)塊元素：能夠讓元素既能夠不獨(dú)占一行，又可以設(shè)置寬度和高度矢否。
塊級(jí)元素：p div h ul li dt dd......
行內(nèi)元素：span b u i s strong em ins del img a.....
CSS元素顯示模式轉(zhuǎn)換：設(shè)置元素的display屬性。
display屬性取值：
①block 塊級(jí)
②inline 行內(nèi)
③inline-block行內(nèi)塊
CSS精靈圖
CSS精靈圖是一種圖像合成技術(shù)脑溢。
作用：可以減少圖片請(qǐng)求的次數(shù)僵朗，以及可以降低服務(wù)器處理壓力赖欣。
使用方式：CSS的精靈圖需要配合背景圖片和背景定位來(lái)使用。
