HTML 和 CSS：让 JavaScript 学习变得更容易的被低估的技能-css教程-PHP中文网

首页

web前端

css教程

HTML 和 CSS：让 JavaScript 学习变得更容易的被低估的技能

Dec 13, 2024 am 08:22 AM

作为初学者开发人员，很容易对“酷”的东西感到兴奋，例如 JavaScript、React 或构建复杂的应用程序。但当我第一次开始学习前端开发时，我意识到真正理解 JavaScript（最终理解 React）的关键并不是立即深入了解 JavaScript。首先是掌握 HTML 和 CSS。

您可能会想，“为什么要关注 HTML 和 CSS？JavaScript 不是 Web 开发背后的真正力量吗？”虽然 JavaScript 非常重要，但 HTML 和 CSS 构成了 JavaScript 无缝工作的基础。在这篇文章中，我将解释为什么学习这些“被低估”的技能使学习 JavaScript 变得更加容易，并帮助我尽早避免常见的陷阱。

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier

-HTML 的重要性：每个网页的支柱

HTML 是每个网页的支柱。结构（构建块）定义了内容的外观及其组织方式。如果不了解 HTML，JavaScript 就会变得更难学习，因为您不知道如何与页面内容交互或操作页面内容。

这样想：在没有先了解房子的蓝图的情况下，你不会尝试建造一座房子，对吗？ HTML 是网页的蓝图，而 JavaScript 是帮助您更改该蓝图中的内容的工具。

当我第一次开始学习 JavaScript 时，我发现自己试图在没有完全理解 HTML 元素结构的情况下操作它们。例如，如果我想更改段落的文本或添加执行操作的按钮，我必须确切知道将这些元素放置在 DOM（文档对象模型）中的位置。了解 HTML 使这个过程变得更加容易。

如果不了解 HTML，尝试使用 JavaScript 就像尝试阅读地图而不了解地标在哪里。

-CSS：使 JavaScript 更加直观的视觉层

HTML 负责网页的结构，而 CSS 则控制视觉外观——事物的外观。了解 CSS 与了解 HTML 一样重要，因为它可以让您设计网页样式并确保所有内容都在正确的位置。

为什么这对 JavaScript 很重要？那么，当您使用 JavaScript 来更改页面的外观（例如，使某些内容消失或更改其颜色）时，了解 CSS 意味着您将确切地知道要更改哪些属性。没有它，JavaScript 会感觉像是一团随机的、令人沮丧的混乱。

我记得当我第一次尝试使用 JavaScript 向页面添加交互式元素时，我花了很多时间试图找出为什么更改不可见。原因是什么？我还没有完全理解 CSS 是如何工作的。一旦我理解了 CSS 如何定位元素并定义其外观，JavaScript 如何改变页面上的颜色、大小和位置等内容就变得清晰起来。

这是一个简单的例子：

<div>
 
<p>在此示例中，我使用 JavaScript 来更改框的背景颜色。了解 CSS 属性背景颜色帮助我编写了在单击时更改背景颜色的 JavaScript。</p>
 
<hr>
 
<p><strong>-HTML CSS = 更流畅的 JavaScript 学习体验</strong></p>
 
<p>那么，为什么先学习 HTML 和 CSS 会让学习 JavaScript 变得如此容易？ JavaScript 的核心是与 HTML 元素交互并通过 CSS 操纵它们的外观。如果您不懂 HTML，JavaScript 就会变得神秘，因为您不知道如何定位要更改的元素。如果您不懂 CSS，您将不知道如何调整 JavaScript 操作的样式。</p>
 
<p>通过了解 HTML 和 CSS 如何协同工作，我可以专注于 JavaScript 的逻辑和功能，而不必陷入网页的结构和设计中。这对我来说是这样的：</p>
 
<blockquote>
<p>当我第一次了解 JavaScript 中的 DOM 操作时，我很困惑。什么是 DOM？如何更改页面上的内容？但一旦我学会了 HTML 和 CSS，我就明白了。我了解到 DOM 本质上是页面上 HTML 元素的结构化表示，并且可以使用 JavaScript 实时修改这些元素。当我了解这些元素的结构和样式时，将 JavaScript 逻辑应用于这些元素变得更加容易。</p>
</blockquote>
 
<hr>
 
<p><strong>-React 和 JavaScript：以您已经了解的知识为基础</strong></p>
 
<p>如果您打算学习 React，您会发现它在很大程度上依赖于您已经了解的 HTML 和 CSS。 React 使用 JSX（一种看起来像 HTML 的语法）来定义组件。因此，在进入 React 之前了解 HTML 可以帮助您快速熟悉 JSX。</p>
 
<p>在 React 中，您无需手动向页面添加 HTML 元素，而是创建基于状态和 props 渲染 HTML 元素的组件。由于 React 元素是由 JSX 构建的，类似于 HTML，所以在了解 HTML 后，我很容易上手 React。</p>
 
<p>此外，许多 React 库（例如 styled-components）都依赖于用 JavaScript 编写 CSS。如果您已经学习了 CSS，您可以在 React 组件中应用相同的样式，使学习曲线更加平滑。</p>
 
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173404933325970.jpg" class="lazy" alt="HTML &amp; CSS: The Underrated Skills That Made Learning JavaScript Easier"></p>
<p><strong>-HTML 和 CSS 如何帮助我避免 JavaScript 中的常见陷阱</strong></p>
 
<p>通过首先关注 HTML 和 CSS，我学到的最有价值的东西之一是它如何帮助我避免编写 JavaScript 时的常见错误。例如：</p>
 
<ul>
<li>
<strong>不知道如何正确选择元素</strong>❗：如果您不了解 HTML 元素的结构，您可能很难使用 JavaScript 的 getElementById 或 querySelector 方法来找到正确的元素。</li>
<li>
<strong>布局问题</strong>❗：有时，JavaScript 按预期工作，但页面上的内容看起来不太正确，因为您没有完全理解 CSS 如何影响元素定位或大小调整。了解 CSS 可以帮助您在布局问题变成 JavaScript 问题之前预见它们。</li>
</ul>
 
<p>了解 HTML 和 CSS 的基础知识帮助我更快地解决问题，因为在开始使用 JavaScript 操作事物之前，我对如何布局和设计事物有了更清晰的了解。</p>
 
<hr>
 
<p><strong>最后</strong></p>
 
<p>老实说，对 HTML 和 CSS 的扎实理解对我的 JavaScript 学习之旅有多大帮助，我怎么强调都不为过。直接跳入 JavaScript 和 React 等框架似乎很诱人，但如果没有基础知识，事情很快就会变得令人不知所措。相信我，当我花时间真正熟悉 HTML 和 CSS 时，其他一切都迎刃而解。</p>
 
<p>因此，如果您刚刚开始 Web 开发，请给自己一些时间来学习 HTML 和 CSS。一开始可能会感觉很慢，但是这个基础将使学习 JavaScript 和 React 变得更加容易和愉快。你会发现差异！</p>
 
<p><em>“感谢阅读，继续编码！”❤</em></p>
 
          </div>