HTML、XML孕惜、XHTML的區(qū)別
- HTML是一種超文本標記語言愧薛，語法較為松散，不規(guī)范衫画。
- XML是一種可擴展標記語言毫炉，主要用來存儲數(shù)據(jù)和結構，標簽可以自定義削罩。
- XHTML是一種可擴展超文本標記語言瞄勾，作用與HTML類似，語法更加嚴格弥激。
怎樣理解HTML語義化
語義化 HTML 就是選擇合適的標簽进陡、使用合理的代碼結構來編寫HTML的方式，使代碼更具可讀性微服，也使得瀏覽器的爬蟲和機器能對代碼更好地解析趾疚。
要實現(xiàn)HTML的語義化，就要求開發(fā)者掌握常用的HTML標簽职辨，理解各種標簽所代表的含義盗蟆，在不同的場景能使用合適的標簽，盡量不使用沒有語義信息的標簽舒裤。
語義化帶來的是更清晰的頁面結構喳资，使頁面可讀性更強；更清晰的代碼結構腾供，更利于開發(fā)團隊的開發(fā)和維護仆邓；更好的適應性鲜滩，可以支持更多的設備的不同表現(xiàn)形式；與機器更良好的溝通节值，使瀏覽器更容易渲染表現(xiàn)徙硅，也使搜索引擎更容易獲取有效信息。
語義化的優(yōu)點：
1.清晰的頁面結構：去掉或樣式丟失的時候搞疗，也能讓頁面呈現(xiàn)清晰的結構嗓蘑，增強頁面的可讀性。
2.支持更多的設備：屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標記來“讀”你的網(wǎng)頁匿乃。如果你使用的含予以的標記桩皿，屏幕閱讀器會根據(jù)你的標簽來判斷網(wǎng)頁的內容，而不是一個字母一個字母的拼寫出來幢炸。
3.有利于SEO（搜索引擎優(yōu)化）：和搜索引擎建立良好溝通泄隔，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重宛徊。
- 便于團隊開發(fā)和維護：在團隊中大家都遵循同一個標準佛嬉，可以減少很多差異化的東西，方便開發(fā)和維護闸天，提高開發(fā)效率暖呕，甚至實現(xiàn)模塊化開發(fā)。
怎樣理解內容與樣式分離的原則
- 寫 HTML 僅處理內容苞氮，不管樣式缰揪，重點放在 HTML 的結構和語義化，避免出現(xiàn)屬性樣式葱淳，盡量不要出現(xiàn)行內樣式钝腺。
- 寫 JS 的時候，盡量不使用 JS直接操作樣式赞厕，而是通過給元素添加刪除class來控制樣式變化艳狐。
- 頁面展現(xiàn)的所有樣式，都由CSS來負責實現(xiàn)皿桑。
有哪些常見的meta標簽
META標簽是HTML標記HEAD區(qū)的一個關鍵標簽毫目，它位于HTML文檔的<head>和<title>之間（有些也不是在<head>和<title>之間）。它提供的信息雖然用戶不可見诲侮，但卻是文檔的最基本的元信息镀虐。<meta>除了提供文檔字符集、使用語言沟绪、作者等基本信息外刮便，還涉及對關鍵詞和網(wǎng)頁等級的設定。
meta標簽共有兩個屬性绽慈，分別是http-equiv屬性和name屬性恨旱。
| 標簽 | 含義 |
|---|---|
<meta name="keywords" content="關鍵字1辈毯，關鍵字2，....."> |
定義針對搜索引擎的關鍵詞 |
<meta name="description“” content="頁面描述”> |
頁面描述搜贤，告訴搜索引擎你的站點的主要內容 |
<meta name="viewport" content=""> |
移動端窗口 |
<meta name="author" content="姓名"> |
定義網(wǎng)頁作者 |
<meta name="robots" content="none"> |
定義搜索引擎爬蟲的索引方式 |
<meta name="generator" content="webstorm"> |
標明網(wǎng)頁是什么軟件制作 |
<meta name="copyright" content="某某"> |
用于標注版權信息 |
<meta name="renderer" content="ie-comp"> |
用于指定雙核瀏覽器默認以何種方式渲染頁面 |
<meta name="revised-after" content="7 days"> |
搜索引擎爬蟲重訪時間 |
<meta charset="utf-8"> |
聲明文檔使用的字符編碼（屬于http-equiv屬性） |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
告知瀏覽器以何種版本來渲染頁面谆沃。（一般都設置為最新模式） |
<meta http-equiv="cache-control" content="no-cache"> |
指導瀏覽器如何緩存某個響應以及緩存多長時間 |
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT"> |
網(wǎng)頁到期時間，過期后網(wǎng)頁必須到服務器上重新傳輸 |
<meta http-equiv="refresh" content="2;URL=http://www.github.com/"> |
自動刷新并指向某頁面 |
<meta http-equiv="Set-Cookie" content="name, date"> |
cookie設定 |
文檔聲明的作用仪芒？嚴格模式和混雜模式指什么唁影？<doctype html>的作用？
DOCTYPE,簡稱為DTDs掂名，是英文Document type的縮寫夭咬，中文“文檔類型”，在web設計中用來說明你用的XHTML或者HTML是什么版本铆隘。要建立符合標準的XHTML網(wǎng)頁，DOCTYPE聲明是必不可少的關鍵組成部分南用；除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效膀钠。
<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標簽之前裹虫。在HTML中doctype有兩個主要目的：
- 對文檔進行有效性驗證肿嘲。
它告訴用戶代理和校驗器這個文檔是按照什么DTD寫的。 - 決定瀏覽器的呈現(xiàn)模式筑公。
對于實際操作雳窟，通知瀏覽器讀取文檔是用哪種解析算法。如果沒有寫匣屡，則瀏覽器根據(jù)自身的規(guī)則對代碼解析封救，可能會嚴重影響html排版布局。
瀏覽器解析代碼方式分為嚴格模式和混雜模式捣作。
- 嚴格模式：又稱標準模式或非怪異模式誉结，是指瀏覽器按照W3C標準解析代碼。
- 混雜模式：又稱兼容模式或怪異模式券躁，是指瀏覽器用自己的方式解析代碼惩坑。不同瀏覽器有不同的解析方式。頁面以一種比較寬松的向后兼容的方式顯示也拜。
- 觸發(fā)：瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法以舒。
- 如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現(xiàn)慢哈。
- 對于HTML 4.01文檔蔓钟，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現(xiàn)。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現(xiàn)卵贱，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現(xiàn)奋刽。
- DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現(xiàn)瓦侮。
HTML 4.01和HTML5 差異
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD佣谐，因為 HTML 4.01 基于 SGML肚吏。DTD 規(guī)定了標記語言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內容狭魂。
HTML5 不基于 SGML罚攀，所以不需要引用 DTD。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明雌澄。在 HTML5 中只有一種：<!DOCTYPE html>.
瀏覽器亂碼的原因斋泄？如何解決？
參考
瀏覽器亂碼根本原因是保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的镐牺。
編碼方式分為：
- ASCII 美國人發(fā)明炫掐，為美國人服務，由128個字符組成睬涧，每個字符占7位募胃。
- ISOLatin-1 歐洲人發(fā)明，為歐洲人服務畦浓，由256個字符組成痹束，
- UNICODE:UTF-8 萬國碼，用1到6個字節(jié)（1個字節(jié)8位）編碼UNICODE字符讶请。
GBK中國人發(fā)明祷嘶，為中國人服務，用2個字節(jié)表示一個漢字夺溢，比UTF-8省空間论巍。
解決亂碼的方法：
保存的文件中聲明是用哪種編碼方式保存。告訴瀏覽器打開這個頁面時用什么方式解碼风响。
常見的瀏覽器及使用的內核
瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎环壤。它負責取得網(wǎng)頁的內容（HTML、XML钞诡、圖像等等）郑现、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式荧降，然后會輸出至顯示器或打印機接箫。瀏覽器的內核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同朵诫。所有網(wǎng)頁瀏覽器辛友、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內容的應用程序都需要內核。JS 引擎則是解析 Javascript 語言废累，執(zhí)行 javascript 語言來實現(xiàn)網(wǎng)頁的動態(tài)效果邓梅。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立邑滨，內核就傾向于只指渲染引擎日缨。內核的種類很多，如加上沒什么人使用的非商業(yè)的免費內核掖看，可能會有 10 多種匣距，但是常見的瀏覽器內核可以分這四種：Trident、Gecko哎壳、Blink毅待、Webkit。
發(fā)展歷史參考
| 瀏覽器內核 | 常見瀏覽器 |
|---|---|
| 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內核乞旦，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 默認瀏覽器；Google Chrome |
| EdgeHTML內核 | Edge |
| Presto | Opera 12.17之前版本 |
HTML常見標簽及使用場景
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>下最小選項 |
<label> |
defines a label for an <input> element example
|
