HTML5 代码编写规范详解二-W3CAPI 在线教程

HTML5 代码编写规范简介

什么是 HTML5 代码编写规范？

很多 Web前端开发人员对 HTML 的代码编写规范知之甚少，或者根本不在意如何编写高质量的源代码。在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML，使用 XHTML 开发后，开发人员才逐渐养成了比较好的 HTML 编写规范（XHTML加强了对编码规范的验证和要求）。而针对于 HTML5 ，我们更应该形成比较好的代码编写规范（编写规范并不是一种强制性要求，即使你不按照规范编写，你编写的代码也不会不能用）。

为什么需要 HTML5 代码编写规范？

编码规范是一种习惯和境界，我们做任何事情一开始就需要有一种认真的态度去做，否则终将做不到行业的顶峰。

如果不使用并习惯良好的代码编写规范，完全凭自己主观认识去编写，虽然在功能实现上并不会出错，但是对于后期维护或者代码交接会带来不可逆转的潜在隐患。

不写代码注释的习惯相信很多开发人员都存在，有多年开发经验的开发人员深深的了解到，一段代码的编写逻辑过不了多长时间就可能被我们彻底所遗忘，如果不写好关键逻辑的代码注释，后期如果对之前代码进行升级或者改造的时候，我们不得不重新去读一遍我们自己写的代码并好好的理解当时实现的思想，这就应了一句话叫做“费时又费力”和“事倍功半”。

知识点概览

使用正确的文档类型
使用小写元素名
关闭所有 HTML 元素
关闭空的 HTML 元素
使用小写属性名
属性值和引号
图片属性alt
标签中空格和等号
避免一行代码过长
空行和缩进
省略 <html> 和 <body>?
省略 <head>?
元数据meta
HTML 注释
样式表
在 HTML 中载入 JavaScript
使用 JavaScript 访问 HTML 元素
使用小写文件名
文件扩展名
.htm 和 .html 的区别

学习建议

非常重要的知识点，建议所有前端开发人员进行学习并总结。

不建议死记硬背此规范，结合具体项目在编写的时候多多查看参考此规范文档，用不了多长时间就会烂熟于心了。

HTML5 代码编写规范详解

使用正确的文档类型

DOCTYPE标签是一种标准，标记语言的文档类型声明标签，它的目的是要告诉标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。在HTML5中不需要定义DTD，浏览器已经默认了DTD，也就是直接以HTML5的标准语法来解析该文档，它应该位于HTML文档的第一行：

<!DOCTYPE html>
<!-- 也可以使用小写来声明 -->
<!doctype html>

使用小写的标签元素名称

HTML5 标签元素名称可以使用大写和小写字母，但是我们推荐使用小写字母：

混合了大小写的源代码风格是非常不好的，让人看起来比较杂乱。
开发人员通常使用小写 (类似 XHTML的编写风格)。
小写风格看起来更加清爽。
小写字母容易识别、编写。

<!-- 不推荐的写法 -->
<SECTION> 
  <p>这是一个段落。</p>
</SECTION>

<!-- 非常杂乱的写法 -->
<Section> 
  <p>这是一个段落。</p>
</SECTION>

<!-- 推荐写法 -->
<section> 
  <p>这是一个段落。</p>
</section>

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。

<!-- 不推荐的写法 -->
<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

<!-- 推荐写法 -->
<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

关闭空的（单标签） HTML 元素

在 HTML5 中，空的（单标签，不是成对出现的） HTML 元素标签也不是必需要关闭的，如下单标签：

不推荐写法
<meta charset="utf-8">
推荐写法
<meta charset="utf-8" />

在 XHTML 和 XML 中斜线 (/) 是必须的。如果我们期望 XML 软件也使用我们的页面，使用这种风格的兼容性是非常好的。

使用小写属性名

HTML5 属性名允许使用大写和小写字母。我们推荐使用小写字母属性名：

同时使用大小写是非常不好的习惯。
开发人员通常使用小写 (类似 XHTML的编写风格)。
小写风格看起来更加清爽。
小写字母容易编写。

不推荐
<div CLASS="menu">
推荐
<div class="menu">

属性值与引号

HTML5 属性值可以不用引号，属性值我们推荐使用引号：

如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。

以下实例属性值包含空格，没有使用引号，所以不能起作用：
<table class=table striped>
以下使用了双引号，是正确的：
<table class="table striped">

图片属性alt

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示，有利于用户体验和SEO优化。

<img src="html5.png" alt="HTML5" />
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁
<img src="html5.png" alt="HTML5" style="width:200px;height:200px" />

空格和等号

等号前后可以使用空格。但我们推荐少用空格：

<link rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="styles.css">

避免一行代码过长

使用一般的 HTML 编辑器或者文本工具，左右滚动代码是不方便的。每行代码尽量少于 80 个字符。不过如果我们使用集成开发工具可以不用考虑这个问题。

HTML5 代码编写规范详解二

空行和缩进

不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。

不必要的空行和缩进示例：
<body>

  <h1>在线教程</h1>

  <h2>HTML</h2>

  <p>
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
  </p>

</body>

推荐写法示例：
<body>

<h1>在线教程</h1>

<h2>HTML</h2>
<p>W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。</p>

</body>

表格规范写法实例：
<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

列表规范写法实例：
<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

是否省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。以下 HTML5 文档的写法是正确的：

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

不推荐省略 <html> 和 <body> 标签。<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>
<html lang="zh">

声明语言是为了方便屏幕阅读器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。
省略 <body> 在旧版浏览器（IE9及以下版本）会发生错误。

是否可以省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。现在省略 head 标签还不推荐使用：

<!DOCTYPE html>
<html>
<title>页面标题</title>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

元数据标签

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题：

<title>在线教程 | 菜鸟教程</title>

标题和语言可以让搜索引擎很快了解你页面的主题：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>在线教程 | 菜鸟教程</title>
</head>

HTML 注释

注释可以写在  中：

<!-- 这是注释 -->

比较长的注释内容可以在  中分行写：

<!-- 
  这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
  这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->

长评论第一个字符缩进两个空格，更易于阅读。

HTML5 代码编写规范详解三

样式表CSS编写规范

样式表使用简洁的语法格式 ( type 属性不是必须的):

<link rel="stylesheet" href="styles.css" type="text/css" />

短的规则可以写成一行：

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

编写规则总结：

将左花括号与选择器放在同一行。
左花括号与选择器间添加一个空格。
使用两个空格来缩进。
冒号与属性值之间添加一个空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用分号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。
在逗号和冒号后添加空格是常用的一个规则。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 )：

<script src="script.js" type="text/javascript">

使用 JavaScript 访问 HTML 标签元素

一个代码不规范的的 HTML 格式可能会导致 JavaScript 执行错误，HTML 中 JavaScript 尽量使用相同的命名规则。以下两个 JavaScript 语句会输出不同结果：

var obj = getElementById("demo");
var obj = getElementById("Demo");

执行一下

使用小写文件名

大多 Web 服务器 (Apache，Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 来访问。
其他 Web 服务器 (Microsoft，IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格，我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或 .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。针对于具体应用有如下区别：

.htm 应用在早期 DOS 系统，系统限制或者只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。
在浏览器中，如果一个 URL 没有指定文件名 (如 http://www.w3capi.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html、index.htm、default.html 和 default.htm等。
如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件名。
不管怎样，HTML 完整的后缀是 ".html"。

HTML

HTML 5 基础教程