This article will introduce the basic concepts of HTML and help you quickly grasp the basic usage of HTML

1. Introduction to HTML

HTML is different from general programming language, it is a markup language, mainly used to define document rules and describe the structure of the document

Standard Generalized Markup Language (SGML) is the most basic Markup Language

Other markup languages have evolved from SGML and expanded on SGML for different domains

Hyper Text Markup Language (HTML) is a Language specially used for writing Web documents

2. HTML document structure

<! DOCTYPEhtml>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br/>
        <p style = "color: red">Stranger</p>
    </body>
</html>
Copy the code

The code above is a very simple example (create an.html file, type the code above, open it in the browser and see the effect)

But it already has the most basic Web document structure, so let’s just know that the document is made up of two parts: the document description and the document content

(1) Document description

<! DOCTYPEhtml>
Copy the code

The above statements, called Document Type Definitions, are in the first line of an HTML Document and define the Document specification

For XML files, there is no standard specification because you can use custom tags, so you can do without defining a DTD

However, for HTML and XHTML, which already have standard syntax specifications, you must declare a DTD in the following format:

<! DOCTYPEelement-name DTD-type DTD-name DTD-url>
Copy the code
  • element-name: DTD root element name
  • DTD-type: ifPUBLIC, indicates that the DTD is standard common, ifSYSTEM, indicating that the DTD is personally customized
  • DTD-name: DTD file name
  • DTD-url: ADDRESS of the DTD file

The most commonly used DTD declarations are for HTML5, but there are also some more common DTD declarations, which are listed below:

HTML5

<! DOCTYPEhtml>
Copy the code

HTML 4.01 Strict contains all HTML elements and attributes, excluding demonstrative and deprecated elements, and does not allow framesets

<! DOCTYPEHTML PUBLIC "- / / / / W3C DTD HTML 4.01 / / EN"
"http://www.w3.org/TR/html4/strict.dtd">
Copy the code

HTML 4.01 Transitional contains all HTML elements and attributes, including both presentable and deprecated elements, but does not allow framesets

<! DOCTYPEHTML PUBLIC "- / / / / W3C DTD HTML 4.01 Transitional / / EN" 
"http://www.w3.org/TR/html4/loose.dtd">
Copy the code

HTML 4.01 Frameset contains all HTML elements and attributes, including both presentable and deprecated elements, and allows framesets

<! DOCTYPEHTML PUBLIC "- / / / / W3C Frameset DTD HTML 4.01 / / EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
Copy the code

XHTML 1.0 Strict contains all HTML elements and attributes, excluding demonstrative and deprecated elements, and does not allow framesets

<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Strict / / EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Copy the code

XHTML 1.0 Transitional contains all HTML elements and attributes, including both presentable and deprecated elements, but does not allow framesets

<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy the code

XHTML 1.0 Frameset contains all HTML elements and attributes, including both presentable and deprecated elements, and allows framesets

<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Frameset / / EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Copy the code

(2) Document content

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br/>
        <p style = "color: red">Stranger</p>
    </body>
</html>
Copy the code

The above code is the body of an HTML document, with many keywords surrounded by Angle brackets called HTML tags

Each HTML tag has unique semantics, such as

for a paragraph and

for a newline, and renders differently depending on the semantics

HTML tags usually come in pairs, with the first tag called the start tag and the second tag called the end tag

All code from the start tag to the end tag (including the start tag and the end tag) is called an HTML element, for example:

<p>Hello</p>
Copy the code

HTML tags usually come in pairs, but there are cases where a tag comes alone and needs to be closed in that tag, for example:

<br />
Copy the code

You can also provide additional information for HTML elements through element attributes, which are specified in the start tag and appear as key-value pairs

According to the standard, it is recommended that attributes and attribute values be specified in lowercase letters and that attribute values always be enclosed in quotes, for example:

<p style="color: red">Stranger</p>
Copy the code