我经常写网页。
很多人喜欢用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设置和布局设置，我将在后面的文章中介绍。并且在全文结尾处，我会提供完整的模板下载。
（完）
赖勇浩 说：
你需要的一个更棒的文本编辑器，比如 ultraedit（商业授权）或者装了一些插件的 gedit（开源软件）。gedit 现在出了官方的 windows 安装包了，建议试一下。
我个人不喜欢 notepad++ 和 editplus。
2009年2月 7日 22:17 | # | 引用
谢小漫 说：
还是喜欢dreamweaver来写html和css，对于css有智能提示就是爽。
2009年2月 7日 22:20 | # | 引用
土豆 说：
我还是喜欢手写代码，那样就当练习打字，不过量大了确实挺麻烦的……呵呵想与你成为朋友……
我的联系方式：[email protected]
2009年2月 8日 00:02 | # | 引用
netwjx 说：
2009年2月 8日 00:26 | # | 引用
Sutra 说：
我用decorator模式，这些头呀啥的使用装饰者模式自己加上去。
2009年2月 8日 04:34 | # | 引用
笑话 说：
最好的文本编辑器是vim。。。。
windows和linux下都可以用。。。。
2009年2月 8日 09:12 | # | 引用
mizugorou 说：
现在还在用notepad++但是想换掉,不是因为作者观点原因,只是最近不知为何它经常崩溃.而且找不到它有真正的Unicode模式(打开UTF8是格式是ANSI as UTF-8).加上写程序一行代码长的话notepad++就会变得很卡..
当然目前用过的文本编辑器中notepad++还是相当不错的.
好多人都说最好的文本编辑器是vim,但还是没能习惯.
emeditor/ultraedit应该不错,但是写代码的东西不太喜欢收费/盗版.
doctype的话还是喜欢xhtml 1.1,原因也说不清楚..
2009年2月 8日 12:37 | # | 引用
Darpple 说：
还记得初中的时候，第一次用FrontPage出了个简单的Homepage就放到虎翼的免费空间上了。当时，我还傻傻的认为FrontPage、DreamWeaver这样的可视化制作网页的软件，可以让网页制作技术越来越发达。当时，还是以表格布局为主。现在已经div+css了..
2009年2月 8日 14:11 | # | 引用
edmond 说：
谢谢您的连载，正好我自己也要学习html与css。
2009年2月 9日 09:19 | # | 引用
laoli 说：
谢谢，我也在向标准学习！
2009年5月 5日 00:48 | # | 引用
小A 说：
你的模板没有通过http://validator.w3.org/check 验证，有8处错误---致命
2009年5月15日 09:18 | # | 引用
Rui 说：
我想大家推荐PSPad,LZ说的功能就有啦~
2011年6月 5日 20:06 | # | 引用
alvin 说：
博主可以用 Emmet插件（前身zed coding），只需要在编辑器输入：html:5 然后ctrl+e,就能得到一个类似你做的模板的代码。例子：
Emmet 还有更多强大的功能
2015年1月13日 11:05 | # | 引用
丁丁 说：
我想问一下，你的博客有模板吗？
2016年8月 6日 23:58 | # | 引用