如何像HERO一样使用HTML语义

内容

1.简介：

• 什么是语义学？
• 我们在HTML方面的类似经验

2.语义元素列表

• 如何使用语义元素示例。

3.我从哪里开始？

• 好...？ 就在这里与这篇文章。

4，学习HTML的快速方法...

• 编码伙伴
• 通过克隆站点进行练习

5.鼓励的话

（获得语义超级大国的照片，由Ali-Unsplashed拍摄）

1.简介

一个。 什么是语义？

你可以大胆猜测吗？ 我知道在看到您的第一个代码之后，作为初学者仍然很难记住所有这些信息。 因此，最容易记住的方法是进行操作并记笔记。 因此，语义元素是标签，可以告诉您有关该元素将要做什么或用于什么目的的故事。 让我们看看我们是否：

< form >
    <!--THIS FORM WILL GET OR COLLECT USER INPUT.-->
</ form >

因此，这里突出的第一件事是……他要创建一个表单。 在这种情况下，我们将使用<form>标记创建一个登录表单。 就像标签<form>不仅对您而且对其他人都具有足够的描述性，以使他们知道您将要做什么（其他开发人员能够识别您的代码也很重要）。 因此，故事只通过<form>来讲述。 注意： <!-----..>是我们用HTML注释的一种方式，因此该行将被忽略。 另一种语义元素：

< form >
     < section class = "imgcontainer" >
    < img src = "img_avatar2.png" alt = "Avatar" class = "avatar" >
  </ section >
</ form >

因此， <section>是另一种但不是最后一种语义元素。 节意味着将其中的任何内容分组。 因此，我希望现在您可以通过上面的两个示例了解如何使用语义 ， 在何处 使用语义以及为什么需要使用语义 。 让我们继续...

b。 我们在HTML方面的类似经验

是的，我在编程方面有疯狂的经验。 当我开始学习编程或编码时，可能会像许多初学者一样感到紧张。 我不知道自己该怎么做，直到我第一次看到完整的代码（特别是HTML），而且我就像是……帮助？ 这让我震惊了一秒钟，同时让我兴奋。 所以这至少是我著名的语义代码，我以一开始就认为这是我开始编码时的语义：

< div >
<!-----LINE(S) OF CODE--->
</ div >

我不是在开玩笑，这实际上是我在HTML中使用的唯一标签，拜托...我很兴奋， <div>让我很兴奋。 我不知道语义是什么意思，为什么重要。 顺便说一下， <div>不是语义元素，例如<span> 。 那我在说什么 永远不要将<div>当作唯一的好朋友，他会欺骗他的威力，而当您在代码中寻找他时，您将找不到他，他已经不再只使用<div>了，可能会失去您的超级能力。 无论如何我离题。 让我们继续...

因此，我的建议是在代码中玩得开心，在编写代码时保持注释，这很重要。 我犯了一个错误，就是没有记笔记并且没有联系软件社区，不要犯那个错误，现在所有的一切都已经改变了，我更加努力 ， 计划更好 ，总是记下我可以改进的地方以及如何去做。 我可以改善它 。 所以这是一个我喜欢的社区：单击此处访问： 堆栈溢出

对于所有阅读此书的初学者，请确保您手动输入代码 ，这有助于将信息注册到您的大脑，就像您在键盘上输入的次数越多，输入的速度就越快。 因此，这是我对HTML的简要经验，还有很多，但是我们将在下一篇文章中介绍。

2.语义元素列表

因此，这就是您一直在等待的语义元素列表：

< article >
< aside >
< details >
< footer >
< figure >
< main >
< mark >
< figcaption >
< nav >
< figure >
< section >
< form >
< time >
< summary >
< header >
< table >

因此，这些是一些新的语义元素，请注意：此列表仅提及部分语义元素，而并非全部。

一个。 如何使用语义元素

因此，在这里我们将简要介绍一些元素，以及如何通过使用语义元素使它们在您的代码中显得更加专业和简洁。 将语义元素视为组织者。

2.1 <article>

<!--Used in blogs, forum posts and magazines or news paper articles.-->

</article>

< article >
  < h1 > USING AN ARTICLE </ h1 >
  < p > I am learning about article elements and what they do, this is interesting </ p >
</ article >

2.2 <nav>

<!---Are used to define a block of navigation lists-->

</nav>

< nav >
  < a href = "" > Home </ a > |
  < a href = "" > Blog </ a > |
  < a href = "" > About </ a > |
  < a href = "" > Contact </ a >
</ nav >

2.3 <footer>

<!---This element contains navigation, authorship information, copyright-->

</footer>

< footer >
  < p > Published by: Richard Phala </ p >
  < p > Contact information: < a href = "phalarichard1@gmail.com" > Richard Phala </ a > . </ p >
</ footer >

迄今为止，页脚是每个人都喜欢的标签，因为它只能表示一件事，您已经完成了设计代码的工作。 我的意思是谁不喜欢完成他们的课程？ 因此，我希望通过这3个示例您可以理解。 因此，对于您的任务，您可以继续研究剩余的标签，请查看链接：单击此处以获取更多---> More_Semantics

3 。 我从哪里开始？

所以你现在在问，但是我从哪里开始。 我也曾多次提出这个问题，所以很幸运，因为有一些很棒的链接可以帮助您设计布局，进行剖切，并将深入探讨语义主题。请考虑看一下这些很棒的免费编码平台对我有帮助，现在仍在帮助我组织代码。

• 免费代码营
• W3学校
• 代码学院
• 可汗学院
• 代码大战

4.学习HTML的快速方法

因此，这是每个人都拥有的问题，并希望为清楚起见。 好吧，让我为这个子主题做出贡献。 我相信生活中的任何事物，都无法快速学习。 学习新技能有什么最快的方法？ 我总是使用这些要点来帮助我在有节奏的庄园中学习：

• 确保这是您想要做的
• 计划每个项目和学习
• 学习新技能时要有耐心
• 花时间学习
• 始终如一
• 码。 学习。 码。 学习
• 玩得开心

一个。 代码合作伙伴

当我开始进行单独编码时，我仍在尝试弄清编程的全部内容，在某种程度上，这种方法可以使您掌握一定的编码技能。 但是，我现在有幸成为编码合作伙伴，这是您学习更快/掌握节奏的好处和方法：

• 有一个编码团队-审查代码。
• 与团队讨论您的代码
• 与合作伙伴进行编码，并解释您的工作
• 一起犯错和调试
• 提出和思考建议

这是您可以访问的链接，以与编码合作伙伴，团队和更大的社区开始学习： https : //www.microverse.org/?grsf=166cdq

b。 克隆练习

“ You don't learn to walk by following rules. You learn by doing, and by falling over.”
― Richard Branson You don't learn to walk by following rules. You learn by doing, and by falling over.”
― Richard Branson

最大的学习方法之一就是做。 我有几个从原始站点克隆的项目，所有代码均未复制，但设法采用相同的布局。 代码可能不是一个字接一个字，但布局和功能可以满足要求。因此，我的建议是开始克隆，犯下这些错误，更正它们，寻求帮助，就像您成为使用HTML和HTML的Sematic Hero一样。程序员。

5.鼓励的话

您足够优秀，有能力，有才智，并且有能力做到最好。 您只需要愿意介入并开始享受它。 当我开始的时候，我犯了个错误并且感到沮丧，但是我不允许自己做的一件事就是放弃或者接受放弃的思想。 你有这个!!!!!!

From: https://hackernoon.com/how-to-use-html-sematic-like-a-hero-08o736g9