作為非計算機專業(yè)的學(xué)生，學(xué)習(xí)前端著實讓人頭大。
J友：“學(xué)個錘子你學(xué)，走！耍起！”
萌新：“攤手”
【萌新上路，如有錯誤，還請不要打臉！屁股可以考慮】
HTML、XML、XHTML有啥子區(qū)別？
首先，剛開始接觸的時候這三種語言給我的感覺很混亂！
- HTML（超文本標(biāo)記語言），這是一個不嚴(yán)謹?shù)恼Z言，允許或安全的忽略許多技術(shù)上的非法構(gòu)造，松散的 很。
- XML（可擴展標(biāo)記語言），W3C的推薦標(biāo)準(zhǔn)，設(shè)計宗旨是傳輸數(shù)據(jù)，而并非顯示數(shù)據(jù)，可以自行定義標(biāo)簽 噠！（聽起來很酷的樣子）但僅僅純文本。
- XHTML（可擴展超文本標(biāo)記語言），更嚴(yán)謹更純凈的HTML版本，目的是取代HTML（吃鯨）！
啷個決定我的文檔是HTML還是XHTML？
XHTML視為HTML的取代者，這會是故事的結(jié)局嗎？
我啷個曉得嘛！
控制文檔是哪種語言的唯一事情是MIME類型，如果文檔以text/html 的MIME類型提供，則將視為HTML。如果類型為application/xhtml+xml或text/xml它被視為XHTML。
我就老老實實寫HTML嘍！
HTML語義化？
語義化的含義就是用正確的標(biāo)簽做正確的事情，html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，有利于SEO；使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
面試很容易問到的問題？肯定很難
大神：不存在的
易混淆的標(biāo)簽
| 標(biāo)簽 | 效果 |
|---|---|
| < i > | 因為某種原因和正常文本不同的文本，如專業(yè)術(shù)語、外語短語。表現(xiàn)為斜體 |
| < em > | em表示強調(diào)的文本。視覺上也是斜體 |
| <stromg> | 加粗的形式展現(xiàn)，表示文本很重要，強調(diào) |
| < b > | 表現(xiàn)為粗體，但本身沒有特殊的重要性和相關(guān)性 |
| <mark> | 表現(xiàn)高亮文本 |
內(nèi)容、樣式、行為分離
web開發(fā)中，內(nèi)容樣式行為分離，顧名思義是指內(nèi)容屬于HTML，樣式屬于CSS，行為屬于JavaScript，需要分離開來。有什么好處吶？
- 頁面載入更快
- 修改更高效
- 保持視覺一致
- 更好的被搜索引擎收錄
- 對瀏覽者和瀏覽器更親和
有哪些常用的meta標(biāo)簽？
| 標(biāo)簽 | 含義 |
|---|---|
<mata charset="utf-8"> |
聲明文檔使用的字符編碼 |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> |
聲明文檔兼容模式，指示IE以目前可用的最高模式顯示內(nèi)容 |
<meta name="keywords" content="your tags"> |
定義針對搜索引擎的關(guān)鍵詞 |
<meta name="description" content="不超過850個字符"> |
頁面描述，告訴搜索引擎你的站點的主要內(nèi)容 |
<meta name="author" content="姓名"> |
定義網(wǎng)頁作者 |
<meta name="revised" content="David, 2008/8/8/" /> |
定義頁面的最新版本 |
<meta http-equiv="refresh" content="5"/> |
5秒刷新一次頁面 |
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> |
用于設(shè)定網(wǎng)頁的到期時間，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時間格式 |
<meta http-equiv="pragma" content="no-cache"> |
禁用緩存 |
<meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> |
cookie設(shè)定，如果網(wǎng)頁過期，存盤的cookie將被刪除。需要注意的也必須使用GMT時間格式。 |
<meta name="viewport" content="width=640, target-densitydpi=device-dpi, user-scalable=no" /> |
文檔寬度與設(shè)備寬度保持1:1，并且不允許手動放大縮小 |
<meta name="apple-touch-fullscreen" content="yes"> |
開啟web app程序支持 |
<meta name="format-detection" content="telephone=no"> |
iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數(shù)字還會自動撥號！這里忽略了數(shù)字識別為電話號碼 |
<meta name="apple-mobile-web-app-capable" content="yes"> |
是否啟動webapp功能 設(shè)置為yes 網(wǎng)站就會在滿屏模式full-screen mode刪除默認的蘋果工具欄和菜單欄 |
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
控制狀態(tài)欄顯示樣式 default（白色）black（黑色） black-translucent（灰色半透明） |
文檔聲明作用？<!docuype html>的作用？
- 聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式
- <!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令。
- 在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
- HTML5 不基于 SGML，所以不需要引用 DT。
- 頁面添加了<!DOCTYPE html>那么，那么就等同于開啟了標(biāo)準(zhǔn)模式。
嚴(yán)格（標(biāo)準(zhǔn)）模式和混雜（兼容）模式指什么？
- 標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面
- 在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
瀏覽器亂碼原因是什么？如何解決？
亂碼原因：
- 編輯器保存文檔使用的字符集與瀏覽器解析HTML文檔使用的字符集不同，那么除英文以外文字會出現(xiàn)亂碼。
- 瀏覽器解析HTML文檔使用字符集依賴于HTML文檔中<meta charset="">指定的字符。
- HTML文檔沒有指定字符吶？那么瀏覽器會猜。很可能回猜對哦！
解決：
- HTML 文檔一定要指定字符集為utf-8
- 編輯器保存文檔使用的字符集一定要跟 HTML 文檔指定的字符集匹配
常見的瀏覽器有哪些，什么內(nèi)核？
- Trident內(nèi)核代表產(chǎn)品Internet Explorer，又稱其為IE內(nèi)核。
- Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎。
- WebKit內(nèi)核代表作品Safari、Chromewebkit 是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用于Mac OS系統(tǒng)，它的特點在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高，導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。
- Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。
列出常見的標(biāo)簽，用在什么場景?
| 標(biāo)簽 | 場景 |
|---|---|
| <head> | 定義文檔的頭部，它是所有頭部元素的容器 |
| <body> | 定義文檔的主體 |
| < h1>~< h6> | 定義標(biāo)題，擁有確切的語義 |
| < p > | 定義段落 |
| 換行 | |
| <div> | 定義文檔中的分區(qū)或節(jié)，把文檔分割為獨立的、不同的部分 |
| < ul > | 定義無序列表 |
| < ol >> | 定義有序列表 |
| <form> | 用于為用戶輸入創(chuàng)建 HTML 表單，向服務(wù)器傳輸數(shù)據(jù) |
| < img > | 向網(wǎng)頁中嵌入一幅圖像 |
【萌新上路，如有錯誤，還望指出，后會有期】
