📜  初学者编程:你必须知道的 10 个最佳 HTML 编码实践

📅  最后修改于: 2021-10-31 05:12:27             🧑  作者: Mango

HTML……编程中最容易学习的东西之一。大多数新手甚至孩子都开始学习 HTML 编程。他们学习,他们构建了一些网页,但许多开发人员甚至在为前端编写代码时遇到过一些愚蠢的错误。犯这些愚蠢的错误不仅会惹恼其他开发人员(当他们需要进行一些更改时),还会伤害您的主站点并赶走最终用户。我们将提到一些常见和最佳实践,您应该遵循这些实践来编写干净清晰的 HTML 代码。

初学者编程 10 个最佳 HTML 编码实践你必须知道

遵循一些常见的做法可以使调试更容易并节省大量时间。它还有助于搜索引擎优化。

1. 使用正确的文档结构和 Doctype

HTML 的特性是,即使您忘记提及某些元素,例如 ,它仍然会正确呈现您的标记。您将根据需要在浏览器中看到正确的结果,但这并不意味着您会在每个浏览器中找到相同的结果。为了避免这个问题,遵循正确的文档结构和正确的文档类型是一个好习惯。 Doctype 是 HTML 文档中首先要提到的。您可以从链接 https://www.w3.org/wiki/Doctypes_and_markup_styles 中选择正确的文档类型

例子:

HTML


  
    Hello World
  
  
    

Welcome Programmers

    

This website is GeeksforGeeks.

     


HTML

  

This is a paragraph.

  
  

This is a paragraph.


HTML


  

HTML5


HTML

Thank you!

     

Thank you!


HTML






  






  
GeeksforGeeks | A computer science portal for geeks


HTML

Topmost heading

Sub-heading underneath the topmost heading.

Sub-heading underneath the h2 heading.


HTML

Hello Geeks


This is Computer Science portal for geeks.

  

Hello Geeks

  

This is Computer Science portal for geeks.


HTML


  


2. 关闭标签

为了避免验证和兼容性问题,不要忘记关闭代码中的所有标签。今天,大多数文本编辑器都提供了自动关闭 HTML 标签的功能,这是一个很好的做法(绝对是最后检查),以确保您不会错过任何未关闭的父标签或嵌套标签。在 HTML5 中,关闭 HTML 标签是可选的,但根据 W3C 规范,您应该关闭所有 HTML 标签以避免将来出现任何验证错误。

缺少 div1-in-HTML

3. 用小写写标签

养成对 HTML 代码中的所有标签、属性和值使用小写的习惯。这是一种行业标准做法,它还使您的代码更具可读性。大写标签不会影响浏览器中的结果,但以小写形式编写元素是一个好习惯。以小写形式编写代码很容易,而且看起来也更简洁。

例子:

HTML


  

This is a paragraph.

  
  

This is a paragraph.

4. 添加图片属性

当您在 HTML 代码中添加图像时,出于验证和可访问性的原因,不要忘记添加 alt 属性。此外,请确保为 alt 属性选择正确的描述。当您没有在图片中提及 alt 属性时,搜索引擎会将您的页面排名较低。提及图像的高度和宽度也很好。它减少了闪烁,因为浏览器可以在加载前为图像保留空间。

例子:

HTML



  

HTML5

5. 避免使用内联样式

很多新手都会犯这样的错误,他们在 HTML 标签中添加了内联样式。它使您的代码变得复杂且难以维护。养成将样式与 HTML 标记分开的习惯。使用内联样式会产生很多问题。它使您的代码混乱、不可读,并且难以更新或维护。将 HTML 与 CSS 分开还可以帮助其他开发人员非常轻松地更改代码。

例子:

HTML


Thank you!

     

Thank you!

6.使用有意义的标题和描述性元标签

当涉及到搜索引擎优化或页面排名时,HTML 标题真的很重要。始终尝试使您的标题尽可能有意义。您的 HTML 页面的标题出现在 google 搜索引擎结果页面中,并且您网站的索引编制依赖于它。
元描述会告诉用户页面的全部内容,因此请使其具有描述性,清楚地说明您的网站或页面的目的。避免使用重复的单词和短语。当用户在搜索引擎栏中键入某个关键字时,该关键字被搜索引擎蜘蛛抓取,然后根据元标记中使用的匹配关键字,使用该关键字为用户查找相关页面。

例子:

HTML







  






  
GeeksforGeeks | A computer science portal for geeks

7. 明智地使用标题元素

标题标签在使您的网站搜索引擎友好方面也起着至关重要的作用。 HTML 有 6 种不同类型的标题标签,应谨慎使用。学习使用

元素来表示 HTML 的内容层次结构,同时确保每页只使用一个 h1。在 W3C 规范中提到,您的页面内容应由单个标签描述,以便您可以在 h1 中添加最重要的文本,例如文章标题或博客文章。

例子:

HTML

Topmost heading

Sub-heading underneath the topmost heading.

Sub-heading underneath the h2 heading.

8. 始终使用正确的 HTML 元素

许多初学者在使用错误的 HTML 元素时犯了一个常见的错误。他们需要随着时间的推移了解应该在何处使用哪个元素。我们建议您了解所有 HTML 元素并正确使用它们以获得有意义的内容结构。例如,您可以使用 CSS 边距和/或填充属性,而不是在两个段落之间使用
了解何时使用和何时使用 (两者看起来相同),了解何时使用以及何时使用 (两者看起来相同)。它伴随着实践以及当您关注其他开发人员编写的优秀代码时。下面给出了另一个很好的例子。

HTML


Hello Geeks


This is Computer Science portal for geeks.

  

Hello Geeks

  

This is Computer Science portal for geeks.

9. 正确使用缩进

在 HTML 代码中提供适当的空间或缩进以使其更具可读性和可管理性非常重要。避免将所有内容写在一行中。它使您的代码杂乱无章。当您使用嵌套元素时,请给予适当的缩进,以便用户可以识别标签的开头和结尾。遵循正确格式的代码很容易更改,并且对其他开发人员来说看起来很不错。这是一种很好的编码实践,也可以减少开发时间。

HTML



  


10. 验证你的代码

最后但并非最不重要的是养成经常验证 HTML 代码的习惯。验证您的代码是一项伟大的工作,有助于找到困难的问题。您可以下载 W3C 标记验证或 Firefox 开发人员工具栏以通过 url 验证您的站点。验证器在检测错误和解决错误方面非常有帮助。