文章目录

  • 导语
  • HTML的代码约定
  • 请使用正确的文档类型
  • 推荐的元素名编写方式
  • 请关闭所有 HTML 元素
  • 请使用小写属性名
  • 属性值
  • 图片的属性
  • 结语


导语

经过前几章有关图形绘制的介绍，想必各位已经对HTML5有了一定的兴趣，但是也许其中有一些你未曾注意到的细节需要纠正，本篇文章将就HTML5的代码规范向大家进行讨论。

HTML的代码约定

即使是web开发人员。对于HTML的代码规范也会一头雾水，不确定HTML中使用的样式以及语法，自2000起，之后的十年里，不少web开发人员从HTML转入XHTML。拜XHTML严格的代码验证所赐，这些转入到XHTML的开发人员才逐渐养成了良好的HTML编写习惯。而在HTML5中，良好的代码规范于己于人，都是不错的选择，接下来将就此来提供一些建议。

还请注意：良好的代码习惯不止为了自己和他人阅读方便，智能、整洁、格式良好的代码对于未来的代码阅读器、程序而言也是更优的选择。

请使用正确的文档类型

文档的首行应当被用于类型的声明：

< !DOCTYPE html >

当然小写也是一样可行的，请根据编写习惯调整：

< !doctype html >

推荐的元素名编写方式

HTML支持大写与小写字母，但是我们推荐使用小写字母编写元素名，具体理由如下：
1.混合了大小写的风格在这里不是很好。
2.开发人员更习惯使用小写 (类似 XHTML)。
3.小写字母看起来更加简洁清爽。
4.比起大写字母而言小写更方便编写。

以下的编写方式不是我们提倡的：

<SECTION>
  <p>中亿丰数字科技有限公司</p>
</SECTION>

这样的编写方式是非常糟糕的，读者在编写的时候请务必避免这样的写法：

<Section>
  <p>中亿丰数字科技有限公司</p>
</SECTION>

这是我们所提倡的编写方法：

<section>
  <p>中亿丰数字科技有限公司</p>
</section>

请关闭所有 HTML 元素

或许已经有读者发现，HTML5中你不一定需要关闭所有的元素（此处以段落标签为例）。但是就良好的编写习惯而言，请务必为每一个元素添加关闭标签。

这样的写法我们是不提倡的：

<section>
  <p>中亿丰数字科技有限公司
  <p>中亿丰数字科技有限公司
</section>

请务必遵守这样的规则编写：

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

空的元素在HTML中的关闭也不是必须的。例如：

<meta charset="utf-8">
<meta charset="utf-8" />

这两种写法都可以使用，但是在XHTML与XML中“/”是必须的，如果在工作中有必要使用XML或者XHTML来访问页面，保持关闭元素的习惯是一个不错的选择。

请使用小写属性名

上面提到过。HTML5中支持大小写字母，但是我们依旧推荐使用小写字母编写属性名，理由在此不做过多赘述。
不提倡的编写方式：

<div CLASS="menu">

建议大家使用的编写方式：

<div class="menu">

属性值

HTML5中，虽然属性值允许不使用引号，但是我们有以下理由建议各位读者使用引号：
1.如果属性值含有空格需要使用引号。
2.混合风格是开发者不提倡的，请将风格统一。
3.属性值使用引号更易于阅读。
下面有几个实例：
以下实例属性值包含空格，没有使用引号，所以不能起作用：

<table class=table striped>

应当修改成这样：

<table class="table striped">

图片的属性

建议各位对图片使用alt属性，在图片无法显示的时候，它会起很大作用，图像尺寸也需要定义，这样在加载图像时会预留空间，减少闪烁。具体如下列代码所示：

<img src="zyf.gif" alt="HTML5" style="width:128px;height:128px">

结语

代码规范的第一部分将介绍到这里，下篇文章将再次为大家介绍更多的代码规范示例。