Html 简明教程

HTML - Style Guide

What is Style Guide in HTML?

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

Start with HTML5 Doctype

始终以 <!DOCTYPE html> 声明开始所有 HTML 和 XHTML 文档。请注意，此声明不区分大小写。它需要强制执行完全标准模式（也称为无怪癖模式），以便更一致地呈现网页。它是 W3C 描述的最新 web 标准，现代 web 浏览器的布局引擎也使用它。

Example

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

Specify document language

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

Example

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

Define Charset

W3C 始终建议开发人员明确声明字符集或字符编码。这可以通过使用 <meta> 标签的 charset 属性来实现。将 UTF-8 作为值传递给字符集属性，因为它是使用最广泛的字符编码，并且提供了超过一百万个字符。

Example

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

Use Lowercase for elements and attributes

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

Example

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

Quote the attribute values

根据 W3C 建议，最好用双引号扩起属性值。对于包含空格的值而言这很重要，因为 HTML 可能无法在没有引号的情况下正确地分析它们。双引号比单引号更常用。但是，我们也可以使用单引号。

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

Use closing tags

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

Example

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

Use proper Indentation

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

Example

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

Set the viewport

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

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

Add Comments

我们使用注释来解释特定 HTML 代码的目的或功能。注释应以 <!-- 开头，以 -→ 结尾。避免将注释用于样式或脚本目的。

Example

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