基本內容：

html超文本標記語言。

頁面組成：

html>//版本聲明

//萬國碼——gb1312解決中文亂碼

</b><b>標題//標題內容，不可以和萬國碼調換順序

//關鍵字，

//描述，搜索時出現在搜索頁面的詳情

一．行標簽和塊標簽

html標簽分為塊和行標簽

塊標簽（獨占一行）（7個）

1iv：沒有語意，主要用來布局，可以放入行標簽或者塊標簽

2.h1—h6：一級標簽，字體最大，六級字最小，在其中嵌套div不推薦使用

3.ul：無序列表，ol：有序列表。其中要嵌套li。只能出現li，不能寫div。在li中都可以嵌入。ul和ol的第一級子元素只能是li

4.]dl：解釋說明

標題

解釋標題

dl中的第一級子元素只能是dt和dd。dt中不能包含塊標簽，dd中可以包含任意嵌套

5.p：定義段落，不能嵌套div等其他，除br外

6.table

7.br：換行

style里寫屬性，用“”框起來。

行標簽（在一行顯示）在行內顯示，不能設置寬高，img、input和textarea除外。（9）行標簽可以嵌套行標簽，不能嵌套塊標簽。

特殊的：p、h1-h6、dt不能嵌套塊標簽。必要時可以用a來嵌套div實現點擊塊的跳轉

1.[span：無實意，隨便寫內容，類似div。span中可以嵌套span。

2.a：超鏈接，寫網址或者本地的頁面。../跳出當前文件夾找，nn/進去某個文件夾找（nn文件夾的名字）

target=“blank”，新建一個頁面加載鏈接。self是在原來頁面上加載鏈接。

a的錨點設置：鏈接到頁面的某個部位。在下面內容的id中寫入，在a中的href要寫成#id，要和上面的id一致。

3.img：插入圖片。不在同一文件夾下，需要按照a中的尋找規則在圖片名字前加上名字或者../也可以用網上的圖片。找到網絡上的所需圖片的路徑，粘貼。alt：在圖片不能正常顯示時，所顯示的備用內容。title：在鼠標放在圖片上的時候顯示的文字。

4.var/em

:斜體效果。var標記變量，em標記重點，起強調作用，但是偏重于順序閱讀。

5.strong：加粗效果，起強調作用，但偏重于無順序。

6.textarea：多行文本框，cols屬性因為存在瀏覽器的兼容問題，直接使用width屬性。

7.[select：下拉列表。中間要寫option，只能寫option。

在選擇前的默認值：在select中加上selected：“selected”用于選中默認的選項。

8.input：text：明文輸入

password：密碼

value：默認值，會顯示在頁面上

button：普通按鈕，

submit：提交數據，

checkbox：多選，正常使用時，name也要保持一致。在選擇前默認選中某一個：在后面加上checked：“checked”。

radio：單選，其中的name屬性必須一致radio。

label：點文字也可以勾選

file：上傳文件。

reset：重置，把已經寫入的內容清空。

hidden：隱藏，有默認值，提交時會發送給后臺。在頁面上看不到效果。

img：可以以圖片來替代

在input中輸入時，可以用outline來取消點擊時的外邊框。

美國for要和id一致，label嵌套在input外

特殊符號

空格： 大于：>小于：<引號："版權號：?

補充：

selected針對select用于選中默認的選項

checked針對check用于選中默認的選項

label：點文字也可以勾選

for要和id一致，label嵌套在input外

二．表單 表格 書寫規范

1.表單form（特殊塊標簽）textarea，select，input

method：發送方式

action：提交地址

表單中的提交按鈕必須用submit

2.iframe：引用網頁。在頁面中直接在框里運行輸入的網址。frameborder的值只有1/0兩種。可以鏈接本地或者外部網址。

3.table：tr-行th-表頭（加粗）td-列caption-表頭標題

邊框屬性border=“n”

cellspacing：消除單元格之間的縫隙

cellpadding：單元格內容與單元格邊框的內邊距

style=“border-collapse：collapse”：合并邊框

簡寫方式：tr*n>td*m按Tab鍵。

colspan：跨列，后面的數字跨幾列寫幾。

rowspan：跨行，后面的數字跨幾列寫幾。還需要刪除多余的列或行

table的優化thead，tbody，tfoot。寫的時候先th，tf，tb

注意書寫規范！！！注意換行，標簽縮進，減少字符，屬性不為空，常加注釋，英文書寫，合理嵌套,不留多余空白。

SEO搜索引擎優化

合理利用搜索引擎重視的標簽

（title，strong，h1-h3，a，em，img&alt）

三．css入門

css增加屬性：

cursor：pointer。手的形狀/ move。可以移動的十字箭頭

web的標準構成：HTML（結構）.CSS（樣式）.JS（行為）

1.css引入方法（層疊樣式表）

外部，頭部，標簽內引入

外部引入：link，在href中寫文件名。@import：導入樣式，兼容性不好。不推薦使用。

特點：一個css可以控制多個頁面。便于改版。減少代碼量，使其簡潔規范。有效利用緩存機制。缺點：相對于單頁有垃圾代碼。外部引入的會給服務器造成請求壓力。常用于訪問大量的頁面。

頭部引入：在head中加style，在其中寫要控制的內容。

特點：速度快，沒有服務器請求壓力。相對于外部引入單頁代碼量少。 缺點：不易于改版。代碼較亂，不易于前后臺溝通。常用于訪問量大的網頁百度新浪網易等。

標簽內引入：在標簽后直接寫style：“ ”在引號中寫所需的屬性。

特點：優先級最高。缺點：冗余代碼多，代碼量大，不利于維護。常用于個別屬性。

2.基礎語法：選擇器{屬性：值；屬性：值；}

3.基本css樣式：

color：red；顏色

font-size：1px；字體大小

background-color：red；背景顏色

margin:盒模型的外邊距

border：red；邊框

width height：15px；長寬

4.css特點：

頁面內容與表現形式分離，可以很好地控制頁面布局，提高網頁加載速度，符合現在w3c的標準，易于維護和改版。

5.css選擇器（ID，類，標簽名，群組，后代選擇器）

ID選擇器：優先級最高，頁面中不能有相同id出現。不能以數字開頭。在所要設置的標簽中加入屬性id=“n”。引入時#n{樣式}

類選擇器：優先級僅次于id選擇器。在一個頁面中可以有多個相同的類名。不能以數字開頭。

在所要設置的標簽中加入class=“n”。引入時.n{樣式}

標簽名選擇器：同時控制同一標簽 使用時：標簽名{樣式}

群組選擇器：把幾個id，class名相同的取出來，寫在一起。引入時id還用#n，類還是用.n，標簽就用標簽，中間用，隔開（英文狀態下的逗號）。為了節省代碼這么用。

后代選擇器：使用多個選擇器的組合來找到具體

從最外層的父級一直寫到需要控制的那一個停止。

優先級：標簽內樣式>id>class>標簽名

權重值：標簽：1，類：10，id：100，可以在無法判斷是計算。

無論多少個標簽選擇器都比不過一個類選擇器

無論多少個類選擇器都比不過一個id選擇器

無論多少個id選擇器都比不過一個標簽內引入

不能拿群組和其他的比較

四．文字和背景設置

文字設置（5）

1.文字設置基本命令：font-family：設置字體。后面可以接多種字體，以防之前的字體沒有時顯示加載后面的字體。建議中文頁面以宋體為主，英文頁面以Arail/Tahoma。中英混合時主用英文字體。特殊字體用圖片。

2.文字大小：font-size：px/百分數/em。瀏覽器默認16px大小，em：16px=1em。谷歌瀏覽器中默認字體最小為12px。em的數字是依據父級的大小來變化。

3.字體風格：font-style；normal：常規字體，oblique：斜體，文本原本狀態上傾斜。itailc：斜體，將字母的寫法改變一些。

4.字體粗細：font-weight；normal/bold/bolder/lighter/number（0-1000之間的整數）。bold和bolder基本沒有區別，lighter和原始現實的基本沒區別，加數字時寫整數。

5.color：字體顏色。單詞|RGB。可以簡寫：減少f和0.

6.字體屬性的合寫：順序-font：font-style|font-weight|font-size|font-family.

文本設置（9）

7.文本修飾屬性設置：text-decoration：underline(下劃線)/none(取消原有的)/line-through(字體上的劃線)/overline(上劃線)

8.設置行高line-height。可以讓單行的文字居中。

9.文本縮進：text-indent。設置時不要固定寫多少px，寫成不固定的em。單位rem根據根元素(html中的設置)設置的字號，縮進長度。

em和rem的區別。em找父級，rem找html

10.文本水平對齊設置：text-align：left/right/center/justify(兩端對齊)。center可以用于標簽居中。不可大面積濫用。只對于大部分的行標簽有用。

11.文本垂直居中設置：vertical-align:top/bottom/middle；針對于table比較有用。table對該屬性的支持性較好，div不支持。

12詞間隔和字母間隔：word-spacing：字詞之間的間距。用于英文狀態。letter-spacing：字字之間的間距，單獨的字符。中文狀態。

13.字符轉換：text-tranform：none/uppercase(全大寫)/lowercase(全小寫)/capitalize(首字母大寫)。用的比較少。

14.處理空白符：white-space:normal/pre(按照編譯器中所寫入的格式)/nowrap(不讓其自動換行)/pre-wrap(留下格式并且自動換行)/pre-line(換行)

15.處理列表ul/ol：list-style-type:屬性很多，也可以加自定義的圖片—list-style-img-url（圖片的路徑）。

背景設置（5）

16景顏色：background-color：英文/十六進制。transparent有透明的意思，多用于設置input的框內顏色。

7.背景圖片：background-image：none/url（圖片路徑）

18.背景圖重復設置：background-repeat:no-repeat(不重復)/repeat-x(x軸平鋪)/repeat-y(y軸平鋪)

19.背景圖片定位：y軸的正方向是從瀏覽器的左上角向下的方向，x軸正方向為向右的方向。left right center(相對正中心的位置) top bottom。也可寫成百分比background-position_ _兩個數字表示橫縱坐標，數字可正可負，來顯示圖片的局部。也可以用百分比來定位，

20.背景圖滾動設置：background-attachment：scroll(跟著下拉圖片跟著動)/fixed(跟著下拉圖片跟著不動)。

21.background的合寫形式：color url()position_ _repeat；

注：多張背景圖合成時，例如左中右的三張圖，要先寫左右再寫中間。IE9以下的瀏覽器不支持多張背景圖。

五．盒模型

css布局當中html中的元素在瀏覽器中的解析都可以被看成一個盒子，擁有盒子一樣的外形和平面空間。padding：內邊距。border：邊框。margin：外邊距。

可以強制取消瀏覽器默認加的邊框：加載css中—*{margin:0;padding:0;}，其中*是一個通配符，可以選中頁面內的所有標簽。

1.margin:（外邊距）px，%，-x。

分為上下左右:top bottom left right。在豎向時若兩個都有，取大的那個值。橫向加法計算。對于行標簽，margin只對水平方向有作用，豎直方向無用。合寫形式順序：4個—上 右 下左。3個—上 左右 下，在其中將左右的數據改為auto，讓瀏覽器自動生成，對于塊標簽一定要設置寬度，才可以居中。2個—上下 左右。常用{margin：0pxauto;}。1個—上下左右。

上下方向取值，若上下都設置了，取數值大的那個

左右方向取值：數值可以疊加

IE6下的bug（橫向雙倍margin）：元素必須浮動，元素必須具有橫向，元素必須是塊標簽，必須是ie6。

問題：塌陷（條件，外有父級，內有子標簽）解決方案：加邊框，是父級隔離。 超出隱藏（overfloat hidden） 。float。給父級設內邊距padding

2.padding（內邊距）設置內與外的位置用padding，設置內與內的位置用margin。對行標簽只有水平有效，豎直無效。

分為left right top bottom，其他的寫法與margin一致。

border邊框（可以用border來畫圖形，三角形）

分為left right top bottom。可以設置單獨的邊框線，

width：寬度

style：none無邊框，solid實線，dashed虛線，dotted點線。

color：顏色

border簡寫屬性：width style color。

邊框和背景的關系：邊框中添加背景圖片，圖片會在邊框下顯示，實線時會被覆蓋。

3.display

display：block(可以使行標簽改為塊標簽，并繼承所有屬性) /inline（是塊標簽以行標簽顯示，并且繼承所有的屬性）/none (寫在哪隱藏哪的內容)。若要使其既有行屬性也有塊屬性：行內塊屬性。inline-block。（ie7不兼容這個屬性）

4.盒模型標準模式和怪異模式

標準模式的計算方法：站的空間的寬度等于內容的寬度+左右內邊距的寬度+左右邊框的寬度+左右外邊距。

怪異模式：所占空間總寬度=內容+外邊距。只看初始寬高和margin。

計算：div的寬度

div{

width：200px;

height:50px;

padding:20px;

margin:30px;

border:5px solid red;

}

怪異260px標準310px。

六．頁面布局

css布局：float（常用）position彈性布局（css3）

1.float-left/right/none;可以讓塊標簽可以在同一行顯示，能解決標簽之間有間隙的問題，圖片間的間隙也可以用這個取消（方法1：在每一個圖片里加上float方法2：將圖片寫在一行，不換行。）對于其他的標簽方法一樣。

bug，父級中的元素設置浮動后，不占有父級的空間，父級設置的高度不會顯示。設置的前后順序決定浮動的順序。要增加空的div。

浮動特性：設置浮動后

對行內標簽：使其具有行和塊的屬性，可以設置寬高，可以寫margin

padding的豎直方向上的設置

對塊標簽：使其具有行和塊的屬性，內容撐開寬高。和設置了diaplay：inline-block的效果一樣

overflow：visible（超出的內容不剪切也隱藏）/hidden（超出的內容自動隱藏），/auto（超出的添加滾動條，哪邊長哪邊加滾動條）/scroll（不論什么情況添加滾動條，改寫時可以使其只在一個方向上顯示滾動軸）

visibility：visible（元素可見）/hidden（元素不可見），屬性不會變。

浮動的原本用意是為了解決文字浮動的效果。

清除浮動：一般情況下用了浮動就要清除浮動。

可以加入clear：both

可以給父級直接設置高度來清除浮動

還可以用overflow：hidden清除浮動，父級中的所有元素必須全部浮動才可以清除

after偽元素：給父級元素加after，寫入clear：both；display：block。

布局頁面：

寬度設置100%，不給整個頁面設置高度。

先搭框架，再填充內容

基本內容一致位于整個頁面的居中位置，用margin：0px auto；

有分割線都用border設置單條邊框

七．背景三層嵌套 定位布局 透明設置

三層嵌套：三個div嵌套，最外層的平鋪，做圓角或者其他的特殊形狀框時不能切透明的圖片。優點：div高度相同，寬度外層平鋪，顯示了延展性。整個頁面的圓角相同，可以在整個頁面上使用，加快速度。

中間平鋪圖片

左邊圖片

右邊圖片

在css中寫樣式：

.outer{height:xxxpx;background:url()0 0 repeat;}

.inner-left{ height:xxxpx;background:url()left 0px no-repeat;}

.inner-right{ height:xxxpx;background:url()right 0px no-repeat;}

背景圖合并（css sprite）

可以減少服務器的請求次數，減少緩存的空間。

引入方法：現在ps中合并成一張圖片，只能合成上下的結構。

寫代碼時在背景圖片的坐標上運用x y軸找到某一個部分的位置，分別定位，依然用三層嵌套的方法。

定位布局：（就近原則，要設置的東西距離哪邊近就用哪個）

position：static不定位/relative相對定位，參照自身原來本身位置定位。原本占得空間依然存在有上下左右四個方位/absolute絕對定位，參照時如果父級沒有設置定位，就參照body，父級若設置了定位，則根據父級的位置來定位。脫離文檔流，/fixed相對于瀏覽器窗口定位。和attachment的效果相似。

父級沒有設置定位，子級會自動參照瀏覽器的邊框（body）來定位。若父級設定了定位，子級會參照父級定位的位置來定位。

定位疊加：疊加順序—最后定位的在最上面

z-index;可以讓疊加在一起的底部圖片顯示出來，不能讓子級與父級有重疊關系。

無論之前使用的什么標簽，定位之后都具有行內塊屬性。

透明度：opacity：number（0-1）0是完全透明，1是完全不透明。設置透明之后，塊內的所有元素都會半透明。

IE自己的半透明鏡：ie8一下不支持透明。需要加入filter:alpha(opacity=number)number值0-100。

rgba（0,0,0,0）四個數字：前三個是三個基本色，最大不可超過255,。第四個是透明度。只兼容到IE9以上。

透明度的兼容性要寫上普通的和兼容到ie6-8的。div{opacity：number（0-1）；filter:alpha(opacity=number）}

八．偽元素，偽類

1.reset重置。清除瀏覽器的默認樣式。一般使用reset.css文件。textarea的一個屬性-resize，使其不能自由的調節框的大小。在css文件中出現了中文，需要寫@chartset”utf-8”;來對中文進行聲明。

2.a標簽的四個偽類

(1)link。當herf中有內容，可以改變a文字的樣式。a:link{}

(2)visited。當a標簽已經被點擊過之后，可以改變樣式。a:visited{}

(3)hover。當鼠標移動到a標簽范圍時，可以改變樣式。a:hover{}

(4)active。當鼠標左鍵在a標簽點擊時，可以改變樣式。a:active{}

順序不能亂。l v h a—love hate愛恨法則。visited和hover使用較多。

hover的屬性可以對其他標簽使用。只能對父子級有用，兄弟級沒用。

display與visibility都有隱藏作用，但是none是在頁面中不占有空間，直接消失隱藏，但是visibility在頁面中占有空間內容隱藏，使用較多的是display屬性。

4.before和after偽元素（必須和content屬性連用，content用來寫需要添加的內容。）

::before在元素內容前加入內容。

::after在元素內容后加入內容。也可以用來寫背景的三層嵌套

在ie8中寫法改變為一組冒號。:before/:after.ie7不支持這個屬性。

可以用after來清除浮動。claer:both;

九．兼容性問題

1.怪異模式：沒有書寫時會觸發怪異解析現象。

2.不同瀏覽器中很多標簽的默認樣式不同。一般用reset.css文件將瀏覽器重置。

3.橫向雙倍外邊距：產生的四個條件 浮動 塊屬性標簽 有橫向的margin值 在ie6下。解決方法：給標簽加入display:inline，使其成為行標簽。

4.[默認行高：產生的條件ie6設置的文字高度超出盒模型內容區域 設置高度時會改變布局。解決辦法：加入overfloat：hidden;

5.ie6不支持透明的png圖。解決辦法：用jpg gif代替或者后期用js解決

6認高度：塊元素，沒有寫固定高度時。解決：設置固定高/height：0；overflow：hidden；

7.img外部的border。解決方法：border：none/0.

8.圖片間的默認邊距。解決方法：所有圖片都浮動 寫代碼時不換行

9.***經典3像素：條件 浮動塊元素與未浮動元素處于同一行。解決：設置非浮動元素浮動。

10.hover在ie6中只能給a標簽用。

11.ie678不支持透明opacity的屬性。用獨特的代碼代替opacity:0.6;filter:alpha(opacity=60).不支持rgba的設置。

12.不支持最大最小寬高：標簽的最低高度寬度設置。解決方法：為單獨設置hack。

hack：.color{

background-color: #CC00FF;/*所有瀏覽器都會顯示為紫色*/

background-color: #FF0000\9;/*IE6、IE7、IE8會顯示紅色*/

*background-color: #0066FF;/*IE6、IE7會變為藍色*/

_background-color: #009933;/*IE6會變為綠色*/

}

*-xxxxxx/IE7

13.子選擇器在ie6中不能使用。div>p這是子選擇器。可以用來選擇父級下的某個子級。

bug總結：常見的bug都出現在版本低的ie中。有可能bug產生于標簽的不合理使用或者css樣式使用不當。