HTML晤锥、XML除呵、XHTML 有什么區(qū)別
- HTML:超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)燎窘，用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言浑厚。不是一種編程語(yǔ)言股耽，而是一種標(biāo)記語(yǔ)言 (markup language)，即一套標(biāo)記標(biāo)簽 (markup tag) 钳幅，用來(lái)描述網(wǎng)頁(yè)物蝙。
- XML：可擴(kuò)展標(biāo)記語(yǔ)言（EXtensible Markup Language），用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)敢艰。 XML 很類(lèi)似 HTML诬乞，是一種必須正確標(biāo)記且格式良好的標(biāo)記語(yǔ)言，它用于傳輸數(shù)據(jù)钠导，而非顯示數(shù)據(jù)震嫉。XML標(biāo)簽沒(méi)有被預(yù)定義，需要自行定義標(biāo)簽牡属。
- XHTML：可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）票堵，基于XML，作用與HTML類(lèi)似逮栅，但語(yǔ)法更嚴(yán)格悴势。
三者區(qū)別
- 比較xhtml和html
很多頁(yè)面包含了“糟糕”的 HTML：編碼不規(guī)范，結(jié)構(gòu)混亂臃腫措伐；表現(xiàn)和結(jié)構(gòu)混亂特纤；不能使用更多的網(wǎng)絡(luò)設(shè)備，比如手機(jī)侥加、PDA等捧存，所以 ，W3C制定了XHTML担败，通過(guò)結(jié)合 XML 和 HTML 的長(zhǎng)處矗蕊，開(kāi)發(fā)出了 XHTML。XHTML 是作為 XML 被重新設(shè)計(jì)的 HTML氢架。有以下區(qū)別：
1傻咖、文檔結(jié)構(gòu)
- XHTML DOCTYPE 是強(qiáng)制性的，即<!DOCTYPE ....> 是必須有
- <html> 中的 XML namespace 屬性是必須的
- <html>岖研、<head>卿操、<title> 以及 <body> 也是必須的
2警检、 元素語(yǔ)法
- XHTML 元素必須正確嵌套
- XHTML 元素必須始終關(guān)閉
- XHTML 元素必須小寫(xiě)
- XHTML 文檔必須有一個(gè)根元素
3、 屬性語(yǔ)法
- XHTML 屬性必須使用小寫(xiě)
- XHTML 屬性值必須用引號(hào)包圍
- XHTML 屬性最小化也是禁止的 <input checked="checked">是可以的害淤，而<input checked>是不可以的
- xml和html區(qū)別：XML 用來(lái)描述數(shù)據(jù)扇雕，其標(biāo)簽沒(méi)有被預(yù)定義，需要自行定義標(biāo)簽窥摄，而 HTML 則用來(lái)顯示數(shù)據(jù)镶奉，標(biāo)簽已定義好。
怎樣理解 HTML 語(yǔ)義化
HTML語(yǔ)義化是什么崭放？
語(yǔ)義化HTML就是選擇合適的標(biāo)簽哨苛、使用合理的代碼結(jié)構(gòu)來(lái)編寫(xiě)HTML的方式，使代碼更具可讀性币砂，也使得瀏覽器的爬蟲(chóng)和機(jī)器能對(duì)代碼更好的解析建峭。-
為什么要語(yǔ)義話(huà)？
- 有利于SEO决摧，有助于爬蟲(chóng)抓取更多的有效信息亿蒸，爬蟲(chóng)是依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
- 語(yǔ)義化的HTML在沒(méi)有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)掌桩，清晰的頁(yè)面結(jié)構(gòu)边锁，使頁(yè)面可讀性更強(qiáng)。
- 方便其他設(shè)備的解析
- 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)
怎樣理解內(nèi)容與樣式分離的原則
- 為何要分離
最初主流瀏覽器為了顯示更豐富的web文檔波岛，不斷地將新的標(biāo)簽和屬性添加到HTML標(biāo)簽中茅坛。隨著頁(yè)面內(nèi)容的豐富，瀏覽器性能的提高盆色，內(nèi)容和樣式的耦合使得HTML文件難以理解和維護(hù)灰蛙。為了解決這個(gè)問(wèn)題祟剔，萬(wàn)維網(wǎng)聯(lián)盟在 HTML 4.0 之外提出層疊樣式表（CSS）隔躲，使用CSS完成樣式與內(nèi)容的分離。 - 怎么做到分離
- 寫(xiě) HTML 的時(shí)候先不管樣式, 重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上物延，讓 HTML 能體現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容宣旱。之后再去寫(xiě)樣式。
- 寫(xiě) JS 的時(shí)候叛薯，盡量不要用 JS 去直接操作樣式浑吟，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化。
- HTML 內(nèi)不允許出現(xiàn)屬性樣式耗溜，盡量不要出現(xiàn)行內(nèi)樣式组力。
- 分離的好處
- 數(shù)據(jù)的多樣顯示。通過(guò)不同的樣式表適應(yīng)不同的設(shè)備抖拴，做到內(nèi)容與設(shè)備無(wú)關(guān)
- 保持整個(gè)站點(diǎn)的視覺(jué)一致性變得非常簡(jiǎn)單燎字，修改樣式表就可以輕松改版;
- 由于結(jié)構(gòu)清晰腥椒，數(shù)據(jù)的集成、更新和處理更加方便靈活候衍；
- 更好地被搜索引擎收錄笼蛛，基于內(nèi)容與樣式分離的原則，html的語(yǔ)義化就是首要考慮的,網(wǎng)頁(yè)中語(yǔ)義化的標(biāo)簽代碼就會(huì)更加適合搜索引擎蛉鹿。
有哪些常見(jiàn)的meta標(biāo)簽
- meta是什么
metadata滨砍，中文名叫元數(shù)據(jù)，是用于描述數(shù)據(jù)的數(shù)據(jù)妖异。它不會(huì)顯示在頁(yè)面上惋戏，但是機(jī)器卻可以識(shí)別。 - 作用
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
meta常用于定義頁(yè)面的說(shuō)明随闺，關(guān)鍵字日川，最后修改日期，和其它的元數(shù)據(jù)矩乐。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁(yè)面）龄句，搜索引擎和其它網(wǎng)絡(luò)服務(wù)。
- 組成
meta標(biāo)簽共有兩個(gè)屬性散罕，分別是http-equiv屬性和name屬性分歇。- name屬性
name屬性主要用于描述網(wǎng)頁(yè)，比如網(wǎng)頁(yè)的關(guān)鍵詞欧漱，敘述等职抡。與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容是對(duì)name填入類(lèi)型的具體描述误甚，便于搜索引擎抓取缚甩。meta標(biāo)簽中name屬性語(yǔ)法格式是：
- name屬性
<meta name="參數(shù)" content="具體的描述">。
其中name屬性共有以下幾種參數(shù)窑邦。
- keywords(關(guān)鍵字)
說(shuō)明：用于告訴搜索引擎擅威，你網(wǎng)頁(yè)的關(guān)鍵字。舉例：
<meta name="keywords" content="前端,饑人谷">
- description(網(wǎng)站內(nèi)容的描述)
說(shuō)明：用于告訴搜索引擎冈钦，你網(wǎng)站的主要內(nèi)容郊丛。舉例：
<meta name="description" content="課程 PPT">
- viewport(移動(dòng)端的窗口)
說(shuō)明：這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)。在用bootstrap等框架時(shí)候都有用過(guò)viewport瞧筛。下次博客上具體寫(xiě)該內(nèi)容厉熟。舉例：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- renderer(雙核瀏覽器渲染方式)
說(shuō)明：renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面较幌。比如說(shuō)360瀏覽器揍瑟。舉例：
<meta name="renderer" content="webkit"> //默認(rèn)webkit內(nèi)核
<meta name="renderer" content="ie-comp"> //默認(rèn)IE兼容模式
<meta name="renderer" content="ie-stand"> //默認(rèn)IE標(biāo)準(zhǔn)模式
- robots(定義搜索引擎爬蟲(chóng)的索引方式)
說(shuō)明：robots用來(lái)告訴爬蟲(chóng)哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引乍炉。content的參數(shù)有all,none,index,noindex,follow,nofollow绢片。默認(rèn)是all嘁字。
舉例：
- http-equiv屬性
equiv的全稱(chēng)是"equivalent"意思是相等，相當(dāng)于杉畜。http-equiv可以理解為相當(dāng)于HTTP的作用纪蜒，比如說(shuō)定義些HTTP參數(shù)。語(yǔ)法格式：
<meta http-equiv="參數(shù)" content="具體的描述">
- content-Type(設(shè)定網(wǎng)頁(yè)字符集)
說(shuō)明：用于設(shè)定網(wǎng)頁(yè)字符集此叠，便于瀏覽器解析與渲染頁(yè)面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML纯续，不推薦
<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁(yè)字符集的方式，推薦使用UTF-8
- X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁(yè)面)
說(shuō)明：用于告知瀏覽器以何種版本來(lái)渲染頁(yè)面灭袁。（一般都設(shè)置為最新模式猬错，在各大框架中這個(gè)設(shè)置也很常見(jiàn)。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁(yè)面
- cache-control(指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制)
說(shuō)明：指導(dǎo)瀏覽器如何緩存某個(gè)響應(yīng)以及緩存多長(zhǎng)時(shí)間茸歧。
<meta http-equiv="cache-control" content="no-cache">
其中還有幾種用法
no-cache: 先發(fā)送請(qǐng)求倦炒，與服務(wù)器確認(rèn)該資源是否被更改，如果未被更改软瞎，則使用緩存逢唤。
no-store: 不允許緩存，每次都要去服務(wù)器上涤浇，下載完整的響應(yīng)鳖藕。（安全措施）
public : 緩存所有響應(yīng)，但并非必須只锭。因?yàn)閙ax-age也可以做到相同效果
private : 只為單個(gè)用戶(hù)緩存著恩，因此不允許任何中繼進(jìn)行緩存。（比如說(shuō)CDN就不允許緩存private的響應(yīng)）
maxage : 表示當(dāng)前請(qǐng)求開(kāi)始蜻展，該響應(yīng)在多久內(nèi)能被緩存和重用喉誊，而不去服務(wù)器重新請(qǐng)求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒纵顾。
參考 HTTP緩存
- expires(網(wǎng)頁(yè)到期時(shí)間)
說(shuō)明:用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間伍茄，過(guò)期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸。舉例：
<meta http-equiv="expires" content="Tuesday 22 May 2017 01:00 GMT" />
- refresh(自動(dòng)刷新并指向某頁(yè)面)
說(shuō)明：網(wǎng)頁(yè)將在設(shè)定的時(shí)間內(nèi)片挂，自動(dòng)刷新并調(diào)向設(shè)定的網(wǎng)址幻林。舉例:
<meta http-equiv="refresh" content="2贞盯；URL=https://jirengu.com/">
- Set-Cookie(cookie設(shè)定)
說(shuō)明：如果網(wǎng)頁(yè)過(guò)期音念。那么這個(gè)網(wǎng)頁(yè)存在本地的cookies也會(huì)被自動(dòng)刪除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
- 文檔聲明的作用是告知瀏覽器頁(yè)面使用的HTML版本躏敢；
- 嚴(yán)格模式又叫標(biāo)準(zhǔn)模式闷愤，使頁(yè)面按照 HTML 與 CSS 的定義渲染。
混雜模式件余，又叫怪異模式讥脐，以比較寬松的向后兼容的方式呈現(xiàn)遭居，模擬老式瀏覽器以兼容老的站點(diǎn)； - <!doctype html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式旬渠，使用最新的 HTML5標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面俱萍；如果不寫(xiě)，瀏覽器就會(huì)進(jìn)入混雜模式告丢，而這是我們要避免的枪蘑。
瀏覽器亂碼的原因是什么？如何解決
亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的岖免。
- 比如網(wǎng)頁(yè)源代碼是gbk的編碼岳颇，而內(nèi)容中的中文字是utf-8編碼的，這樣瀏覽器打開(kāi)即會(huì)出現(xiàn)html亂碼颅湘。反之網(wǎng)頁(yè)是編碼utf-8话侧，內(nèi)容是gbk也會(huì)出現(xiàn)亂碼。
- html網(wǎng)頁(yè)編碼是gbk闯参，而程序從數(shù)據(jù)庫(kù)中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會(huì)造成編碼亂碼瞻鹏。
- 瀏覽器不能自動(dòng)檢測(cè)網(wǎng)頁(yè)編碼，造成網(wǎng)頁(yè)亂碼鹿寨。
解決方案：首先乙漓，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式释移，那么一定要在html 的 <head>里添加<meta charset="utf-8">叭披，這句話(huà)的意思是告訴瀏覽器在打開(kāi)這個(gè)頁(yè)面的時(shí)候不要去猜了，直接用utf-8去解碼玩讳。 同理涩蜘，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">熏纯。
常見(jiàn)的瀏覽器有哪些同诫，什么內(nèi)核
- 常見(jiàn)的瀏覽器有IE、Mozilla Firefox樟澜、Google Chrome误窖、Safari、opera秩贰、360霹俺，搜狗，遨游等瀏覽器毒费。
- 所謂的“瀏覽器內(nèi)核”指的是一個(gè)瀏覽器最核心的部分——“Rendering Engine”丙唧，叫做“渲染引擎”,也常稱(chēng)其為“排版引擎”、“解釋引擎”觅玻。這個(gè)引擎的作用是幫助瀏覽器來(lái)渲染網(wǎng)頁(yè)的內(nèi)容想际，將頁(yè)面內(nèi)容和排版代碼轉(zhuǎn)換為用戶(hù)所見(jiàn)的視圖培漏。
| 瀏覽器 | 內(nèi)核 |
|---|---|
| IE、傲游胡本、世界之窗瀏覽器 | IE內(nèi)核 |
| Firefox | Mozilla |
| Safari | WebKit |
| Chrome | WebKit |
| OperaPresto | Presto |
| 搜狗牌柄、qq、傲游 | WebKit與IE雙核 |
列出常見(jiàn)的標(biāo)簽侧甫，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
- h1-h6 標(biāo)題標(biāo)簽
- p 段落標(biāo)簽
- a 鏈接標(biāo)簽
- href="#about" 跳轉(zhuǎn)到id為about的位置
- href="/demo" 跳轉(zhuǎn)至完整域名+demo
- img 圖片鏈接
- alt 圖片無(wú)法展示時(shí)友鼻，顯示內(nèi)容，便于視力障礙人士使用
- div 塊標(biāo)簽
- button 按鈕標(biāo)簽
- strong 強(qiáng)調(diào)元素
- em 中層強(qiáng)調(diào)元素
- span 標(biāo)記一段行內(nèi)元素
- iframe 在當(dāng)前頁(yè)面嵌入一個(gè)頁(yè)面
- ul 無(wú)序列表
- li ul的子標(biāo)簽闺骚，ul下的直接元素必須是li
- ol 有序列表
- li ol的子元素
- dl 展示有標(biāo)題和內(nèi)容的自定義表格
- dt 定義項(xiàng)目
- dd 定義的描述
- table 用于展示表格彩扔，不要用來(lái)做布局
- thead、tbody僻爽、tfoot 一般不用寫(xiě)
- tr 代表表格的一行
- th 代表表格第一行的列內(nèi)容
- td 代表表格的一列
