HTML（HyperText Markup Language）：一種用于創(chuàng)建網(wǎng)頁的標準標記語言。
HTMLvsXMLvsXHTML
- HTML：超文本標記語言，語法較為松散的、不嚴格的web語言
- XML：可擴展標記語言，主要用于儲存數(shù)據(jù)和結(jié)構(gòu)參考
- XTHML：可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格參考
小結(jié)：HTML中語法不嚴格主要體現(xiàn)在：沒有報錯提示，標簽不閉合也可以顯示頁面內(nèi)容等；XML用于傳輸數(shù)據(jù)，允許創(chuàng)造者定義自己的標簽和文檔結(jié)構(gòu)；XTHML一種更嚴謹?shù)腍TML版本，體現(xiàn)在：標簽字母要小寫，標簽要閉合等。
HTML語義化
含義：選擇合適的標簽及合理的代碼結(jié)構(gòu)，結(jié)構(gòu)劃分合理，有利于網(wǎng)絡爬蟲的搜索和瀏覽器解析。
從代碼的本身就可以判斷包含內(nèi)容的作用，HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）就是基于這樣的設(shè)計原則。
內(nèi)容和樣式分離的原則
組成網(wǎng)頁三部分：結(jié)構(gòu)層（html）、表現(xiàn)層（css）、行為層（js）
原則：先寫html，著重html的代碼結(jié)構(gòu)和語義化，體現(xiàn)頁面內(nèi)容的結(jié)構(gòu)、內(nèi)容，后用css進行樣式設(shè)置。
分離的優(yōu)勢
- 瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小。
- 網(wǎng)頁修改設(shè)計時，效率、省時。根據(jù)html標簽內(nèi)ID或class的標記，到CSS里找到相應的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式。
- 更好地被搜索引擎收錄。基于內(nèi)容與樣式分離的原則，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標簽代碼就會更加適合搜索引擎。
- css樣式的分離，它可以根據(jù)不同的瀏覽器，達到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式。
meta標簽
作用：<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
兩種屬性：name屬性和http-equiv屬性
name屬性語法格式是：＜meta name="參數(shù)" content="具體的參數(shù)值"＞
http-equiv屬性語法格式是：＜meta http-equiv="參數(shù)" content="參數(shù)變量值"＞
name屬性主要有以下幾種參數(shù)
- keywords（告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么）
示例：＜meta name ="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human"＞
- description(告訴搜索引擎你的網(wǎng)站主要內(nèi)容)
舉例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞
- robots(告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引)
content的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。
舉例：＜meta name="robots" content="none"＞
- author(標注網(wǎng)頁的作者)
舉例：＜meta name="author" content="root,root@21cn.com"＞
http-equiv屬性主要有以下幾種參數(shù)
- Expires（用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務器上重新傳輸）
- Pragma(cache模式)
禁止瀏覽器從本地計算機的緩存中訪問頁面內(nèi)容 - Refresh(自動刷新并指向新頁面)
- author(標注網(wǎng)頁的作者)
文檔聲明的作用：聲明該文檔的類型，是html、xml還是xhtml等，讓瀏覽器按正確的類型去解析該文檔。
嚴格模式（ Standards 模式）：用于呈現(xiàn)遵循最新標準的網(wǎng)頁
混亂模式（Quirks 模式）：用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁，一種比較寬松的向后兼容的模式
<!doctype html>的作用：讓瀏覽器進入標準模式，使用HTML5的標準來解析渲染頁面
瀏覽器亂碼的原因：保存的編碼格式和瀏覽器解碼格式不一致所致
解決辦法：萬國碼（utf-8） <meta charset="utf-8">
常見的瀏覽器和與之相對應的內(nèi)核
| 瀏覽器 | 渲染引擎 |
|---|---|
| Chrome | Blink |
| Firefox | Gecko |
| Safari | Webkit |
| IE | Trident |
常見標簽和與之應用的場景
| 標簽 | 場景 |
|---|---|
| head | 定義文檔的頭部，描述文檔的屬性和信息 |
| body | 定義文檔的主體 |
| h1 | 標題1 |
| p | 段落 |
| a | 定義超鏈接 |
| table | 表格 |
| ul | 無序列表 |
| ol | 有序列表 |
| button | 按鈕 |
| img | 插入圖像 |
