HTML、XML、XHTML 有什么區(qū)別?
HTML,超文本標(biāo)記語言,是語法較為松散的、不嚴(yán)格的Web語言;
XML,可擴(kuò)展標(biāo)記語言,主要用于存儲數(shù)據(jù)和結(jié)構(gòu)參考;
XHTML,可擴(kuò)展超文本標(biāo)記語言,基于XML,作用與HTML類似,但語法更嚴(yán)格。
HTML標(biāo)準(zhǔn)不夠規(guī)范,且瀏覽器包容錯誤,所以很多html頁面其實(shí)都存在或多或少的問題。于是就有了基于XML的XHTML,執(zhí)行強(qiáng)錯誤檢查。
XML是包裝數(shù)據(jù)的格式。json
怎樣理解 HTML 語義化?
語義化就是根據(jù)內(nèi)容(的結(jié)構(gòu)),選擇合適的標(biāo)簽。好處是:
- 便于開發(fā)者閱讀,同時讓瀏覽器的爬蟲和機(jī)器很好地解析。
- 如果沒有CSS,設(shè)備可以通過標(biāo)簽語義以自己的方式來渲染。
- 可讀性,清晰的結(jié)構(gòu)便于修改和維護(hù)。
what?
根據(jù)內(nèi)容的結(jié)構(gòu)(內(nèi)容語義化),選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器很好地解析。
why?
為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看;
用戶體驗(yàn):例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用;
有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重
方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁;
便于團(tuán)隊開發(fā)和維護(hù),語義化更具可讀性,是下一步吧網(wǎng)頁的重要動向,遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn),可以減少差異化。
how?
盡可能少的使用無語義的標(biāo)簽div和span;
在語義不明顯時,既可以使用div或者p時,盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距,對兼容特殊終端有利;
不要使用純樣式標(biāo)簽,如:b、font、u等,改用css設(shè)置。
需要強(qiáng)調(diào)的文本,可以包含在strong或者em標(biāo)簽中(瀏覽器預(yù)設(shè)樣式,能用CSS指定就不用他們),strong默認(rèn)樣式是加粗(不要用b),em是斜體(不用i);
使用表格時,標(biāo)題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和一般單元格要區(qū)分開,表頭用th,單元格用td;
表單域要用fieldset標(biāo)簽包起來,并用legend標(biāo)簽說明表單的用途;
每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽,并且通過為input設(shè)置id屬性,在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。
怎樣理解內(nèi)容與樣式分離的原則?
- 將 html、 css、 javascript分開存放,便于各自修改和維護(hù)管理。
- 編寫一個結(jié)構(gòu)清晰內(nèi)容合理的html,可以在此基礎(chǔ)上設(shè)計不同的樣式。
- 當(dāng)樣式文件不能使用時,不會影響到html,讀者仍然可以知道當(dāng)前頁面大概內(nèi)容,并且設(shè)備還可以通過標(biāo)簽語義以自己的方式來渲染。
有哪些常見的meta標(biāo)簽?
<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'>
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關(guān)鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網(wǎng)頁作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
"
- <!DOCTYPE>聲明叫做文件類型定義(DTD),聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行,這并不是一個 HTML 標(biāo)簽。
- 瀏覽器解析時到底使用嚴(yán)格模式還是混雜模式,與網(wǎng)頁中的 DTD 直接相關(guān)。
1、如果文檔包含嚴(yán)格的 DOCTYPE ,那么它一般以嚴(yán)格模式呈現(xiàn)。(嚴(yán)格 DTD ——嚴(yán)格模式)
2、包含過渡 DTD 和 URL的 DOCTYPE ,也以嚴(yán)格模式呈現(xiàn),但有過渡 DTD 而沒有 URL (統(tǒng)一資源標(biāo)識符,就是聲明最后的地址)會導(dǎo)致頁面以混雜模式呈現(xiàn)。(有 URI 的過渡 DTD ——嚴(yán)格模式;沒有 URL 的過渡 DTD ——混雜模式)
3、DOCTYPE 不存在或形式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。(DTD不存在或者格式不正確——混雜模式)
4、HTML5 沒有 DTD ,因此也就沒有嚴(yán)格模式與混雜模式的區(qū)別,HTML5 有相對寬松的語法,實(shí)現(xiàn)時,已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。( HTML5 沒有嚴(yán)格和混雜之分)
意義:嚴(yán)格模式與混雜模式存在的意義與其來源密切相關(guān),如果說只存在嚴(yán)格模式,那么許多舊網(wǎng)站必然受到影響,如果只存在混雜模式,那么會回到當(dāng)時瀏覽器大戰(zhàn)時的混亂,每個瀏覽器都有自己的解析模式。
"
- 到html5,聲明簡化為<!doctype html>,以此標(biāo)準(zhǔn)解析代碼。
瀏覽器亂碼的原因是什么?如何解決?
瀏覽器出現(xiàn)亂碼的原因是文檔保存的編碼格式和瀏覽器解析時的解碼格式不匹配,一般是英文以外的字符才會出現(xiàn)亂碼。若文檔中未用 <charset> 指明編碼方式,將使用編輯器默認(rèn)的編碼方式進(jìn)行保存。
要在<meta charset="#">聲明正確的編碼格式。
饑人谷
常見的瀏覽器有哪些,什么內(nèi)核?
列出常見的標(biāo)簽,并簡單介紹這些標(biāo)簽用在什么場景。
- h1~h6 大小標(biāo)題
- <a/> 鏈接
- <img/> 圖片
- <button/>按鈕
- <div>邏輯塊、 <span>邏輯行內(nèi)
- ul li; ol li
- <table/>