table of Contents
One, HTML white
1. What is HTML?
In layman's terms, HTML is a program used to design the front-end of a website, but it can only design simple programs such as displaying a topic, a paragraph, or opening another website through a link. If you want to beautify the front-end page, Also need to use CSS and other languages to cooperate.
In fact, HTML is very similar to a txt file, except that the txt file is opened with the windos operating system, and the HTML file is opened with a browser.
The figure below is a comparison between a simple HTML file and a txt file (HTML file on the left and txt file on the right) :
As can be seen from the above figure, a simple HTML file is actually the same as a txt file. Even HTML has greater font flexibility, after all, txt files can only make all fonts the same size.
Of course, HTML is not limited to these simple tasks, it also has many more complex applications, first dig a hole, and then add it later.
2. Basic usage of HTML
2.1 The beginning and end of HTML language
A complete HTML language that can form a web page is usually composed of several paragraphs, each of which is responsible for different functions.
But how to distinguish between paragraphs and paragraphs ? How to mark the beginning and end of each paragraph?
For example, a paragraph named head (head is a keyword embedded in HTML language), it starts with **< head >**, adds content in the middle, and ends with **< /head> **, as shown below:
<head>
.........
...内容...
.........
</head>
Each paragraph in HTML is marked with <tag> and </ tag> to mark the beginning and end (front-end programmers often refer to keywords such as head as "tags") .
2.2 A little white program
After understanding the beginning and end tags of a paragraph in HTML, we can roughly block a paragraph of HTML language and read it slowly. Let's take a look at the following little white program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
First, according to the above procedures in the <head> and </ head> , <body> and </ body> , can infer that two different passages; addition of a <html> and </ html> configuration Paragraphs are nested with head and body . This is the nesting relationship commonly used in HTML, and html paragraphs are usually nested with a complete HTML program (including head and body) . In other words, a complete HTML program that can be used for browser display, roughly in the following format:
<!DOCTYPE html>
<html>
<head>
...
...
...
</head>
<body>
...
...
...
</body>
</html>
What does each of the above paragraphs mean?
htmlIdentifying the start and end of a complete program THML, usually the nested headand bodytwo paragraphs; and headof HTML head , often used for some initialization operations; bodyis html text passages, i.e., containing the full text of the paragraph in the page .
In addition, you can see that there is a sentence above the html paragraph<!DOCTYPE html> , which tells the browser that our program is an html5 program. There are other formats such as html4, which are more complicated and writing <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
What do the sentences in the paragraph mean?
Look at the head section first:
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
As mentioned above, head is the head of HTML, used to do some initialization operations, and <meta charset="utf-8">it means that the character set used in this front-end page is UTF-8 . Correspondingly, the browser should use UTF-8 to interpret this program. the Chinese character; and <title>菜鸟教程(runoob.com)</title>is a title for this program since, called a rookie tutorial (runoob.com) .
Let's look at the body section again:
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
Wherein h1represents a 1-level heading, in addition to h2, h3 ...... h6 total of six titles;
and prefers to the paragraph.
Regardless of whether it is a title or a paragraph, the beginning and the end are also marked in the form of <tag> and </ tag> .
At this point, we have explained the above little white program, and its overall effect is as follows:
(The picture above is from WWW.RUNOOB.COM)