html（Hypertext Markup Language）—— 結(jié)構(gòu)
超文本標(biāo)記語言
css（Cascading Style Sheets）—— 樣式
層疊樣式表
js（javascript）—— 行為
html超文本標(biāo)記語言
< 標(biāo)記
<html> 標(biāo)簽
<html> </html> 標(biāo)簽對
<!DOCTYPE HTML> 聲明文檔類型
<meta charset="utf-8"/> 代碼編碼格式
單標(biāo)簽：直接在后面斜杠結(jié)束的標(biāo)簽叫做單標(biāo)簽。
行間樣式表
<div style="……"></div>
內(nèi)部樣式表
<style>…………</style>
外部樣式表
<link href="style.css" rel="stylesheet"/>
屬性：屬性值；
width 寬度
height 高度
background 背景
background-attachment: fixed; 背景是否滾動
background-color: gray; 背景顏色
background-image: url(bg.jpg); 背景圖
background-repeat: no-repeat; 背景圖是否重復(fù)
background-position: center 0px; 背景圖位置
border 邊框
border-width 邊框?qū)挾?br>
border-style 邊框樣式
border-color 邊框顏色
邊框樣式：
solid 實(shí)線
dashed 虛線
dotted 點(diǎn)線（IE6不兼容）
padding 內(nèi)邊距
padding-top 上邊內(nèi)邊距
padding-right 右邊內(nèi)邊距
padding-bottom 下邊內(nèi)邊距
padding-left 左邊內(nèi)邊距
padding: top right bottom left;
注意：內(nèi)邊距相當(dāng)于給一個盒子加了填充厚度會影響盒子大小。
margin 外邊距
外邊距的問題：
1、上下外邊距會疊壓；
2、父子級包含的時候子級的margin-top會傳遞給父級；（內(nèi)邊距替代外邊距）
外邊距復(fù)合：margin: top right bottom left;
盒子大小 = border + padding + width/height
盒子寬度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
結(jié)構(gòu)樣式：
width 寬度
height 高度
background 背景
border 邊框
padding 內(nèi)邊距
margin 外邊距
復(fù)合屬性：一個屬性多個屬性值的命令，叫做復(fù)合屬性。
font-size 文字大小（一般均為偶數(shù)）
font-family 字體（中文默認(rèn)宋體）
color 文字顏色（英文、rgb、十六位進(jìn)制色彩值）
line-height 行高
text-align 文本對齊方式
text-indent 首行縮進(jìn)（em縮進(jìn)字符）
font-weight 文字著重
font-style 文字傾斜
text-decoration 文本修飾
letter-spacing 字母間距
word-spacing 單詞間距（以空格為解析單位）
復(fù)合屬性：
background
border
padding
margin
font：font-style | font-weight | font-size/line-height | font-family；
width 寬度 height 高度
background 背景 border 邊框
padding 內(nèi)邊距 margin 外邊距
font-size 文字大小 font-family 字體
color 文字顏色 line-height 行高
text-align 文本對齊方式 text-indent 首行縮進(jìn)
font-weight 文字著重 font-style 文字樣式
text-decoration 文本修飾 letter-spacing 字母間距
word-spacing 單詞間距
圖片（單標(biāo)簽）alt屬性 是圖片名字，是給百度搜索引擎抓取使用；
a標(biāo)簽： 鏈接/下載/錨點(diǎn)
target 鏈接打開方式
blank 新窗口
self 當(dāng)前窗口
<base target="_blank"/> 定義頁面鏈接默認(rèn)打開方式
div 塊
img 圖片（單標(biāo)簽）
a 鏈接、下載、錨點(diǎn)
h1-h6 標(biāo)題
p 段落
strong 強(qiáng)調(diào)（粗體）
em 強(qiáng)調(diào)（斜體）
span 區(qū)分樣式
ul 無序列表
ol 有序列表
li 列表項(xiàng)
dl 定義列表
dt 定義列表標(biāo)題
dd 定義列表項(xiàng)
SEO ：搜索引擎優(yōu)化；
部分方法：
a、頁面標(biāo)簽語義化；
b、使用對SEO有利的標(biāo)簽：h1/h2/h3/strong/em……
c、提高頁面關(guān)鍵詞密度；
d、……等等；
SEM：搜索引擎營銷；（包含SEO）
id選擇符（#）
群組選擇符（，）
class選擇符（.）
類型選擇符(div……)
包含選擇符（div p）
通配符（*）
基礎(chǔ)選擇符的優(yōu)先級
類型 < class < id < style(行間) < js
測試：
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………}
偽類：偽類用于向被選中元素添加特殊的效果。（元素在特定情況下才具備的。）
link 未訪問（默認(rèn)）
hover 鼠標(biāo)懸停（鼠標(biāo)劃過）
active 鏈接激活（鼠標(biāo)按下）
visited 訪問過后（點(diǎn)擊過后）
A四個偽類的順序：
link visited hover active
（love hate 記憶方法?。?/p>
a偽類的應(yīng)用：
a、四個偽類全用(搜索引擎、新聞門戶、小說網(wǎng)站)
b、一般網(wǎng)站只用（ a{} a:hover{} ）
IE6不支持a以外其它任何標(biāo)簽的偽類；
IE6以上的瀏覽器支持所有標(biāo)簽的hover偽類；
css reset 原則：
但凡是瀏覽默認(rèn)的樣式，都不要使用。
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
塊的特征
1、默認(rèn)獨(dú)占一行
2、沒有寬度時，默認(rèn)撐滿一排
3、支持所有css命令
內(nèi)嵌(內(nèi)聯(lián)、行內(nèi))的特征
1、同排可以繼續(xù)跟同類的標(biāo)簽
2、內(nèi)容撐開寬度
3、不支持寬高
4、不支持上下的margin和padding
5、代碼換行被解析
display：block 顯示為塊
使內(nèi)聯(lián)元素具備塊屬性標(biāo)簽的特性
display：inline 顯示為內(nèi)嵌
使行塊屬性標(biāo)簽具備內(nèi)聯(lián)元素的特性
Inline-block的特點(diǎn)和問題
特性：
1、塊在一行顯示；
2、行內(nèi)屬性標(biāo)簽支持寬高；
3、沒有寬度的時候內(nèi)容撐開寬度
問題：
1、代碼換行被解析；
2、ie6 ie7 不支持塊屬性標(biāo)簽的inline-block;
這么一段HTML，請?zhí)裘。?br>
<P> 哥寫的不是HTML，是寂寞。<br><br> 我說：<br>不要迷戀哥，哥只是一個傳說
? 空格符
標(biāo)準(zhǔn)：
<p>哥寫的不是HTML，是寂寞。</p>
<p>我說：<br/>不要迷戀哥，哥只是一個傳說</p>
最佳：
<p>哥寫的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>
<p><cite>我</cite>說：<br/><q>不要迷戀哥，哥只是一個傳說</q></p>
title 元素的額外信息
html標(biāo)簽：http://www.w3school.com.cn/tags/index.asp
前端規(guī)范
1、所有書寫均在英文半角狀態(tài)下的小寫；
2、id，class必須以字母開頭；
3、所有標(biāo)簽必須閉合；
4、html標(biāo)簽用tab鍵縮進(jìn)；
5、屬性值必須帶引號；
6、
7、/* css注釋 */
8、ul,li/ol,li/dl,dt,dd擁有父子級關(guān)系的標(biāo)簽；
9、p,dt,h標(biāo)簽 里面不能嵌套塊屬性標(biāo)簽；
10、a標(biāo)簽不能嵌套a；
11、內(nèi)聯(lián)元素不能嵌套塊；
回顧:inline-block 特性：
1、塊在一排顯示
2、內(nèi)聯(lián)支持寬高
3、默認(rèn)內(nèi)容撐開寬度
4、標(biāo)簽之間的換行間隙被解析（問題）
5、ie6 ie7不支持塊屬性標(biāo)簽的inline-block（問題）
float浮動：
1、塊在一排顯示
2、內(nèi)聯(lián)支持寬高
3、默認(rèn)內(nèi)容撐開寬度
4、脫離文檔流
5、提升層級半層
float:left | right | none | inherit;
文檔流是文檔中可顯示對象在排列時所占用的位置。
浮動的定義：使元素脫離文檔流，按照指定方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
clear:left | right | both | none | inherit；元素的某個方向上不能有浮動元素
clear:both; 在左右兩側(cè)均不允許浮動元素。
清浮動方法
1.加高
問題：擴(kuò)展性不好
2.父級浮動
問題：頁面中所有元素都加浮動，margin左右自動失效（floats bad ?。?/p>
3.inline-block 清浮動方法：
問題：margin左右自動失效；
4.空標(biāo)簽清浮動
問題：IE6 最小高度 19px；（解決后IE6下還有2px偏差）
5.br清浮動
問題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。
6.after偽類 清浮動方法（現(xiàn)在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after偽類： 元素內(nèi)部末尾添加內(nèi)容；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放
a、觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計(jì)算寬高。
b、FF 不支持；
7.overflow:hidden 清浮動方法；
問題：需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隱藏（裁刀?。?/p>
浮動兼容性問題
IE6雙邊距BUG（IE6下塊屬性標(biāo)簽浮動，并且有橫向margin，橫向margin加倍。
a、IE6
b、浮動
c、橫向margin
d、塊屬性標(biāo)簽（加display:inline;)
IE6下 li部分兼容性問題：
a、左右兩列布局，右邊右浮動IE6 IE7下折行；(左邊元素浮動)
b、IE6 IE7 li 下元素都浮動 在IE6 IE7下 li 下方會產(chǎn)生4px間隙問題；（加vertical-align:top；）
vertival-align / img問題
vertical-align 垂直對齊方式
a、加垂直對齊方式的同排元素都要加垂直對齊方式；
b、垂直對齊方式可以解決元素下方間隙問題；
圖片下方間隙問題
a、display:block; (改變標(biāo)簽本身特性)
b、overflow:hidden; (必須知道圖片高度)
d、vertical-align (暫時最完美的方案)
