如何保证 HTML 的可读性？

简洁的 HTML 代码节省了其他开发人员的时间，也节省了您长时间阅读时的时间和精力。在有大型软件项目的公司中，您的代码应该是可读和可理解的，因为有时必须由其他人修改代码。

在本文中，我们将着眼于显着提高 HTML 和 JavaScript 代码可读性的 3 个技巧。

1. 格式和缩进
2. 使用描述性名称
3. 避免不必要的评论

格式和缩进：如果人们浏览你的 HTML 代码，他们肯定会在第一眼看到它的格式是否不正确。在大多数情况下，代码未正确对齐或格式不正确。开发人员总是喜欢干净的代码，而缺乏正确的格式对某些人来说真的很烦人。

• 不好的做法：下面是一个合理的 HTML 代码片段，可以无错误地执行。虽然这个片段是正确的，但它对我们来说非常刺耳。只是无法阅读代码。一个人永远无法立即理解代码，而不是从中学习一些东西，他可能会开始解开它。

  HTML

  
  GeeksforGeeks
  A computer science portal for geeks

• 良好做法：格式需要始终如一地应用。相同的 HTML 代码在括号之间具有适当的缩进和间距，现在看起来格式正确且干净。

  HTML

  
  
    
      
    
    
      
  GeeksforGeeks
      
  A computer science portal for geeks
    
    
  
  

使用描述性名称：应该能够编写描述性 JavaScript 代码。即使是初学者也应该能够毫无问题地阅读您的代码，并了解其中试图实现或完成的内容。即使他们不清楚语法，他们也应该对正在发生的事情有很高的了解。下面是 JavaScript 中的一个反例。

• 错误做法：如果没有上下文，就无法判断在这种情况下应该发生什么。如果我们使用描述性名称将上面的代码片段更改为下面的代码，即使我们没有任何上下文或函数描述作为注释，也可以更容易地理解其中发生的事情。

  Javascript

  function fn(o) {
    o.mk = 'Toyota';
  }
    
  var c = {mk: 'Honda', md: 'Accord', y: 1998};
  var x, y;
    
  x = c.mk;
  fn(c);
  y = c.mk;
  

• 良好做法：仅根据变量和函数名称，很明显我们正在更改汽车的公司名称。尽管在第二个例子中使用了更多的字母，但它肯定比第一个有更多的优势。

  Javascript

  function ChangeCompany(car) {
    car.company = 'Toyota';
  }
    
  var car = {company: 'Honda', model: 'Accord', year: 1998};
  var car1, car2;
    
  car1 = car.company;
  ChangeCompany(car);
  car2 = car.company;
  

避免不必要的注释：为了避免混乱和混乱，我们还可以做的另一件事是避免不必要的注释，并确保代码是不言自明和充分的。这意味着我们应该尽量避免评论并尽可能删除它们。唯一的例外是最相关的评论，甚至应该用最少的词来解释它们。

• 不好的做法：下面是一个在某些地方可能会发现的反例。在这个例子中，主要问题是阅读它的人会分心于代码本身。多余的不必要的注释段落混淆了只有 3 行的实际代码。

  HTML

  
  
      
      
          
          
      
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
    
      
  
  

• 好的做法：在上面的代码片段中，有 12 行注释，这意味着它更关注注释而不是实际代码。下面是编写干净的 HTML 代码的正确方法。

  HTML

  
  
      
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks