基本內(nèi)容：

html超文本標記語言。

頁面組成：

html>//版本聲明

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

</b><b>標題//標題內(nèi)容妓美，不可以和萬國碼調(diào)換順序

//關(guān)鍵字，

//描述酬滤，搜索時出現(xiàn)在搜索頁面的詳情

一．行標簽和塊標簽

html標簽分為塊和行標簽

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

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

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

3.ul：無序列表，ol：有序列表殷绍。其中要嵌套li染苛。只能出現(xiàn)li，不能寫div主到。在li中都可以嵌入茶行。ul和ol的第一級子元素只能是li

4.]dl：解釋說明

標題

解釋標題

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

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

6.table

7.br：換行

style里寫屬性牧牢，用“”框起來看锉。

行標簽（在一行顯示）在行內(nèi)顯示，不能設(shè)置寬高塔鳍，img伯铣、input和textarea除外。（9）行標簽可以嵌套行標簽轮纫，不能嵌套塊標簽腔寡。

特殊的：p跃巡、h1-h6赁咙、dt不能嵌套塊標簽。必要時可以用a來嵌套div實現(xiàn)點擊塊的跳轉(zhuǎn)

1.[span：無實意外臂，隨便寫內(nèi)容郑兴，類似div犀斋。span中可以嵌套span。

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

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

a的錨點設(shè)置：鏈接到頁面的某個部位挽拔。在下面內(nèi)容的id中寫入辆脸，在a中的href要寫成#id，要和上面的id一致螃诅。

3.img：插入圖片啡氢。不在同一文件夾下状囱，需要按照a中的尋找規(guī)則在圖片名字前加上名字或者../也可以用網(wǎng)上的圖片。找到網(wǎng)絡(luò)上的所需圖片的路徑倘是，粘貼亭枷。alt：在圖片不能正常顯示時，所顯示的備用內(nèi)容搀崭。title：在鼠標放在圖片上的時候顯示的文字叨粘。

4.var/em

:斜體效果。var標記變量瘤睹，em標記重點升敲，起強調(diào)作用，但是偏重于順序閱讀轰传。

5.strong：加粗效果驴党，起強調(diào)作用，但偏重于無順序绸吸。

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

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

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

8.input：text：明文輸入

password：密碼

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

button：普通按鈕稿存，

submit：提交數(shù)據(jù)，

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

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

label：點文字也可以勾選

file：上傳文件腺晾。

reset：重置燕锥，把已經(jīng)寫入的內(nèi)容清空。

hidden：隱藏悯蝉，有默認值归形，提交時會發(fā)送給后臺。在頁面上看不到效果鼻由。

img：可以以圖片來替代

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

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

特殊符號

空格： 大于：>小于：<引號："版權(quán)號：?

補充：

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

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

label：點文字也可以勾選

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

二．表單 表格 書寫規(guī)范

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

method：發(fā)送方式

action：提交地址

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

2.iframe：引用網(wǎng)頁歉井。在頁面中直接在框里運行輸入的網(wǎng)址柿祈。frameborder的值只有1/0兩種×ㄖ粒可以鏈接本地或者外部網(wǎng)址躏嚎。

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

邊框?qū)傩詁order=“n”

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

cellpadding：單元格內(nèi)容與單元格邊框的內(nèi)邊距

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

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

colspan：跨列菩貌，后面的數(shù)字跨幾列寫幾卢佣。

rowspan：跨行，后面的數(shù)字跨幾列寫幾箭阶。還需要刪除多余的列或行

table的優(yōu)化thead虚茶，tbody，tfoot仇参。寫的時候先th嘹叫，tf，tb

注意書寫規(guī)范Ｕ┢埂Ｕ稚取！注意換行怕磨，標簽縮進喂饥，減少字符，屬性不為空肠鲫，常加注釋员帮，英文書寫，合理嵌套,不留多余空白导饲。

SEO搜索引擎優(yōu)化

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

（title捞高，strong，h1-h3帜消，a棠枉，em，img&alt）

三．css入門

css增加屬性：

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

web的標準構(gòu)成：HTML（結(jié)構(gòu)）.CSS（樣式）.JS（行為）

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

外部娄猫，頭部贱除，標簽內(nèi)引入

外部引入：link生闲，在href中寫文件名。@import：導(dǎo)入樣式月幌，兼容性不好碍讯。不推薦使用。

特點：一個css可以控制多個頁面扯躺。便于改版捉兴。減少代碼量，使其簡潔規(guī)范录语。有效利用緩存機制倍啥。缺點：相對于單頁有垃圾代碼。外部引入的會給服務(wù)器造成請求壓力澎埠。常用于訪問大量的頁面虽缕。

頭部引入：在head中加style，在其中寫要控制的內(nèi)容蒲稳。

特點：速度快氮趋，沒有服務(wù)器請求壓力。相對于外部引入單頁代碼量少江耀。 缺點：不易于改版剩胁。代碼較亂，不易于前后臺溝通决记。常用于訪問量大的網(wǎng)頁百度新浪網(wǎng)易等摧冀。

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

特點：優(yōu)先級最高系宫。缺點：冗余代碼多，代碼量大建车，不利于維護扩借。常用于個別屬性。

2.基礎(chǔ)語法：選擇器{屬性：值缤至；屬性：值潮罪；}

3.基本css樣式：

color：red；顏色

font-size：1px领斥；字體大小

background-color：red嫉到；背景顏色

margin:盒模型的外邊距

border：red；邊框

width height：15px月洛；長寬

4.css特點：

頁面內(nèi)容與表現(xiàn)形式分離何恶，可以很好地控制頁面布局，提高網(wǎng)頁加載速度嚼黔，符合現(xiàn)在w3c的標準细层，易于維護和改版惜辑。

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

ID選擇器：優(yōu)先級最高捧搞，頁面中不能有相同id出現(xiàn)抵卫。不能以數(shù)字開頭。在所要設(shè)置的標簽中加入屬性id=“n”胎撇。引入時#n{樣式}

類選擇器：優(yōu)先級僅次于id選擇器陌僵。在一個頁面中可以有多個相同的類名。不能以數(shù)字開頭创坞。

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

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

群組選擇器：把幾個id，class名相同的取出來题涨，寫在一起偎谁。引入時id還用#n，類還是用.n纲堵，標簽就用標簽巡雨，中間用，隔開（英文狀態(tài)下的逗號）席函。為了節(jié)省代碼這么用铐望。

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

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

優(yōu)先級：標簽內(nèi)樣式>id>class>標簽名

權(quán)重值：標簽：1茂附，類：10正蛙，id：100，可以在無法判斷是計算营曼。

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

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

無論多少個id選擇器都比不過一個標簽內(nèi)引入

不能拿群組和其他的比較

四．文字和背景設(shè)置

文字設(shè)置（5）

1.文字設(shè)置基本命令：font-family：設(shè)置字體乒验。后面可以接多種字體，以防之前的字體沒有時顯示加載后面的字體蒂阱。建議中文頁面以宋體為主锻全，英文頁面以Arail/Tahoma。中英混合時主用英文字體录煤。特殊字體用圖片鳄厌。

2.文字大小：font-size：px/百分數(shù)/em妈踊。瀏覽器默認16px大小了嚎，em：16px=1em。谷歌瀏覽器中默認字體最小為12px响委。em的數(shù)字是依據(jù)父級的大小來變化新思。

3.字體風格：font-style窖梁；normal：常規(guī)字體，oblique：斜體夹囚，文本原本狀態(tài)上傾斜纵刘。itailc：斜體，將字母的寫法改變一些荸哟。

4.字體粗細：font-weight假哎；normal/bold/bolder/lighter/number（0-1000之間的整數(shù)）。bold和bolder基本沒有區(qū)別鞍历，lighter和原始現(xiàn)實的基本沒區(qū)別舵抹，加數(shù)字時寫整數(shù)。

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

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

文本設(shè)置（9）

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

8.設(shè)置行高line-height刑枝∠闵ぃ可以讓單行的文字居中。

9.文本縮進：text-indent装畅。設(shè)置時不要固定寫多少px靠娱，寫成不固定的em。單位rem根據(jù)根元素(html中的設(shè)置)設(shè)置的字號掠兄，縮進長度像云。

em和rem的區(qū)別。em找父級蚂夕，rem找html

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

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

12詞間隔和字母間隔：word-spacing：字詞之間的間距慎菲。用于英文狀態(tài)。letter-spacing：字字之間的間距锨并，單獨的字符露该。中文狀態(tài)。

13.字符轉(zhuǎn)換：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（圖片的路徑）。

背景設(shè)置（5）

16景顏色：background-color：英文/十六進制撵摆。transparent有透明的意思底靠，多用于設(shè)置input的框內(nèi)顏色。

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

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

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

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

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

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

五．盒模型

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

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

1.margin:（外邊距）px魏蔗，%砍的，-x。

分為上下左右:top bottom left right莺治。在豎向時若兩個都有廓鞠，取大的那個值。橫向加法計算谣旁。對于行標簽床佳，margin只對水平方向有作用，豎直方向無用榄审。合寫形式順序：4個—上 右 下左砌们。3個—上 左右 下，在其中將左右的數(shù)據(jù)改為auto，讓瀏覽器自動生成浪感，對于塊標簽一定要設(shè)置寬度昔头，才可以居中。2個—上下 左右影兽。常用{margin：0pxauto;}揭斧。1個—上下左右。

上下方向取值赢笨，若上下都設(shè)置了未蝌，取數(shù)值大的那個

左右方向取值：數(shù)值可以疊加

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

問題：塌陷（條件桐筏，外有父級纸型，內(nèi)有子標簽）解決方案：加邊框，是父級隔離梅忌。 超出隱藏（overfloat hidden） 狰腌。float。給父級設(shè)內(nèi)邊距padding

2.padding（內(nèi)邊距）設(shè)置內(nèi)與外的位置用padding牧氮，設(shè)置內(nèi)與內(nèi)的位置用margin琼腔。對行標簽只有水平有效，豎直無效踱葛。

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

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

分為left right top bottom甥材。可以設(shè)置單獨的邊框線性含，

width：寬度

style：none無邊框洲赵，solid實線，dashed虛線商蕴，dotted點線叠萍。

color：顏色

border簡寫屬性：width style color。

邊框和背景的關(guān)系：邊框中添加背景圖片绪商，圖片會在邊框下顯示俭令，實線時會被覆蓋。

3.display

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

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

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

怪異模式：所占空間總寬度=內(nèi)容+外邊距雾叭。只看初始寬高和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，父級中的元素設(shè)置浮動后厨埋，不占有父級的空間邪媳，父級設(shè)置的高度不會顯示。設(shè)置的前后順序決定浮動的順序荡陷。要增加空的div。

浮動特性：設(shè)置浮動后

對行內(nèi)標簽：使其具有行和塊的屬性徽龟，可以設(shè)置寬高据悔，可以寫margin

padding的豎直方向上的設(shè)置

對塊標簽：使其具有行和塊的屬性屠尊，內(nèi)容撐開寬高讼昆。和設(shè)置了diaplay：inline-block的效果一樣

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

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

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

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

可以加入clear：both

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

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

after偽元素：給父級元素加after睬捶，寫入clear：both吗跋；display：block跌宛。

布局頁面：

寬度設(shè)置100%疆拘，不給整個頁面設(shè)置高度哎迄。

先搭框架漱挚，再填充內(nèi)容

基本內(nèi)容一致位于整個頁面的居中位置旨涝，用margin：0px auto白华；

有分割線都用border設(shè)置單條邊框

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

三層嵌套：三個div嵌套弧腥，最外層的平鋪管搪，做圓角或者其他的特殊形狀框時不能切透明的圖片虾攻。優(yōu)點：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）

可以減少服務(wù)器的請求次數(shù)，減少緩存的空間塘慕。

引入方法：現(xiàn)在ps中合并成一張圖片筋夏，只能合成上下的結(jié)構(gòu)。

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

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

position：static不定位/relative相對定位绽媒，參照自身原來本身位置定位免猾。原本占得空間依然存在有上下左右四個方位/absolute絕對定位猎提，參照時如果父級沒有設(shè)置定位获三，就參照body，父級若設(shè)置了定位忧侧，則根據(jù)父級的位置來定位石窑。脫離文檔流，/fixed相對于瀏覽器窗口定位蚓炬。和attachment的效果相似松逊。

父級沒有設(shè)置定位，子級會自動參照瀏覽器的邊框（body）來定位肯夏。若父級設(shè)定了定位经宏，子級會參照父級定位的位置來定位犀暑。

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

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

無論之前使用的什么標簽耐亏，定位之后都具有行內(nèi)塊屬性。

透明度：opacity：number（0-1）0是完全透明沪斟，1是完全不透明广辰。設(shè)置透明之后，塊內(nèi)的所有元素都會半透明主之。

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

rgba（0,0,0,0）四個數(shù)字：前三個是三個基本色槽奕，最大不可超過255,几睛。第四個是透明度。只兼容到IE9以上粤攒。

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

八．偽元素夯接，偽類

1.reset重置焕济。清除瀏覽器的默認樣式。一般使用reset.css文件钻蹬。textarea的一個屬性-resize吼蚁，使其不能自由的調(diào)節(jié)框的大小。在css文件中出現(xiàn)了中文问欠，需要寫@chartset”utf-8”;來對中文進行聲明肝匆。

2.a標簽的四個偽類

(1)link。當herf中有內(nèi)容顺献，可以改變a文字的樣式旗国。a:link{}

(2)visited。當a標簽已經(jīng)被點擊過之后注整，可以改變樣式能曾。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在頁面中占有空間內(nèi)容隱藏不恭，使用較多的是display屬性。

4.before和after偽元素（必須和content屬性連用审孽，content用來寫需要添加的內(nèi)容县袱。）

::before在元素內(nèi)容前加入內(nèi)容。

::after在元素內(nèi)容后加入內(nèi)容佑力。也可以用來寫背景的三層嵌套

在ie8中寫法改變?yōu)橐唤M冒號。:before/:after.ie7不支持這個屬性筋遭。

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

九．兼容性問題

1.怪異模式：沒有書寫時會觸發(fā)怪異解析現(xiàn)象。

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

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

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

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

6認高度：塊元素秽誊，沒有寫固定高度時。解決：設(shè)置固定高/height：0琳骡；overflow：hidden锅论；

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

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

9.***經(jīng)典3像素：條件 浮動塊元素與未浮動元素處于同一行最易。解決：設(shè)置非浮動元素浮動。

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

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

12.不支持最大最小寬高：標簽的最低高度寬度設(shè)置视译。解決方法：為單獨設(shè)置hack嬉荆。

hack：.color{

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

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

*background-color: #0066FF;/*IE6员寇、IE7會變?yōu)樗{色*/

_background-color: #009933;/*IE6會變?yōu)榫G色*/

}

*-xxxxxx/IE7

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

bug總結(jié)：常見的bug都出現(xiàn)在版本低的ie中。有可能bug產(chǎn)生于標簽的不合理使用或者css樣式使用不當扳缕。