Web Design 101: How HTML, CSS, and JavaScript Work

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

那你就在正确的地方。

对于从未有编码的人来说，从头开始创建网站的概念 - 布局，设计和所有 - 似乎真的很吓人。您可能正在描绘电影中的哈佛学生，The Social Network,坐在他们的电脑with gigantic headphones on and hammering out code, and think to yourself, 'I could never do that.'

Actually, you can.

Anyone can learn to code, just like anyone can learn a new language. In fact, programming is kind of like speaking a foreign language -- which is exactly why they're called programminglanguages.每个人都有自己的规则和语法，需要逐步学习。这些规则是告诉您的计算机该怎么做的方法。更具体地说，在网络编程中，他们是告诉您的方法浏览器该怎么办。

The goal of this post is to, in plain English, teach you with the basics of HTML, CSS, and one of the most common programming languages, JavaScript. But before we begin, let's get an idea of what programming languages actually are.

什么是编程语言？

Programming, or coding, is like solving a puzzle. Consider a human language, like English or French. We use these languages to turn thoughts and ideas into actions and behavior. In programming, the goal of the puzzle is exactly the same -- you're just driving different kinds of behavior, and the source of that behavior isn't a human. It's a computer.

Aprogramming languageis our way of communicating with software. The people who use programming languages are often called programmers or developers. The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page move if the human user takes a certain action.

网络开发中的编程

So, when a web designer is given an end goal like "create a webpage that has this header, this font, these colors, these pictures, and an animated unicorn walking across the screen when users click on this button," the web designer's job is to take that big idea and break it apart into tiny pieces, and then translate these pieces into instructions that the computer can understand -- including putting all these instructions in the correct order or syntax.

您访问的网络上的每个页面都是使用一系列单独说明构建的，一个接一个。您的浏览器（Chrome，Firefox，Safari等）是将代码转换为我们可以在屏幕上看到甚至与之互动的大型演员。很容易忘记没有浏览器的代码只是一个文本文件 - 这是您将该文本文件放入一个浏览器魔术发生了。打开网页时，您的浏览器将获取HTML和其他编程语言并解释它。

html和CSSare actually not technically programming languages; they're just page structure and style information. But before moving on to JavaScript and other true languages, you need to know the basics of HTML and CSS, as they are on the front end of every web page and application.

In the very early 1990s, HTML was the only language available on the web. Web developers had to painstakingly code static sites, page by page. A lot's changed since then: Now there are many computer programming languages available.

In this post, I'll talk about HTML, CSS, and one of the most common programming languages: JavaScript.

Featured Resource

HTML＆CSS的初学者指南

填写此表格以访问免费指南。

html, CSS, & JavaScript: A Tutorial

概述：

• html提供基本结构在其他技术（如CSS和JavaScript）的增强和修改的站点。
• CSS用于控制presentation, formatting, and layout.
• JavaScript用于控制behaviorof different elements.

Now, let's go over each one individually to help you understand the roles each plays on a website and then we'll cover how they fit together. Let's start with good ol' HTML.

html

HTML是每个网页的核心，无论网站的复杂性或涉及的技术数量如何。对于任何网络专业人员来说，这都是必不可少的技能。这是任何人学习如何为网络创建内容的起点。而且，对我们来说幸运的是，这很容易学习。

How does HTML work?

htmlstands for HyperText Markup Language. "Markup language" means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage.

Let me show you what I mean. Take a look at the article below. If I were to ask you to label the types of content on the page, you'd probably do pretty well: There's the header at the top, then a subheader below it, the body text, and some images at the bottom followed by a few more bits of text.

标记语言相同的方式工作youjust did when you labeled those content types, except they use code to do it -- specifically, they use HTML tags, also known as "elements." These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.

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

例如，您现在正在阅读的单词是段落的一部分。如果我从头开始编码此网页（而不是使用Wysiwg编辑器HubSpot's CMS），我会用开场paragraph tag:

. The "tag" part is denoted by open brackets, and the letter "p" tells the computer that we're opening a paragraph instead of some other type of content.

一旦打开标签，直到您“关闭”标签之前，就假定下面的所有内容是该标签的一部分。段落结束时，我会放置一个闭合段落标签：

。请注意，关闭标签看起来与开放标签完全相同，除了左角支架后有一个前斜线。这是一个例子：

This is a paragraph.

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

要了解有关HTML编码的更多信息，我建议查看我们的基本HTML指南, and using the free classes and resources oncodecademy-- but for now, let's move on to CSS.

CSS

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

If HTML is the drywall, CSS is the paint.

而HTML是基本的您网站的结构，CSS是您整个网站风格的原因。那些光滑的颜色，有趣的字体和背景图像？感谢CSS。该语言会影响网页的整个心情和音调，使其成为一个非常强大的工具，也是Web开发人员学习的重要技能。这也是允许网站适应不同屏幕尺寸和设备类型的原因。

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

HTML的示例（没有CSS）

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

HTML + CSS的例子

Isn't that prettier?

简而言之，CSS是可以将不同属性分配给HTML标签的规则列表，该标签指定为单个标签，多个标签，整个文档或多个文档。之所以存在，是因为，随着设计诸如字体和颜色之类的设计元素，网页设计师在适应HTML的这些新功能方面遇到了很多麻烦。

You see, HTML, developed back in 1990, was not really intended to show any physical formatting information. It was originally meant only to define a document's structural content, like headers versus paragraphs. HTML outgrew these new design features, and CSS was invented and released in 1996: All formatting could be removed from HTML documents and stored in separate CSS (.css) files.

So, what exactly does CSS stand for? It stands for Cascading Style Sheets -- and "style sheet" refers to the document itself. Ever web browser has a default style sheet, so every web page out there is affected by at least one style sheet -- the default style sheet of whatever browser the web page visitor is using -- regardless whether or not the web designer applies any styles. For example, my browser's default font style is Times New Roman, size 12, so if I visited a web page where the designer didn't apply a style sheet of their own, I would see the web page in Times New Roman, size 12.

显然，我访问的绝大多数网页都不使用新罗马人，尺寸12-这是因为这些页面背后的网页设计师以默认样式表具有默认字体样式，然后他们覆盖了我的浏览器的浏览器。使用自定义CSS默认。这就是“级联”一词发挥作用的地方。考虑一下瀑布 - 当水沿秋天的层流时，它撞到了往下的所有岩石，但只有底部的岩石会影响其最终流动的地方。以同样的方式，最后定义的样式表可以将我的浏览器告知哪些指令优先。

To learn the specifics of coding in CSS, I'll point you again to the free classes and resources oncodecademy. But for now, let's talk a bit about JavaScript.

JavaScript

JavaScriptis a more complicated language than HTML or CSS, and it wasn't released in beta form until 1995. Nowadays, JavaScript is supported by all modern web browsers and is used on almost every site on the web for more powerful and complex functionality.

In short, JavaScript is a programming language that lets web developers design interactive sites. Most of the dynamic behavior you'll see on a web page is thanks to JavaScript, which augments a browser's default controls and behaviors.

Creating Confirmation Boxes

JavaScript中的一个示例是在屏幕上弹出的框。想一想您上次将信息输入在线表单中，并弹出一个确认框，要求您按“ OK”或“ CANCAL”继续进行。由于JavaScript而成为可能 - 在代码中，您会找到一个“如果... else ...”语句，告诉计算机，如果用户单击“确定”，则可以做一件事，如果是不同的话，如果用户单击“取消”。

触发滑入CTA

JavaScript的另一个例子是slide-in call-to-action (CTA), like the ones we put on our blog posts, which appears on the bottom right-hand side of your screen when you scroll past the end of the sidebar. Here's what it looks like:

存储新信息

JavaScriptis particularly useful for assigning new identities to existing website elements, according to the decisions the user makes while visiting the page. For example, let's say you're building a landing page with a form you'd like to generates leads from by capturing information about a website visitor. You might have a "string" of JavaScript dedicated to the user's first name. That string might look something like this:

function updateFirstname() {

let Firstname = prompt('First Name');

}

Then, after the website visitor enters his or her first name -- and any other information you require on the landing page -- and submits the form, this action updates the identity of the initially undefined "Firstname" element in your code. Here's how you might thank your website visitor by name in JavaScript:

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

In the string of JavaScript above, the "Firstname" element has been assigned the first name of the website visitor, and will therefore produce his or her actual first name on the frontend of the webpage. To a user named Kevin, the sentence would look like this:

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

安全性，游戏和特殊效果

Other uses for JavaScript include security password creation, check forms, interactive games, animations, and special effects. It's also used to build mobile apps and create server-based applications. You can add JavaScript to an HTML document by adding these "scripts," or snippets of JavaScript code, into your document's header or body.

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

编码的最难部分是开始 - 但是一旦您学习了基础知识，就可以更容易学习更高级的编程语言。如果您感到不知所措，请前往hackertyper.net并在键盘上击中随机键。

相信我，你会感觉好些。

Editor's note: This post was originally published in November 2018 and has been updated for comprehensiveness.

Originally published Oct 19, 2020 7:00:00 AM, updated July 21 2021