Learn from the previous two chapters, the browser is like a processing plant, in this processing plant, there are HTML, CSS, JS three parts, and then the browser will assemble these parts into a piece of beautiful web pages.

HTML takes care of the skeleton, CSS takes care of the style, and JS takes care of the behavior.

So what is HTML?

HTML is short for Hyper Text Markup Language. It is a Markup Language, not a programming Language, and is essential for web page production. Hypertext, in essence, is text.

Since HTML3.2, a W3C recommendation has defined various types of elements (div, p…). And attribute values of many types (ID,name…) .

The basic structure of HTML documents

Example of the basic structure of an HTML document
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello World</div>
</body>
</html>
Copy the code
File Type Description (DOCTYPE)

In order to identify the HYPERtext Markup Language standard used in the document, all HYPERtext Markup Language documents should begin with a “file type declaration” (the full foreign language name with an abbreviation), referencing a file type description or a custom file type description if necessary. For example: HTML5:

<! DOCTYPEHTML>
Copy the code

html4:

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

The highest node tag of an HTML document.

Metadata (META)
  • Metadata is data information about data.
  • Tags provide metadata for HTML documents. Metadata is not displayed on the client, but is parsed by the browser.
  • META elements are used to specify the description of the web page, keywords, last modified time of the file, author, and other metadata.
  • Metadata can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other Web service calls.
Page title

The body

The body element is the body of the page, where the content of the page is written, including text, images, forms, audio, video, and other content.

We write the head of the page in the head and the body in the body. While the writable content in head is mostly fixed, the tags in the body are numerous and can be flexibly combined.

With the 5 logo, there are new tags in HTML5:

Classification of labels

There are so many labels, it’s dazzling to see, and you can sort them properly. Examples are single tags/double tags, block-level elements/inline elements, or categories by function.

Single label/double label

A single tag:

<br><hr><img><input><param><meta><link>
Copy the code

Double label: The single label excluding the above is double label

Block-level elements/inline elements
Block-level element definitions
  • Always start on a new line;
  • Height, line height and margins and margins can be controlled;
  • The width defaults to 100% of its container unless a width is set.
  • It can hold inline elements and other block elements
Inline element definitions
  • And all the other elements on one line;
  • The height, line height, margin and inner margin cannot be changed;
  • Width is the width of its text or image and cannot be changed
  • Inline elements can hold only text or other inline elements
What block level elements are
<address>// Define an address <caption>// Define a table title <dd> // Define an entry in the list <div> // Define a partition or section in the document <dl> // Define a list <dt> // Define an item in the list <fieldset> // Define a frameset <form> // Create an HTML form <h1> // Define the largest heading <h2> // Define the subheading <h3> // Define the heading <h4> // Define the heading <h5> // Define the heading <h6> // Define the smallest heading <hr> // Create a horizontal line <legend> // the element defines the title for the fieldSet element <li> // the tag defines the list item <noframes> // Displays the text for browsers that do not support frames, Inside the frameset element <noscript> // define the alternative content if the script is not executed <ol> // define the ordered list <ul> // define the unordered list <p> // Define the tag definition paragraph <pre> // Define the preformatted text <table> // Define the tag definition HTML table <tbody> // tag table body (body) <td> // Standard cell in the table <tfoot> // defines the footer (footnote or table note) of the table <th> // Defines the header cell <thead> // Tag defines the header of the table <tr> // defines the rows in the tableCopy the code
What are the inline elements
<a> // tag defines anchor <abbr> // indicates an abbreviation <b> // defines only the acronym <b> // bold font <bdo> // Covers the default text direction <big> // Bold font <br> // Newline <cite> < span style = "color: RGB (93, 93, 93); color: RGB (93, 93); line-height: 13px; font-size: 13px! Important; word-break: inherit! Important;" <span> <span> <span> <span> <span> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;Copy the code

As with block-level elements/inline elements, there are also elements whose type can be determined by their content. For example:

<button> <del> // Define text that has been deleted from the document <iframe> // Create an inline frame that contains another document <ins> // Define text that has been inserted into the document <map> // Client-side image map (i.e. hot zone) <script> // Client scriptCopy the code
We can use the DISPLAY property of CSS to transform block-level elements, inline elements, and inline block elements.
Inline block elements

1, and all other elements are on a row; 2. Element height, width, row height, top and bottom margins can be set

In the next section, labels are divided into different functions and explained in detail.