HTML相關知識之文檔聲明標簽-HTML學習之路（2）

篇文章介紹了 注釋標簽，我個人感覺很容易理解，在日常編碼中，大多數編輯器都有注釋標簽的快捷鍵，如sublime或VS code里在html代碼里，選中想要注釋掉的代碼后，直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。

這篇我寫<!DOCTYPE>標簽，說起來這個標簽，很常見，因為它會出現在每一個httml文檔的最開頭，然而，我們很少去重視它，為什么呢？

說到這個標簽，我不得不說起html的版本歷史了。

在大約10年前吧，html5應用還不如今天這么廣泛吧，于是當時的文檔類型聲明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很長，也很難記，由于我入行晚，懂得這玩意就只是一個聲明了，比如strict表示嚴格模式。其他的我也不想知道了。

當然html版本的規范從4到5的過渡經歷了太多年，因為要考慮老瀏覽器的兼容性，再加上前期移動設備配置低，不支持較為復雜的媒體元素。于是，一些資歷深的前端開發人員，面對這么長的代碼還是有很長一段時間。

當然，9102年都快過完了，我們這邊已經不需要再考慮這些了，于是，我直接就用html5了。

然后聲明文檔給格式，就變得很簡單了。

<!DOCTYPE html>

最開始我是使用sublime生成的模板練習的，然后，犯懶，直接輸入了<html>就出來下面的代碼：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就開始進行填充了。

直到今天我才注意到原來<!DOCTYPE html>是單獨的一行，與下方<html></html>是兩碼事。

所以，我重新看了下書上的強調內容：

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前，沒有結束標簽，對大小寫不敏感。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD(文檔類型定義)，因為 HTML 4.01 基于 SGML（標準通用標記語言)）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML，所以不需要引用 DTD。

關于SGML，參見https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。

<!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，但允許添加模型（例如提供對東亞語系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后，雖然上方的html4和xml的文檔類型聲明這么麻煩了，但是這里沒什么知識點了，因為如今，html5應用這么普及了，我們只需在文檔開頭寫<!DOCTYPE html>即可，當然html4的嚴格模式和傳統模式大概知道就行了。

TML我們也學了那么久了，是時候看一些面試題了，畢竟學習完找工作要面試，你工作能力再強，面試這一關還是要過得。所以面試題占了很重要的成分。下面我來總結一部分，盡量全面一些，既要接近我們所學，又要滿足真實面試場景。

1、請說出XHTML和HTML的區別

答： 1、文檔頂部doctype聲明不同，xhtml的doctype頂部聲明中明確規定了xhtml DTD的寫法；

2、html元素必須正確嵌套，不能亂；

3、屬性必須是小寫的；

4、屬性值必須加引號；

5、標簽必須有結束，單標簽也應該用 “/” 來結束掉；

2、請寫出至少5個HTML塊元素標簽

答： div p ul li table h1 h2 h3 ... h6 form 等

3、請寫出至少5個HTML行內元素標簽

答：span a i label img input button textarea select 等

4、請寫出table標簽下面會包含哪些標簽元素

答： tr th td thead tbody tfoot 等

5、很多網站不常用table iframe這兩個元素，知道原因嗎？

答：因為瀏覽器頁面渲染的時候是從上至下的，而table 和 iframe 這兩種元素會改變這樣渲染規則，他們是要等待自己元素內的內容加載完才整體渲染。用戶體驗會很不友好。

6、jpg和png格式的圖片有什么區別？

答： jpg是有損壓縮格式，png是無損壓縮格式。所以，相同的圖片，jpg體積會小。比如我們一些官網的banner圖，一般都很大，所以適合用jpg類型的圖片。但png分8位的和24位的，8位的體積會小很多，但在某些瀏覽器下8位的png圖片會有鋸齒。

7、請用html知識解決seo優化問題

答：網站上線應該設置TDK

TDK就是：

然后就是html語義化標簽，要簡潔，合理，這樣可以在css和js加載不全的時候，使我們的html文檔盡量清晰的展示出來，而不會特別亂；

8、常用瀏覽器有哪些，內核都是什么？

答：常用瀏覽器有 IE 火狐(firefox) chrome safari 360 搜狗等

內核：IE的是 Trident

火狐的是 Gecko

chrome和safari 用的是 Webkit

360和搜狗這些分極速模式和兼容模式，極速模式用的Webkit的內核，兼容模式用的Trident內核。

9、請至少寫出5個H5的新標簽

答： header nav footer canvas datalist article mark

10、a標簽在新窗口打開鏈接怎么加屬性？

答： <a target="_blank">鏈接</a>

11、寫了2個<a>標簽，兩個標簽之間有空格的情況遇到過嗎？

答：遇到過，一般換行寫的時候會出現這種情況。代碼：

這樣“我們”和“你們”之間就會有明顯的空格，如圖：

怎么樣，是不是空格挺明顯的。

解決辦法就是不換行寫，把兩個a標簽寫在一行里。

12、form標簽上定義請求類型的是哪個屬性？定義請求地址的是哪個屬性？

答：form表單定義請求類型的是 method 屬性，定義請求地址的是 action屬性

好啦，基本上html這部分面試題就這么多，肯定還有沒有總結到的，這些面試題一定要會，甚至比我總結的多了更好。喜歡文章的小伙伴記得關注公眾號：書軟

TD(文檔類型定義)的作用是定義XML文檔的合法構建模塊。

DTD主要用處是約束XML文件, 也可去約束HTML XHTML...

DTD不要有太深的了解, 要求大家可以看懂, 可以根據別人提供的dtd文件, 寫出對于的XML文件即可;

內部的DOCTYPE聲明

假如DTD被包含在您的XML源文件中, 它應當通過下面的語法包裝在一個DOCTYPE聲明中：

<!DOCTYPE 根元素 [元素聲明]>

帶有 DTD 的 XML 文檔實例:(選擇"查看源代碼"命令。)

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

以上DTD解釋如下：

!DOCTYPE note(第二行)定義此文檔是note類型的文檔。

!ELEMENT note(第三行)定義note元素有四個元素："to、from、heading,、body"

!ELEMENT to(第四行)定義to元素為"#PCDATA"類型

!ELEMENT from(第五行)定義frome元素為"#PCDATA"類型

!ELEMENT heading(第六行)定義heading元素為"#PCDATA"類型

!ELEMENT body(第七行)定義body元素為"#PCDATA"類型

外部文檔聲明

假如DTD位于XML源文件的外部, 那么它應通過下面的語法被封裝在一個DOCTYPE定義中：

<!DOCTYPE 根元素 SYSTEM "文件名">這個XML文檔和上面的XML文檔相同, 但是擁有一個外部的DTD:(選擇"查看源代碼"命令。)

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

這是包含DTD的"note.dtd"文件：

<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

通過XML解析器進行驗證

當您試圖打開某個XML文檔時, XML解析器有可能會產生錯誤。通過訪問parseError對象, 就可以取回引起錯誤的確切代碼、文本甚至所在的行。

注釋：load( )方法用于文件, 而loadXML( )方法用于字符串。

//創建一個xml解析器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //只能用于IE瀏覽器
//是否異步加載xml文件, 最新版的IE9瀏覽器必須添加此語句, 并且屬性值設為false(同步), 否則瀏覽器不能正確解析驗證
xmlDoc.async="false"; //雙引號可要可不要
//開啟校驗功能
xmlDoc.validateOnParse="true"; //雙引號可要可不要
//裝載xml文檔
xmlDoc.load("wangye.xml");
//如果有錯誤信息,則輸出
document.write("<br>Error Code: ");
document.write(xmlDoc.parseError.errorCode);
document.write("<br>Error Reason: ");
document.write(xmlDoc.parseError.reason); //reason: 理由, 原因
document.write("<br>Error Line: ");
document.write(xmlDoc.parseError.line);

內外部DTD文檔結合

<!DOCTYPE 根元素 SYSTEM "DTD文件路徑"[定義內容]>

XML文件使用DOCTYPE聲明語句來指明它所遵循的DTD文件, DOCTYPE聲明語句有兩種形式：

當引用的文件在本地時, 采用如下方式：

<!DOCTYPE 文檔根結點 SYSTEM "DTD文件的URL">

當引用的文件時一個公共的文件時, 采用如下形式：

<!DOCTYPE 文檔根結點 PUBLIC "DTD名稱" "DTD文件的URL">

在線咨詢

上一篇：前端多個 Tab 頁點擊切換時當前頁面顯示成別的頁面的數據
下一篇：JavaScript 事件監聽函數及其兼容性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML相關知識之文檔聲明標簽-HTML學習之路（2）

常用的 DOCTYPE 聲明

您的項目需求