瀏覽器與服務(wù)器的基本概念
瀏覽器（安裝在電腦里面的一個(gè)軟件）
作用：
①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看。
②讓用戶通過瀏覽器與網(wǎng)頁進(jìn)行交互。
常見主流瀏覽器：
①IE瀏覽器? -ms-
②Chrome（谷歌瀏覽器）? -webkit-
③Firefox（火狐瀏覽器）? -moz-
④Safari（蘋果瀏覽器）
⑤Opera（歐朋瀏覽器）? -o-
瀏覽器內(nèi)核，即瀏覽器所采用的渲染引擎，其決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面格式信息。不同的瀏覽器有不同的瀏覽器內(nèi)核，因此瀏覽器有兼容問題。
瀏覽器訪問網(wǎng)頁原理：
①當(dāng)利用瀏覽器訪問網(wǎng)頁時(shí)，其實(shí)是有真實(shí)的物理文件傳輸?shù)模瑸g覽器會先將網(wǎng)頁上的內(nèi)容緩存到本地文件夾中，然后再渲染出來呈現(xiàn)給用戶查看。
②第二次訪問網(wǎng)頁比第一次訪問要快，因?yàn)榈谝淮卧L問時(shí)已經(jīng)將這個(gè)網(wǎng)頁上的信息緩存到了本地。
③一個(gè)網(wǎng)頁不是一個(gè)文件，而是一堆文件，網(wǎng)頁越復(fù)雜那么組成這個(gè)網(wǎng)頁的文件就越多。
瀏覽器請求數(shù)據(jù)的過程：
①瀏覽器訪問網(wǎng)頁，發(fā)送“請求報(bào)文”至服務(wù)器；
②服務(wù)器處理瀏覽器請求；
③服務(wù)器將處理結(jié)果返回給瀏覽器；
④服務(wù)器發(fā)送“響應(yīng)報(bào)文”；
⑤瀏覽器解析服務(wù)器返回的內(nèi)容呈現(xiàn)給用戶。
請求報(bào)文：請求行+請求頭+空行+請求體
響應(yīng)報(bào)文：響應(yīng)行+響應(yīng)頭+響應(yīng)體
服務(wù)器（專門用于存儲數(shù)據(jù)的電腦，24小時(shí)不斷電不關(guān)機(jī)，訪問者可以訪問服務(wù)器獲得服務(wù)器上的資源）
URL及HTTP協(xié)議的基本認(rèn)知
在瀏覽器中輸入的地址就是一個(gè)URL
URL拆分：
URL協(xié)議類型+服務(wù)器ip地址+服務(wù)器端口號（默認(rèn)80）+需要訪問的資源名稱
URL拆分后各部分的作用：
①服務(wù)器ip地址和服務(wù)器端口號的作用就是告訴瀏覽器需要訪問的服務(wù)器的詳細(xì)地址。
②通過資源名稱告訴服務(wù)器需要獲取服務(wù)器上的哪個(gè)資源。
HTTP（超文本傳輸協(xié)議）
HTTP協(xié)議用于規(guī)范／約束瀏覽器和服務(wù)器之間如何溝通。
純文本文件
只要能夠被記事本打開，并且能夠正常顯示的文件都是純文本文件。純文本文件中所有文字都是同級別的。
字符集導(dǎo)致亂碼問題
在網(wǎng)頁中指定字符集的意義在于告訴瀏覽器如何找到對應(yīng)的正確的內(nèi)容，否則會導(dǎo)致亂碼問題。
注意：在html文件中指定的字符集必須和保存這個(gè)文件的字符集一致，否則會出現(xiàn)亂碼。
GBK（GB2312）和UTF-8的區(qū)別：
①GBK（GB2312）里面存儲的字符比較少，僅僅存儲了漢字和一些常用外文。體積比較小。
②UTF-8里面存儲了世界上所有的文字。體積比較大。
HTML基本概念
HTML（超文本標(biāo)記語言），一種純文本類型的語言，由瀏覽器解釋執(zhí)行
作用：專門用來給文本添加語義，而不是用來修改文本的樣式。
html基本結(jié)構(gòu)：
<html>
? ? <head>
? ? ? ? <title></title>
? ? </head>
? ? <body>
? ? </body>
</html>
html標(biāo)簽：用于告訴瀏覽器這是一個(gè)網(wǎng)頁，即告訴瀏覽器這是一個(gè)html文檔。
head標(biāo)簽：一般情況下，寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會顯示給用戶查看，用于給網(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)題會作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題。title標(biāo)簽必須寫在head標(biāo)簽中。
body標(biāo)簽：專門用于定義html文檔中需要顯示給用戶查看的內(nèi)容（文字／圖片／視頻／音頻）。
HTML、XHTML、HTML5的區(qū)別：
①HTML語法非常寬松容錯(cuò)性強(qiáng)；
②XHTML更為嚴(yán)格，它要求標(biāo)簽必須小寫，必須嚴(yán)格閉合，標(biāo)簽中的屬性必須使用引號引起等；
③HTML5是HTML的下一個(gè)版本，所以除了非常寬松容錯(cuò)性強(qiáng)以外，還增加了許多新的特性。
.html與.htm擴(kuò)展名的區(qū)別：
htm是為了兼容過去的DOS操作系統(tǒng)命名格式存在的（DOS操作系統(tǒng)只能支持長度為3的后綴名），在windows下無所謂htm與html。
HTML標(biāo)簽
h系列標(biāo)簽（h1~h6）
作用：用于給文本添加標(biāo)題語義（不是用來修改文本的樣式的）。
注意點(diǎn)：
①在h系列的標(biāo)簽中，h1最大，h6最小，最多只能到6，超過6則無效；
②被h系列標(biāo)簽包裹的內(nèi)容會獨(dú)占一行；
③一般情況下一個(gè)界面只能出現(xiàn)一個(gè)h1標(biāo)簽（與SEO有關(guān)）。
p標(biāo)簽
作用：用于定義哪些文字是一個(gè)段落。
注意點(diǎn)：被p標(biāo)簽包裹的內(nèi)容會獨(dú)占一行。
hr標(biāo)簽
作用：在瀏覽器上實(shí)現(xiàn)一條分割線。
注意點(diǎn)：
①在瀏覽器中單獨(dú)占據(jù)一行；
②hr標(biāo)簽沒有結(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就是用來告訴img標(biāo)簽，需要顯示的圖片名稱。
img標(biāo)簽具有width和height（寬度和高度）兩個(gè)屬性，用于指定需要顯示的圖片的寬度和高度。如果img標(biāo)簽沒有指定需要顯示的圖片的寬高，系統(tǒng)會按照圖片默認(rèn)的寬高來顯示，如果img標(biāo)簽指定寬高，則按照指定的寬高來顯示。
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)簽在瀏覽器中不會獨(dú)占一行；
②如果同時(shí)手動(dòng)指定img標(biāo)簽顯示的圖片的寬度和高度，有可能會導(dǎo)致圖片變形，可以只指定寬度或高度其中一個(gè)值即可，系統(tǒng)會根據(jù)指定的值計(jì)算出另外一個(gè)的值，進(jìn)行等比拉伸，圖片不會變形。
br標(biāo)簽
作用：換行。
格式：<br>
注意點(diǎn)：
①多個(gè)br可以連續(xù)使用，使用多少個(gè)br標(biāo)簽就會換多少行；
②由于HTML的作用是用來給文本添加語義的，而br標(biāo)簽的語義就是不另起一個(gè)段落換行，在一般開發(fā)情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落，因此在開發(fā)中很少使用br標(biāo)簽，而是使用獨(dú)占一行的標(biāo)簽來解決。
nobr標(biāo)簽
作用：禁止標(biāo)記中間的文本換行。
a標(biāo)簽
作用：用于控制頁面與頁面之間跳轉(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：在上一級框架中打開超鏈接；
④_top：在整個(gè)瀏覽器窗口中打開超鏈接。
a標(biāo)簽的title屬性用來控制鼠標(biāo)懸停時(shí)顯示的提示文本。
注意點(diǎn)：
①a標(biāo)簽不僅可以讓文字能夠點(diǎn)擊，還可以讓圖片能夠被點(diǎn)擊；
②一個(gè)a標(biāo)簽必須有一個(gè)href屬性，否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方；
③如果通過a標(biāo)簽的href屬性指定一個(gè)URL地址，那么必須在地址前面加上http://或https://；
④a標(biāo)簽的href屬性除了可以指定一個(gè)網(wǎng)絡(luò)地址以外，還可以指定一個(gè)本地地址。
假鏈接：點(diǎn)擊之后不會跳轉(zhuǎn)的鏈接。
假鏈接的意義：開發(fā)前期，多數(shù)界面未完成，此時(shí)a標(biāo)簽還不知道要跳轉(zhuǎn)到什么地方，只能用假鏈接來代替。當(dāng)開發(fā)后期其它界面都已經(jīng)完成時(shí)再將假鏈接替換為真鏈接。
假鏈接的格式：
①<a href="#">需要展現(xiàn)給用戶查看的內(nèi)容</a>
②<a href="javascript:">需要展現(xiàn)給用戶查看的內(nèi)容</a>
假鏈接的兩種格式的區(qū)別：#的假鏈接會自動(dòng)回到網(wǎng)頁的頂部，而javascript:的假鏈接不會自動(dòng)回到網(wǎng)頁頂部。
a標(biāo)簽的錨點(diǎn)跳轉(zhuǎn)：可以通過給目標(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)到其它界面的指定位置。（該方法沒有過渡效果）
div標(biāo)簽
作用：一般用于配合css完成網(wǎng)頁的基本布局，把標(biāo)記中的內(nèi)容做為單獨(dú)的一塊處理。
span標(biāo)簽
作用：一般用于配合css修改網(wǎng)頁中的一些局部信息。
div和span的區(qū)別：
①div會單獨(dú)占據(jù)一行，而span不會單獨(dú)占據(jù)一行。
②div是一個(gè)容器級的標(biāo)簽，而span是一個(gè)文本級的標(biāo)簽。
容器級標(biāo)簽和文本級標(biāo)簽的區(qū)別：
①容器級的標(biāo)簽可以嵌套其它所有的標(biāo)簽；
②文本級的標(biāo)簽中只能嵌套文字/超鏈接/圖片。
容器級的標(biāo)簽：div h ul ol dl li dt dd......
文本級的標(biāo)簽：span p b u i s strong em ins del......
pre標(biāo)簽
作用：預(yù)設(shè)格式文本，可以讓空白字符、換行字符保存下來。
base標(biāo)簽
作用：專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接（a標(biāo)簽）的跳轉(zhuǎn)方式。
格式：
<base target="跳轉(zhuǎn)方式">
注意點(diǎn)：
①base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽中；
②當(dāng)base標(biāo)簽和a標(biāo)簽同時(shí)指定了target屬性，瀏覽器會按照a標(biāo)簽中指定的跳轉(zhuǎn)方式來執(zhí)行。
列表標(biāo)簽
作用：給一堆數(shù)據(jù)添加列表語義，告訴搜索引擎和瀏覽器這一堆數(shù)據(jù)是一個(gè)整體。
列表標(biāo)簽的分類：
1、無序列表
格式：
<ul>
? ? <li></li>
</ul>
作用：給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)沒有先后之分。
type 屬性取值：
①disc????實(shí)心圓點(diǎn)
②square????實(shí)心方點(diǎn)
③circle????空心圓
注意點(diǎn)：
①ul標(biāo)簽和li標(biāo)簽是一個(gè)整體，是一個(gè)組合，一般情況下都是一起出現(xiàn)，不會單獨(dú)使用。
②由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合，所以ul標(biāo)簽中不推薦包含其它標(biāo)簽，但是li標(biāo)簽中還可以添加其它的標(biāo)簽。
應(yīng)用場景：
①新聞列表
②商品列表
③導(dǎo)航條
2、有序列表
格式：
<ol>
? ? <li></li>
</ol>
屬性：
①type屬性取值：
?阿拉伯?dāng)?shù)字
?大小寫英文字母
?大小寫羅馬數(shù)字
②start????指定序號的起始值，只能取數(shù)字。
③reversed????反向編號列表
作用：給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)有先后之分。
注意點(diǎn)和應(yīng)用場景與無序列表相同。
3、定義列表
格式：
<dl>
? ? <dt></dt>
? ? <dd></dd>
</dl>
作用：
①給一堆數(shù)據(jù)添加列表語義；
②dt標(biāo)簽定義列表中的所有標(biāo)題，再通過dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息。
應(yīng)用場景：
①做網(wǎng)站尾部的相關(guān)信息
②做圖文混排
注意點(diǎn)：
①dl標(biāo)簽、dt標(biāo)簽和dd標(biāo)簽是一個(gè)整體，一般情況下不會單獨(dú)出現(xiàn)。
②由于dl和dt/dd是一個(gè)組合標(biāo)簽，所以dl標(biāo)簽中建議只放dt和dd標(biāo)簽。
③一個(gè)dt標(biāo)簽可以沒有對應(yīng)的dd標(biāo)簽，也可以有多個(gè)對應(yīng)的dd標(biāo)簽，但推薦使用一個(gè)dt對應(yīng)一個(gè)dd。
④當(dāng)需要豐富界面時(shí)，可以在dt和dd標(biāo)簽中繼續(xù)添加其它標(biāo)簽。
表格標(biāo)簽
作用：用來給一堆數(shù)據(jù)添加表格語義，當(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ù)，即一對tr標(biāo)簽就是表格中的一行。
th標(biāo)簽專門用來存儲每一列的標(biāo)題，只要將當(dāng)前列的標(biāo)題存儲在這個(gè)標(biāo)簽中就會自動(dòng)居中和加粗文字。
td標(biāo)簽代表表格中一行中的一個(gè)單元格，即一對td標(biāo)簽就是一行中的一個(gè)單元格，專門用于存儲數(shù)據(jù)。
caption標(biāo)簽專門用來設(shè)置表格的標(biāo)題，標(biāo)題寫在caption標(biāo)簽中，會自動(dòng)相對于表格的寬度居中。
表格標(biāo)簽的屬性：
①寬度和高度（可以給table標(biāo)簽和td標(biāo)簽使用）：
表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來調(diào)整的，也可以通過給table標(biāo)簽設(shè)置width和height屬性的方式來手動(dòng)指定表格的寬度和高度。
如果給td標(biāo)簽設(shè)置width/height屬性，會修改當(dāng)前單元格的寬度和高度，不會影響整個(gè)表格的寬度和高度。
②水平對齊和垂直對齊（水平對齊可以給table標(biāo)簽、tr標(biāo)簽和td標(biāo)簽使用，垂直對齊只能給tr標(biāo)簽和td標(biāo)簽使用）
給table標(biāo)簽設(shè)置align屬性，可以控制表格在水平方向的對齊方式。
給tr標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對齊方式。
給td標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前單元格中內(nèi)容在水平方向的對齊方式。
tr標(biāo)簽和td標(biāo)簽中都設(shè)置align屬性時(shí)，單元格中的內(nèi)容會按照td標(biāo)簽中設(shè)置的來對齊。
給tr標(biāo)簽設(shè)置valign屬性，可以控制當(dāng)前行中所有單元格中的內(nèi)容在垂直方向的對齊方式。
給td標(biāo)簽設(shè)置valign屬性，可以控制當(dāng)前單元格中的內(nèi)容在垂直方向的對齊方式。
tr標(biāo)簽和td標(biāo)簽中都設(shè)置valign屬性時(shí)，單元格中的內(nèi)容會按照td標(biāo)簽中設(shè)置的來對齊。
③外邊距和內(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不會單個(gè)出現(xiàn)；
③caption標(biāo)簽一定要寫在table標(biāo)簽中，緊跟在table標(biāo)簽后面，否則無效；
④如果沒有編寫tbody標(biāo)簽，系統(tǒng)會添加。
⑤如果指定了thead標(biāo)簽和tfoot標(biāo)簽，那么修改整個(gè)表格的高度時(shí)，thead標(biāo)簽和tfoot標(biāo)簽有自身默認(rèn)的高度，不會隨著表格的高度變化而變化。
細(xì)線表格的制作方式：
①給table標(biāo)簽設(shè)置bgcolor屬性；
②給tr標(biāo)簽設(shè)置bgcolor屬性；
③給table標(biāo)簽設(shè)置cellspacing="1px"。
單元格合并：
①水平方向上的單元格合并：給td標(biāo)簽添加一個(gè)colspan屬性，來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待。colspan="合并單元格數(shù)目"
②垂直方向上的單元格合并：給td標(biāo)簽添加一個(gè)rowspan屬性，來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待。rowspan="合并單元格數(shù)目"
單元格合并注意點(diǎn)：
①由于把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待，就會多出一些單元格，所以需要?jiǎng)h掉一些多余的單元格才能正常顯示；
②單元格合并永遠(yuǎn)都是向后或者向下合并的，而不能向前或者向上合并。
表單標(biāo)簽
表單就是專門用來收集用戶信息的。
格式：
<form>
? ? <表單元素>
</form>
常見表單元素：
（1）input標(biāo)簽：input標(biāo)簽有一個(gè)type屬性，這個(gè)屬性有很多類型的取值，取值的不同決定了input標(biāo)簽的功能和外觀。
通過添加value屬性可以給輸入框設(shè)置默認(rèn)值。
通過添加checked屬性可以給選擇框設(shè)置默認(rèn)選項(xiàng)。
①明文輸入框：<input type="text">
②密文輸入框：<input type="password">
③單選框：<input type="radio">，默認(rèn)情況下單選框不會互斥，要想單選框互斥，則必須給每一個(gè)單選框設(shè)置一個(gè)name屬性，然后name屬性必須設(shè)置相同的值。
④多選框：<input type="checkbox">
⑤普通按鈕：<input type="button">，可以通過value屬性來給按鈕指定標(biāo)題。
作用：配合JS完成一些操作。
⑥圖片按鈕：<input type="image" src="圖片資源">
作用：配合JS完成一些操作。
⑦重置按鈕：<input type="reset">，可以通過value屬性修改默認(rèn)的按鈕標(biāo)題。
作用：用來清空表單中已經(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屬性，通過action屬性指定需要提交到的服務(wù)器地址；
2、需要給提交到服務(wù)器的表單元素添加一個(gè)name屬性，除了按鈕類型的input標(biāo)簽以外，其它類型的標(biāo)簽都可以通過value屬性來指定提交到服務(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)容；
②可以通過給option標(biāo)簽添加一個(gè)selected屬性來指定列表的默認(rèn)值；
③可以通過給option標(biāo)簽包裹一層optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)分類。
（3）textarea標(biāo)簽：文本域，定義一個(gè)多行輸入框。
格式：<textarea></textarea>
注意點(diǎn)：
①默認(rèn)情況下，輸入框可以無限換行，有自己的寬度和高度；
②可以通過cols屬性和rows屬性來指定輸入框的寬度和高度，但是雖然指定了列數(shù)和行數(shù)，還是可以無限往下輸入；
③默認(rèn)情況下輸入框是可以手動(dòng)拉伸的，可以通過CSS樣式{resize:none;}來控制文本域不可手動(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">，可以通過日歷來選擇時(shí)間。
⑤<input type="color">，可以通過取色板來選擇顏色。
label標(biāo)簽
默認(rèn)情況下，文字和輸入框是沒有關(guān)聯(lián)關(guān)系的，即點(diǎn)擊文字輸入框不會聚焦，要想讓文字和輸入框綁定在一起，可以使用label標(biāo)簽。
綁定方式：
第一種：
①將文字用label標(biāo)簽包裹起來；
②給輸入框添加一個(gè)id屬性；
③在label標(biāo)簽中通過for屬性和輸入框中的id值進(jìn)行綁定即可。
第二種：用label標(biāo)簽將文字及輸入框同時(shí)包裹起來。
datalist標(biāo)簽
作用：給輸入框綁定待選項(xiàng)。
格式：
<datalist>
? ? <option>待選項(xiàng)內(nèi)容</option>
</datalist>
綁定方式：
①建立一個(gè)datalist列表，并給其添加一個(gè)id屬性；
②給需要綁定的輸入框添加一個(gè)list屬性，將datalist列表的id對應(yīng)的值賦值給需要綁定的輸入框中的list屬性即可。
fieldset標(biāo)簽
作用：可以給表單添加一個(gè)邊框。可以通過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)情況下不會自動(dòng)播放。
③controls屬性：用于告訴video標(biāo)簽是否需要顯示控制條。
④poster屬性：用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片。
⑤loop屬性：用于告訴video標(biāo)簽視頻是否需要循環(huán)播放，一般用于做廣告視頻。
⑥preload屬性：預(yù)加載視頻，與autoplay屬性沖突，如果設(shè)置了autoplay屬性，則preload屬性就會失效。
⑦muted屬性：靜音。
⑧width屬性/height屬性：設(shè)置視頻的寬度/高度。
注意點(diǎn)：通過video標(biāo)簽的第二種格式可以指定所有瀏覽器都支持的視頻格式，但前提是瀏覽器必須支持html5標(biāo)簽，否則同樣無法播放。有部分瀏覽器是不支持html5標(biāo)簽的，為了使這部分瀏覽器也能夠通過video標(biāo)簽來播放視頻，可以通過一個(gè)JS的框架html5media來實(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)簽來描述概要信息，利用details標(biāo)簽來描述詳情信息。默認(rè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，即無限滾動(dòng)。
④behavior：設(shè)置滾動(dòng)類型，slide滾動(dòng)到邊界就停止，alternate滾動(dòng)到邊界就彈回。
注意點(diǎn)：marquee標(biāo)簽不是W3C推薦的標(biāo)簽，無法在W3C官方文檔中查詢這個(gè)標(biāo)簽，但是各大瀏覽器對這個(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è)作用，就是用來添加語義，而早期的HTML標(biāo)簽中有一部分是沒有語義的，是用來修改樣式的，所以這部分標(biāo)簽就被淘汰了。如br標(biāo)簽、hr標(biāo)簽、font標(biāo)簽、b標(biāo)簽、u標(biāo)簽、i標(biāo)簽、s標(biāo)簽等。在開發(fā)中，一般情況下不要使用這些標(biāo)簽。一定要使用時(shí)，一般情況下都是用來作為CSS的鉤子來使用。
①strong標(biāo)簽：定義重要性強(qiáng)調(diào)的文字，用來替換b標(biāo)簽。
②ins標(biāo)簽：定義插入的文字，用來替換u標(biāo)簽。
③em標(biāo)簽：定義強(qiáng)調(diào)的文字，用來替換i標(biāo)簽。
④del標(biāo)簽：定義被刪除的文字，用來替換s標(biāo)簽。
常用字符實(shí)體
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西要想顯示出來就必須通過字符實(shí)體。
① ：空格，一個(gè) 就是一個(gè)空格，有多少個(gè) 就有多少個(gè)空格。
②<：小于符號，<。
③>：大于符號，>。
④©：版權(quán)符號，?。
⑤"：雙引號，"。
⑥&：and符號，&。
HTML標(biāo)簽分類
HTML用于描述功能的符號稱為“標(biāo)記”， 標(biāo)記（也叫元素/標(biāo)簽）分為：
①非封閉類型標(biāo)記，也叫做空標(biāo)記，或者單標(biāo)記/單標(biāo)簽：只有開始標(biāo)簽沒有結(jié)束標(biāo)簽，也就是由一個(gè)<>組成的，不能包含內(nèi)容。
②封閉類型標(biāo)記（雙標(biāo)記/雙標(biāo)簽）：有開始標(biāo)簽和結(jié)束標(biāo)簽，也就是由一個(gè)<>和一個(gè)</>組成的，必須成對出現(xiàn)。
HTML注釋
注釋可以用來解釋某一段程序或某一行代碼是什么意思，方便程序員之間的交流。適當(dāng)?shù)淖⑨尶梢宰尦绦蚋涌勺x。
注意點(diǎn)：注釋的內(nèi)容并不會在網(wǎng)頁中顯示，注釋只在編輯文檔情況下可見。
DTD文檔聲明
由于html有很多個(gè)版本的規(guī)范，每個(gè)版本的規(guī)范之間又有一定的差異，所以為了讓瀏覽器能夠正確的編譯／解析／渲染我們的網(wǎng)頁，需要在html文件的第一行告訴瀏覽器，當(dāng)前這個(gè)頁面是用哪一個(gè)版本的html規(guī)范來編寫的，瀏覽器知道了是用哪一個(gè)版本的規(guī)范來編寫之后，它就能夠正確的編譯／解析／渲染網(wǎng)頁。
DTD文檔聲明注意點(diǎn)：
①任何一個(gè)標(biāo)準(zhǔn)的HTML網(wǎng)頁，第一行一定是DTD文檔聲明，即DTD文檔聲明必須寫在HTML的第一行；
②DTD文檔聲明不區(qū)分大小寫；
③DTD文檔聲明不是一個(gè)標(biāo)簽；
④DTD文檔聲明的作用是用于告訴瀏覽器網(wǎng)頁是用哪一個(gè)版本的標(biāo)準(zhǔn)編寫的，以便于瀏覽器解析和渲染，但是瀏覽器并不是完全依賴于DTD文檔聲明，瀏覽器有一套屬于自身的機(jī)制，即DTD文檔聲明不寫網(wǎng)頁也能正常運(yùn)行，但是由于W3C規(guī)定第一行必須寫上DTD文檔聲明。
DTD文檔聲明格式：
html5的DTD文檔聲明格式（向下兼容）
<!DOCTYPE html>
路徑問題
1、相對路徑：
相對路徑就是每次都從.html文件所在的文件夾開始查找。
相對路徑下的情況：
①同級：需要的資源和.html文件存儲在同一個(gè)文件夾中；
②下級：存儲資源的文件夾和.html文件在同一個(gè)文件夾中；
③上級：存儲資源的位置和存儲.html文件的文件夾在同一文件夾中，使用../代表從當(dāng)前位置找到上一級文件夾。
2、絕對路徑：
絕對路徑就是每次都從指定的盤符開始查找。
注意點(diǎn)：
①路徑中不要出現(xiàn)中文，否則可能出現(xiàn)未知問題；
②如果是通過相對路徑來指定，那么不能跨盤符；
③開發(fā)中需要編寫路徑，統(tǒng)一使用反斜杠/，不使用正斜杠\，因?yàn)槠渌僮飨到y(tǒng)中路徑都是使用反斜杠/，如果使用正斜杠\，可能會引發(fā)問題；
④開發(fā)中一般不會使用絕對路徑，因?yàn)榭梢浦残圆缓谩?/p>
CSS基礎(chǔ)
CSS的作用：用來修改樣式。
格式：
<style type="text/css">
? ? 標(biāo)簽名稱{
? ? ? ? 屬性名稱:屬性對應(yīng)的值;
? ? ? ? ......
? ? }
</style>
注意點(diǎn)：
①style標(biāo)簽必須寫在head標(biāo)簽之間；
②style標(biāo)簽中的type屬性可以寫可以不寫，默認(rèn)就是type="text/css"；
③設(shè)置樣式時(shí)必須按照固定的格式來設(shè)置，{key:value;}，其中:不能省略，分號大多數(shù)情況下也不能省略。
CSS樣式的三種寫法
①內(nèi)聯(lián)樣式：使用style作為屬性，樣式語句作為屬性值。
②外聯(lián)樣式：外部的樣式文件通過HTML的link元素連接到HTML文檔中。
③嵌入樣式：使用<style>標(biāo)記把樣式代碼插入到頁面的<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)：通過font-size設(shè)置大小一定要帶單位，即一定要寫px。
規(guī)定文字字體的屬性font-family
注意點(diǎn)：
①如果取值是中文，需要用雙引號或者單引號括起來；
②設(shè)置的字體必須是用戶電腦里已經(jīng)安裝的字體，如果設(shè)置的字體不存在，那么系統(tǒng)會使用默認(rèn)的字體（宋體）來顯示；
③如果設(shè)置的字體不存在，又不想用默認(rèn)的字體來顯示時(shí)，可以給字體設(shè)置備選方案，格式：{font-family:"字體1","備選字體1",....;}；
④中文字體可以處理英文，英文字體不能處理中文，如果想給中文和英文分別單獨(dú)設(shè)置字體，那么英文的字體必須寫在中文的前面。
開發(fā)中最常見的字體：
①中文：宋體（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? ? 無，最常見的用途就是用于去掉超鏈接的下劃線
文本水平對齊的屬性text-align
取值：
①left? ? 向左對齊
②right? ? 向右對齊
③center? ? 居中
文本縮進(jìn)的屬性text-indent
單位：em，一個(gè)em代表縮進(jìn)一個(gè)文字的寬度，最常用為2em。
顏色控制屬性color
取值：
①英文單詞
注意點(diǎn)：一般情況下常見的顏色都有對應(yīng)的英文單詞，但不是所有的顏色都能夠通過英文單詞來表達(dá)。
②rgb
格式：rgb(值,值,值)
注意點(diǎn)：rgb其實(shí)就是三原色，r（red紅色），g（green綠色），b（blue藍(lán)色），格式中的每個(gè)數(shù)字對應(yīng)用來設(shè)置對應(yīng)三原色中的光源元件顯示的亮度，取值范圍為0~255之間，0代表不發(fā)光，255代表發(fā)光，值越大就越亮。三個(gè)值越小就越偏黑色，越大就越偏白色。
③rgba
格式：rgb(值,值,值,透明度取值)
注意點(diǎn)：相對于rgb多了一個(gè)透明度，取值為0~1之間，取值越小就越透明。
④十六進(jìn)制
在前端開發(fā)中通過十六進(jìn)制來表示顏色，其本質(zhì)就是RGB，十六進(jìn)制中是通過每兩位表示一個(gè)顏色。
⑤十六進(jìn)制縮寫
在CSS中只要十六進(jìn)制的顏色每兩位的值都是一樣的，就可以簡寫為一位。
注意點(diǎn)：
①如果當(dāng)前顏色對應(yīng)的兩位數(shù)字不一樣，那么就不能簡寫；
②如果兩位相同的數(shù)字不是屬于同一個(gè)顏色的，那么也不能簡寫。
補(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ò)的地址；
②如果圖片的大小沒有標(biāo)簽的大小大，那么會自動(dòng)在水平和垂直方向平鋪和填充；
③如果網(wǎng)頁上出現(xiàn)了圖片，那么瀏覽器會再次發(fā)送請求獲取圖片；
④同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片，如果顏色和圖片同時(shí)存在，那么圖片會覆蓋顏色。
設(shè)置背景圖片平鋪方式屬性background-repeat
取值：
①repeat 默認(rèn)取值，在水平和垂直方向都需要平鋪
②no-repeat 在水平和垂直方向都不需要平鋪
③repeat-x 只在水平方向需要平鋪
④repeat-y 只在垂直方向需要平鋪
應(yīng)用場景：可以通過背景圖片的平鋪來降低圖片的大小，提升網(wǎng)頁的訪問速度。
控制背景圖片的位置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)情況下背景圖片會隨著滾動(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)值，會隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
②fixed 不會隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
背景圖片和插入圖片的區(qū)別：
①背景圖片僅僅是一個(gè)裝飾，不占位，插入圖片占位；
②背景圖片有定位屬性，可以控制圖片的位置，插入圖片沒有定位屬性；
③插入圖片的語義比背景圖片的語義要強(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í)針來賦值的；
②取值為上右下，取值省略左時(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)簽占有的寬度和高度會發(fā)生變化；
②當(dāng)標(biāo)簽設(shè)置背景顏色時(shí)，內(nèi)邊距也會有背景顏色。
格式：
（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í)，外邊距是沒有背景顏色的。
格式：
（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)情況下外邊距是不會疊加的，會出現(xiàn)合并現(xiàn)象，誰的外邊距比較大就聽誰的。
外邊距合并常見兩種情況：
①當(dāng)兩個(gè)元素為父子關(guān)系時(shí)，它們的上下邊距會發(fā)生合并現(xiàn)象，合并后的外邊距大小等于合并前外邊距高的元素的外邊距。
解決方法：
?給父級元素一個(gè)overflow:hidden;
?讓子級元素浮動(dòng)。
②當(dāng)兩個(gè)元素為兄弟關(guān)系時(shí)，哥哥的下外邊距與弟弟的上外邊距會發(fā)生合并現(xiàn)象，合并后的外邊距大小等于合并前外邊距高的元素的外邊距。
解決方法：讓所有同級元素浮動(dòng)。
注意點(diǎn)：外邊距的合并一般只發(fā)生在上下不發(fā)生在左右，元素左右的外邊距可以疊加。
盒子模型：
（1）內(nèi)容的寬度和高度
通過標(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è)盒子也會被頂下來，如果外面的盒子不想被一起頂下來，那么可以給外面的盒子添加一個(gè)邊框?qū)傩裕?/p>
②開發(fā)中，一般情況下如果需要考慮嵌套關(guān)系盒子之間的距離，應(yīng)該首先考慮padding，其次再考慮margin，margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的；
③在嵌套關(guān)系的盒子中，可以利用margin:0 auto;的方式來讓里面的盒子在外面的盒子中水平居中，margin:0 auto;只對水平方向有效，對垂直方向無效。
盒子居中和內(nèi)容居中
text-align:center;作用：設(shè)置盒子中存儲的文字/圖片水平居中。
margin:0 auto;作用：讓盒子自身水平居中。
清空默認(rèn)邊距（外邊距和內(nèi)邊距）
①在開發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等，編寫代碼之前通常會清空默認(rèn)的邊距；
②清空默認(rèn)的邊距的方式：
*{
? ? margin:0;
? ? padding:0;
}
注意點(diǎn)：通配符選擇器會遍歷當(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)是垂直居中的；
②開發(fā)中，經(jīng)常將盒子的高度和行高設(shè)置為一樣，這樣可以保證一行文字在盒子的高度中是垂直居中的；
③開發(fā)中，如果一個(gè)盒子中有多行文字，就不能使用設(shè)置行高等于盒子高來實(shí)現(xiàn)讓文字垂直居中，只能通過設(shè)置padding來讓文字垂直居中。
注意點(diǎn)：
①在開發(fā)中，如果一個(gè)盒子中存儲的是文字，一般情況下會以盒子左邊的內(nèi)邊距為基準(zhǔn)，不會以右邊的內(nèi)邊距為基準(zhǔn)，因?yàn)橛疫叺膬?nèi)邊距有誤差（右邊如果放不下一個(gè)文字時(shí)，文字就會換行顯示，所以文字和右內(nèi)邊距之間的距離就有了誤差）；
②頂部的內(nèi)邊距并不是邊框到文字頂部的距離，而是邊框到行高頂部的距離。
overflow:hidden;屬性
作用：
①可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉；
②清除浮動(dòng)影響；
③在嵌套的盒子中，可以通過給外面的盒子設(shè)置overflow:hidden;讓里面的盒子設(shè)置margin-top之后外面的盒子不被頂下來。
不透明度opacity
用于設(shè)置元素的不透明度，默認(rèn)取值為1。
取值為1時(shí)完全不透明，取值為0時(shí)完全透明。
流動(dòng)對齊方式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名稱找到對應(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ù)字開頭，也不能是html標(biāo)簽的名稱。
類選擇器
作用：根據(jù)指定的類名稱找到對應(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ù)字開頭，也不能是html標(biāo)簽的名稱；
⑤在html中每個(gè)標(biāo)簽可以同時(shí)綁定多個(gè)類名。
id選擇器和類選擇器的區(qū)別：
①一個(gè)html標(biāo)簽只能綁定一個(gè)id名稱，但可以綁定多個(gè)class名稱；
②id名稱不可以重復(fù)，class名稱可以重復(fù)；
③id選擇器以#開頭，class選擇器以.開頭；
④一般情況下id是給JS使用的，不使用id去設(shè)置樣式。
后代選擇器
作用：找到指定標(biāo)簽的所有后代標(biāo)簽，設(shè)置屬性。
格式：
標(biāo)簽名稱1? ? 標(biāo)簽名稱2{
? ? 屬性:值;
}
注意點(diǎn)：
①后代選擇器必須用空格隔開；
②后代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標(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)：
①子元素選擇器只會查找兒子，不會查找其它被嵌套的標(biāo)簽；
②子元素選擇器之間需要用>符號連接，并且不能有空格；
③子元素選擇器不僅僅可以使用標(biāo)簽名稱，還可以使用其它選擇器；
④子元素選擇器可以通過>符號一直延續(xù)下去。
后代選擇器和子元素選擇器的區(qū)別：
①后代選擇器使用空格作為連接符號，子元素選擇器使用>作為連接符號；
②后代選擇器會選中指定標(biāo)簽中所有的特定后代標(biāo)簽，子元素選擇器只會選中指定標(biāo)簽中所有特定的直接標(biāo)簽。
后代選擇器和子元素選擇器的共同點(diǎn)：
①后代選擇器和子元素選擇器都可以通過使用標(biāo)簽名稱/id名稱/class名稱來作為選擇器；
②后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續(xù)下去。
交集選擇器
作用：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性。
格式：
選擇器1選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①選擇器和選擇器之間沒有任何符號；
②選擇器可以使用標(biāo)簽名稱/id名稱/class名稱。
并集選擇器
作用：給所有選擇器選中的標(biāo)簽設(shè)置屬性。
格式：
選擇器1,選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①并集選擇器必須使用,來連接；
②選擇器可以使用標(biāo)簽名稱/id名稱/class名稱。
兄弟選擇器
（1）相鄰兄弟選擇器（CSS2）
作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性。
格式：
選擇器1+選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①相鄰兄弟選擇器必須通過+連接；
②相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開的標(biāo)簽。
（2）通用兄弟選擇器（CSS3）
作用：給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性。
格式：
選擇器1~選擇器2{
? ? 屬性:值;
}
注意點(diǎn)：
①通用兄弟選擇器必須用~連接；
②通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽，無論有沒有被隔開都可以。
序選擇器（CSS3中新增的最具代表性的選擇器）
（1）同級別
:first-child????選中同級別中的第一個(gè)標(biāo)簽
:last-child????選中同級別中的最后一個(gè)標(biāo)簽
:nth-child(n)? ? 選中同級別中的第n個(gè)標(biāo)簽
:nth-last-child(n)? ? 選中同級別中的倒數(shù)第n個(gè)標(biāo)簽
:only-child? ? 選中父元素中唯一的元素
:nth-child(odd)? ? 選中同級別中的所有奇數(shù)標(biāo)簽
:nth-child(even)? ? 選中同級別中的所有偶數(shù)標(biāo)簽
:nth-child(xn+y)? ? x和y是用戶自定義的，而n是一個(gè)計(jì)數(shù)器，從0開始遞增
注意點(diǎn)：不區(qū)分類型。
（2）同類型
:first-of-type? ? 選中同級別中同類型的第一個(gè)標(biāo)簽
:last-of-type? ? 選中同級別中同類型的最后一個(gè)標(biāo)簽
:nth-of-type(n)? ? 選中同級別中同類型的第n個(gè)標(biāo)簽
:nth-last-of-type(n)? ? 選中同級別中同類型的倒數(shù)第n個(gè)標(biāo)簽
:only-of-type? ? 選中父元素中唯一類型的某個(gè)標(biāo)簽
:nth-of-type(odd)? ? 選中同級別中同類型的所有奇數(shù)標(biāo)簽
:nth-of-type(even)? ? 選中同級別中同類型的所有偶數(shù)標(biāo)簽
:nth-of-type(xn+y)? ? x和y是用戶自定義的，而n是一個(gè)計(jì)數(shù)器，從0開始遞增
屬性選擇器
作用：根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽，然后設(shè)置屬性。
格式：
①[屬性名稱]
作用：根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽，然后設(shè)置屬性。
②[屬性名稱=值]
作用：找到有指定屬性，并且屬性的取值等于指定值的標(biāo)簽，然后設(shè)置屬性。（最常見的應(yīng)用場景就是用于區(qū)分input標(biāo)簽屬性）
③屬性的取值是以什么開頭的
[屬性|=值]（CSS2）
[屬性^=值]（CSS3）
兩者之間的區(qū)別：
CSS2中的只能找到指定值開頭并且指定值是被-和其它內(nèi)容隔開的。
CSS3中的只要是以指定值開頭的都可以找到，無論有沒有被-隔開。
④屬性的取值是以什么結(jié)尾的
[屬性$=值]（CSS3）
⑤屬性的取值是否包含某個(gè)特定的值
[屬性~=值]（CSS2）
[屬性*=值]（CSS3）
兩者之間的區(qū)別：
CSS2中只能找到獨(dú)立的單詞，也就是包含指定值，并且指定值是被空格隔開的。
CSS3中只要包含指定值就可以找到。
通配符選擇器
作用：給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性。
格式：
*{
? ? 屬性:值;
}
注意點(diǎn)：由于通配符選擇器時(shí)設(shè)置界面上所有的標(biāo)簽的屬性，所以在設(shè)置之前會遍歷所有的標(biāo)簽，如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會比較差。
偽元素選擇器
作用：給指定標(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開頭的屬性才可以繼承；
②在CSS的繼承中只要是后代都可以繼承；
③a標(biāo)簽的文字顏色和下劃線顏色是不能繼承的；
④h標(biāo)簽的文字大小是不能繼承的。
應(yīng)用場景：一般用于設(shè)置網(wǎng)頁上的一些共性信息。
層疊性
作用：層疊性就是CSS處理沖突的一種能力。
注意點(diǎn)：
①層疊性只有在多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且設(shè)置了相同的屬性，才會發(fā)生層疊性。
優(yōu)先級
作用：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊由優(yōu)先級來確定。
優(yōu)先級判斷的三種方式：
①是否是直接選中（間接選中就是指繼承）
如果是間接選中，那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的。
②相同選擇器
如果都是直接選中，并且都是同類型的選擇器，那么誰寫在后面就聽誰的。
③不同選擇器
如果都是直接選中，并且不是相同類型的選擇器，那么就按照選擇器的優(yōu)先級來層疊。
id>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
important
作用：用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級的，可以將被指定的屬性的優(yōu)先級提升為最高。
注意點(diǎn)：
①important只能用于直接選中，不能用于間接選中；
②通配符選擇器選中的標(biāo)簽也是直接選中的；
③!important只能提升被指定的屬性的優(yōu)先級，其它屬性的優(yōu)先級不會被提升；
④!important必須寫在屬性值的分號前面，而且前面的感嘆號不能省略。
優(yōu)先級的權(quán)重
作用：當(dāng)多個(gè)選擇器混合在一起使用時(shí)，可以通過計(jì)算權(quán)重來判斷誰的優(yōu)先級最高。
權(quán)重的計(jì)算規(guī)則：
①首先先計(jì)算選擇器中有多少個(gè)id，id多的選擇器優(yōu)先級最高；
②如果id的個(gè)數(shù)一樣，再看類名的個(gè)數(shù)，類名個(gè)數(shù)多的優(yōu)先級最高；
③如果類名的個(gè)數(shù)一樣，再看標(biāo)簽名稱的個(gè)數(shù)，標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級最高；
④如果id個(gè)數(shù)、類名個(gè)數(shù)、標(biāo)簽名稱個(gè)數(shù)都一樣，誰寫在后面聽誰的。
注意點(diǎn)：只有選擇器直接選中的標(biāo)簽才需要計(jì)算權(quán)重。
CSS元素顯示模式
在html中html將所有標(biāo)簽分為兩類，分別是容器級和文本級；
在css中css將所有標(biāo)簽分為兩類，分別是塊級元素和行內(nèi)元素。
塊級元素和行內(nèi)元素的區(qū)別：
①塊級元素會獨(dú)占一行，行內(nèi)元素不會獨(dú)占一行；
②塊級元素如果沒有設(shè)置寬度，那么默認(rèn)和父元素一樣寬，設(shè)置了寬高，就按照設(shè)置的來顯示；
③行內(nèi)元素是不可以設(shè)置寬度和高度的，大小由內(nèi)部填充物決定。
行內(nèi)塊元素：能夠讓元素既能夠不獨(dú)占一行，又可以設(shè)置寬度和高度。
塊級元素：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 塊級
②inline 行內(nèi)
③inline-block行內(nèi)塊
CSS精靈圖
CSS精靈圖是一種圖像合成技術(shù)。
作用：可以減少圖片請求的次數(shù)，以及可以降低服務(wù)器處理壓力。
使用方式：CSS的精靈圖需要配合背景圖片和背景定位來使用。
