KingKong Bruce記事: HTML 4.01 Strict導覽

主要規則

1. <html>元素：出門在外別忘了帶<html>喔！
每個頁面開端一定要用DOCTYPE，緊跟著DOCTYPE之後，<html>元素一定要是頁面首席元素或是根元素。因此，在DOCTYPE之後，要用<html>標籤放在頁面開端，且應用</html>標籤結束頁面，至於其他的東西都是巢居在這兩個標籤裡頭。
2. 記住要用你的<head>和<body>，才會有比較好的HTML喔！
只有<head>和<body>元素可以直接放在<html>元素裡，其他元素都應放在<head>或<body>元素裡。絕無例外。
3. 沒有<title>的<head>是什麼？
一定要給<head>元素一個<title>元素。這是法律，辦不到的話，那就會使用HTML不符合一致性。<head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>標籤)。
4. 只能給你的<body>吃有益的區塊元素。
只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內，之後才能放進<body>元素內。
5. 行內元素要遠離區塊元素。
唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。

Example：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 如有使用到JavaScript語言請加上此<meta>標籤 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!-- 如有使用到CSS請加上此<meta>標籤 -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<meta name="description" content="此網頁說明或描敘" />
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />
</head>

<body>

</body>
</html>

HTML 4.01 Strict導覽續篇(一)

次要規則

1. <p>元素要遠離區塊元素。
段落是用在文字的，所以別讓區塊元素靠近段落。當然，所有你想要的行內元素，如：<em>、<a>、<strong>、<img>、<q>…等，都可以放在<p>元素裡面。
2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)。
只有<li>元素能放在<ul>和<ol>元素裡，你也不會想放非清單項目的東西放在未排序或排序的清單裡吧？
Example：

<ol>
<li></li>
<li></li>
</ol>

3. 清單項目<li>裡放什麼都行。
<li>元素裡非常自由，文字、行內元素或是區塊元素。
4. 誰知道？<blockquote>只喜歡區塊元素。
<blockquote>元素裡頭需要一個或更多的區塊元素。雖然常見到文字直接放在區塊元素裡，但這還沒列入HTML 4.01的法條裡。務必先把文字和行內元素被在區塊元素內之後，才能把這些內容放進<blockquote>裡。
Example：

<blockquote>
<p>...Context...</p>
</blockquote>

5. 將某個行內元素巢居在另一個行內元素內時，請務必要小心謹慎。
雖然幾乎每個行內元素都能巢居在另一個行內元素裡，但是還是有幾個特例。絕對不要把<a>元素放在<a>元素內，因為這會讓訪客感到極度困擾。還有，<img>這類的空元素不能讓其他行內元素巢居於內。

HTML 4.01 Strict導覽續篇(二)：

注意事項

1. 區塊(block)元素獨立自主；行內(inline)元素隨波逐流。
區塊元素是用在網頁的主要建築區塊，而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
2. 給連結(<a title="...")標題，提升連結識別度。
* 連結標籤要精簡，不要放整句話或一段長文字到連結上。
一般而言，放幾個字就好了，額外的資訊可以放在title屬性。
* 連結標籤要有意義。
不要使用類似「點擊此處」或「本頁」的描述。
* <a>標籤有兩個角色
一是從一個頁面跳到另一個頁面，二是擔任連結的降落點(landing point)或目的地(destination)，要成為降落點可使用id屬性。

<a id="landing">段落二</a>

在URL最後使用"#"來進行降落的動作：

<a href="index.html#landing">段落二</a>

3. <img>標籤的alt屬性是有意義的圖像描述。記得，<img>是行內元素，所以參考第一點最後一段文字。

<p>
<img src="..." alt="..." />
</p>

4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊，加快瀏覽器的處理速度。
在<head>標籤素加入以下基本<meta>標籤：

<!-- charset設定HTML文件是以何種文字碼所寫成，如BIG5、GB2312、UTF-8…等，不分大小寫。 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 設定該HTML文件內之樣式表和預設的Script語言。一般使用環境中，即使不指定，也會自動將樣式表視為CSS，並將Script語言視為JavaScript，但指定預設語言才是正確的作法。 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<!-- 你可能會在搜尋引擎上的結果頁面看到搜尋引擎對此網頁文件的描述，此描述大多來自description，你會想點擊有良好說明的搜尋連結或是沒有說明的搜尋連結。 -->
<meta name="description" content="此網頁說明或描述" />
<!-- keywords以是半型逗點來分隔關鍵字，一般最多10組 -->
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />

除了良好的(X)HTML架構與實用的內容，<meta>標籤內容的設計，也是一個簡單的SEO(Search engine optimization，搜尋引擎最佳化)，讓你的網站網頁可以得到比別人更搜尋引擎排名。
5. 怪異模式
許多瀏覽器有兩種顯示HTML的模式：「怪異模式」用在舊版HTML，標準模式用在HTML 4.01或XHTML1.0/1.1。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE")，許多瀏覽器就會用怪異模式，這會導致不同的瀏覽器出現不一致的頁面顯示結果，例如IE6這個版本的瀏覽器。

參考1：Head First HTML with CSS & XHTML (中文：深入淺出HTML、CSS與XHTML)
參考2：http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
參考3：http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/

KingKong Bruce記事

網頁

HTML 4.01 Strict導覽

沒有留言:

張貼留言