Complete self study course of HTML5 and CSS3 (1)

Time:2020-6-2

This article starts from[front end class]The official account of WeChat. Search in wechat【Front end workshop】Pay attention, read the article first time!

Introduction:This section mainly introduces the basic information of HTML, including the concept of HTML, the development process of HTML and the development process of HTML Standard Version. Through the study of this section, we can have a preliminary understanding of the meaning of HTML, which lays the foundation for further study of HTML related concepts.

What is HTML

Html is an abbreviation, its full name isHyper Text Markup LanguageTranslated into Chinese meansHypertext markup language。 Html is not a programming language, but a markup language, because html is composed of a series ofelementThese elements can contain different contents such as text, hyperlink, etc.

The following example code shows the basic HTML structure

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  < title > HTML basic structure < / Title >
</head>

<body>
  <h1>This is the basic HTML structure</h1>
</body>

</html>

Tips:The specific meaning of the above example code will be explained in the following chapters, here is only for display.

To further understand the concept of HTML, you need to divide it intoHypertextandMarkup LanguageThe two parts are studied separately.

1. What is hypertext

First of all, let’s talk aboutHypertextMeaning of. HTML was first developed from text. We are generally familiar with the text. For example, we create an extension named.txtAnd write the following example content:

This is a text file.

This creates a text file. Now let’s change the extension of this text file to.htmlperhaps.htmIn this way, the text file becomes an HTML file. The content of this HTML file can be displayed by running it through a browser, as shown in the following figure:

Complete self study course of HTML5 and CSS3 (1)

explain:The HTML in the above example is not standard HTML. Because the syntax of HTML is loose, the browser can parse and run correctly.

With the development of HTML, so far, it is not only the simple content of text, but also the more complex content such as pictures, links, music and even videos.

2. What is markup language

I understandHypertextLet’s take a look at what it meansMarkup LanguageHow to understand. First, let’s look at a description like this:

Markup language is a kind of computer text coding which combines text and other information related to text to show the details of document structure and data processing. Other information related to the text, including, for example, the structure and presentation information of the text, is combined with the original text, but is identified with tags.
——From Baidu Encyclopedia

Baidu Encyclopedia aboutMarkup LanguageThe description of is more abstract and difficult to understand. We can understand it in such a simple wayMarkup LanguageMeaning of.Markup LanguageInsignIt refers to the elements in HTML, and html is composed of such a series of elements, so it is calledMarkup Language

The following figure shows the structure of an HTML element:

Complete self study course of HTML5 and CSS3 (1)

be careful:The elements of HTML are given. Both the number of HTML elements and the function of HTML elements are fixed. In other words, to learn html is simply to learn the meaning, function and usage of HTML elements.

HTML development history

After understanding the concept of HTML, we will introduce the development of HTML.

Tips:After all, it has no effect on our learning HTML itself.

Back in 1989,Tim Berners-Lee In order to make it convenient for physicists around the world to carry out cooperative research, HTML used in their systems was created.Tim Berners-Lee The designed html is based on plain text format and can be processed by any text editor. At first, it is easy to master and use with only a few tags.

With the increase of HTML usage, people are not satisfied with seeing only text. In 1993, he was a college studentMarc Andreessen In his mosaic browser<img>Tag, from which you can browse pictures on a web page.

But people think that only pictures are not enough. They hope that any form of media can be added to the web page, so HTML can continue to expand and develop.

HTML version development history

Since 1993, the first version of HTML has appeared in a real sense. Up to now, it has experienced five major versions of updates and iterations. The specific release time of each version is as follows:

  • Hypertext markup language (First Edition) – published as IETF working draft in June 1993 (not standard)
  • HTML 2.0 – released as RFC 1866 in November 1995, announced obsolete after RFC 2854 was released in June 2000
  • HTML 3.2 – January 14, 1997, W3C recommendation
  • HTML 4.0 – December 18, 1997, W3C recommendation
  • HTML 4.01 (minor improvements) – December 24, 1999, W3C recommendation
  • HTML 5 – the first official draft was published on January 22, 2008, and the official version was published on October 29, 2014

Explanation of terms:

  • IETF is short forThe Internet Engineering Task ForceTranslated into Chinese meansInternet Engineering Working Group。 Founded at the end of 1985, it is the most authoritative technology standardization organization in the world. Its main task is to be responsible for the R & D and formulation of Internet related technical specifications. At present, the vast majority of Internet technology standards come from IETF.
  • RFC is abbreviated and its full name isRequest For CommentsTranslated into Chinese meansRequest comment。 Is a series of numbered documents that contain almost all the important text about the Internet.
  • W3C refers toWorld Wide Web Alliance(World Wide Web), in October 1994, in the computer science laboratory of Massachusetts Institute of technologyTim Berners-Lee It is the most authoritative and influential international neutral technical standard institution in the field of web technology.

In the course of HTML version development, most of the versions are far away from us, that is to say, we don’t care, but we need to care about the 4.01 and 5 versions. Version 5 is the latest version of HTML, which is what we often call HTML5 now, and now learning html is aimed at version 5.

Instead, we need to pay special attention to version 4.01. Because version 4.01 still exists in some older websites or systems. If you want to upgrade these websites or systems in the future, you need to understand the content of version 4.01.

explain:In the process of learning HTML, you also need to pay attention to the differences between version 4.01 and version 5. The main content is what is deleted and what is added after the update to version 5.

summary

This section begins with the concept of HTML, and then explains the development of HTML and HTML version. Among them:

  • HTML concept, we divided intoHypertextandMarkup LanguageThe two aspects were explained in detail. This is to help us understand the meaning of HTML.
  • HTML development process, as the understanding content to introduce. Whether we know this part of the content or not does not affect our learning of HTML specific syntax content.
  • The development process of HTML version mainly experienced the development of five versions. Among them, we need to pay attention to the specific contents of 4.01 and 5, which are related to our future study and work.

Notice:In the next section, we will learn the basic structure, declaration, element and annotation of HTML by creating the first HTML page.

If you want to reprint this article, please add the author’s wechat first(2080954535, the same number as QQ), with permission for reprint. Original is not easy, please respect the work of the author!

Complete self study course of HTML5 and CSS3 (1)