良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候，我总是首先告诉他们：良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。
让我们来看一些写得并不友好的HTML标记，并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。
注： Chris Cyier在这里使用了两个文档来进行本文的代码说明： bad code和 good code。大家学习的时候请参考着这两个文件。
1.严格的 DOCTYPE
我们要做到这一点，只需要按正确的步骤来做即可。没必要去讨论是否使用HTML 4.01或 XHTML 1.0，两者都对我们书写正确的代码提出了严格的要求。
但无论如何我们的代码不应该使用任何Tables表格来进行布局，所以也就没必要使用Transitional DOCTYPE.
注：所谓的DTD就是文档类型声明，简单来说，就是对特定文档所定义的一些规则，这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种： STRICT（严格类型）， TRANSITIONAL（过渡类型）和 FRAMESET（框架类型）。目前，我们使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代码书写的还算良好，那把现有的TRANSITIONAL转为STRICT还是比较方便的。反之，也不用太急着转，个人觉得，STRICT更严谨，但用TRANSITIONAL也并没有太大影响。
2. Character set& encoding characters
在我们的《head》部份，第一件事情就是声明字符集。我们使用了UTF-8，但是把它放到了《title》后面。让我们把字符集声明移动到最上面，因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。
除了字符集声明的位置外，《title》中出现的奇怪字符也是需要注意的问题，比如最常用的”&“字符，我们应该使用字符实体”&“来替换它。
3.适当的缩进
在书写代码的时候，缩进并不会影响网页的外观，但使用适当的缩进能使代码更具可读性，标准的缩进方法是当你开始一个新的元素时缩进一个Tab位（或几个空格）。另外，记得，关闭元素的标签与开始标签对齐。
注：一些朋友会嫌书写代码的时候缩进比较麻烦，如果仅仅是你一个人阅读这份代码，那可能没什么问题，你自己觉得OK就好。但如果是协作或你的作品是公开发布分享的，那书写漂亮的可读化性更高的代码就很有必要了。
4.使用外部CSS和 JavaScript
我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规，因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们，并使用相同的代码。Javascript也是同样的道理。
注：当然，这个问题或许也并不是那么严重。比如作为WordPress主题来说，写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>溅</title>
<style>
<!--
body{
background:url(img/bg9.gif);
margin:0px;
padding:0px;
}
.pic{
border:1px solid#00406c;
}
p{
padding-top:30px;
color:#001671;
}
p.con{
padding-left:4px;
padding-right:4px;
}
p.title{
paddin-top;0px;
}
.chara1{
font-size:12px;
background-color:#90bcff;
}
.chara1 td{
text-align:center;
}
.chara2{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3{
background:#e9fbff url(img/self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px;
padding-left:30px;
font-size:12px;padding-right:15px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="img/banner3.jpg" border="0"/></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr><td>首面</td><td>心情日记</td><td>Free</td><td>一起走到</td><td>从明天起</td><td>纸飞机</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="150px" class="chara2"><p><img src="img/selfpic.jpg" class="pic"/><br/>我的日记本</p>
<p class="con">他们彼此深信，是瞬间并发的热情让他们相遇。这样的确定是美丽的，但变幻无常更为美丽。</p>
<p><img src="img/selfpic2.jpg" class="pic"/><br/>心情轨迹</p>
<p class="con">董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍忽然赐给他一个神奇的礼物</p></td>
<td class="chara3">
<h4>介绍</h4>
<p>我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！</p>
<h4>照相本子</h4>
<p>关于童年，你记住了什么？<br>
两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。<br>
三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。<br>
四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。<br>
我真的没骗你，我通通都记得，还有照片为证。
</p>
<h4>地下铁</h4>
<p>天使在地下铁的入口，<br>
和我说再见的那一年，<br>
我渐渐看不见了。<br>
十五岁生日的那年秋天早晨，<br>
窗外下着毛毛雨，<br>
我喂好我的猫。<br>
六点零五分，<br>
我走进地下铁。</p>
<h4>向左走向右走</h4>
<p>They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.</p>
<br>
</td>
</tr>
</table>
</body>
</html>
个人网页一般为博客模式，即以前比较流行的新浪博客、网易博客等博客模式。不过由于这些博客仅仅支持有限的HTML代码添加，对于JS以及CSS代码基本不支持，故而对于有个性化需求人群来说，还是有些过于“古板”。
个人搭建网页比较主流的程序有wordpress、dedeCMS、帝国CMS等，其中Wordpress属于最为主流的个人博客类网站管理系统，dedeCMS侧重网站优化，以前民营医疗SEO采用该系统最多。你百度一下wordpress模板就有很多免费的博客模板可供选择。
转载请注明：片头模版 » 网页代码模板(求html静态网页源码)
