格式化代码的正确方法是什么？为什么这么有必要？为什么所有程序员都应该遵循相同的格式规则，基本上，规则是什么？
为什么程序员喜欢写成
<html>
<head>
<title>Title</title>
</head>
<body>
<!--body-->
</body>
</html>
代替
<html>
<head>
<title>Title</title>
</head>
<body>
<!--body-->
</body>
</html>
有人可以说得更清楚吗？而且，关于 javascript 和 css 格式有什么特别之处吗？格式化的优点和缺点是什么？
它是关于能够回顾您的代码并轻松查看哪些部分是包含在其他标记中的代码块。通常你会在一个页面中有很多 div，许多 div 包含在其他 div 中。简单的缩进可以帮助找出与您当前正在查看的开始 div 匹配的内容。
<div id='start'>
<div id='insideStart'>
<div id='insideInsideStart'>
</div>
</div>
</div>
看起来不像
<div id='start'>
<div id='insideStart'>
<div id='insideInsideStart'>
</div>
</div>
</div>
这是一个非常适合在以下书籍中阅读的问题
但要回答你的问题。
首先：“为什么程序员更喜欢写成……” 这仅仅是为了使代码更清晰，并且更符合结构。作为人类和其他编码人员，使您对我来说更清楚的结构。
遵守一套命名约定和结构标准有助于新开发人员更快地进入您的代码，并且更不容易出现诸如拼写错误和常见错误等错误。
您要问的另一个问题是：“格式化的优点和缺点是什么”
优点 - 以上所有
缺点 - 这可能会影响性能，但我认为不会。
你问的最后一个问题是“为什么所有程序员都应该遵循相同的格式规则，基本上，规则是什么？？”
只要您遵循团队约定，就应该如何编码没有明确的规则。这使开发人员在您完成清理烂摊子的肮脏工作或试图弄清楚您在执行现在开始变旧或正在出错的功能时找出您的思维方式之后更容易。
但是，如果您愿意，在命名变量和函数等时，有一些“常用方法”，这些在此处进行了详细说明。这些适用于您要求的 javascript，但其中大部分也可以用于其他语言。
我希望这回答了你的问题。
但正如@BoltClock 所说，这就是你应该追求的目标，让你的代码清晰。这是所有程序员的第一要务，或者应该是。
格式化没有正确的方法。
换行和缩进通常只是为了人类可读性（除了某些语言，如 Python），并且没有一个所有人都同意的真正标准。
一般的经验法则是用 4 个空格或一个制表符缩进代码。许多开源项目在其编码标准中遵守 4 个空格规则，仅举几例：
在您的 HTML 示例中，它的用处不大，因为结束标记明确说明了它们的元素类型，但它对于查找嵌套 div 和其他元素的开始/结束标记仍然很有用。
在其他使用大括号语法的语言中（以及不使用大括号语法的语言，例如 PLSQL），缩进代码非常有帮助。例子：
for(...)
{
if(..)
{
while(..)
{
}
}
else
{
}
}
与以下相比，上述内容难以阅读：
for(...)
{
if(..)
{
while(..)
{
}
}
else
{
}
}
通过上面的缩进，可以轻松快速地读取每个块的执行流程和开始/结束大括号。
对我来说最重要的事情（在这个例子中是 HTML，但它也适用于编程）是告诉范围。
您的 HTML 示例非常简单，但通常会有更多的嵌套结构，这可能会让人很困惑。例如：
<html>
<head></head>
<body>
<div id="container">
<div class="shadow">
<div class="inner">
<h1>Hello World</h1>
</div>
<div id="handle">
<span id="foo">Bar</span>
</div>
</div>
<div id="morefoo">
<h3>Hi</h3>
</div>
</div>
</body>
</html>
如果我告诉你用类 shadow 向 div 添加另一个 div，你可能需要做一些<div> </div>计数。但是使用下面格式化的标记，这很容易。
<html>
<head></head>
<body>
<div id="container">
<div class="shadow">
<div class="inner">
<h1>Hello World</h1>
</div>
<div id="handle">
<span id="foo">Bar</span>
</div>
</div>
<div id="morefoo">
<h3>Hi</h3>
</div>
</div>
</body>
</html>
在写下 HTML 标记或 CSS 时——这与编程无关。无论如何，编写清晰干净的 HTML 标记的标准是将任何子元素缩进一个，tab因此代码看起来像您的第一个示例。这样，代码的结构和可读性就很好。
在写下 CSS 代码时，没有标准的 AFAIK，但我看到了三种格式化 CSS 代码的样式：
1.
body { ... }
div#container { ... }
div#container #left-column { ... }
2.
body {
...
}
div#container {
...
}
div#container #left-column {
...
}
3.
body {
...
}
div#container {
...
}
div#container #left-column {
...
}
第二个和第三个示例之间的区别在于，在第三个示例中，通过div#container #left-column多缩进一个选项卡，您正在炫耀此规则适用于 parent 内部的元素div#container。第一个示例使 CSS 代码更紧凑，但可读性较差，并且在一行中有许多规则时不是很好的选择（行可能会变得很长）。
在这里写下 JS 代码时，格式化规则应该与写下 PHP 代码时相同（或至少非常相似）......
在大多数情况下，格式化是为了程序员的利益，而不是为了计算机。
就计算机而言，缩进完全无关紧要。这可以在“代码最小化器”的操作中看到，它采用一个程序并删除所有空白以将其压缩并使其成为更小的下载。同样，也有“代码整理”工具，它们的作用正好相反——采用格式错误的程序并设置缩进，使其更具可读性。
所以缩进代码的真正原因是让它可读。这是为了你的利益。
你可能认为你的代码没有缩进就完全可读，但我可以向你保证不是。如果您认为是这样，请在六个月未阅读旧代码后尝试返回一些旧代码。但这不仅仅是为了你自己。如果您需要与其他人共享代码——比如在这样的网站上——其他人会发现您的代码更容易阅读，因此如果他们可以轻松阅读您的代码，他们会更容易帮助您。
* 注意：所有这一切的例外是少数语言，如 Python，其中缩进是代码的重要组成部分，并告诉程序哪些行是哪个结构的一部分。在这些语言中，缩进是语言的一部分，所以它存在于程序和程序员中。
你应该明白，对于编译器来说，这样的代码在性能上完全没有区别：
<html>
<head>
<title>Title</title>
</head>
<body>
<!--body-->
</body>
</html>
和这个
<html>
<head>
<title>Title</title>
</head>
<body>
<!--body-->
</body>
</html>
甚至这个
<html> <head><title>Title</ title></head>
<body><!--body--></body> </html>
它们都将以相同的方式编译和工作，具有完全相同的性能。但是，代码格式化的主要目的是可读性。像这样将代码分成块，让程序员更容易理解，从而让他更清楚地看到程序的逻辑。对于您和在您之后使用代码的人来说，它更容易维护和理解。
所有这一切都导致了更高效的开发（因为您在理解代码上浪费的时间更少，因为一切都是有条理的，导致更少的开发错误，更少的错误，从而让您花更多的时间在开发上，使开发更容易和更快）。
每种语言都有不同的编码标准，或多或少流行。
为什么使用编码标准：让您/您的团队/其他人更容易阅读，在项目中给人一种“统一”的感觉。想想在更大的项目中没有编码标准，你会看到这样的代码：
if (condition) return FALSE;
else {
$x=1;
} else $x=3;if (condition2) return true;
PHP 编码标准示例：
编码中的一个大问题是代码维护。一位开发人员总是认为他的代码将永远有效，是防弹的，永远不需要任何更改。这显然不是真的。因此，另一个开发人员肯定必须挖掘这段代码，如果原始编码人员没有格式化和记录他的代码，这通常很困难。格式化是关于可读性和可重用性的。
您可以遵循通常接受的准则，例如 javascript 的总结：http: //google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml ?showone=Code_formatting#Code_formatting
据我所知，这三个规则支配着代码缩进的思想。
如何缩进代码？- 我会以此为基础，从括号或函数的开始到结束，或者基于循环、数组的任务......
确保您的网站正常运行的一个好方法是编写您的 HTML。这将使您可以专注于内容和功能并在开始使一切变得漂亮之前对其进行测试。
有关更多信息，请阅读这两篇文章：-