HTML、XML、XHTML 有什么區(qū)別
從字面上看，他們都是HTML，都是標(biāo)記語(yǔ)言（Markup Language）
- HTML，超文本標(biāo)記語(yǔ)言，是語(yǔ)法較為松散的、不嚴(yán)格的Web語(yǔ)言；
- XML，可擴(kuò)展標(biāo)記語(yǔ)言，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)，可擴(kuò)展；
- XHTML，可擴(kuò)展超文本標(biāo)記語(yǔ)言，基于XML，作用與HTML類似，但語(yǔ)法更嚴(yán)格。
怎樣理解 HTML 語(yǔ)義化
簡(jiǎn)單說語(yǔ)義化就是讓機(jī)器可以好的讀懂內(nèi)容。
對(duì)于當(dāng)前的 Web 而言，HTML 是聯(lián)系大多數(shù) Web 資源的紐帶。隨著互聯(lián)網(wǎng)的發(fā)展，WEB承載越來越多的信息（圖片，聲音，視頻等），人們開始用機(jī)器來處理網(wǎng)絡(luò)信息，就此誕生了搜索引擎。如次龐大及復(fù)雜的信息如何讓搜索引擎處理和挖掘，所以讓機(jī)器能夠更好地讀懂WEB上內(nèi)容就變得越來越重要。
Web語(yǔ)義化有三個(gè)階段
1、瀏覽器和W3C組織推出的如h1~h6、thead、ul、ol的HTML標(biāo)簽，用于在Web頁(yè)面中組織對(duì)應(yīng)的內(nèi)容，如網(wǎng)頁(yè)標(biāo)題、表頭、無(wú)序、有序列表，以達(dá)到更方便的協(xié)作及傳播互聯(lián)網(wǎng)內(nèi)容。搜索引擎很好的利用了這些語(yǔ)義化標(biāo)簽抓取內(nèi)容，又鑒于搜索引擎的巨大流量推薦，Web前端不得不考慮SEO，從而兩者實(shí)現(xiàn)有益的循環(huán)，共同推進(jìn)著語(yǔ)義化標(biāo)簽的使用。
2、但Web的發(fā)展超乎想象，起初定義的HTML語(yǔ)義化標(biāo)簽，不足以實(shí)現(xiàn)對(duì)Web頁(yè)面各個(gè)部分的功能或位置描述，所以Web前端人員利用HTML標(biāo)簽的id和class屬性，進(jìn)一步對(duì)HTML標(biāo)簽進(jìn)行描述，如對(duì)頁(yè)腳HTML標(biāo)簽添加如id="footer"或者class="footer"的屬性（值），以“無(wú)聲”的方式在不同的前端程序員或者前后端程序員間實(shí)現(xiàn)交流。
3、W3C組織意識(shí)到了之前HTML版本的不足，推出的HTML5進(jìn)一步推進(jìn)了Web語(yǔ)義化發(fā)展，采用了諸如footer、section等語(yǔ)義化標(biāo)簽，彌補(bǔ)了采用id="footer"或者class="footer"形式的不足，以更好的推動(dòng)Web的發(fā)展。
語(yǔ)義化可以帶來的好處：
- 清晰的頁(yè)面結(jié)構(gòu)：去掉或樣式丟失的時(shí)候，也能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)，增強(qiáng)頁(yè)面的可讀性。
- 支持更多的設(shè)備：屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁(yè)。 如果你使用的含語(yǔ)義的標(biāo)記，屏幕閱讀器會(huì)根據(jù)你的標(biāo)簽來判斷網(wǎng)頁(yè)的內(nèi)容，而不是一個(gè)字母一個(gè)字母的拼寫出來。
- 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
- 便于團(tuán)隊(duì)開發(fā)和維護(hù)：在團(tuán)隊(duì)中大家都遵循同一個(gè)標(biāo)準(zhǔn)，可以減少很多差異化的東西，方便開發(fā)和維護(hù)，提高開發(fā)效率，甚至實(shí)現(xiàn)模塊化開發(fā)。
怎樣理解內(nèi)容與樣式分離的原則
在前端中，Html指的是結(jié)構(gòu)；CSS指的是樣式；JavaScript指的是行為。
- 寫 HTML 的時(shí)候先不管樣式, 重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上，讓 HTML 能體現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
- HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。
- 寫 JS 的時(shí)候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化。
有哪些常見的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"> |
定義針對(duì)搜索引擎的關(guān)鍵詞 |
<meta name="description" content="不超過850個(gè)字符"> |
頁(yè)面描述，告訴搜索引擎你的站點(diǎn)的主要內(nèi)容 |
<<meta name="author" content="你的姓名"> |
定義網(wǎng)頁(yè)作者 |
<meta name="revised" content="David, 2008/8/8/" /> |
定義頁(yè)面的最新版本 |
<meta http-equiv="refresh" content="5"/> |
5秒刷新一次頁(yè)面 |
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> |
用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時(shí)間格式 |
<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)頁(yè)過期，存盤的cookie將被刪除。需要注意的也必須使用GMT時(shí)間格式。 |
<meta name="robots" content="index,follow" /> |
搜索引擎索引方式 |
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html>
1、<!DICTYPE>聲明位于文檔中的最前面，處于<html>標(biāo)簽之前，告訴瀏覽器的解析器，用什么文檔類型來規(guī)范解析這個(gè)文檔。
2、嚴(yán)格模式的排版和js運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行
3、在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作
DOCTYPE不存在 或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)
瀏覽器亂碼的原因是什么？如何解決
- 設(shè)置<meta charset>標(biāo)簽聲明文檔使用的字符編碼
- 設(shè)置正確的字符編碼
- 設(shè)置瀏覽器顯示正確的編碼
如果瀏覽器瀏覽時(shí)候出現(xiàn)網(wǎng)頁(yè)亂碼，在瀏覽器中找到轉(zhuǎn)換編碼的菜單調(diào)整。IE9瀏覽器：在需要轉(zhuǎn)碼的網(wǎng)頁(yè)空白出右鍵鼠標(biāo)，選擇“編碼”。傲游瀏覽器：在需要轉(zhuǎn)碼的網(wǎng)頁(yè)時(shí)，菜單“查看”-->“編碼”即可選擇轉(zhuǎn)換編碼谷歌瀏覽器：在需要轉(zhuǎn)碼的網(wǎng)頁(yè)時(shí)，點(diǎn)擊右上角“三橫”圖標(biāo)選擇“工具”-->“編碼”即可選擇切換網(wǎng)頁(yè)編碼
常見的瀏覽器有哪些，什么內(nèi)核
| 瀏覽器 | 內(nèi)核 |
|---|---|
| Internet Explorer | IE內(nèi)核 |
| Firefox | Gecko |
| Opear | Presto |
| Safari&Chromr | Webkit |
| 國(guó)內(nèi)大部分瀏覽器 | IE內(nèi)核 |
列出常見的標(biāo)簽，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
| 標(biāo)簽 | 場(chǎng)景 |
|---|---|
head標(biāo)簽 |
head標(biāo)簽是頁(yè)面的“頭部”， 一般來說，只有6個(gè)標(biāo)簽?zāi)芊旁?lt;head>標(biāo)簽內(nèi)：<title>、<meta>、<link>、<style>、<script>、<base>
|
body標(biāo)簽 |
body標(biāo)簽是頁(yè)面的“身體” |
h1~h6標(biāo)簽 |
設(shè)置不同的標(biāo)題 |
p標(biāo)簽 |
使用p標(biāo)簽來標(biāo)記一段文字 |
<br/>標(biāo)簽 |
換行 |
<div>標(biāo)簽 |
主要用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景 |
<ul>標(biāo)簽 |
無(wú)序列表 |
<ol>標(biāo)簽 |
有序列表 |
<form>標(biāo)簽 |
設(shè)置一個(gè)表單 |
<img>標(biāo)簽 |
設(shè)置一個(gè)圖像 |
