HTML、XML、XHTML的區(qū)別
- HTML是一種超文本標(biāo)記語言，語法較為松散，不規(guī)范。
- XML是一種可擴(kuò)展標(biāo)記語言，主要用來存儲數(shù)據(jù)和結(jié)構(gòu)，標(biāo)簽可以自定義。
- XHTML是一種可擴(kuò)展超文本標(biāo)記語言，作用與HTML類似，語法更加嚴(yán)格。
怎樣理解HTML語義化
語義化 HTML 就是選擇合適的標(biāo)簽、使用合理的代碼結(jié)構(gòu)來編寫HTML的方式，使代碼更具可讀性，也使得瀏覽器的爬蟲和機(jī)器能對代碼更好地解析。
要實(shí)現(xiàn)HTML的語義化，就要求開發(fā)者掌握常用的HTML標(biāo)簽，理解各種標(biāo)簽所代表的含義，在不同的場景能使用合適的標(biāo)簽，盡量不使用沒有語義信息的標(biāo)簽。
語義化帶來的是更清晰的頁面結(jié)構(gòu)，使頁面可讀性更強(qiáng)；更清晰的代碼結(jié)構(gòu)，更利于開發(fā)團(tuán)隊(duì)的開發(fā)和維護(hù)；更好的適應(yīng)性，可以支持更多的設(shè)備的不同表現(xiàn)形式；與機(jī)器更良好的溝通，使瀏覽器更容易渲染表現(xiàn)，也使搜索引擎更容易獲取有效信息。
語義化的優(yōu)點(diǎn)：
1.清晰的頁面結(jié)構(gòu)：去掉或樣式丟失的時候，也能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)，增強(qiáng)頁面的可讀性。
2.支持更多的設(shè)備：屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。如果你使用的含予以的標(biāo)記，屏幕閱讀器會根據(jù)你的標(biāo)簽來判斷網(wǎng)頁的內(nèi)容，而不是一個字母一個字母的拼寫出來。
3.有利于SEO（搜索引擎優(yōu)化）：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重。
- 便于團(tuán)隊(duì)開發(fā)和維護(hù)：在團(tuán)隊(duì)中大家都遵循同一個標(biāo)準(zhǔn)，可以減少很多差異化的東西，方便開發(fā)和維護(hù)，提高開發(fā)效率，甚至實(shí)現(xiàn)模塊化開發(fā)。
怎樣理解內(nèi)容與樣式分離的原則
- 寫 HTML 僅處理內(nèi)容，不管樣式，重點(diǎn)放在 HTML 的結(jié)構(gòu)和語義化，避免出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。
- 寫 JS 的時候，盡量不使用 JS直接操作樣式，而是通過給元素添加刪除class來控制樣式變化。
- 頁面展現(xiàn)的所有樣式，都由CSS來負(fù)責(zé)實(shí)現(xiàn)。
有哪些常見的meta標(biāo)簽
META標(biāo)簽是HTML標(biāo)記HEAD區(qū)的一個關(guān)鍵標(biāo)簽，它位于HTML文檔的<head>和<title>之間（有些也不是在<head>和<title>之間）。它提供的信息雖然用戶不可見，但卻是文檔的最基本的元信息。<meta>除了提供文檔字符集、使用語言、作者等基本信息外，還涉及對關(guān)鍵詞和網(wǎng)頁等級的設(shè)定。
meta標(biāo)簽共有兩個屬性，分別是http-equiv屬性和name屬性。
| 標(biāo)簽 | 含義 |
|---|---|
<meta name="keywords" content="關(guān)鍵字1，關(guān)鍵字2，....."> |
定義針對搜索引擎的關(guān)鍵詞 |
<meta name="description“” content="頁面描述”> |
頁面描述，告訴搜索引擎你的站點(diǎn)的主要內(nèi)容 |
<meta name="viewport" content=""> |
移動端窗口 |
<meta name="author" content="姓名"> |
定義網(wǎng)頁作者 |
<meta name="robots" content="none"> |
定義搜索引擎爬蟲的索引方式 |
<meta name="generator" content="webstorm"> |
標(biāo)明網(wǎng)頁是什么軟件制作 |
<meta name="copyright" content="某某"> |
用于標(biāo)注版權(quán)信息 |
<meta name="renderer" content="ie-comp"> |
用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面 |
<meta name="revised-after" content="7 days"> |
搜索引擎爬蟲重訪時間 |
<meta charset="utf-8"> |
聲明文檔使用的字符編碼（屬于http-equiv屬性） |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
告知瀏覽器以何種版本來渲染頁面。（一般都設(shè)置為最新模式） |
<meta http-equiv="cache-control" content="no-cache"> |
指導(dǎo)瀏覽器如何緩存某個響應(yīng)以及緩存多長時間 |
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT"> |
網(wǎng)頁到期時間，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸 |
<meta http-equiv="refresh" content="2;URL=http://www.github.com/"> |
自動刷新并指向某頁面 |
<meta http-equiv="Set-Cookie" content="name, date"> |
cookie設(shè)定 |
文檔聲明的作用？嚴(yán)格模式和混雜模式指什么？<doctype html>的作用？
DOCTYPE,簡稱為DTDs，是英文Document type的縮寫，中文“文檔類型”，在web設(shè)計(jì)中用來說明你用的XHTML或者HTML是什么版本。要建立符合標(biāo)準(zhǔn)的XHTML網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE,否則你的標(biāo)識和CSS都不會生效。
<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標(biāo)簽之前。在HTML中doctype有兩個主要目的：
- 對文檔進(jìn)行有效性驗(yàn)證。
它告訴用戶代理和校驗(yàn)器這個文檔是按照什么DTD寫的。 - 決定瀏覽器的呈現(xiàn)模式。
對于實(shí)際操作，通知瀏覽器讀取文檔是用哪種解析算法。如果沒有寫，則瀏覽器根據(jù)自身的規(guī)則對代碼解析，可能會嚴(yán)重影響html排版布局。
瀏覽器解析代碼方式分為嚴(yán)格模式和混雜模式。
- 嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式或非怪異模式，是指瀏覽器按照W3C標(biāo)準(zhǔn)解析代碼。
- 混雜模式：又稱兼容模式或怪異模式，是指瀏覽器用自己的方式解析代碼。不同瀏覽器有不同的解析方式。頁面以一種比較寬松的向后兼容的方式顯示。
- 觸發(fā)：瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法。
- 如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。
- 對于HTML 4.01文檔，包含嚴(yán)格DTD的DOCTYPE常常導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)。包含過渡DTD和URI的DOCTYPE也導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)，但是有過渡DTD而沒有URI會導(dǎo)致頁面以混雜模式呈現(xiàn)。
- DOCTYPE不存在或形式不正確會導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。
HTML 4.01和HTML5 差異
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!DOCTYPE html>.
瀏覽器亂碼的原因？如何解決？
參考
瀏覽器亂碼根本原因是保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
編碼方式分為：
- ASCII 美國人發(fā)明，為美國人服務(wù)，由128個字符組成，每個字符占7位。
- ISOLatin-1 歐洲人發(fā)明，為歐洲人服務(wù)，由256個字符組成，
- UNICODE:UTF-8 萬國碼，用1到6個字節(jié)（1個字節(jié)8位）編碼UNICODE字符。
GBK中國人發(fā)明，為中國人服務(wù)，用2個字節(jié)表示一個漢字，比UTF-8省空間。
解決亂碼的方法：
保存的文件中聲明是用哪種編碼方式保存。告訴瀏覽器打開這個頁面時用什么方式解碼。
常見的瀏覽器及使用的內(nèi)核
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS 引擎則是解析 Javascript 語言，執(zhí)行 javascript 語言來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。內(nèi)核的種類很多，如加上沒什么人使用的非商業(yè)的免費(fèi)內(nèi)核，可能會有 10 多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。
發(fā)展歷史參考
| 瀏覽器內(nèi)核 | 常見瀏覽器 |
|---|---|
| Trident | E6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；獵豹安全瀏覽器：1.0-4.2版本為Trident+Webkit，4.3版本為Trident+Blink；360安全瀏覽器 ：1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink；360極速瀏覽器：7.5之前為Trident+Webkit,7.5為Trident+Blink；傲游瀏覽器 ：傲游1.x、2.x為IE內(nèi)核，3.x為IE與Webkit雙核；搜狗高速瀏覽器：1.x為Trident，2.0及以后版本為Trident+Webkit； |
| Gecko | Firefox ；Netscape6至9 |
| Blink | Google Chrome ； Opera |
| Webkit | Apple Safari (Win/Mac/iPhone/iPad)；Android 默認(rèn)瀏覽器；Google Chrome |
| EdgeHTML內(nèi)核 | Edge |
| Presto | Opera 12.17之前版本 |
HTML常見標(biāo)簽及使用場景
Basic HTML
| Tag | Description |
|---|---|
<!DOCTYPE> |
Defines the document type |
<html> |
Defines an HTML document |
<title> |
Defines a title for the documenr |
<body> |
defines the document's body |
<h1> to<h6> |
defines HTML headings |
<p> |
defines a paragraph |
<br> |
insets a single line break |
<hr> |
defines a thematic change in the content 表現(xiàn)為水平線 |
<!--......--> |
defines a comment |
Forms and Input
| Tag | Description |
|---|---|
<form> |
defines an HTML form for user input |
<input> |
defines an input control |
<textarea> |
defines a multiline input control(text area) |
<button> |
defines a clickable button |
<select> |
defines a drop-down list |
<optgroup> |
<select>下的小分類example
|
<option> |
defines an option in a drop-down list <select>下最小選項(xiàng) |
<label> |
defines a label for an <input> element example
|
