Web设计101：HTML，CSS和JavaScript如何工作

有没有想过电脑编程如何工作，但在网上没有做任何更复杂的东西，而不是将照片上传到Facebook？

然后你在正确的地方。

对于以前从未编码的人，从头开始，设计和所有人创建网站的概念 - 似乎真的令人恐惧。您可能会在电影中描绘哈佛学生，社交网络，坐在他们的计算机上用巨大的耳机和锤击代码，并思考自己，“我永远不会那样做。”

实际上，你可以。

任何人都可以学习代码，就像任何人都可以学习新语言一样。事实上，编程有点像说出外语 - 这正是他们称为编程的原因语言。每个人都有自己的规则和语法，需要一步一步学习。这些规则是告诉您的计算机该做什么的方法。更具体地说，在网络编程中，他们是告诉你的方式浏览器该怎么办。

这篇文章的目标是，以简单的英语为单位，教授您的HTML，CSS和最常见的编程语言之一，JavaScript。但在我们开始之前，让我们了解实际的编程语言。

什么是编程语言？

编程或编码就像解决拼图。考虑一种人类语言，如英语或法语。我们使用这些语言将思想和想法转化为行动和行为。在编程中，拼图的目标是完全相同的 - 你只是在推动不同的行为，并且该行为的来源不是人。这是一台电脑。

一种编程语言是我们与软件沟通的方式。雷竞技苹果下载官方版使用编程语言的人通常被称为程序员或开发人员。我们通过编程语言告诉软件的事情可能是使雷竞技苹果下载官方版网页看起来一定的方式，或者如果人类用户采用某项操作，则在页面上移动对象。

Web开发中的编程

所以，当一个网络设计师被赋予最终目标“创建具有此标题的网页时，此字体，这些颜色，这些图片，以及在屏幕上行走时行走的动画独角兽当用户点击此按钮时，”Web Designer的作业“是采取那个大思想并将其分开进入微小的碎片，然后将这些部分翻译成计算机可以理解的说明 - 包括以正确的顺序或语法填充所有这些指令。

您访问的网络上的每个页面都使用一系列单独的指令构建，一个接一个地。您的浏览器（Chrome，Firefox，Safari等）是将代码转化为我们在我们的屏幕上的东西甚至与之交互时的大型演员。忘记没有浏览器的代码只是一个文本文件 - 它是当您将该文本文件放入一个浏览器魔法发生了。打开网页时，您的浏览器获取涉及的HTML和其他编程语言并解释它。

HTML和CSS实际上不是技术上的编程语言;它们只是页面结构和风格信息。但在继续javascript和其他真实语言之前，您需要了解HTML和CSS的基础，因为它们位于每个网页和应用程序的前端。

在20世纪90年代初期，HTML是网络上唯一可用的语言。Web开发人员必须遵循静态站点，页面逐个静态。此后，很多更改：现在有许多计算机编程语言可用。

在这篇文章中，我将讨论HTML，CSS和最常见的编程语言之一：JavaScript。

HTML，CSS和JavaScript：教程

概述：

• HTML.提供基本结构of Sites，由其他技术（如CSS和JavaScript）增强和修改。
• CSS.用于控制演示文稿，格式化和布局。
• javascript.用于控制行为不同的元素。

现在，让我们单独跨越每一个，以帮助您了解每个播放在网站上的角色，然后我们将介绍它们如何合适。让我们从好的OL'HTML开始。

HTML.

HTML位于每个网页的核心，无论涉及的网站的复杂性或涉及的技术数量。这是任何网络专业人员的重要技能。这是学习如何为网络创建内容的人的起点。幸运的是，对于我们来说，令人惊讶的是易于学习。

让我告诉你我的意思。看看下面的文章。如果我要要求你在页面上标记内容的类型，你可能会很好地做得很好：顶部有标题，然后是它下方的子标题，身体文本和底部的一些图像后跟一个还有更多的文字。

标记语言以与此同时的方式工作你刚刚在标记这些内容类型时，除了它们使用代码之外，他们专门地使用代码，它们使用HTML标记，也称为“元素”。这些标签具有非常直观的名称：标题标签，段落标签，图像标记等。

每个网页都由一堆这些HTML标记组成，表示页面上的每种类型的内容。页面上的每种类型的内容都是“包装”，即HTML标记所包围。

例如，您正在阅读的单词现在是段落的一部分。如果我从头开始编码这个网页（而不是使用wysiwg编辑器HUBSPOT的CMS），我会用一个人开始这个段落开幕式段标签：

。“标签”部分由开放括号表示，字母“P”告诉计算机，我们正在打开段落而不是其他类型的内容。

一旦标签打开，就会假定在您“关闭”标记之前的所有标签的一部分。当段落结束时，我会提交一个结束段落标签：。请注意，关闭标签看起来与打开标签完全相同，除了左角度括号之后存在正斜线。这是一个例子：

这是一个段落。

使用HTML，可以添加标题，格式段落，控制行中断，使列表，强调文本，创建特殊字符，插入图像，创建链接，构建表，控制一些样式等等。

我推荐更多关于在HTML中编码的更多信息查看基本HTML的指南，并使用免费的类和资源reybet雷竞技下载编纂量- 但现在，让我们继续前进到CSS。

CSS.

CSS代表级联样式表。这种编程语言决定了网站的HTML元素应该如何实际出现在页面的前端。

如果HTML是DRYWALL，则CSS是涂料。

而HTML是基本的您网站的结构，CSS是给您整个网站的样式。那些光泽的颜色，有趣的字体和背景图像？谢谢CSS。这种语言影响了网页的整个情绪和音调，使其成为一个令人难以置信的强大的工具 - 以及Web开发人员学习的重要技能。它也允许网站适应不同的屏幕尺寸和设备类型。

要向您展示网站的CSS，请查看以下两个屏幕截图。第一个屏幕截图是我的同事博客帖子，但以基本的HTML显示，第二个屏幕截图是HTML的同一个博客帖子和CSS。

HTML的示例（没有CSS）

请注意所有内容仍然存在，但视觉样式不是。无论出于何种原因，这就是您可能看出的风格表是否在网站上加载。现在，这是与添加CSS相同的网页的样子。

HTML + CSS的示例

这不是漂亮吗？

简而言之，CSS是可以将不同的属性分配给HTML标记的规则列表，指定为单个标记，多个标签，整个文档或多个文档。它存在因为，作为字体和颜色等设计元素，Web设计人员对这些新功能调整HTML有很多问题。

您可以看到HTML，于1990年开发，并不是真正旨在显示任何物理格式信息。它最初仅用于定义文档的结构内容，如标题与段落。HTML OutGrew这些新的设计功能和CSS在1996年发明和发布：可以从HTML文档中删除所有格式，并存储在单独的CSS（.css）文件中。

那么，CSS究竟是什么代表？它代表级联样式表 - 和“样式表”是指文档本身。Ever Web浏览器有一个默认的样式表，因此每个网页都有至少一个样式表的影响 - 无论网络页面访问者是否使用Web Designer应用程序的任何浏览器的默认样式表。例如，我的浏览器的默认字体样式是新罗马，大小12，所以如果我访问了设计师没有应用自己样式表的网页，我会在新罗马时代看到网页，大小12。

显然，我访问的绝大多数网页都不使用时代新罗马，大小12 - 这是因为这些页面背后的网页设计师始于默认的字体样式，然后他们覆盖了我的浏览器使用自定义CSS默认为默认值。这就是“级联”一词进入的地方。考虑一下瀑布 - 随着水瀑布下降，它在途中击中所有岩石，但只有底部的岩石会影响它最终会流动的地方。以同样的方式，最后一个定义的样式表会通知我的浏览器的指令优先。

要了解CSS中编码的细节，我将再次指出免费的类和资源reybet雷竞技下载编纂量。但是，现在，让我们对JavaScript进行一些谈谈。

javascript.

JavaScript是一种比HTML或CSS更复杂的语言，直到1995年未按Beta表单发布。如今，所有现代Web浏览器都支持JavaScript，并用于Web上的几乎每个站点，以实现更强大的功能和复杂的功能。

简而言之，JavaScript是一种编程语言，可让Web开发人员设计交互网站。您将在网页上看到的大多数动态行为都感谢JavaScript，这增加了浏览器的默认控件和行为。

创建确认框

操作中JavaScript的一个示例是屏幕上弹出的框。考虑最后一次输入您的信息，进入在线表单和一个确认框，要求您按“确定”或“取消”继续。由于JavaScript - 在代码中，您可以找到一个“else ... else ...”语句，如果用户点击“确定”，则告诉计算机执行一件事，如果用户点击“取消”。

触发幻灯片的CTA

行动中的JavaScript的另一个例子是一个滑入呼叫动作（CTA）就像我们在我们的博客帖子上放在屏幕右侧的底部右侧，当您滚动侧栏的末尾时，就会出现在博客帖子上的那些。这是它的样子：

存储新信息

根据用户在访问页面时的决策，JavaScript对现有网站元素分配给现有网站元素的新身份特别有用。例如，假设您正在使用您希望通过捕获有关网站访问者的信息来生成带来的格式的着陆页。您可能有一个专用于用户名的“字符串”的JavaScript。那个字符串可能看起来像这样：

函数updatefirstname（）{

让FirstName =提示（'名字'）;

}

然后，在网站访问者进入他或她的名字之后 - 以及在登录页面上需要的任何其他信息 - 并提交表单，此操作会更新代码中最初未定义的“FirstName”元素的标识。以下是您可以在JavaScript中的名称感谢您的网站访问者：

para.textContent ='谢谢'+ firstname +“！您现在可以下载您的电子书。”

在上面的JavaScript字符串中，“FirstName”元素已被分配了网站访问者的名字，因此将在网页前端生成其实际的名字。对于名为kevin的用户，句子看起来像这样：

谢谢，凯文！您现在可以下载您的电子书。

安全，游戏和特效

JavaScript的其他用途包括安全密码创建，检查表单，交互式游戏，动画和特效。它还用于构建移动应用程序并创建基于服务器的应用程序。您可以通过将这些“脚本”或javascript代码的片段添加到文档的标题或正文中添加JavaScript到HTML文档。

如果您想了解有关JavaScript的更多信息，CodeCademy有免费的在线课程你也可以采取。

编码中最困难的部分是开始 - 但是一旦你学习基础知识，就会更容易了解更多高级编程语言。如果你感到不堪重负，请抬头hackertyper.net.并在键盘上击中随机键。

相信我，你会感觉更好。

编者注：这篇文章最初发表于2018年11月，并已更新全面性。