1. 首页
  2. css

CSSJavaScript为什么吃HTML

Web开发总是在变化。最近有一种趋势特别流行,它从根本上违背了关于如何制作网页的传统观念。这对一些人来说是令人兴奋的,但对另一些人来说则是令人沮丧的,两者的原因都很难解释。
网页通常由三个独立的部分组成,分别承担不同的责任:HTML代码定义网页内容的结构和意义,CSS代码定义网页的外观,JavaScript代码定义了它的行为。在拥有专门设计师、HTML/CSS开发人员和JavaScript开发人员的团队中,这种关注点的分离与工作角色很好地吻合:设计师决定页面上的视觉效果和用户交互,HTML和CSS开发人员在web浏览器中再现这些视觉效果,JavaScript开发人员添加用户交互以将它们联系在一起\”让它工作起来。\”人们可以在一个页面上工作,而不必涉及所有三个部分。
近年来,JavaScript开发人员已经意识到,通过用JavaScript而不是HTML(使用React等框架)定义页面结构,它们可以简化用户交互代码的开发和维护,否则构建起来要复杂得多。当然,当你告诉某人他们编写的HTML需要切碎并与他们一无所知的JavaScript混合在一起时,他们会(可以理解)感到沮丧,开始问我们到底从中得到了什么。
作为一个跨职能团队中的JavaScript开发人员,我偶尔会遇到这样的问题,而且我经常遇到这样的问题很难回答。我在这个主题上找到的所有材料都是为那些已经熟悉JavaScript的读者编写的,而JavaScript对那些关注HTML和CSS的人来说并不是非常有用。但是这种JS中的HTML模式(或者提供相同好处的其他模式)可能会存在一段时间,所以我认为这是每个参与web开发的人都应该理解的一件重要事情没有它们也能理解。
Background:HTML、CSS和JavaScript
为了尽可能扩大本文的读者范围,我想快速介绍一下创建网页所涉及的代码类型及其传统角色。如果您有这些方面的经验,可以跳过。HTML用于结构和语义
HTML(超文本标记语言)代码定义页面内容的结构和含义。例如,这篇文章的HTML包含您现在正在阅读的文本、它位于段落中的事实以及它位于标题之后、代码笔之前的事实。
假设我们要构建一个简单的购物列表应用程序。我们可以从这样的HTML开始:CodePen Embed Fallback
我们可以将此代码保存在文件中,在web浏览器中打开它,浏览器将显示呈现的结果。如您所见,本例中的HTML代码表示页面的一部分,其中包含一个标题\”购物列表(2个项目)\”,一个文本输入框,一个按钮\”添加项目\”,以及一个包含两个项目的列表\”鸡蛋\”和\”黄油\”。在传统网站中,用户将在其web浏览器中导航到一个地址,然后浏览器将从服务器请求这个HTML,加载并显示它。如果列表中已经有项目,服务器可以传递带有项目的HTML,就像本例中那样。
尝试在输入框中键入一些内容,然后单击\”添加项目\”按钮。你会注意到什么都没发生。这个按钮没有连接到任何可以改变HTML的代码,HTML本身也不能改变。稍后我们将谈到这一点。
h4>svg>CSS表示外观,CSS(级联样式表)代码定义页面的外观。例如,本文的CSS包含您正在阅读的文本的字体、间距和颜色。
您可能已经注意到我们的购物清单示例看起来非常简单。HTML无法指定诸如间距、字体大小和颜色之类的内容。这就是CSS(级联样式表)的用武之地。在与上面的HTML相同的页面上,我们可以添加一些CSS代码来增加一些样式:
CodePen Embed Fallback
正如您所见,这个CSS改变了字体大小和权重,并为部分提供了一个漂亮的背景色(设计师,请不要@me;我知道这仍然很难看)。开发人员可以编写这样的样式规则,它们将一致地应用于任何HTML结构:如果我们在这个页面中添加更多的、或元素,它们将具有

CSSJavaScript为什么吃HTML 为WP2原创文章,链接:https://www.wp2.cn/css/cssjavascript%e4%b8%ba%e4%bb%80%e4%b9%88%e5%90%83html/