HTML5语法

HTML编码惯例

Web开发人员在使用HTML时，往往有不确定的编码风格和语法.

2000和2010之间，许多Web开发人员从HTML转换到XHTML.

在XHTML中，开发人员被迫写出有效的和结构良好的代码.

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>This is a paragraph.</p>
</section>

关闭空的HTML元素

在HTML5中，是否关闭空元素是可选的.

允许的:

<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=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编辑器时，它是向右滚动不便读取右边的HTML代码.

尽量避免代码行长于80个字符.

空白线和缩进

不要没有原因的添加空白行.

为了可读性，请添加空行以分隔大的或逻辑的代码块.

为可读性，添加两个空格的缩进。不要使用制表键.

不要使用不必要的空白行和缩进。这是没有必要的缩进每一个元素:

没必要:

<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>页面标题</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> 元素.

你可以减少HTML的复杂性, 忽略<head>标签:

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

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

</html>

让我试试

我们不建议省略 <head>标签.

省略标签是Web开发人员不熟悉。它需要时间来确立为准则.

Meta Data

<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>

设置视窗

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

视图是一个网页的用户的可见区域. 根据设备的不同，在手机上比在电脑屏幕上要小。

你应包括下列<meta>视图元素在你所有的网页

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

<meta> 视窗元素给浏览器如何控制页面的尺寸和缩放比例.

width=device-width 部分设置页面宽度以跟踪设备的屏幕宽度（这取决于设备的不同）。

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