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 qikepu.com
</body>
</html>

指定文档语言

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

例


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

定义字符集

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

例：


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

元素和属性使用小写

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

例


<body>
	 <h1>
			<!-- Heading comes here -->
	 </h1>
	 <p style = "font-size: 25px; ">
			<!-- contains paragraph -->
			Hello, Welcome to qikepu
	 </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 qikepu
	 </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 qikepu
	 </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 qikepu
	 </p>
</body>
</html>

本页