Html 简明教程

HTML - Style Guide

What is Style Guide in HTML?

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

In HTML, the style guide is a set of rules and conventions that define how to write and format code. It helps to ensure that the written code is readable, understandable and easy to modify. A style guide also helps to avoid common errors and bugs that can affect the functionality and appearance of a web page. In this tutorial, we are going to cover the most important style guidelines for creating better HTML code.

Start with HTML5 Doctype

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

Always start all HTML and XHTML documents with <!DOCTYPE html> declaration. Note that this declaration is case-insensitive. It is required to enforce the full standard mode (also known as no-quirks mode) to provide more consistent rendering of web pages. It is the latest web standard described by W3C and used by the layout engines of modern web browsers.

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> 开始标签中定义。指定文档语言将有助于辅助功能、语音分析、翻译及其他功能。

Always specify the document language with the help of lang attribute. This attribute is defined within the opening <html> tag, which is the root of HTML document. Specifying the document language will help in accessibility, speech analysis, translation and other functionalities.

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 作为值传递给字符集属性，因为它是使用最广泛的字符编码，并且提供了超过一百万个字符。

The W3C always recommend developers to declare the charset or character encoding explicitly. It can be done by using the charset attribute of <meta> tag. Pass UTF-8 as a value to charset attribute as it is the most commonly used character encoding and provides over a million characters.

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 代码的清晰度和可读性。

Don’t capitalize the element names, attribute names and values of attributes. In other programming languages like Java, C and C++, developers often use the camel case or snake case for declaring the variable names. However, for writing HTML code, W3C recommends the use of lowercase letters. Doing so will enhance the clarity and readability of our HTML code.

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 可能无法在没有引号的情况下正确地分析它们。双引号比单引号更常用。但是，我们也可以使用单引号。

According to W3C recommendations, it is better to enclose attribute values in double quotes. This is important for values containing spaces, as HTML may not parse them correctly without the quotes. The use of double quotes is more common than single quotes. However, we can use single quotes as well.

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

Use closing tags

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

In HTML, all elements must be closed properly, even if some elements have optional closing tags. Please note that there are certain elements that are self-closing including <img>, <hr>, <br> and many more.

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 代码的结构和层次结构。为缩进使用空格而不是制表符，并对每个级别使用一致的空格数（通常为两个或三个）。此外，我们可以使用空白行来分隔大型代码块。

The use of proper indentation shows the structure and hierarchy of our HTML code. Use spaces instead of tabs for indentation, and use a consistent number of spaces (usually two or three) per level. Also, we can use the blank lines to separate large code blocks.

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

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

Setting the viewport helps web pages render well on different devices. It is achieved by controlling the width and scale of the page. It is used for ensuring the responsiveness of a particular web page.

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

Add Comments

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

We use comments to explain the purpose or functionalities of the particular HTML code. Comments should start with <!-- and end with -→. Avoid using comments for styling or scripting purposes.

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>