保持你的HTML代码整洁又规范的12条原则

 

4. 使用外部CSS 和 JavaScript

我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规，因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们，并使用相同的代码。Javascript也是同样的道理。

注： 当然，这个问题或许也并不是那么严重。比如作为WordPress主题来说，写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。 

 

5. 正确的标签嵌套

在我们的网站标题里面，我们使用《h1》作为网站标题标签，这是完美的。并且添加了一个到首页的链接，但错误就出在把链接放到了《h1》外面，《a》链接包围了《h1》。这种简单的嵌套错误，大多数浏览器都能良好的处理，但从技术上来说，这是不行的。

锚链接是一个内联元素，而《h1》标题是一个区块元素，区块元素不应该被放在内联元素中。 

 

6. 去除不必要的DIV

我不知道谁首先发明，但我喜欢“ divitis ”这个词，它指的是在HTML标记中过度的使用divs。在学习网页设计的某个阶段，大家学习如何使用一个DIV来包裹诸多其它元素来实现方便的布局和样式化。这就导致了DIV元素的滥用，需要的地方我们用了，完全不必要的地方我们也用了。 

 

在上图的例子中，我们使用了一个 div （”topNav”） 来包含了UL列表 （”bigBarNavigation”）。 但DIV和UL都是区块元素，所以没有必要使用DIV来包裹UL元素。

7. 使用更好的命名惯例

现在正好谈一下命名管理， 在上一条所说的示例中，我们的UL使用了ID名称 “bigBarNavigation.” 其中 “Navigation” 很好的说明了该区块的内容，但 “big” 和 “Bar” 描述的却是设计而不是内容。 它可能是在说这个菜单是一个很大的工具条， 但如果这个菜单的设计变成垂直的，那这个名称就会显得混乱和不相关。