大家好。
這裡是整理我學習 HTML5 時所學內容的空間。先說明一下,這裡並不會對特定功能進行深入的技術探討。
DTD (Document Type Definition)
這是「文件類型定義」(Document Type Definition)的縮寫。DTD 是一個文本文件,用來描述哪些標籤、屬性和值在特定的 HTML 文件中是有效的。據說每個 HTML 版本都有相對應的 DTD。通常我們會在 HTML 文件的第一行透過 doctype 宣告來定義,這會告知瀏覽器該文件使用了哪個版本的 HTML 或 XHTML。 據說如果遺漏了這個 doctype 宣告,大多數瀏覽器會進入所謂的「怪異模式」(Quirks Mode)狀態。
當瀏覽器遇到沒有 doctype 宣告的頁面時,會認為:「喔,這是一個很久以前編寫的頁面。」接著就會得出「那我就隨便渲染吧」的結論。
如果發現自己製作的網頁在瀏覽器中顯示不如預期,建議檢查一下 doctype 宣告。
以下是各版本的 doctype 宣告方式:
HTML5
<!doctype html>
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.010 Transitional//EN" "http://www.w3.org/TR/html1/DTD /xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
應對 IE9 以下版本的策略
1. 若想讓 IE8 理解 HTML5:
在 </head> 標籤前插入以下程式碼即可。
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
利用條件式註解,只有比 IE9 更舊的 IE 版本(即 IE 6, 7, 8)能理解並套用這段程式碼。神奇的是測試後發現,Chrome 並不會載入該腳本,看來它能辨識出這僅針對 IE。
2. 避免 IE8 的相容性檢視及相容性檢視清單的方法:
請將下方的程式碼加入 <head> 標籤內:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
</head>
在 HTML 程式碼中連結外部樣式表
將外部樣式表連結到網頁的方法是使用 <link> 標籤。
以下是各版本的使用方式:
HTML5
<link rel="stylesheet" href="css/styles.css">
HTML4
<link rel="stylesheet" type="text/css" href = "css/styles.css" >
XHTML 1.0
<link rel="stylesheet" type="text/css" href="css/styles.css" />