使用HTML代码编辑网页模板的注意事项

好的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》里面仍然是个非常不好的习惯。

五更分两年年年称心 一夜连两岁岁岁如意 恭贺新春

我假设您建议将JS脚本及其所需数据放入模板中(通过字符串插值将数据注入JS脚本) 你可以看到它如何快速失控.下面我提供代码组织的级别,按升序排列(一般来说,你越往往越好) 1.使用脚本标记包含您的JS,而不是嵌入到HTML中 第一步：将JS放入自己的.js文件中,并通过包含它.标签很简单.所以,让我们这样做.而且,现代浏览器可以并行加载文件,因此同时加载HTML和JS文件是一个优势. 2.避免使用Django模板将数据输入JS 现在我见过人们做的另一个问题是使用 data = {“info”：“something”}将数据传递给JS.在包括他们的JS代码之前. 由于数据在Django模板中进行字符串插值这一事实原因很多,这也不是很理想： 3.让JS通过Django(REST)API提取数据 但是,既然你说你熟悉Django,我建议你创建一个视图,以JSON格式返回客户端JS需要的数据.例如.在/ api / info上返回{“info”：“something”}的东西. 有很多方法可以实现这一点,here’s a start(尽管可能已经过时) 然后我让script.js文件通过简单的HTTP GET调用读取数据.很多JS库都可以轻松地为您完成此任务. 这种方法的一些优点 >您的代码(JS部分)独立于数据部分(JSON数据)>您可以轻松查看/测试正在输入JSON的内容,因为它只是一个HTTP GET请求>您的HTML / JS部分是完全静态的,因此可以缓存,从而提高了加载页面的性能.>Python数据转换为JSON非常简单(没有插值功夫)。