HTML…编程中最容易学的东西之一。大多数新手甚至孩子都参与编程学习的HTML。他们学习, 建立了一些网页, 但是许多开发人员甚至经验丰富的开发人员在编写前端代码时都犯了一些愚蠢的错误。犯下这些愚蠢的错误不仅使其他开发人员(在需要进行一些更改时)感到烦恼, 而且还会伤害你的主站点并最终驱逐用户。我们将提到一些常见的最佳实践, 你应该遵循这些最佳实践来编写干净清晰的HTML代码。
遵循一些常规做法可使调试更加容易, 并节省大量时间。它还有助于搜索引擎的优化。
1.对Doctype使用正确的文档结构
HTML具有以下性质：即使你忘记提及某些元素, 例如HTML, 它仍然可以正确呈现你的标记<html>, <头>, <身体>和<！DOCTYPE html>。你会在自己的浏览器中看到正确的结果, 但这并不意味着你会在每个浏览器中找到相同的结果。为避免出现此问题, 有一个良好的习惯, 那就是遵循具有正确文档类型的正确文档结构。 Doctype是HTML文档中首先要提及的内容。你可以从链接中选择合适的文档类型W3.org.
例子：
<!DOCTYPE html>
< html >
< head >
< title >Hello World</ title >
</ head >
< body >
< h1 >Welcome Programmers</ h1 >
< p >This website is lsbin.</ p >
</ body >
</ html >2.关闭标签
为避免验证和兼容性问题, 请不要忘记关闭代码中的所有标签。如今, 大多数文本编辑器都提供了可以自动自动关闭HTML标签的功能, 这是一种很好的做法(并且绝对是最后检查), 以确保你不会错过任何未关闭的父标签或嵌套标签。在HTML5中, 关闭HTML标签是可选的, 但是根据W3C规范, 你应该关闭所有HTML标签, 以免日后出现任何验证错误。
3.小写标签
养成对HTML代码中的所有标记, 属性和值使用小写字母的习惯。这是一种行业标准的做法, 它也使你的代码更具可读性。大写标签不会影响浏览器中的结果, 但是最好使用小写字母。用小写字母编写代码很容易, 而且看起来也更简洁。
例子：
<!-- Bad code-->
< SECTION >
< p >This is a paragraph.</ p >
</ SECTION >
<!-- Good code-->
< section >
< p >This is a paragraph.</ p >
</ section >4.添加图像属性
当你在HTML代码中添加图片时, 出于验证和可访问性的原因, 请不要忘记添加alt属性。另外, 请确保为alt属性选择正确的描述。当你未在图片中提及alt属性时, 搜索引擎会将你的网页排名较低。还要提及图片的高度和宽度。由于浏览器可以在加载图像之前为图像保留空间, 因此可以减少闪烁。
例子：
<!-- Bad Code-->
< img src = "html5.gif" >
<!-- Good Code-->
< img src = "html5.gif" >< img src = "html5.gif" alt = "HTML5" style = "width:100px;height:100px" >5.避免使用内联样式
许多新手都会犯此错误, 他们在HTML标签中添加了内联样式。它使你的代码变得复杂且难以维护。养成使样式与HTML标记分开的习惯。使用内联样式会产生很多问题。它使你的代码混乱, 难以理解并且难以更新或维护。用CSS分隔HTML还可以帮助其他开发人员非常轻松地更改代码。
例子：
<!-- Bad Code -->
< p style = "color: #393; font-size: 24px;" >Thank you!</ p >
<!-- Good Code -->
< p class = "alert-success" >Thank you!</ p >6.使用有意义的标题和描述性元标记
对于搜索引擎优化或页面排名, HTML标题确实非常重要。始终尝试使标题尽可能有意义。 HTML页面的标题将显示在google搜索引擎结果页面中, 并且你网站的索引依赖于此。
元描述会告诉用户该页面的全部内容, 因此请进行描述, 以明确指定你的网站或页面的用途。避免使用重复的单词和短语。当用户在搜索引擎栏中键入某个关键字时, 该关键字会被搜索引擎蜘蛛抓取, 然后用于根据元标记中使用的匹配关键字为用户找到相关页面。
例子：
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< meta name = "description" content = "A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions." >
< link rel = "shortcut icon" href = "https://www.lsbin.org/favicon.ico" type = "image/x-icon" />
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" >
< meta name = "theme-color" content = "#0f9d58" />
< meta property = "og:image" content = "https://www.lsbin.org/wp-content/uploads/gfg_200X200.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "200" >
< meta property = "og:image:height" content = "200" >
< script src = "https://apis.google.com/js/platform.js" ></ script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js" ></ script >
< title >lsbin | A computer science portal for geeks</ title >7.明智地使用标题元素
标题标签在使你的网站搜索引擎友好中也起着至关重要的作用。 HTML有6种不同的标题标记, 应谨慎使用。学习使用<h1>到<h6>表示HTML内容层次结构的元素还请确保每页仅使用一个h1。在W3C规范中, 提到你的页面内容应该用单个标记描述, 以便你可以在h1内添加最重要的文本, 例如文章标题或博客文章。
例子：
< h1 >Topmost heading</ h1 >
< h2 >Sub-heading underneath the topmost heading.</ h2 >
< h3 >Sub-heading underneath the h2 heading.</ h3 >8.始终使用正确的HTML元素
许多初学者使用错误的HTML元素会犯一个常见错误。他们需要随着时间学习应该在哪里使用哪个元素。我们建议你了解所有HTML元素, 并将它们正确地用于有意义的内容结构。例如代替使用<br>你可以在两个段落之间使用CSS边距和/或填充属性。了解何时使用<em>以及何时使用<i>(两者看起来相同), 了解何时使用<b>以及何时使用<strong>(看起来都一样)。它伴随着实践, 并且你会注意其他开发人员编写的优质代码。下面是另一个很好的例子。
<!-- Bad Code -->
< span class = "heading" >< strong >Hello Geeks</ span ></ strong >
< br >< br >
This is Computer Science portal for geeks.
< br >< br >
<!-- Good Code -->
< h1 >Hello Geeks</ h1 >
< p >This is Computer Science portal for geeks.</ p >9.正确使用缩进
重要的是在HTML代码中提供适当的空格或缩进, 以使其更具可读性和可管理性。避免将所有内容写在一行中。它使你的代码混乱而平坦。使用嵌套元素时, 请适当缩进, 以便用户可以识别标签的开头和结尾。遵循正确格式的代码很容易更改, 并且对其他开发人员来说看起来不错。这是一种良好的编码习惯, 可以减少开发时间。
<!-- Bad Code -->
< aside >
< h3 >lsbin</ h3 >
< h5 >A computer science portal for geeks</ h5 >
< ul >
< li >Computer Science</ li >
< li >Gate</ li >
</ ul >
</ aside >
<!-- Good Code -->
< aside >
< h3 >lsbin</ h3 >
< h5 >A computer science portal for geeks</ h5 >
< ul >
< li >Computer Science</ li >
< li >Gate</ li >
</ ul >
</ aside >10.验证你的代码
最后但并非最不重要的一点是养成经常验证HTML代码的习惯。验证代码是一项艰巨的工作, 有助于发现棘手的问题。你可以下载W3C标记验证orFirefox开发人员工具栏通过网址验证你的网站。验证器对于检测错误和解决错误非常有帮助。
