网页设计101：HTML、CSS和JavaScript的工作原理

有没有想过计算机编程是如何工作的，但没有在网络上做过比上传照片到Facebook更复杂的事情？

那你就来对地方了。

对于一个从未编写过代码的人来说，从头开始创建一个网站的概念——布局、设计等等——看起来真的很吓人。你可能在想象电影中的哈佛学生，社交网络，坐在他们的电脑上用巨大的耳机和锤击解码，并思考自己，“我永远不会那样做。”

实际上，你可以。

任何人都可以学习编码，就像任何人都可以学习一门新语言一样。事实上，编程有点像说外语——这就是为什么它们被称为编程语言。每一种都有自己的规则和语法，需要一步一步地学习。这些规则是告诉计算机该做什么的方法。更具体地说，在web编程中，它们是告诉计算机该做什么的方法浏览器怎么办。

这篇文章的目的是用简单的英语教你HTML、CSS和最常见的编程语言之一JavaScript的基础知识。但在开始之前，让我们先了解一下编程语言实际上是什么。

什么是编程语言？

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

一种编程语言是我们与软件沟通的方式。使用编程语言的人通常被称为程序员或开发人员bob电竞官方下载。我们告诉使用编程语言的软件的事情可能是使网页以某种方式显示，或者如果人类用户采取某种行动，使页面上的对象移动。

Web开发中的程序设计

因此，当网页设计师被赋予一个最终目标，比如“创建一个有这个标题、这个字体、这些颜色、这些图片的网页，当用户点击这个按钮时，屏幕上会出现一只动画独角兽”，网页设计师的工作就是把这个大创意分解成小块，然后将这些片段翻译成计算机可以理解的指令——包括将所有这些指令按正确的顺序或语法排列。

您访问的web上的每个页面都是使用一系列独立的指令构建的，一个接一个。您的浏览器（Chrome、Firefox、Safari等）是将代码翻译成我们可以在屏幕上看到甚至可以与之交互的东西的重要角色。人们很容易忘记，没有浏览器的代码只是一个文本文件——当你将文本文件放入浏览器奇迹发生了。打开网页时，浏览器会获取HTML和其他相关编程语言并对其进行解释。

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

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

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

HTML，CSS，＆JavaScript：教程

概述：

• HTML提供基本结构通过CSS和JavaScript等其他技术对网站进行增强和修改。
• CSS是用来控制的演示文稿，格式化和布局。
• JavaScript用于控制行为不同的元素。

现在，让我们逐一检查每一个，以帮助您了解每个角色在网站上扮演的角色，然后我们将介绍它们是如何结合在一起的。让我们从好的ol'HTML开始。

HTML

HTML是每个网页的核心，无论网站的复杂性或涉及的技术数量如何。这是任何网络专业人士的基本技能。它是任何人学习如何为web创建内容的起点。幸运的是，我们很容易学会。

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

标记语言的工作方式与你刚刚在标记这些内容类型时，除了他们使用代码来执行它 - 特别是，他们使用HTML标记，也称为“元素”。这些标签具有非常直观的名称：标题标签，段落标签，图像标记等。

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

例如，你现在读的单词是段落的一部分。如果我从头开始编写这个网页（而不是在HUBSPOT的CMS)，我会以一个开放段落标记：

。“标签”部分用开括号表示，字母“p”告诉计算机我们打开的是一个段落，而不是其他类型的内容。

一旦标签被打开，在您“关闭”标签之前，后面的所有内容都被认为是该标签的一部分。当段落结束时，我会添加一个结束段落标签：

这是一个段落。

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

要了解有关HTML编码的更多信息，我建议查看我们的基本HTML指南，并使用免费的类和资源bob体育苹果系统下载安装编纂量- 但现在，让我们继续前进到CSS。

CSS

CSS代表层叠样式表。这种编程语言规定了网站的HTML元素在页面前端的实际显示方式。

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

而HTML是最基本的网站结构，CSS是你整个网站的风格来源。那些光滑的颜色、有趣的字体和背景图像？都要归功于CSS。这种语言影响了网页的整体情绪和基调，使其成为一种功能强大的工具，也是网站开发人员学习的一项重要技能。它还使网站能够适应不同的屏幕设备和设备类型。

要向您展示CSS对网站的作用，请查看以下两个屏幕截图。第一张截图是我同事的博文，但以基本HTML显示，第二个屏幕截图是与HTML相同的博客文章和CSS。

HTML示例（没有CSS）

请注意，所有内容仍然存在，但视觉样式却不存在。无论出于何种原因，如果样式表没有加载到网站上，您可能会看到这一点。现在，添加CSS后，同一网页的外观如下所示。

HTML + CSS的示例

这不是漂亮吗？

简单地说，CSS是一个规则列表，可以为HTML标记指定不同的属性，可以指定为单个标记、多个标记、整个文档或多个文档。它的存在是因为，随着字体和颜色等设计元素的开发，web设计人员很难使HTML适应这些新功能。

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

那么，CSS到底代表什么呢？它代表级联样式表，“样式表”指的是文档本身。任何web浏览器都有一个默认的样式表，因此每个网页都至少受一个样式表的影响，即网页访问者使用的任何浏览器的默认样式表，而不管web设计器是否应用任何样式。例如，我的浏览器的默认字体样式是Times New Roman，大小为12，因此，如果我访问的网页设计者没有应用自己的样式表，我会看到Times New Roman，大小为12的网页。

显然，我访问的绝大多数网页都没有使用Times New Roman，大小为12——这是因为这些网页背后的网页设计师最初使用默认字体样式的默认样式表，然后他们用自定义CSS覆盖了我浏览器的默认值。这就是“层叠”一词的由来开始发挥作用。想想瀑布——当水从瀑布中泻下时，它会撞击所有的岩石，但只有底部的岩石会影响它最终流向何处。同样，最后定义的样式表会通知我的浏览器哪些指令优先。

要了解CSS中编码的细节，我将再次指出免费的类和资源bob体育苹果系统下载安装编纂量。但是，现在，让我们谈谈JavaScript。

JavaScript

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

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

创建确认框

JavaScript的一个例子是屏幕上弹出的框。想想上次你在在线表单中输入信息时，弹出了一个确认框，要求你按“OK”或“Cancel”继续。这是因为JavaScript才可能实现的——在代码中，你会发现“if…else…”语句，该语句告诉计算机，如果用户单击“确定”，则执行一项操作；如果用户单击“取消”，则执行另一项操作

CTAs中的触发滑动

JavaScript的另一个实例是滑入式行动号召（CTA），就像我们在博客文章中发布的内容一样，当您滚动到侧边栏的末尾时，它会出现在屏幕的右下方。下面是它的样子：

存储新信息

根据用户在访问页面时做出的决定，JavaScript在为现有网站元素分配新身份时特别有用。例如，假设您正在使用一个表单构建登录页，您希望通过捕获有关网站访问者的信息来生成潜在客户。您可能有一个专用于用户名字的JavaScript“字符串”。该字符串可能如下所示：

function updatefirstname（）{

让Firstname=prompt（'Firstname'）；

}

然后，在网站访问者输入他的或她的名字——以及登录页上需要的任何其他信息——并提交表单后，此操作将更新代码中最初未定义的“Firstname”元素的标识。以下是您如何用JavaScript按姓名感谢您的网站访问者：

para.textContent='谢谢，'+Firstname+“！你现在可以下载你的电子书了。”

在上面的JavaScript字符串中，“Firstname”元素已被指定为网站访问者的名字，因此将在网页前端生成其实际名字。对于一个名为Kevin的用户，这句话如下所示：

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

安全、游戏和特效

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

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

编码最困难的部分是开始——但一旦你学会了基础知识，学习更高级的编程语言就会更容易。如果你感到不知所措，那就去hackertyper.net然后按键盘上的随机键。

相信我，你会感觉好些的。

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