最新的Web开发教程

HTML(5)风格指南和编码约定

❮上一页 下一页章❯

HTML编码规范

Web开发人员往往是不确定的编码风格和语法在HTML中使用。

2000至2010年间，很多Web开发人员转换从HTML到XHTML。

随着XHTML，开发商被迫写啥"well-formed"代码。

HTML5是一个比较草率，当涉及到代码验证。

有了HTML5，你必须创建自己的最佳实践，风格指南和编码约定 。

是聪明，面向未来

随之而来的使用风格，让别人更容易理解和使用你的HTML。

在未来，像XML阅读器程序，可能需要阅读你的HTML。

使用结构良好"close to XHTML"的语法，可聪明了。

始终保持你的风格聪明，整洁，干净，良好的。

使用正确的文件类型

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

<!DOCTYPE html>

如果你想用小写标签的一致性，您可以使用：

<!DOCTYPE html>

使用小写的元素名称

HTML5允许混合元素名称大写和小写字母。

我们建议您使用小写字母元素名称：

  • 混合大写和小写的名字是坏
  • 开发商习惯于使用小写名称(as in XHTML)
  • 小写看起来更干净
  • 小写字母更容易编写，

坏：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

很坏：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

好：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

关闭所有的HTML元素

在HTML5中，不必关闭所有元件(for example the <p> element) 。

我们建议您关闭所有的HTML元素：

面色不善：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空HTML元素

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

这是允许的：

<meta charset="utf-8">

这也是允许的：

<meta charset="utf-8" />

斜杠(/)需要在XHTML和XML。

如果你希望XML软件来访问你的页面，这可能是一个好主意，让它。

使用小写的属性名称

HTML5允许混合属性名称大写和小写字母。

我们建议您使用小写的属性名称：

  • 混合大写和小写的名字是坏
  • 开发商习惯于使用小写名称(as in XHTML)
  • 小写看起来更干净
  • 小写字母更容易编写，

面色不善：

<div CLASS="menu">

看起来不错：

<div class="menu">

引用属性值

HTML5允许的属性值没有引号。

我们建议引用属性值：

  • 你如果值包含空格使用引号
  • 调音风格上是从来没有好
  • 引用的值更易于阅读

这是行不通的，因为该值包含空格：

<table class=table striped>

这将工作：

<table class="table striped">

图像属性

始终使用alt与图像属性。 这是重要的，当图像不能观看。

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

始终定义图像大小。 它减少了闪烁，因为之前加载它们的浏览器可以为图像预留空间。

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

空间和等号

围绕等号空间是合法的：

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

但空间较小更容易阅读和组实体更好地结合在一起：

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

避免长时间的代码行

当使用HTML编辑器，它是不方便向左和向右滚动阅读HTML代码。

尽量避免行代码超过80个字符。

空行和缩进

不要没有理由加空行。

为了可读性，添加空白行来分离较大的或逻辑的代码块。

为了增强可读性，加2个空格缩进。 不要使用TAB。

不要使用不必要的空行和缩进。 这是没有必要使用短和相关项目之间的空行。 这是没有必要缩进每一个元素：

不必要：

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
试一试»

我们不建议省略<html>和<body>标签。

的<html>元素是文档根。 它是用于指定页面语言推荐的地方：

<!DOCTYPE html>
<html lang="en-US">

声明一个语言是用来辅助功能应用程序很重要(screen readers)和搜索引擎。

遗漏<html>或<body>会崩溃DOM和XML软件。

省略<body>可以产生在旧的浏览器的错误(IE9)

省略<head>

在HTML5标准中， <head>标签也可被省略。

默认情况下，浏览器将添加前的所有元素<body>为默认<head>元素。

您可以通过省略降低了HTML的复杂性， <head>标签：

例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>
试一试»

省略标签是不熟悉的Web开发人员。 这需要建立一个指导时间。

元数据

所述<title>元素是必需的在HTML5。 使标题尽可能为有意义：

<title>HTML5 Syntax and Coding Style</title>

为了确保适当的解释和正确的搜索引擎索引，无论是语言和字符编码应该文档中尽可能早地进行定义：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML注释

简短的评论应该在一行后写，用空格<!-- and a space before --> ：

<!-- This is a comment -->

长注释，跨越多条线路，应当书面<!-- and -->在单独的行：

<!--
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

长注释更容易观察，如果他们被缩进2个空格。

样式表

使用简单的语法用于链接样式表(the type attribute is not necessary) ：

<link rel="stylesheet" href="styles.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;
}
  • 放置开口托架上的同一行的选择器。
  • 左括号前使用一个空间。
  • 使用2个空格缩进。
  • 使用冒号加上每个属性和值之间有一个空格。
  • 每个逗号或者分号后使用空间。
  • 使用分号每个属性值对后，包括最后一个。
  • 只有当值包含空格周围使用值引号。
  • 放在一个新行右括号，无前导空格。
  • 避免超过80个字符的行。

一个逗号，或者分号后添加一个空格，在所有类型的写作的一般规则。

在HTML加载JavaScript

使用简单的语法，用于加载外部脚本(the type attribute is not necessary) ：

<script src="myscript.js">

访问使用JavaScript的HTML元素

使用的后果"untidy" HTML样式，可能会导致JavaScript错误。

这两个JavaScript语句会产生不同的结果：

例

var obj = getElementById("Demo")

var obj = getElementById("demo")
试一试»

如果可能的话，使用相同的命名约定(as JavaScript)的HTML。

访问JavaScript的风格指南 。

使用小写文件名

大多数Web服务器(Apache, Unix)的有关文件名大小写敏感：

london.jpg不能作为London.jpg访问。

其他Web服务器(Microsoft, IIS)是不区分大小写：

london.jpg可以作为London.jpg或london.jpg访问。

如果您使用大写和小写的组合，你必须非常一致。

如果您不敏感的情况下，要区分大小写的服务器迁移，即使是小错误会打破你的网络。

为了避免这些问题，始终使用小写的文件名(if possible) 。

文件扩展名

HTML文件应该有一个.html扩展名(or .htm )

CSS文件应该有一个扩展名为.css。

JavaScript文件应该有一个.js扩展。

名为.htm和.html的区别

还有就是名为.htm和.html扩展名之间没有什么区别。 双方将通过任何网络浏览器或Web服务器被视为HTML。

差异是文化：

.htm "smells"早期DOS系统，其中系统限制了扩展到3个字符的。

.html "smells"是没有这个限制的Unix操作系统。

技术差异

当URL没有指定一个文件名(like http://www.w3ii.com/css/)服务器返回一个默认的文件名。 常见的默认文件名是index.html，index.htm的，default.html中，和Default.htm的。

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

然而，服务器可以与一个以上的默认文件名进行配置，通常您可以根据需要设置为默认的许多文件名。

总之，充分扩展HTML文件名为.html，并且有它不应该被用于任何理由。

❮上一页 下一页章❯