acm hero
内容
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 。 我从哪里开始?
所以你现在在问,但是我从哪里开始。 我也曾多次提出这个问题,所以很幸运,因为有一些很棒的链接可以帮助您设计布局,进行剖切,并将深入探讨语义主题。请考虑看一下这些很棒的免费编码平台对我有帮助,现在仍在帮助我组织代码。
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 BransonYou don't learn to walk by following rules. You learn by doing, and by falling over.”
― Richard Branson
最大的学习方法之一就是做。 我有几个从原始站点克隆的项目,所有代码均未复制,但设法采用相同的布局。 代码可能不是一个字接一个字,但布局和功能可以满足要求。因此,我的建议是开始克隆,犯下这些错误,更正它们,寻求帮助,就像您成为使用HTML和HTML的Sematic Hero一样。程序员。
5.鼓励的话
您足够优秀,有能力,有才智,并且有能力做到最好。 您只需要愿意介入并开始享受它。 当我开始的时候,我犯了个错误并且感到沮丧,但是我不允许自己做的一件事就是放弃或者接受放弃的思想。 你有这个!!!!!!
翻译自: https://hackernoon.com/how-to-use-html-sematic-like-a-hero-08o736g9
acm hero