HTML：超文本標記語言袍患；
1.什么是HTML標記語言：表示網(wǎng)頁信息的符號標記語言
特點：
- 可以設(shè)置文本的格式；
- 可以創(chuàng)建列表竣付；
- 可以插入圖像和媒體诡延；
- 可以建立表格；
- 超鏈接古胆，可以用鼠標點擊超鏈接實現(xiàn)頁面跳轉(zhuǎn)
XHTML：XHTML是升級版的html（Extensible Hyper Text Markup Language）肆良，對html進行了規(guī)范，編碼更加嚴謹純潔逸绎，也是一種過渡語言惹恃，html向xml過渡的語言。實際上XHTML 與 HTML 4.01 標準沒有太多的不同棺牧。
HTML與XHTML的區(qū)別：
- XML 被設(shè)計用來傳輸和存儲數(shù)據(jù)座舍，其焦點是數(shù)據(jù)的內(nèi)容。
- HTML 被設(shè)計用來顯示數(shù)據(jù)陨帆，其焦點是數(shù)據(jù)的外觀曲秉。
- HTML 旨在顯示信息，而 XML 旨在傳輸信息疲牵。
- XML在定義標記時區(qū)分大小寫承二，而HTML標記不區(qū)分大小寫。
- XHTML 元素必須被正確地嵌套纲爸。
- XHTML 元素必須被關(guān)閉亥鸠。
- 標簽名必須用小寫字母。
- XHTML 文檔必須擁有根元素
2.HTML的標記和他的屬性：
- 文檔的保存格式：.html .htm .xhtml;
- 標記和被標記的內(nèi)容構(gòu)建出HTML文檔识啦；
- 標記的屬性：就是用來控制我們的內(nèi)容如何的顯示负蚊，格式<標簽 屬性1=屬性值 屬性2=屬性值>內(nèi)容</標簽>
3.語法不區(qū)分大小寫不過默認都小寫
4.文檔注釋：<!—注釋內(nèi)容-->
5.代碼格式：整潔，易讀颓哮，合理的排版縮進
6．html的基本結(jié)構(gòu)：
- <html>內(nèi)容</html> HTML文檔的文檔標記家妆，也被稱為HTML開始/結(jié)束標記
- <head>內(nèi)容</head> HTML文件頭標記，用來包含文件的基本信息冕茅，比如網(wǎng)頁的標題關(guān)鍵字等伤极；在head中標記的內(nèi)容不會在瀏覽器中顯示
- title HTML文檔的標題蛹找，title標簽里面不可以再包含其他標簽
- body HTML的主體標記，頁面顯示的內(nèi)容都在它里面
- meta HTML頁面的元信息哨坪，提供有關(guān)頁面的元信息庸疾，比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。Meta標簽在head里面
- 常見的meta標簽
指定字符集
<meta charset="utf-8">
向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞
<meta name="keywords" content="">
告訴搜索引擎你的站點的主要內(nèi)容
<meta name="description" content="">
告訴搜索引擎你的站點的制作的作者
<meta name="author" content="your name">
響應(yīng)式頁面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
定時讓網(wǎng)頁在3秒內(nèi)跳轉(zhuǎn)到mozilla首頁(http-equiv 屬性為名稱/值對提供了名稱当编。并指示服務(wù)器在發(fā)送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對届慈。)
<meta http-equiv="refresh" content="3" url=https://www.mozilla.org">
如果安裝了GCF (Google Chrome Frame)，則使用GCF來渲染頁面 ("chrome=1"), 如果沒有安裝GCF忿偷，則使用最高版本的IE內(nèi)核進行渲染 ("IE=edge")金顿。X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
瀏覽器的內(nèi)核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
7．文檔標記
8.圖像標記
9.超鏈接的使用
1.基本語法：
<a href=”url” name=”頁面的錨點名稱” target=”頁面的打開方式”></a>
2.屬性： href：鏈接的地址 target：定義超鏈接打開的方式（屬性：_blank新建窗口;_seif默認；_parent在父窗口中打開頁面牵舱；_top在頂層窗口中打開文件） name屬性：指定頁面的錨點名稱
10表格：
table表格
thead 表格頭
tbody 表格主體
tr 行
td 元素定義表格單元-列
th 元素定義表頭
表格樣式重置：
單元格間隙合并
Table{border-collapse：collapse}
重置單元格默認填充
Th，td{padding：0}
<td colspan=”2”></td> <!-- 單元格合并 橫著的 -->
<td rowspan=”2”></td> <!-- 單元格合并 豎著的 -->
11.. form表單元素：
<form action=”提交到的目標”></form>
<input type=”” name=”” value=”” />
Type:text 文本框缺虐； password：密碼框芜壁； radio單選框； checkbox復選框高氮； submit提交慧妄； reset重置； button按鈕剪芍； image圖片塞淹； file上傳； hidden隱藏罪裹； select/option下拉選框（對高度的支持不兼容）<select><option>下拉內(nèi)容</option></select>饱普； textarea文本域（各個瀏覽器下的默認滾動條顯示不兼容，css3新增resize調(diào)整尺寸屬性）
表單元素：
Label標簽為input定義標注
<input type="" name="" value="" />
<label for=”a”>….<label> //for指向ID
Checked 在頁面加載時默認選定的input標簽（布爾類型）
<input type=”” name=”” value=”” checked/>
Disabled 屬性規(guī)定應(yīng)該禁用input元素
<input type=”” name=”” value=”” disabled />
12框架：
- 什么是框架：框架根據(jù)瀏覽器劃分出不同的部分状共，每一部分加載不同的網(wǎng)頁套耕，實現(xiàn)在同一瀏覽器中加載多個頁面的效果
- 語法格式:<frameset></frameset>
- 屬性：A。 cols B峡继。rows C冯袍。frameborder D。border
- <frame>子窗口標記：<frame>標記是一個單標記碾牌，該標記必須放在<frameset>中使用康愤，在<frameset>中設(shè)置了幾個窗口，就必須對應(yīng)使用幾個<frame>框架舶吗，而且還必須使用src屬性指定一個網(wǎng)頁
- Src：加載網(wǎng)頁文件的URL
- Name：框架名稱征冷，是鏈接target所要的參數(shù)
- Noresize：表示調(diào)整框架大小
- Scrolling：是否需要滾動條 auto yes no
- Frameborder：是否需要邊框
CSS：層疊樣式表；
提升css優(yōu)先級：!important
優(yōu)先級：
!important>行內(nèi)>id>class<標簽<默認
選擇符：# .
顏色:color
背景：background
背景圖片比背景顏色層級高
背景圖片：background-image：url（）
背景圖片重復誓琼？：background-repeat：no-repeat资盅；repeat-x调榄；repeat-y；
背景定位：background-position：X,Y; 可以寫單詞呵扛，x軸：left每庆，center，right今穿；Y軸：top缤灵，center，bottom蓝晒；X或者Y默認居中腮出；
CSS樣式：行間樣式；內(nèi)聯(lián)樣式芝薇，外聯(lián)樣式胚嘲。
邊框：border：粗細，線型洛二，顏色馋劈；
邊框是一個非矩形的形狀。
文字：
Font-weight：文字著重
Font-style：文字傾斜
Font-size：文字大小
Line-height：行高
當行高為奇數(shù)時晾嘶，文字的上方比下方少一個像素
當行高為偶數(shù)時妓雾，文字的上方和下方一樣。
Font-family：字體
Color：文字顏色
Text-align：文本對齊方式
Text-indent：首行縮進
Text-decoration：文本修飾（下劃線什么的）
Letter-spacing：字母間距
Word-spacing：單詞間距
White-space：強制不換行
盒模型（盒子大欣萦亍）=border+padding+width/height
盒子寬度=左border+左padding+width+右padding+右border
盒子高度=上border+上padding+height+下padding+下border
Padding：內(nèi)邊距相對于給一個盒子加了填充厚度械姻，會影響盒子大小。
Padding：left机断，top楷拳，right，buttom
Margin：
問題：上下外邊距會疊壓吏奸；父子級包含的時候子級的margin-top會傳遞給父級唯竹。
a標簽：超鏈接/下載/錨點
href：鏈接目的地。
四個偽類（偽類：就是還不存在的類型苦丁，或者說預(yù)先定義好的類型）：link（未訪問的鏈接的樣式）浸颓、visited（訪問過后的鏈接的顏色）、hover（鼠標經(jīng)過的顏色）、active（鼠標按下時鏈接的顏色）
行內(nèi)標簽：span：主要是用來區(qū)分樣式的。
H5常用標簽：header（頁面頭部） nav（導航） footer（頁腳） section（板塊/劃分頁面區(qū)域） article（用來表示一個獨立且完整的區(qū)域） aside（側(cè)邊欄或者廣告什么的）
HTML常用標簽：h1-h6標題 p段落 string粗體 em斜體 span區(qū)分樣式 ul無序列表 ol有序列表 li列表項 dl定義列表 dt定義列表標題 dd定義列表項 mark標記 img圖片
樣式初始化：reset原則：
Body辆亏，h1-h6{margin:0;padding:0;font-size:12px;}
Ul ol Li{list-style:none;margin:0;padding:0;}
選擇器：
ID選擇器（一個名字只能有一個）；類選擇器晋涣；標簽選擇器；群組選擇沉桌，包含選擇器谢鹊；通配符
選擇器優(yōu)先級：style（行內(nèi)樣式）>id>class>標簽>默認
塊元素和行內(nèi)元素：
塊的特征：默認獨占一行算吩，支持所有css命令
內(nèi)嵌/行內(nèi)/內(nèi)聯(lián)：同排可以繼續(xù)跟隨同類的標簽；內(nèi)容撐開寬度佃扼；不支持寬高偎巢；不支持上下的margin；代碼換行被解析（換行符被解析成一個空格）
Display：block：顯示為塊兼耀。
Display：inline-block 行內(nèi)元素压昼；塊在一行顯示，行內(nèi)元素支持寬高瘤运，沒有寬度的時候內(nèi)容撐開寬度窍霞，IE6-7不支持塊屬性變成行內(nèi)元素
Float：left；right拯坟；none但金；inherit（繼承）；
特征：塊在一排顯示郁季，內(nèi)聯(lián)支持寬高冷溃，默認內(nèi)容撐開寬度，脫離文檔流巩踏，提升層級半層秃诵。
文檔流是文檔中可顯示對象在排列時所占用的位置
浮動的定義：使元素脫離文檔流续搀，按照指定方向發(fā)生移動塞琼，遇到父級邊界或者相鄰的浮動元素停下了。
清除浮動：1禁舷、clear：left right both none inherit彪杉；元素上的某個方向不能有浮動元素
Clear：both；在左右兩側(cè)均不允許浮動元素
2牵咙、加高（擴展性不好）
3派近、父級浮動（頁面中所有的元素都加浮動的話，margin左右自動失效）
4洁桌、inline-block（margin的左右auto失效）
5渴丸、空標簽清除浮動（IE6下最小高度19px；解決后IE6下還是有2px的偏差）
6另凌、br清浮動（不符合結(jié)構(gòu)樣式行為分離的要求）
7谱轨、after偽類清除：.clear:after{content:””;display:block;clear:both;} .clear{zoom:1}
After偽類：元素內(nèi)部末尾添加內(nèi)容；IE6吠谢，7不兼容
Zoom縮放：觸發(fā)IE下的haslayout土童，是元素根據(jù)自身計算寬高，火狐不支持
BFC工坊、haslayout
BFC（block formatting context）：標準瀏覽器下才有的（非IE）
翻譯為：塊級元素格式化上下文
A,float的值不為none
B献汗，overflow的值不為visible
C敢订，display的值為table-cell，table-caption罢吃，inline楚午，inline-block中的任何一個
D，position的值不為relative刃麸，static
E醒叁，width height min-width min-height：不是自動
Haslayout：IE瀏覽器
A，writing-mode：tb-rl
B泊业，-ms-writing-mode：tb-rl
C把沼，Zoom：（！normal）
定位position：
relative吁伺，相對定位
相對定位的特征：1饮睬，不影響元素本身的特性；2篮奄，不使元素脫離文檔流（元素移動之后原始位置會被保留）捆愁；3，如果沒有定位偏移窟却，對元素本身沒有任何影響昼丑；4，提升層級夸赫。
absolute菩帝，絕對定位
絕對定位的特征：1，使元素完全脫離文檔流茬腿；2呼奢，使內(nèi)嵌支持寬高；3切平，塊屬性標簽內(nèi)容撐開寬度握础；4，如果有定位父級相對于定位父級發(fā)生偏移悴品，沒有定位父級相對于document發(fā)生偏移禀综；5，相對定位一般都是配合絕對定位使用苔严；6定枷，提升層級
層級 z-index：數(shù)字；a定位元素默認后者層級高于前者邦蜜；b建議在兄弟標簽之間比較層級依鸥。
絕對定位的元素的子級浮動可以不用寫清除浮動
Fixed，固定定位
固定定位的特征：與絕對定位基本上一致悼沈，差別是固定定位始終根據(jù)document定位贱迟，IE6不支持固定定位姐扮。固定定位的元素的子級浮動可以不用寫清除浮動
透明度：opacity:0~1;
IE6-7濾鏡：xx:{filter:alpha(opacity=0~100)};
IE6-7下的兼容性：
1，H5標簽兼容
（解決辦法：使用一個JS庫html5shiv.js衣吠；里面創(chuàng)建了所有H5標簽茶敏，就是用js創(chuàng)建一個新的節(jié)點名稱為H5新標簽的名字）
2，元素浮動之后缚俏，能設(shè)置寬度的話就給元素加寬度惊搏，如果需要寬度是內(nèi)容撐開，就給它的塊元素加上浮動 解決辦法：給塊級加float:left;
3忧换，第一塊元素浮動恬惯，第二塊元素加margin值等于第一塊元素，在IE6下會有間隙問題亚茬；第二個元素同樣float:left
4酪耳，IE6下子元素超出父級寬高，會把父級的寬高撐開 （解決辦法：不要讓子級的寬高大于父級刹缝；）
5碗暗，P包含塊元素嵌套規(guī)則（解決辦法：P td h 標簽不要嵌套塊元素）
6，Margin兼容性問題梢夯；問題1：margin-top傳遞言疗；問題2margin上下邊距疊壓（解決辦法：1：觸發(fā)BFC和haslayout：overflow：hidden；zoom：1颂砸； 2：用同一方向的margin噪奄！不要用復合元素，分開寫margin-top沾凄；margin-button）
7梗醇，Display：inline-block（IE6不兼容inline-block知允；解決辦法：加兩條屬性zoom：1觸發(fā)haslayout撒蟀；屬性為：display:inline;zoom:1;）
8，IE6最小高度問題19px（解決辦法：加一個overflow：hidden）
9温鸽，IE6-7當元素浮動后再設(shè)置margin的時候在IE6下就會產(chǎn)生雙邊距（解決辦法：加一條屬性 display:inline）
10保屯，Li里元素都浮動li在IE6-7下方會產(chǎn)生4px間隙問題（解決辦法：針對IE6，7添加垂直對齊：vertical-align:top;）
11涤垫，浮動元素之間注釋姑尺，導致多復制一個文字問題（觸發(fā)條件：兩個浮動元素中間有注釋或者內(nèi)聯(lián)元素并且第二個元素和父級寬度相差不超過3px；解決辦法：避免兩個浮動元素之間出現(xiàn)注釋或者內(nèi)聯(lián)元素蝠猬，寬度大于3px）
12切蟋，IE6-7父級元素的overflow:hidden是包不住子級的relative（解決辦法：給父級同樣添加*position:relative）
13，IE6下絕對定位元素父級寬高是奇數(shù)榆芦，絕對定位元素的right和bottom值會有1px的偏差（解決辦法：設(shè)置偶數(shù)柄粹。喘鸟。。）
14驻右，IE6下絕對定位元素和浮動元素并列絕對定位元素消失（解決辦法：給其中一個套一個父級p標簽就好什黑。）
15，IE6下input的空隙（解決辦法：給input加一個float 加星號）
16堪夭，IE6下輸入類型表單控件背景問題（解決辦法：設(shè)置背景固定定位）
理解內(nèi)容與樣式分離的原則：
寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上愕把，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式森爽。
寫 JS 的時候恨豁，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化爬迟。
文檔結(jié)構(gòu)與文檔樣式的分離可以確保網(wǎng)頁的平穩(wěn)退化圣絮，也讓內(nèi)容和樣式在可以分開獨立編輯。
文檔聲明的作用：
文檔聲明用來告知瀏覽器當前文檔所使用的類型雕旨，讓瀏覽器解析器知道要用什么規(guī)范來解析文檔
嚴格模式和混雜模式是什么：
嚴格模式下扮匠，瀏覽器以其支持的最高標準呈現(xiàn)
混雜模式/怪異模式，瀏覽器用自己的方式解析代碼凡涩，頁面以一種比較寬松的向后兼容的方式顯示棒搜。混雜模式通常模擬老式瀏覽器的行為以防止老站點無發(fā)工作活箕。
<!DOCUYPE HTML>的作用
它是html5標準網(wǎng)頁聲明,告訴瀏覽器用最新的 HTML5標準來解析渲染頁面力麸；如果不寫，瀏覽器就會進入混雜模式育韩。
瀏覽器亂碼的原因：
亂碼產(chǎn)生的根本原因是保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的克蚂。
解決方式： 寫代碼的時候在html 的 <head>里添加<meta charset='utf-8'>并且保存的時候仍選擇同樣的編碼方式。
常見的瀏覽器內(nèi)核都有什么筋讨？
Internet explorer 使用的是Trident
Firefox使用的是Gecko埃叭。
opera之前使用的是Presto，后來用Blink
蘋果的Safari悉罕，谷歌的Chrome使用的是WebKit赤屋，還有國產(chǎn)的大部分雙核瀏覽器其中一核就是WebKit。
常用的標簽：
html：HTML頁面的根元素
body：文檔的內(nèi)容
head：用于定義文檔的頭部
meta：提供了元數(shù)據(jù)壁袄，元數(shù)據(jù)也不顯示在頁面上类早，被瀏覽器解析給搜索引擎
title：文檔的標題
h1-h6：標題
header：頭部
nav：導航
p：段落
a：網(wǎng)頁鏈接
div：塊級元素，它可用于組合其他的HTML嗜逻，元素的容器
span：內(nèi)聯(lián)元素涩僻，行內(nèi)元素，文本的容器
ol：有序列表
ul：無序列表
li：列表
img：圖片
br：換行
input：定義輸入控件
table：表格
tr：行
td：列
th：表格的表頭
tbody：表格的主體
tfoot：表格的頁腳
hr：水平線
iframe：定義內(nèi)聯(lián)框架
button：按鈕
form：表單
footer：頁腳
