關(guān)于HTML
超文本標記語言（HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁
發(fā)展
| 年份 | 版本 |
|---|---|
| 1997.1 | HTML 3.2 |
| 1997.12 | HTML 4 |
| 1999.12 | HTML 4.01 |
| 2014.1 | HTML 5 |
一個典型的HTML5頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>HTML5</h1>
</header>
<main></main>
<footer></footer>
</body>
</html>
一個典型的HTML4頁面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="header">
<h1>HTML4</h1>
</div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
HTML vs XML vs XHTML(筆試重點)
- HTML，超文本標記語言，是語法較為松散的、不嚴格的Web語言；
- XML，可擴展標記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)參考；
- XHTML，可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格參考。
表現(xiàn)(內(nèi)容)、樣式、行為分離
- 寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
- 寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
- HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式
語義化HTML
語義化HTML是一種編寫HTML的方式
選擇合適的標簽、使用合理的代碼結(jié)構(gòu)，便于開發(fā)者閱讀，同時讓瀏覽器的爬蟲和機器很好地解析。
1、什么是HTML語義化？
基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調(diào)（strong em）等等
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2、為什么要語義化？
- 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；
- 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
- 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；
- 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
- 便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
3、寫HTML代碼時應(yīng)注意什么？
- 盡可能少的使用無語義的標簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
- 不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。
- 需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
- 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
- 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
- 每個input標簽對應(yīng)的說明文本都需要使用標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。
一個簡單的頁面
<!--標準模式（standard mode）的聲明-->
<!DOCTYPE html>
<!--為文檔設(shè)置語言-->
<html lang="zh">
<head>
<meta charset="utf-8"> <!--設(shè)定字符編碼-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--設(shè)置瀏覽器最新內(nèi)核渲染-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--設(shè)置移動端渲染效果-->
<meta name="keywords" content="前端 饑人谷">
<meta name="description" content="最有愛的前端學(xué)習(xí)社區(qū)">
<title>Document</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>段落 <span>3</span></p>
<a target="_blank">饑人谷.com</a>
<!--target為轉(zhuǎn)跳規(guī)則-->
<div class="box"></div>
<!--div：語音為一大塊-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
有哪些常見的meta標簽
- 定義和用法
<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta> 標簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。 - 常見標簽
| 標簽 | 說明 |
|---|---|
<meta name="keywords" content=""> |
向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞 |
<meta name="description" content=""> |
告訴搜索引擎你的站點的主要內(nèi)容 |
<meta name="author" content="你的姓名"> |
告訴搜索引擎你的站點的制作的作者 |
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> |
指定字符集 |
<meta http-equiv="refresh" content="n;url="> |
定時讓網(wǎng)頁在指定的時間n內(nèi)跳轉(zhuǎn) |
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> |
可以用于設(shè)定網(wǎng)頁的到期時間，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時間格式 |
<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時間格式 |
文檔聲明的作用?
DOCTYPE是docunment type（文檔定義）的簡寫，用來說明web設(shè)計中所用的html或xhtml的類型，指出瀏覽器或者其他閱讀程序按照什么樣的規(guī)則（W3C所發(fā)布的一個文檔類型定義即DTD）集去解釋文檔中的標記.
嚴格模式和混雜模式指什么?
嚴格模式： 又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。
混雜模式： 又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
如何區(qū)分： 瀏覽器解析時到底使用嚴格模式還是混雜模式，與網(wǎng)頁中的 DTD 直接相關(guān)。
- 如果文檔包含嚴格的 DOCTYPE ，那么它一般以嚴格模式呈現(xiàn)。（嚴格 DTD ——嚴格模式）
- 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標識符，就是聲明最后的地址）會導(dǎo)致頁面以混雜模式呈現(xiàn)。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）
- DOCTYPE 不存在或形式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。（DTD不存在或者格式不正確——混雜模式）
- HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容。（ HTML5 沒有嚴格和混雜之分）
意義： 嚴格模式與混雜模式存在的意義與其來源密切相關(guān)，如果說只存在嚴格模式，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰(zhàn)時的混亂，每個瀏覽器都有自己的解析模式。
嚴格模式與混雜模式的語句解析不同點有哪些？
1）盒模型的高寬包含內(nèi)邊距padding和邊框border
- 在W3C標準中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。
2）可以設(shè)置行內(nèi)元素的高寬
- 在Standards模式下，給span等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
3）可設(shè)置百分比的高度
- 在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置高度，子元素設(shè)置一個百分比的高度是無效的。
4）用margin:0 auto設(shè)置水平居中在IE下會失效
- 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:
body{text-align:center};#content{text-align:left}
5）quirk模式下設(shè)置圖片的padding會失效
6）quirk模式下Table中的字體屬性不能繼承上層的設(shè)置
7）quirk模式下white-space:pre會失效
<!doctype html> 的作用?
<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽。
補充內(nèi)容：
一、常用的具體聲明：
1、HTML5（一種）：`<!DOCTYPE html>`
2、HTML 4.01（三種）：嚴格模式包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）；過渡模式包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）；框架模式等同于過渡模式，但允許框架集內(nèi)容。
HTML 4.01 Strict ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3、XHTML 1.0（四種）：前三種模式同上，XHML 必須以格式正確的 XML 來編寫標記。
XHTML 1.0 Strict ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
二、嚴格模式與混雜模式的來源
當年Netscape4（網(wǎng)景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現(xiàn)CSS機制時，并沒有遵循W3C提出的標準。Netscape4 提供了糟糕的支持，而IE4 雖然接近標準，但依舊未能完全正確的支持標準。盡管IE 5 修復(fù)了IE4 許多的問題，但是依然延續(xù)CSS實現(xiàn)中的其它故障（主要是盒模型問題）。
為了保障自己的網(wǎng)站在各個瀏覽器上顯示正確，網(wǎng)頁開發(fā)者們不得不依據(jù)各個瀏覽器自身的規(guī)范來使用css，因此大部分網(wǎng)站的css實現(xiàn)并不符合W3C規(guī)范的標準。
然而隨著標準一致性越來越重要，瀏覽器開發(fā)商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現(xiàn)有的 css，完全去遵循標準，會使許多舊網(wǎng)站或多或少受到破壞，如果瀏覽器突然以正確的方式解析現(xiàn)存的css，陳舊的網(wǎng)站的顯示必然會受到影響。所以，所有的瀏覽器都需要提供兩種模式：混雜模式服務(wù)于舊式規(guī)則，而嚴格模式服務(wù)于標準規(guī)則。
瀏覽器亂碼的原因是什么？如何解決
原因： 網(wǎng)頁源代碼與瀏覽器使用了不一致的編碼方式。
- 比如網(wǎng)頁源代碼是gbk的編碼，而內(nèi)容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現(xiàn)html亂碼。反之網(wǎng)頁是編碼utf-8，內(nèi)容是gbk也會出現(xiàn)亂碼。
- html網(wǎng)頁編碼是gbk，而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼。
- 瀏覽器不能自動檢測網(wǎng)頁編碼，造成網(wǎng)頁亂碼。
解決方法： 修改編碼方式，使之一致。
常見的瀏覽器有哪些，什么內(nèi)核
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
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的分支）]
列出常見的標簽，并簡單介紹這些標簽用在什么場景
| 標簽 | 場景 |
|---|---|
| head | head標簽是頁面的“頭部”， 一般來說，只有6個標簽?zāi)芊旁?code><head>標簽內(nèi)<title>、<meta>、<link>、<style>、<script>、<base>
|
| body | body標簽是頁面的“身體” |
| h1~h6標簽 | 設(shè)置不同的標題 |
| p標簽 | 使用p標簽來標記一段文字 |
| br/ | 換行 |
<div> |
主要用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景 |
| ul | 無序列表 |
| ol | 有序列表 |
| form | 設(shè)置一個表單 |
| img | 設(shè)置一個圖像 |
| a | 連接 |
