HTML 风格指南

什么是 HTML 中的风格指南？

在 HTML 中，风格指南是一套规则和约定，用于定义如何编写和格式化代码。它有助于确保编写的代码具有可读性、易于理解和修改。风格指南还有助于避免可能影响网页功能和外观的常见错误和缺陷。在本教程中，我们将介绍创建更好的 HTML 代码最重要的风格指南。

以 HTML5 文档类型声明开始

所有 HTML 和 XHTML 文档都应以 `<!DOCTYPE html>`声明开始。请注意，此声明不区分大小写。这是强制执行完整标准模式（也称为非怪异模式）所必需的，以提供更一致的网页渲染效果。它是 W3C 描述的最新 Web 标准，并被现代 Web 浏览器的布局引擎使用。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

指定文档语言

始终使用 `lang` 属性指定文档语言。此属性在 HTML 文档根部的 `<html>` 开标签中定义。指定文档语言将有助于辅助功能、语音分析、翻译和其他功能。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

定义字符集

W3C 始终建议开发者显式声明字符集或字符编码。这可以通过使用 `<meta>` 标签的 `charset` 属性来完成。将 UTF-8 作为值传递给 charset 属性，因为它是最常用的字符编码，并提供超过一百万个字符。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset = "UTF-8">
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

元素和属性使用小写

不要将元素名称、属性名称和属性值大写。在 Java、C 和 C++ 等其他编程语言中，开发者通常使用驼峰式命名法或蛇形命名法来声明变量名。但是，对于编写 HTML 代码，W3C 建议使用小写字母。这样做将增强 HTML 代码的清晰度和可读性。

示例

<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p style = "font-size: 25px; ">
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>

为属性值添加引号

根据 W3C 的建议，最好将属性值用双引号括起来。这对于包含空格的值很重要，因为如果没有引号，HTML 可能无法正确解析它们。使用双引号比单引号更常见。但是，我们也可以使用单引号。

<p style = "font-size: 25px; ">
   <!-- contains paragraph -->
</p>

使用闭合标签

在 HTML 中，所有元素都必须正确关闭，即使某些元素具有可选的闭合标签。请注意，某些元素是自闭合的，包括 `<img>`、`<hr>`、`<br>`等等。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <br>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

使用正确的缩进

使用正确的缩进可以显示 HTML 代码的结构和层次结构。使用空格而不是制表符进行缩进，并且每级使用一致的空格数（通常是两个或三个）。此外，我们可以使用空行来分隔大型代码块。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

设置视口

设置视口有助于网页在不同的设备上良好渲染。这是通过控制页面的宽度和比例来实现的。它用于确保特定网页的响应性。

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

添加注释

我们使用注释来解释特定 HTML 代码的目的或功能。注释应以 `` 结束。避免将注释用于样式或脚本目的。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

打印页面