“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

The front-end series in the eyes of the back end is more straightforward

🚀 Is the front end of the Java backend different from the front end? 1 ️ ⃣ 🚀

Second, HTML skeleton

2.1. HTML Definition

HTML refers to Hyper Text Markup Language, a Language used to describe web pages. HTML is not a programming language, but a markup language, which is a set of markup tags. A web page is made up of elements that are described using HTML tags and then parsed by the browser to be displayed to the user.

Hypertext has two meanings:

  1. Because it can add pictures, sound, animation, multimedia, etc. (** beyond text limits **).
  2. Not only that, it can jump from one file to another, linking files with hosts around the world (** hyperlink text **).

2.2. HTML skeleton tags

The letters of everyday life, we have to follow the common agreement. Otherwise it will look very unformatted and not easy to read at all.

HTML has its own language syntax skeleton format, he is our entry to learn HTML first step.

<html>   
    <head>   
        <title></title>
    </head>
    <body>
    </body>
</html>
Copy the code
Tag name define instructions
<html></html> HTML tags The largest TAB on the page, we call it the root TAB
<head></head> Header of document Notice that the tag we have to set in the head tag is title
<titile></title> Document title Let the page have a page title of its own
<body></body> Body of document The element contains all the content of the document, and most of the page content is placed inside the body

HTML tag names, class names, tag attributes, and most attribute values are all lowercase.

<head>   
        <title>My first page</title>
 </head>
Copy the code

2.3, tags,

In HTML pages, elements with the "< >" symbol are called HTML tags, as mentioned aboveCopy the code

< HTML >, <head>, and <body> are all HTML skeleton tags.

HTML tag names, class names, tag attributes, and most attribute values are all lowercase.Copy the code

2.4 classification of elements

2.4.1 Common Elements (Double Labels)

< tag name > Content </ tag name ><! -- -- -- > demonstration
<body>I am writing</body>
Copy the code
  • The grammar< tag name >Indicates the start of the labelStart Tag.</ Tag name >Indicates the end of the labelEnd Tag.
  • In contrast to the start tag, the end tag is preceded by a close character/.
  • We are in contact with the basic double label.

2.4.2 Empty Element (Single Label)

< tag name /><! -- -- -- > demonstration
<br />
Copy the code

Empty elements are represented by a single tag, which simply means that there is no content in them and only a start tag that does not need to be closed. There are very few single labels. There aren’t many. We just have to remember them.

2.5. HTML tag relationship

There are two types of correlation mainly for double labels:

  1. Nested relations
  2. Parallel relationship

2.5.1 Nesting relationship

It's like a father-son relationship.Copy the code
<head>  
	<title> </title> 
</head>
Copy the code

2.5.2 Juxtaposition

It’s kind of a brotherly relationship.

<head></head>
<body></body>
Copy the code

2.5.3,

  1. If the relationship between two labels is nested, it is best to indent the child element with a TAB key (a TAB is four Spaces).
  2. If it’s side-by-side, align it up and down.

2.6. Document type

<! Usage -- -- -- >
<! DOCTYPEhtml> 
Copy the code
Its role is to declare the first position in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses.Copy the code

2.7. Page language

<! -- Specify HTML language type -->
<html lang="en">  
<html lang="zh-CN">  <! -- Set the language of the HTML tag content to Chinese, consider browser and OS compatibility, still use zh-cn attribute value -->
Copy the code

The most common values are:

  1. enDefine the language as English.
  2. zh-CNDefine the language as Chinese.

2.8. Character sets

A Character set is a collection of multiple characters. To process various characters accurately, the computer needs to carry out character coding so that the computer can recognize and store various characters.

<! The HTML file is saved in UTF-8 encoding, and the browser decodes the HTML according to the encoding. -->
<meta charset="UTF-8" />
Copy the code

Utf-8 is the most commonly used character set encoding. Other commonly used character set encoding modes are GBK and GB2312.

  • Gb2312 simple Chinese includes 6763 Chinese characters GUO BIAO
  • BIG5 traditional Chinese for Hong Kong, Macao and Taiwan
  • GBK contains all Chinese characters is an extension of GB2312, adding support for traditional Chinese characters, compatible with GB2312
  • Utf-8 contains basically all the characters that countries in the world need to use
  • This code is very critical, is the code must be written, otherwise it may cause garbled conditions.