HTML概疆、XML和XHTML有什么區(qū)別奖唯？
- HTML: Hypertext Markup Language，超文本標(biāo)記語言东羹，簡(jiǎn)稱HTML剂桥，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)属提，常與CSS权逗、Javascript一起被眾多網(wǎng)站用于設(shè)計(jì)令人傷心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶界面冤议。網(wǎng)頁瀏覽器可以讀取HTML文件斟薇，并將其渲染成可視化網(wǎng)頁。
<html>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落恕酸。</p>
</body>
</html>
- XML: Extensible Markup Language堪滨，指可擴(kuò)展標(biāo)記語言，是一種標(biāo)記語言蕊温，很類似 HTML袱箱，其設(shè)計(jì)宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)义矛，其標(biāo)簽沒有被預(yù)定義发笔，需要自行定義標(biāo)簽，被設(shè)計(jì)為具有自我描述性凉翻。它僅僅是純文本筐咧，不會(huì)做任何事情，不是對(duì)HTML的替代噪矛，而是獨(dú)立于軟件和硬件的信息傳輸工具量蕊。
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
- XHTML：Extensible Hypertext Markup Language，指可擴(kuò)展超文本標(biāo)簽語言艇挨，其目標(biāo)是取代 HTML残炮。XHTML 與 HTML 4.01 幾乎是相同的，是更嚴(yán)格更純凈的 HTML 版本缩滨，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML势就。
| HTML | XML |
|---|---|
| 不是 HTML 的替代 | |
| 顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀脉漏，旨在顯示信息 | 傳輸和存儲(chǔ)數(shù)據(jù)苞冯，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容，旨在傳輸信息 |
| HTML | XHTML |
|---|---|
| 元素可以彼此不正確的嵌套 | 元素必須被正確地嵌套 |
| 可以不被關(guān)閉 | 元素必須被關(guān)閉 |
| 大小寫混用也可以 | 標(biāo)簽名必須用小寫字母 |
| 不一定 | XHTML 文檔必須擁有根元素 |
怎樣理解 HTML 語義化
- 語義化HTML是一種編寫HTML的方式侧巨，選擇合理的標(biāo)簽舅锄，使用合理的代碼結(jié)構(gòu)，便于開發(fā)者閱讀司忱，同時(shí)讓瀏覽器的爬蟲和機(jī)器很好的解析
- 網(wǎng)絡(luò)爬蟲：又稱網(wǎng)絡(luò)蜘蛛皇忿、網(wǎng)絡(luò)機(jī)器人畴蹭，是一種搜索引擎用于自動(dòng)抓取網(wǎng)頁資源的程序或者說叫機(jī)器人。從某一個(gè)網(wǎng)址為起點(diǎn)鳍烁，去訪問叨襟，然后把網(wǎng)頁存回到數(shù)據(jù)庫中，如此不斷循環(huán)幔荒，一般認(rèn)為搜索引擎爬蟲都是靠鏈接爬行的糊闽，所以管他叫爬蟲。這個(gè)只有開發(fā)搜索引擎才會(huì)用到爹梁。對(duì)于網(wǎng)站而言墓怀，只要有鏈接指向我們的網(wǎng)頁，爬蟲就會(huì)自動(dòng)提取我們的網(wǎng)頁
怎樣理解內(nèi)容與樣式分離的原則
- HTML結(jié)構(gòu)層是網(wǎng)頁最重要的基礎(chǔ)卫键。HTML標(biāo)簽給予內(nèi)容含義傀履。CSS表現(xiàn)層則是定義您的HTML該如何顯示。JavaScript行為層為頁面增加交互莉炉。
- 寫HTML的時(shí)候先不管樣式钓账，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容絮宁，之后再去寫樣式梆暮。HTML內(nèi)不允許出出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式
- 寫JS的時(shí)候绍昂，盡量不要用JS去直接操作樣式啦粹，而是通過給元素添加刪除class來控制樣式變化
- 最好單獨(dú)管理好每一層
Bad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div style="width:200px;">
<font color="red">好好學(xué)習(xí)</font>
</div>
</body>
</html>
Good
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div
{
width:200px;
color:red;
}
</style>
</head>
<body>
<div>好好學(xué)習(xí)</div>
</body>
</html>
有哪些常見的meta標(biāo)簽？
| 標(biāo)簽 | 用途 |
|---|---|
| <meta name="keywords" content=""> | 向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞 |
| <meta name="description" content=""> | 告訴搜索引擎你的站點(diǎn)的主要內(nèi)容 |
| <meta name="author" content="你的姓名"> | 告訴搜索引擎你的站點(diǎn)的制作的作者 |
| <meta name="google" content=""> | 告訴引擎搜索方式* |
| <meta http-equiv="Content-Type" content="text/html";charset=utf-8"> | 指定字符集 |
| <meta http-equiv="refresh" content="n;url="> | 定時(shí)讓網(wǎng)頁在指定的時(shí)間n內(nèi)跳轉(zhuǎn) |
| <meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> | 可以用于設(shè)定網(wǎng)頁的到期時(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)頁過期忍饰，存盤的cookie將被刪除贪嫂。需要注意的也是必須使用GMT時(shí)間格式 |
| 關(guān)于移動(dòng)端 | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> | 'width=device-width' 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時(shí)出現(xiàn)黑邊 |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | 啟用 WebApp 全屏模式 |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | 隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色 |
| <meta name="apple-mobile-web-app-title" content="標(biāo)題"> | 添加到主屏后的標(biāo)題 |
| <meta content="telephone=no" name="format-detection" /> | 忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼 |
| <meta content="email=no" name="format-detection" /> | 忽略識(shí)別郵箱 |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | 優(yōu)先使用 IE 最新版本和 Chrome |
| 關(guān)于X-UA-Compatible** | |
| <meta http-equiv="X-UA-Compatible" content="IE=6" > | 使用IE6 |
| <meta http-equiv="X-UA-Compatible" content="IE=7" > | 使用IE7 |
| <meta http-equiv="X-UA-Compatible" content="IE=8" > | 使用IE8 |
| <meta http-equiv="Pragma" content="no-cache"> | 禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容 |
| <meta name="MobileOptimized" content="240"/> | 瀏覽器不會(huì)自動(dòng)調(diào)整文件的大小,也就是說是固定大小,不會(huì)隨著瀏覽器拉伸縮放 |
*all：文件將被檢索，且頁面上的鏈接可以被查詢艾蓝；
none：文件將不被檢索力崇，且頁面上的鏈接不可以被查詢；
index：文件將被檢索赢织；
follow：頁面上的鏈接可以被查詢亮靴；
noindex：文件將不被檢索；
nofollow：頁面上的鏈接不可以被查詢于置。
**X-UA-Compatible是IE8的一個(gè)專有<meta>屬性茧吊，它告訴IE8采用何種IE版本去渲染網(wǎng)頁，在html的<head>標(biāo)簽中使用。
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
- <!DOCTYPE> 聲明必須是 HTML 文檔的第一行饱狂，位于 <html> 標(biāo)簽之前。它不是 HTML 標(biāo)簽宪彩，是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令休讳。
- 嚴(yán)格模式又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼尿孔；混雜模式：又稱怪異模式或兼容模式俊柔，是指瀏覽器用自己的方式解析代碼。
- 瀏覽器解析時(shí)到底使用嚴(yán)格模式還是混雜模式活合，與網(wǎng)頁中的 DTD 直接相關(guān)雏婶。
- 如果文檔包含嚴(yán)格的 DOCTYPE ，那么它一般以嚴(yán)格模式呈現(xiàn)白指。（嚴(yán)格 DTD ——嚴(yán)格模式）
- 有 URI 的過渡 DTD ——嚴(yán)格模式留晚；沒有 URI 的過渡 DTD ——混雜模式
- DTD不存在或者格式不正確——混雜模式
- HTML5 沒有嚴(yán)格和混雜之分
- 瀏覽器解析時(shí)到底使用嚴(yán)格模式還是混雜模式活合，與網(wǎng)頁中的 DTD 直接相關(guān)雏婶。
- 在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD告嘲，因?yàn)?HTML 4.01 基于 SGML错维。DTD 規(guī)定了標(biāo)記語言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容橄唬。
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML5 不基于 SGML赋焕，所以不需要引用 DTD。
HTML5
<!DOCTYPE html>
- 始終向 HTML 文檔添加 <!DOCTYPE> 聲明仰楚，這樣瀏覽器才能獲知文檔類型隆判。
- DTD：文檔類型定義(Document Type Definition)是一套為了進(jìn)行程序間的數(shù)據(jù)交換而建立的關(guān)于標(biāo)記符的語法規(guī)則。它是標(biāo)準(zhǔn)通用標(biāo)記語言和可擴(kuò)展標(biāo)記語言1.0版規(guī)格的一部分僧界，文檔可根據(jù)某種DTD語法規(guī)則驗(yàn)證格式是否符合此規(guī)則侨嘀。文檔類型定義也可用做保證標(biāo)準(zhǔn)通用標(biāo)記語言、可擴(kuò)展標(biāo)記語言文檔格式的合法性捂襟，可通過比較文檔和文檔類型定義文件來檢查文檔是否符合規(guī)范飒炎，元素和標(biāo)簽使用是否正確。
- SGML：是國(guó)際上定義電子文檔和內(nèi)容描述的標(biāo)準(zhǔn)笆豁。它源于1969年IBM公司開發(fā)的文檔描述語言GML郎汪，GML主要用來解決不同系統(tǒng)中文檔格式不同的問題。后經(jīng)過多年發(fā)展闯狱，1986年經(jīng)ISO批準(zhǔn)為國(guó)際標(biāo)準(zhǔn)ISO8897煞赢，并被稱為SGML。制定SGML的基本思想是把文檔的內(nèi)容與樣式分開哄孤。在SGML中照筑，標(biāo)記分兩種：一種用來描述文檔顯示的樣式，稱為程序標(biāo)記；另一種用來描述文檔中語句的用途凝危，稱為描述標(biāo)記波俄。一個(gè)SGML文件通常分三個(gè)層次：結(jié)構(gòu)、內(nèi)容和樣式蛾默。結(jié)構(gòu)為組織文檔的元素提供框架懦铺，內(nèi)容是信息本身，樣式控制內(nèi)容的顯示支鸡。
瀏覽器亂碼的原因是什么冬念？如何解決？
- 造成html網(wǎng)頁亂碼原因主要是html源代碼內(nèi)中文字內(nèi)容與html編碼不同造成牧挣。但無論是哪種情況造成亂碼在網(wǎng)頁開始時(shí)候都需要設(shè)置網(wǎng)頁編碼急前。
- 比如網(wǎng)頁源代碼是gbk的編碼，而內(nèi)容中的中文字是utf-8編碼的瀑构，這樣瀏覽器打開即會(huì)出現(xiàn)html亂碼裆针。反之網(wǎng)頁是編碼utf-8，內(nèi)容是gbk也會(huì)出現(xiàn)亂碼寺晌。
- 如果瀏覽器瀏覽時(shí)候出現(xiàn)網(wǎng)頁亂碼据块，在瀏覽器中找到轉(zhuǎn)換編碼的菜單。
常見的瀏覽器有哪些折剃，什么內(nèi)核另假？
| 內(nèi)核 | 瀏覽器 |
|---|---|
| Trident內(nèi)核 | IE,MaxThon,TT,The World,360,搜狗瀏覽器等 |
| Gecko內(nèi)核 | Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等 |
| Presto內(nèi)核 | Opera7及以上怕犁。 [Opera內(nèi)核原為：Presto边篮，現(xiàn)為：Blink;] |
| Webkit內(nèi)核 | Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] |
列出常見的標(biāo)簽奏甫，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
| 標(biāo)簽 | 含義 |
|---|---|
| <h1>～<h6> | 標(biāo)題戈轿，h1代表頁面最大的標(biāo)題，h2代表二級(jí)標(biāo)題阵子。思杯。。 |
| <p> | 段落挠进，表示大段文字 |
| <a> | 鏈接色乾，鏈接到一個(gè)地址 |
| href=“#”某點(diǎn)，”#about”跳到頁面上這一點(diǎn)领突，”/getCourse”相對(duì)路徑 | |
| target=“_blank”在新窗口打開暖璧，默認(rèn)在當(dāng)前頁面刷新；“mypage”在頁面嵌入的小框里面打開新頁面 | |
| title=”“在不去點(diǎn)擊的的情況下展示的文字 | |
| <img> | 展示一張圖片 |
| src=‘地址’ | |
| alt=‘’萬一地址有問題展示一點(diǎn)東西君旦，或者也可以備注 | |
| 只閉合標(biāo)簽澎办，前面不需要加“／” | |
| <div> | 語義為“一大塊”嘲碱，用于劃分區(qū)塊，使頁面更加清晰 |
| id=“header””content””footer”;id:給一個(gè)元素起個(gè)名字局蚀，唯一的麦锯，相當(dāng)于身份證號(hào)，每個(gè)id就是不一樣的琅绅，根據(jù)當(dāng)前的整個(gè)功能去寫 | |
| class：代表一類的東西扶欣，不同元素都可以叫一個(gè)class | |
| <ul>, <li> | 無序列表，用于表示并列的內(nèi)容奉件；ul的直接元素是li宵蛀，可以嵌套昆著；常常一起使用县貌；ul的直接子元素就是li |
| <ol>, <li> | 有序列表，用于表示帶有步驟或者編號(hào)的并列內(nèi)容 |
| <dl>, <dt>, <dd> | 用于展示一系列“標(biāo)題：內(nèi)容”的場(chǎng)景 |
| <button> | 按鍵 |
| <strong> | 非常重要 |
| <em> | 需要強(qiáng)調(diào)一下 |
| <span> | 對(duì)于塊級(jí)元素凑懂，相對(duì)里面的一些東西進(jìn)行一些控制煤痕，只是在上面加一些標(biāo)記 |
| <iframe> | 用于嵌入一個(gè)頁面，注意跨域操作問題（假如說當(dāng)前的地址是同一個(gè)域名接谨，后期可以用JS獲劝诘铩；但是如果不一樣脓豪，只能獲认锏邸） |
| <table> | 展示表格，不要用來做布局扫夜，<thaed>楞泼，<tbody>，<tfoot>笤闯，<tr>（一行）堕阔，<td>（一列），<th>（表頭的一列） |
| <br /> | 換行 |
| <hr /> | 創(chuàng)建一條水平線 |
