html5 学习

by Eric Tirado

埃里克·蒂拉多(Eric Tirado)

5分钟内学习HTML (Learn HTML in 5 minutes)

快速教程可帮助您开始构建网站。 (A quick tutorial to help you get started building websites.)

HTML is the markup language used for structuring and presenting content on the World Wide Web. Together with CSS and JavaScript, it enables us to have beautiful and interactive websites.

HTML是用于在万维网上结构化和呈现内容的标记语言。 结合CSS和JavaScript，它使我们能够拥有美观且交互式的网站。

Since HTML is the foundation of the web, it is also the most essential language for any web development career path. In this fast-paced tutorial, I’ll teach you the very basics of it.

由于HTML是Web的基础，因此它也是任何Web开发职业道路上最重要的语言。 在这个快节奏的教程中，我将教您基本的知识。

And when you’re done, I have already launched a free 14-part course on HTML5 over on Scrimba.com — an interactive platform where you can jump into the code of a playing screencast at any given time.

完成后， 我已经在Scrimba.com 上通过HTML5启动了一个免费的14部分课程，该课程是一个交互式平台，您可以在任何给定的时间跳转到播放屏幕录像的代码。

You can check out the first lecture here:

您可以在此处查看第一堂课：

Alright, before we jump into the HTML, I want to start out by telling you a little bit about the architecture of the web. This will put the role of HTML into perspective for us.

好吧，在我们开始使用HTML之前，我想先向您介绍一下Web的体系结构。 这将HTML的角色带入我们的视野。

基本的网络架构 (Basic web architecture)

Once you’ve developed a website, you’ll need to host it on a server to make it accessible on the world wide web. All servers have an IP address (i.e 149.56.240.169) which you can think of as a phone number. We normally put a domain name (i.e. scrimba.com) over that IP address, so that it’s easier to remember.

开发网站后，您需要将其托管在服务器上以使其可以在万维网上访问。 所有服务器都有一个IP地址(即149.56.240.169)，您可以将其视为电话号码。 我们通常在该IP地址上放置一个域名(即scrimba.com)，以便于记忆。

When you type that domain name in the browser, it’ll give the server a call. The server will then send over a bunch of HTML, CSS, and JavaScript files, like this:

在浏览器中键入该域名时，它将给服务器打电话。 然后，服务器将发送一堆HTML，CSS和JavaScript文件，如下所示：

You browser starts by loading the main HTML file, before it continues with the CSS and JavaScript. These files enable the browser to render a beautiful and interactive website.

浏览器首先加载主HTML文件，然后再加载CSS和JavaScript。 这些文件使浏览器可以呈现漂亮且交互式的网站。

Now let’s have a closer look at the roles these three languages play.

现在，让我们仔细看看这三种语言所扮演的角色。

什么是HTML？ (What is HTML?)

Let’s imagine a website as a person. We’ll use this analogy to understand our website. The HTML is best described as the skeleton:

让我们想象一个网站是一个人。 我们将以此类比来了解我们的网站。 最好将HTML描述为框架：

什么是CSS？ (What is CSS?)

However, just a plain HTML website looks pretty ugly, so you’ll need to style it with CSS. It can bee seen as the skin and clothing of the website.

但是，只有一个普通HTML网站看起来很难看，因此您需要使用CSS对其进行样式设置。 它可以被视为网站的皮肤和衣服。

什么是JavaScript？ (What is JavaScript?)

Once you master CSS, you should continue to JavaScript. In our analogy, this is like the brains and muscles of our website:

掌握CSS之后，您应该继续使用JavaScript。 打个比方，这就像我们网站的大脑和肌肉：

编写第一个HTML文件 (Writing your first HTML file)

In order to be able to write HTML, you’ll need an HTML document, which is just a document with an .html extension. It doesn’t matter which text editor you use, but the most popular ones these days are Sublime Text, VS Code and Atom. You can also use Scrimba as an in-browser editor.

为了能够编写HTML，您需要一个HTML文档，该文档只是扩展名为.html的文档。 使用哪种文本编辑器都没有关系，但是如今最受欢迎的是Sublime Text ， VS Code和Atom 。 您也可以将Scrimba用作浏览器内编辑器。

Let’s create a new file, and call it index.html, and write Hello world! in it.

让我们创建一个新文件，并将其命名为index.html，然后编写Hello world! 在里面。

Hello world!

If we drag this file into the browser, or point the browser to the address of this file, we’ll get the following.

如果我们将此文件拖到浏览器中，或将浏览器指向该文件的地址，则会得到以下内容。

Congrats, you’ve now created your first website!

恭喜，您现在已经创建了第一个网站！

您的第一个HTML标签 (Your first HTML tag)

However, we haven’t written any HTML tags yet. To do that, let’s wrap the Hello world! text in <h1> tags, like this:

但是，我们尚未编写任何HTML标记。 为此，让我们包装Hello world! < h1>标记中的文本，如下所示：

<h1>Hello world!</h1>

The first <h1> is an opening tag, and the second one, </h1>, is a closing tag. As you can see, the difference is only the backslash in the closing tag. This will result in the following on the page:

第一个< h1>是开始标记，第二one, </ h1>是结束标记。 如您所见，区别只是结束标记中的反斜杠。 这将在页面上显示以下内容：

You’ve now told the browser that you want the Hello world! text to be a heading. Thus the browser applies some styling to it, basically increasing the size of the text.

现在，您已经告诉浏览器您想要Hello world! 文字作为标题。 因此，浏览器对其应用了一些样式，从而基本上增加了文本的大小。

So that’s how easy it is to start writing HTML.

因此，开始编写HTML非常简单。

编写适当HTML文档 (Writing a proper HTML document)

But this isn’t actually a valid HTML document, as they should follow a clearly defined structure. For the purpose of this tutorial, I’m simply going to show it to you briefly, and then we’ll continue with the fun stuff.

但这实际上不是有效HTML文档，因为它们应遵循明确定义的结构。 出于本教程的目的，我仅向您简要介绍一下，然后我们将继续介绍有趣的东西。

Here’s how our Hello world! example should look like:

这就是我们的Hello world! 示例应如下所示：

<!DOCTYPE html><html>  <head>  </head>  <body>    <h1>Hello world!</h1>  </body></html>

You don’t have to worry about the <!DOCTYPE>, <html>; and <head> tag for now, as we’ll simply write our content in the <body> tag. Let’s continue with that!

您不必担心<!DOCTY PE >, <h tml> ; 和<head>标签，现在，我们将在简单地写Ø ur con在<body>标签的帐篷。 让我们继续吧！

段落 (Paragraphs)

Below the h1 tag we’ll add a paragraph. This tag is usually used for, well, paragraphs of text.

在h1标签下面，我们将添加一个段落。 这个标签通常用于文本段落。

<h1>Hello world!</h1><p>Hello, and welcome to my website!<p>

Here’s how it looks:

外观如下：

清单 (Lists)

Now let’s add a list. To do that, we need to add two different tags, <ul>; and <li>. The former stands for unordered list and the latter stands for list item. We’ll need to wrap the <li>; tags inside the <ul> tag.

现在让我们添加一个列表。 为此，我们需要添加两个不同的标签< ul> ; an ; an d <li>。 前者代表未列出的清单，而后者代表清单项目。 我们需要to w说唱<LI> ; ta ; ta GS的<UL>标记中。

<ul>  <li>Eat</li>  <li>Sleep</li>  <li>Code</li></ul>

If you change the <ul> to an <ol>, then the bullets will be replaced with numbers, as it stands for ordered list.

如果将< ul> to a n <ol>，则项目符号将替换为数字，因为它代表顺序列表。

输入栏位 (Input fields)

Getting inputs from users is a critical activity on websites. Let’s add an input field.

从用户那里获得输入是网站上的一项重要活动。 让我们添加一个输入字段。

<input type="text" placeholder="Enter your email" />

Which would add the input field at the bottom of our site:

这将在我们网站的底部添加输入字段：

Now there are two new concepts to learn here: attributes and self-closing tags. The first one, attributes, provides additional information about the HTML elements.

现在，有两个新概念需要学习： 属性和自闭标签 。 第一个属性attribute提供有关HTML元素的其他信息。

In our case, we’re adding two attributes: type and placeholder. The type tells the browser that this should be a text field. Here, we could have chosen between a range of types (radio, select, checkbox, date) which would have turned it into completely different elements.

在本例中，我们添加了两个属性： type和placeholder。 类型告诉浏览器这应该是一个文本字段。 在这里，我们可以在一系列类型(无线电，选择，复选框，日期)之间进行选择，这将使它变成完全不同的元素。

The placeholder dictates the help text inside the element.

占位符指示元素内的帮助文本。

Finally, the input tag is also a self-closing element (also known as a void element.), meaning it doesn’t consist of an opening and closing tag, but only one tag which closes itself.

最后，输入标签也是一个自闭合元素(也称为void元素) ，这意味着它不包含打开和关闭标签，而仅包含一个自身闭合的标签。

下一步 (Next steps)

There is so much more stuff to learn in HTML, and it’s not difficult at all. My full course can be completed in less than an hour, and it’ll give you a solid understanding of the basics and enable you to start building real websites!

用HTML学习的东西太多了，这并不难。 我的整个课程可以在不到一个小时的时间内完成，它可以使您对基础知识有深刻的了解，并使您可以开始构建真实的网站！

If you’re hungry for more, we’ve got a free 14 course meal...

如果您渴望更多，我们免费提供14道菜的餐点...

on my Learn HTML5 for Free course over at Scrimba.com.

在Scrimba.com上的“ 免费学习HTML5”课程中。

See you there. ?

到时候那里见。 ？

翻译自: https://www.freecodecamp.org/news/learn-html-in-5-minutes-ccd378d2ab72/

html5 学习