HTML 知識(shí)點(diǎn)
本文導(dǎo)讀
- HTML、XML、XHTML 有什么區(qū)別
- 怎樣理解 HTML 語義化
- 怎樣理解內(nèi)容與樣式分離的原則
- 有哪些常見的meta標(biāo)簽
- 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
- 瀏覽器亂碼的原因是什么？如何解決
- 常見的瀏覽器有哪些杏愤，什么內(nèi)核
- 列出常見的標(biāo)簽痴脾，并簡單介紹這些標(biāo)簽用在什么場景
- 如何在html 頁面上展示<div></div>這幾個(gè)字符
- titile屬性和alt實(shí)行分別有什么作用
HTML、XML辆毡、XHTML 有什么區(qū)別
先看一下三者的定義
- HTML：HyperText Markup Language / 超文本標(biāo)記語言
- XML: Extensible Markup Language / 可擴(kuò)展標(biāo)記語言
- XHTML: Extensible Hypertext Markup Language / 可擴(kuò)展超文本標(biāo)記語
身為一名前端，HTML是最應(yīng)該知道的
HTML 是用來描述和定義網(wǎng)頁內(nèi)容的標(biāo)記語言甜害，是構(gòu)成網(wǎng)頁的最基本的東西舶掖。
所謂超文本，就是說它除了能標(biāo)記文本尔店，還能標(biāo)記其他的內(nèi)容眨攘，比如：圖片主慰，鏈接，音頻鲫售，視頻等共螺。
它的作用就是一個(gè)規(guī)范，告訴所有瀏覽器都統(tǒng)一標(biāo)準(zhǔn)情竹，比如我給這段文字加個(gè) <p> 標(biāo)簽藐不，那就是告訴瀏覽器：這是一個(gè)段落。我加個(gè) <img> 標(biāo)簽：這是一張圖片秦效，別弄錯(cuò)了雏蛮。瀏覽器看到后，就會(huì)正確解析阱州，產(chǎn)生相應(yīng)的行為挑秉。
什么是XML
它的表現(xiàn)形式就是給一個(gè)文檔加一堆標(biāo)簽，說明每段文字是干什么的苔货，有什么意義犀概。這樣做的目的是方便存儲(chǔ)、傳輸夜惭、分享數(shù)據(jù)阱冶，人和機(jī)器都可以很方便的閱讀。XML 和 HTML 有一個(gè)明顯的區(qū)別就是：HTML 的標(biāo)簽都是預(yù)定義的滥嘴，你不可以自己隨便增加木蹬，比如你不能自造一個(gè)標(biāo)簽叫 <nihao>, 但是 XML 可以，你可以自己“發(fā)明”標(biāo)簽————這也是“可擴(kuò)展的”一個(gè)含義若皱。
最后镊叁，XHTML又是什么
XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML走触，但面對成千上萬已有的站點(diǎn)晦譬，直接采用XML還為時(shí)過早。因此互广，我們在HTML4.0的基礎(chǔ)上敛腌，用XML的規(guī)則對其進(jìn)行擴(kuò)展，得到了XHTML惫皱。簡單的說像樊，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。
參考簡書：水劍承王《HTML旅敷、XML生棍、XHTML 有什么區(qū)別》
怎樣理解 HTML 語義化
- 瀏覽器和W3C組織推出的如h1~h6、thead媳谁、ul涂滴、ol的HTML標(biāo)簽友酱，用于在Web頁面中組織對應(yīng)的內(nèi)容，如網(wǎng)頁標(biāo)題柔纵、表頭缔杉、無序、有序列表搁料，以達(dá)到更方便的協(xié)作及傳播互聯(lián)網(wǎng)內(nèi)容壮吩。搜索引擎很好的利用了這些語義化標(biāo)簽抓取內(nèi)容，又鑒于搜索引擎的巨大流量推薦加缘，Web前端不得不考慮SEO，從而兩者實(shí)現(xiàn)有益的循環(huán)觉啊，共同推進(jìn)著語義化標(biāo)簽的使用拣宏。
- 但Web的發(fā)展超乎想象，起初定義的HTML語義化標(biāo)簽杠人，不足以實(shí)現(xiàn)對Web頁面各個(gè)部分的功能或位置描述勋乾，所以Web前端人員利用HTML標(biāo)簽的id和class屬性，進(jìn)一步對HTML標(biāo)簽進(jìn)行描述嗡善，如對頁腳HTML標(biāo)簽添加如id="footer"或者class="footer"的屬性（值）辑莫，以“無聲”的方式在不同的前端程序員或者前后端程序員間實(shí)現(xiàn)交流。
- W3C組織意識(shí)到了之前HTML版本的不足罩引，推出的HTML5進(jìn)一步推進(jìn)了Web語義化發(fā)展各吨，采用了諸如footer、section等語義化標(biāo)簽袁铐，彌補(bǔ)了采用id="footer"或者class="footer"形式的不足揭蜒，以更好的推動(dòng)Web的發(fā)展。
怎樣理解內(nèi)容與樣式分離的原則
內(nèi)容與樣式分離(或“呈現(xiàn)與內(nèi)容分離”)是網(wǎng)頁布局一直倡導(dǎo)的原則剔桨，也是當(dāng)下非常流行的名詞之一屉更，可能很多開發(fā)人員雖然已經(jīng)在很好的利用內(nèi)容與樣式分離原則進(jìn)行網(wǎng)頁布局，但是并沒有對它有過多的注意洒缀，下面就結(jié)合代碼實(shí)例簡單介紹一下什么是內(nèi)容與樣式分離瑰谜。
代碼實(shí)例如下:
<!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>
以上代碼的內(nèi)容與樣式分離原則做的并不好，因?yàn)閷ξ谋究刂频臉邮胶途W(wǎng)頁結(jié)構(gòu)都混合在一起树绩。這樣不但不利于網(wǎng)頁的修改萨脑，而且還讓網(wǎng)頁內(nèi)容不能夠很好的展現(xiàn)于搜索引擎之下，不利于SEO饺饭。
以上代碼修改如下:
<!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>
以上代碼實(shí)現(xiàn)了內(nèi)容與樣式分離的布局砚哗。由上面兩個(gè)代碼可以得出，所謂內(nèi)容砰奕，就是網(wǎng)頁的骨架蛛芥，如果排版網(wǎng)頁的結(jié)構(gòu)提鸟，而樣式就是對內(nèi)容的潤色，比如div的寬度或者高度仅淑，字體的顏色大小等等称勋。這樣網(wǎng)頁的內(nèi)容就赤裸裸的展現(xiàn)在搜索引擎面前，也利于網(wǎng)站的優(yōu)化涯竟。
參考螞蟻部落：什么是表現(xiàn)和內(nèi)容分離
有哪些常見的meta標(biāo)簽
| 標(biāo)簽 | 含義 |
|---|---|
| <meta> | 元數(shù)據(jù) |
| <meta charset="utf-8"> | 指定文檔編碼 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 適配移動(dòng)頁面 |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | 定制頁面圖標(biāo) |
| <meta name="referrer" content="never"> | 設(shè)置 referer |
| <meta name="description" content="騰訊網(wǎng)(www.QQ.com)是中國瀏覽量最大的中文門戶網(wǎng)站赡鲜，是騰訊公司推出的集新聞信息、互動(dòng)社區(qū)庐船、娛樂產(chǎn)品和基礎(chǔ)服務(wù)為一體的大型綜合門戶網(wǎng)站银酬。"> | 添加頁面描述 |
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用
文檔聲明是為了告訴瀏覽器，你的 HTML 文檔是用的什么版本的 HTML 來寫的筐钟，這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔揩瞪。
嚴(yán)格模式和混雜模式指什么
- 所謂的嚴(yán)格模式，也就是標(biāo)準(zhǔn)模式篓冲，是指瀏覽器按 W3C 標(biāo)準(zhǔn)解析執(zhí)行代碼李破；
- 混雜模式，則是使用瀏覽器自己的方式解析執(zhí)行代碼壹将，因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣嗤攻，這樣做就是為了兼容在W3C標(biāo)準(zhǔn)出現(xiàn)之前就存在的那些“不標(biāo)準(zhǔn)”的頁面。
<!doctype html> 的作用
<!doctype html> 聲明位于文檔中的最前面的位置诽俯，處于 <html> 標(biāo)簽之前妇菱。此標(biāo)簽可告知瀏覽器使用最新的HTML 5標(biāo)準(zhǔn)來解析渲染頁面。
瀏覽器亂碼的原因是什么暴区？如何解決
產(chǎn)生原因
- 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的恶耽。
- 亂碼一般是英文以外的字符才會(huì)出現(xiàn)。
如何解決
首頁颜启，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的偷俭。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">缰盏，這句話的意思是告訴瀏覽器在打開這個(gè)頁面的時(shí)候不要去猜了涌萤，直接用utf-8去解碼。 同理口猜，如果你的文件保存為gbk格式负溪，一定在文件里添加<meta charset="gbk">。
參考簡書：若愚——聊一聊編碼與亂碼
常見的瀏覽器有哪些济炎，什么內(nèi)核
| 瀏覽器 | 內(nèi)核 |
|---|---|
| Internet Explorer | IE內(nèi)核 |
| Firefox | Gecko |
| Opear | Presto |
| Safari&Chromr | Webkit |
| 國內(nèi)大部分瀏覽器 | IE內(nèi)核 |
列出常見的標(biāo)簽川抡，并簡單介紹這些標(biāo)簽用在什么場景
| 標(biāo)簽 | 場景 |
|---|---|
| <head> | 頭部，head標(biāo)簽是頁面的“頭部”， 一般來說崖堤，只有6個(gè)標(biāo)簽?zāi)芊旁?lt;head>標(biāo)簽內(nèi)：<title>侍咱、<meta>、<link>密幔、<style>楔脯、<script>、<base> |
| <body> | html 頁面主體 |
| <a> | 設(shè)置鏈接 |
| <h1>~<h6> | 標(biāo)題 |
| <div> | 塊狀布局 |
| <img> | 圖片 |
| <p> | 段落文字 |
| <ol> <ul> <li> | 有序列表和無序列表 |
| <table><thead><tbody><tr><th><td> | 表格 |
| <form><input> | 表單 |
如何在html 頁面上展示<div></div>這幾個(gè)字符
<div></div>, 這是用html字符實(shí)體來替代胯甩，
參考資料：W3school——HTML 字符實(shí)體
titile屬性和alt實(shí)行分別有什么作用
比如在<img >中昧廷，title 規(guī)定有關(guān)元素的額外信息,鼠標(biāo)滑上去后，顯示的值偎箫。而alt是在圖片不能正常加載時(shí)木柬，在原來圖片位置上展示的值，這對于殘障人士使用相關(guān)屏幕輔助閱讀功能時(shí)也有幫助淹办。
