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">
響應式頁面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
定時讓網(wǎng)頁在3秒內(nèi)跳轉(zhuǎn)到mozilla首頁(http-equiv 屬性為名稱/值對提供了名稱。并指示服務器在發(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ī)定應該禁用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è)置了幾個窗口，就必須對應使用幾個<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：鏈接目的地。
四個偽類（偽類：就是還不存在的類型，或者說預先定義好的類型）：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)
混雜模式/怪異模式，瀏覽器用自己的方式解析代碼，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器的行為以防止老站點無發(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：頁腳
