我經常寫網頁。
很多人喜歡用Dreamweaver，但是我的習慣是直接手寫程式碼。雖然那樣看上去很原始，但是能夠做到對網頁最精確的控制，並且減少了不必要的冗餘程式碼。
手寫程式碼最麻煩的地方在於，每次都必須寫一些重複性的程式碼，比如<head>和<body>這樣的標籤。所以，這兩天我就在做一個模板，將那些重複性的程式碼都事先寫好，以後寫網頁的時候，只要直接寫內容部分就可以了。
下面就是我製作模板的過程，也順便整理了一下相關的HTML和CSS知識。我想對需要自己設計網頁的朋友，應該都是有用的。
因為內容比較多，需要分三次才能貼完。今天是第一部分"HTML模板"。
=====================
一個標準的網頁模板，應該看上去是下面這樣的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" /><style type="text/css">
@import url(style.css );
</style><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="" />
</head>
<body>
</body>
</html>
它分成這樣幾個部分：
1. Doctype部分
這個部分宣告網頁的型別。我使用的是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、XHTML 1.0 Strict和XHTML 1.0 Transitional。相應的DOCTYPE分別為
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這裡需要注意，如果選擇xhtml型別，那麼第一行必須加入xml型別說明，而且<html>就是根元素，它後面必須註明文件的名稱空間，要寫成下面這樣：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
我個人還是推薦使用HTML 4，因為xHTML取消了一些標籤，用起來不是很靈活。根據我的觀察，一些大網站，比如Google和Yahoo!，主頁都是使用HTML 4。更多DocTYPE型別，請訪問W3C網站。
2. TITLE部分
這個部分最好寫成"網站名稱 - 網頁描述"，或者"網頁描述 - 網站名稱"，有利於搜尋引擎收入你的網頁。
3. META部分
這個部分對網頁進行說明。
第一行是必須要有的，對網頁使用的語言編碼進行說明。我在這裡使用了UTF-8編碼。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
第二行對網頁內容進行描述，第三行提供了網頁的關鍵詞。它們是選擇性的，不一定要填寫。
<meta name="description" content="" />
<meta name="keywords" content="" />
你還可以在這裡加入更多的說明，比如網頁生成的時間、作者、所用的軟體、版權說明等等。
<meta name="date" content="" />
<meta name="author" content="" />
<meta name="generator" content="" />
<meta name="copyright" content="" />
4. Style部分
這個部分加入樣式表。
我使用了import命令，此外還可以使用<link>標籤，效果是一樣的。
<link rel="stylesheet" href="" type="text/css" />
5. Favicon部分
這一行是加入網頁的圖示。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
6. Feed部分
這一行是加入網頁的Feed。
<link rel="alternate" type="application/atom+xml" title="Atom" href="" />
type型別除了上面的"application/atom+xml"，還可以寫成"application/rss+xml"，這根據你的Feed格式而定。
======================
上面只是最基本的網頁模板，還缺少起碼的CSS設定和佈局設定，我將在後面的文章中介紹。並且在全文結尾處，我會提供完整的模板下載。
（完）