HTML 知識點
本文導(dǎo)讀
- HTML、XML、XHTML 有什么區(qū)別
- 怎樣理解 HTML 語義化
- 怎樣理解內(nèi)容與樣式分離的原則
- 有哪些常見的meta標(biāo)簽
- 文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
- 瀏覽器亂碼的原因是什么？如何解決
- 常見的瀏覽器有哪些，什么內(nèi)核
- 列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景
- 如何在html 頁面上展示<div></div>這幾個字符
- titile屬性和alt實行分別有什么作用
HTML、XML、XHTML 有什么區(qū)別
先看一下三者的定義
- HTML：HyperText Markup Language / 超文本標(biāo)記語言
- XML: Extensible Markup Language / 可擴展標(biāo)記語言
- XHTML: Extensible Hypertext Markup Language / 可擴展超文本標(biāo)記語
身為一名前端，HTML是最應(yīng)該知道的
HTML 是用來描述和定義網(wǎng)頁內(nèi)容的標(biāo)記語言，是構(gòu)成網(wǎng)頁的最基本的東西。
所謂超文本，就是說它除了能標(biāo)記文本，還能標(biāo)記其他的內(nèi)容，比如：圖片，鏈接，音頻，視頻等。
它的作用就是一個規(guī)范，告訴所有瀏覽器都統(tǒng)一標(biāo)準，比如我給這段文字加個 <p> 標(biāo)簽，那就是告訴瀏覽器：這是一個段落。我加個 <img> 標(biāo)簽：這是一張圖片，別弄錯了。瀏覽器看到后，就會正確解析，產(chǎn)生相應(yīng)的行為。
什么是XML
它的表現(xiàn)形式就是給一個文檔加一堆標(biāo)簽，說明每段文字是干什么的，有什么意義。這樣做的目的是方便存儲、傳輸、分享數(shù)據(jù)，人和機器都可以很方便的閱讀。XML 和 HTML 有一個明顯的區(qū)別就是：HTML 的標(biāo)簽都是預(yù)定義的，你不可以自己隨便增加，比如你不能自造一個標(biāo)簽叫 <nihao>, 但是 XML 可以，你可以自己“發(fā)明”標(biāo)簽————這也是“可擴展的”一個含義。
最后，XHTML又是什么
XML雖然數(shù)據(jù)轉(zhuǎn)換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，我們在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現(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)題、表頭、無序、有序列表，以達到更方便的協(xié)作及傳播互聯(lián)網(wǎng)內(nèi)容。搜索引擎很好的利用了這些語義化標(biāo)簽抓取內(nèi)容，又鑒于搜索引擎的巨大流量推薦，Web前端不得不考慮SEO，從而兩者實現(xiàn)有益的循環(huán)，共同推進著語義化標(biāo)簽的使用。
- 但Web的發(fā)展超乎想象，起初定義的HTML語義化標(biāo)簽，不足以實現(xiàn)對Web頁面各個部分的功能或位置描述，所以Web前端人員利用HTML標(biāo)簽的id和class屬性，進一步對HTML標(biāo)簽進行描述，如對頁腳HTML標(biāo)簽添加如id="footer"或者class="footer"的屬性（值），以“無聲”的方式在不同的前端程序員或者前后端程序員間實現(xiàn)交流。
- W3C組織意識到了之前HTML版本的不足，推出的HTML5進一步推進了Web語義化發(fā)展，采用了諸如footer、section等語義化標(biāo)簽，彌補了采用id="footer"或者class="footer"形式的不足，以更好的推動Web的發(fā)展。
怎樣理解內(nèi)容與樣式分離的原則
內(nèi)容與樣式分離(或“呈現(xiàn)與內(nèi)容分離”)是網(wǎng)頁布局一直倡導(dǎo)的原則，也是當(dāng)下非常流行的名詞之一，可能很多開發(fā)人員雖然已經(jīng)在很好的利用內(nèi)容與樣式分離原則進行網(wǎng)頁布局，但是并沒有對它有過多的注意，下面就結(jié)合代碼實例簡單介紹一下什么是內(nèi)容與樣式分離。
代碼實例如下:
<!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)容與樣式分離原則做的并不好，因為對文本控制的樣式和網(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>
以上代碼實現(xiàn)了內(nèi)容與樣式分離的布局。由上面兩個代碼可以得出，所謂內(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"> | 適配移動頁面 |
| <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)站，是騰訊公司推出的集新聞信息、互動社區(qū)、娛樂產(chǎn)品和基礎(chǔ)服務(wù)為一體的大型綜合門戶網(wǎng)站。"> | 添加頁面描述 |
文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用
文檔聲明是為了告訴瀏覽器，你的 HTML 文檔是用的什么版本的 HTML 來寫的，這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔。
嚴格模式和混雜模式指什么
- 所謂的嚴格模式，也就是標(biāo)準模式，是指瀏覽器按 W3C 標(biāo)準解析執(zhí)行代碼；
- 混雜模式，則是使用瀏覽器自己的方式解析執(zhí)行代碼，因為不同瀏覽器解析執(zhí)行的方式不一樣，這樣做就是為了兼容在W3C標(biāo)準出現(xiàn)之前就存在的那些“不標(biāo)準”的頁面。
<!doctype html> 的作用
<!doctype html> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器使用最新的HTML 5標(biāo)準來解析渲染頁面。
瀏覽器亂碼的原因是什么？如何解決
產(chǎn)生原因
- 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
- 亂碼一般是英文以外的字符才會出現(xiàn)。
如何解決
首頁，在文件保存的時候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用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個標(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>這幾個字符
<div></div>, 這是用html字符實體來替代，
參考資料：W3school——HTML 字符實體
titile屬性和alt實行分別有什么作用
比如在<img >中，title 規(guī)定有關(guān)元素的額外信息,鼠標(biāo)滑上去后，顯示的值。而alt是在圖片不能正常加載時，在原來圖片位置上展示的值，這對于殘障人士使用相關(guān)屏幕輔助閱讀功能時也有幫助。
