HTML5 代码规范


HTML代码规范

HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护

在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范

而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议


智能面向未来

对样式的合乎逻辑的使用,可以令其他人更容易理解和使用您的 HTML

在未来,诸如 XML 阅读器之类的程序,也许需要阅读您的 HTML

使用格式良好的"近似 XHTML 的"语法,能够更智能

请始终保持您的样式智能、整洁、纯净、格式良好


使用正确的文档类型

始终将文档类型声明为文档中的第一行:

<!DOCTYPE html>

如果您希望与小写标签保持一致,则可以使用:

<!doctype html>

使用小写给元素命名

HTML5 元素名可以使用大写和小写字母

我们建议使用小写元素命名,因为:

  • 小写风格看起来更加清爽
  • 小写字母容易编写
  • 混合了大小写的风格是非常糟糕的
  • 开发人员通常使用小写 (类似 XHTML)

不推荐:

<SECTION>
  <p>这是一段不可描述的文字~.</p>
</SECTION>

非常糟糕:

<Section>
  <p>这是一段不可描述的文字~.</p>
</SECTION>

推荐:

<section>
  <p>这是一段不可描述的文字~.</p>
</section>


关闭所有HTML元素

在HTML5中,您不必关闭所有元素(例如<p>元素)。

我们建议关闭所有HTML元素。

不推荐:

<section>
  <p>这是一段不可描述的文字~.
  <p>这是一段不可描述的文字~.
</section>

推荐:

<section>
  <p>这是一段不可描述的文字~.</p>
  <p>这是一段不可描述的文字~.</p>
</section>

关闭空HTML元素

在HTML5中,关闭空元素是可选的。

允许:

<meta charset="utf-8">

还允许:

<meta charset="utf-8" />

但是,结束斜杠(/)在XHTML和XML中是必需的。

如果您希望XML软件访问您的页面,最好保持结束斜杠!


不推荐:

<div CLASS="menu">

推荐:

<div class="menu">

引用属性值

HTML5属性值可以不用引号

我们建议使用引号,因为:

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

非常不推荐:

这不起作用,因为该值包含空格:

<table class=table striped>

不推荐:

<table class=striped>

推荐:

<table class="striped">

图像属性

始终将alt属性添加到图像。当由于某种原因无法显示图像时,此属性很重要。此外,始终定义图像宽度和高度。它减少了闪烁,因为浏览器可以在加载前为图像保留空间。

不推荐:

<img src="html5.gif">

推荐:

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

空格和等号

HTML5允许等号周围的空格。但无空间更容易阅读,并将实体更好地组合在一起。

不推荐:

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

推荐:

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

避免一行代码过长

使用 HTML 编辑器,左右滚动代码是不方便的

尽量避免使用长度超过80个字符的代码行


空行和缩进

不要无缘无故添加空行

缩进使用两个空格,不建议使用 TAB

为每个逻辑功能块添加空行,这样更易于阅读

比较短的代码间不要使用不必要的空行和缩进:

不必要:

<body>

  <h1>著名城市</h1>

  <h2>上海</h2>

  <p>
    上海,简称"沪"或"申",是中国共产党的诞生地,
    中华人民共和国直辖市、国家中心城市、超大城市,
    国际经济、金融、贸易、航运、
    科技创新中心和综合交通枢纽,首批沿海开放城市.
  </p>

</body>

更推荐:

<body>

<h1>著名城市</h1>

<h2>上海</h2>
<p>上海,简称"沪"或"申",是中国共产党的诞生地,
中华人民共和国直辖市、国家中心城市、超大城市,
国际经济、金融、贸易、航运、
科技创新中心和综合交通枢纽,首批沿海开放城市.</p>

</body>

表格示例:

<table>
  <tr>
    <th>名称</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>A</td>
    <td>A的描述</td>
  </tr>
  <tr>
    <td>B</td>
    <td>B的描述</td>
  </tr>
</table>

列表示例:

<ol>
  <li>北京</li>
  <li>上海</li>
  <li>广州</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="en-US">

声明语言对于辅助功能应用程序(屏幕阅读器)和搜索引擎非常重要。

省略<html><body>会导致DOM和XML软件崩溃。

省略<body>会在旧浏览器(IE9)中产生错误。


省略<head>?

在HTML5中,也可以省略<head>标记。

默认情况下,浏览器会将<body>之前的所有元素添加到默认的<head>元素。

您可以通过省略<head>标记来降低HTML的复杂性:

实例

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

<body>
  <h1>这是标题</h1>
  <p>这是一段不可描述的文字~.</p>
</body>

</html>
运行 »

但是,我们不建议省略<head>标记。

Web开发人员不熟悉省略标记。它需要时间来确定作为指导。


元数据

HTML5中需要<title>元素。使标题尽可能有意义:

<title>HTML5语法和编码风格</title>

为了确保正确的解释和正确的搜索引擎索引,语言和字符编码应尽早在文档中定义:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5语法和编码风格</title>
</head>

设置视口

HTML5引入了一种方法,让网页设计师通过<meta>标签控制视口。

视口是用户在网页上的可见区域。它随设备而变化,在手机上比在电脑屏幕上小。

您应该在所有网页中包含以下<meta> viewport元素:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> viewport元素为浏览器提供有关如何控制页面尺寸和缩放的说明。

width = device-width部分将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。

initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。


HTML注释

简短的评论应写在一行,如下所示:

<!-- 这是注释 -->

跨越多行的注释应该写成:

<!--
  这是一个较长注释.
  这是一个较长注释.
-->

如果它们缩进两个空格,则更容易观察长注释。


样式表

样式表使用简洁的语法格式 (不需要type属性):

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

短的规则可以写成一行,如下所示:

p.intro {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="myscript.js">

使用JavaScript访问HTML元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误

这两个JavaScript语句将产生不同的结果:

实例

var obj = getElementById("Demo")

var obj = getElementById("demo")

访问 JavaScript样式指南


文件名使用小写

大多 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未指定文件名(如https://www.uihtml.com/css/)时,服务器返回默认文件名。常见的默认文件名是index.html,index.htm,default.html和default.htm。

如果您的服务器仅配置了"index.html"作为默认文件名,则您的文件必须命名为"index.html",而不是"index.htm"。

但是,可以使用多个默认文件名配置服务器,通常可以根据需要设置多个默认文件名。

无论如何,HTML文件的完整扩展名是.html,并且没有理由不使用它。