HTML basic knowledge summary

Posted Jun 28, 20204 min read

Xiao Erhu's learning diary~

The road is long and its cultivation is far away

`Wish that everyone who saw this article is in a good mood!(If there is something wrong, you can tell me ha)

1. Web standards

Composition:mainly includes three aspects:structure, presentation and behavior. In general, it can be concise:three web standards:structure, style, and behavior. `

Standard Description
Structure Structure is used to organize and classify web page elements, mainly referring to HTML.
Representation Representation is used to set the layout style, color, size and other appearance styles of web page elements, mainly referring to CSS
Behavior Behavior refers to the definition and interaction of web page model, mainly refers to Javascript

2.html skeleton tags

In the process of writing the page, write the code in this order, and the order must not be disrupted ?

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

3. Document Type

<!DOCTYPE html>

The <!DOCTYPE> statement is at the forefront of the document, before the tag. This tag tells the browser which HTML or XHTML specification to use for the document.

is to tell the browser to parse the page according to the HTML5 specification.

4. Browser and kernel

  1. ie, kernel:trident
  2. firefox, kernel:gecko
  3. safari, kernel:webkit
  4. chrome, kernel:blink
  5. opera, kernel:blink

5, base tags

The base tag can set the open state of the overall link, but it must be written between <head></head>, and all links on the body page will be set to:target = "_blank" by default

<base target="_blank" />

6. The difference between the title and alt attributes of the tag:

alt is the content that can be viewed by the user's front end when the picture cannot be displayed normally. The essence is to replace the picture content. `

title is the content of the title displayed when the mouse is moved to the picture. The essence is a comment on the picture. `

7, page language lang

<html lang="en"> Specify html language type

The two most common:

  1. en defines the language as English
  2. zh-CN defines the language as Chinese

8, character set

This code is very critical, it must be written, otherwise it may cause garbled characters.

<meta charset="UTF-8" />

Character set(Character set) is a collection of multiple characters.

For a computer to accurately process characters in various character sets, character encoding is required so that the computer can recognize and store various characters.

UTF-8 is currently the most commonly used character set encoding method. Commonly used character set encoding methods are gbk and gb2312.

  1. gb2312 Simple Chinese, including 6763 Chinese characters GUO BIAO
  2. BIG5 Traditional Chinese Hong Kong, Macao and Taiwan
  3. GBK contains all Chinese characters. It is an extension of GB2312, adding support for traditional characters, compatible with GB2312
  4. UTF-8 basically contains the characters needed by all countries in the world

9. Semanticization of HTML tags

  1. Easy to read and maintain the code
  2. At the same time, the browser or web crawler can be parsed very well, so as to better analyze the content
  3. Using semantic tags will have better search engine optimization

10, the path(emphasis, difficulty)

In actual work, our files can not be randomly placed, otherwise it is difficult to find them quickly, so we need a folder to manage them.

Open the first level of the directory folder is the root directory

relative path

The directory path is established based on the location of the web page of the reference file. Therefore, when web pages saved in different directories refer to the same file, the paths used will be different, so they are called relative paths.

Path Classification Symbol Description
The same level path Just enter the name of the image file, such as
Next-level path "/" The image file is located in the same level folder of the HTML file(for example, the folder name is:images) such as .
Upper-level path "../" Add "../" before the file name, if it is the upper two levels, you need to use "../../", and so on, such as .
absolute path

The absolute path refers to the directory path based on the root directory of the Web site. The reason why it is called absolute means that when all web pages refer to the same file, the path used is the same. Absolute path is the path of the file directory where the picture is saved on the current device. `

11. Anchor point positioning(difficult point)

By creating anchor links, users can quickly target content.

There are two steps to creating an anchor link:

93. Use the corresponding id name to mark the location of the jump target.(Find target)
  <h3 id="two"> Episode 2</h3>
95. Use <a href="#id ">Link Text</a> to create the link text(clicked)(pull relationship) I also have a grandma whose last name is Bi..
  <a href="#two">
<!--It should be noted that the id name must be consistent-->

12, label

Goal:Improve user experience and provide users with the best service

Function:Used to bind a form element, when the label is clicked, the bound form element will get the input focus

Method of binding form elements:

  1. The first usage is to use the label to directly include the input form.

  2. The second usage for attribute specifies which form element the label is bound to, for+id to control, as shown in ?:

Summary:when we click on the text in the label, the cursor will be positioned in the specified form

13, form field

  1. How is the collected user information passed to the server?

    Form field

  2. Purpose:

In HTML, the form tag is used to define form fields to collect and transfer user information. All content in the form will be submitted to the server.

<form action="url address" method="submit method" name="form name">
  Various form controls
</form>

Common properties:

Attribute Attribute Value Function
action url address Used to specify the url address of the server program that receives and processes the form data.
method get/post Used to set the submission method of form data, the value is get or post.
name name Used to specify the name of the form to distinguish between multiple forms on the same page.

Note:
Each form should have its own form field. When interacting with ajax in the background, the form field must be required.