Detailed explanation of HTML basics (Part 2)

1. List

The list ul container is loaded with a form of text or chart with consistent structure and style, which is called a list.

The biggest feature of a list is that it is neat, tidy and orderly, similar to a table, but it has a higher degree of combination freedom.

1. Unordered list ul

Only <li></li> can be nested in <ul></ul>. Entering other tags or text directly in the <ul></ul> tags is not allowed.

The space between < li> and </ li> is equivalent to a container that can hold all elements.

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  ......
</ul>

2. Ordered list ol

• The type attribute value in the <ol> tag is the sorting serial number. If the type attribute is not added, the ordered list will be sorted starting from number 1 by default.
• Commonly used type attribute values ​​are 1, a, A, i, I
• The reversed attribute in <ol reversed="reversed"> can reverse the order of the sequence in the ordered list.
• The start attribute value in <ol start="3"> is 3, and the first serial number in the ordered list will start from 3.

<ol type="A"> 
  <li>List Item 1</li>
  <li>List 2</li>
  <li>List Three</li>
</ol>

3. Custom list dl

Definition lists are often used to explain and describe terms or nouns. Definition lists do not have any bullet points in front of the list items.

<dl>
  <dt>Noun 1</dt>
  <dd>Noun 1 explanation 1</dd>
  <dd>Noun 1 Explanation 2</dd>
  ...
  <dt>Noun 2</dt>
  <dd>Noun 2 explanation 1</dd>
  <dd>Noun 2 explanation 2</dd>
  ...
</dl>

2. Form

In HTML, a complete form usually consists of three parts: form controls (also called form elements), prompt information, and form fields. The purpose of a form is to collect user information.

Form controls:

Contains specific form function items, such as single-line text input box, password input box, check box, submit button, reset button, etc.

Tips:

A form usually also needs to include some explanatory text to prompt users to fill in and operate.

Form fields:

It is equivalent to a container that holds all form controls and prompt information. It can be used to define the URL address of the program used to process form data, as well as the method of submitting data to the server. If the form fields are not defined, the data in the form cannot be transmitted to the backend server.

1. Input Control

<input type="attribute value" value="Hello">

• input meaning
• The <input /> tag is a single tag
• The type attribute sets different attribute values ​​to specify different control types
• In addition to the type attribute, there are other attributes
  

Username: <input type="text" /> 
Password: <input type="password" />

The value attribute

value The default text value. Some forms want to display a few words by default when the page is opened, and this value can be used to set it.

Username:<input type="text" name="username" value="Please enter your username"> 

name attribute

• name is the name of the form, so that the background can find this form through this name attribute. There are many forms on the page, and the main function of name is to distinguish different forms.
• The value after the name attribute is defined by ourselves.
• If radio is a group, we must give them the same name so that multiple people can choose one of them.
• We rarely use the name attribute now, but it is necessary when we learn ajax and background.

<input type="radio" name="sex" />Male<input type="radio" name="sex" />Female

The checked property

Indicates the default selected state. More common in radio buttons and check buttons.

gender:
<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女

Input Attribute Summary

2. Label

• The label tag defines a label (label) for an input element.
• The main purpose of label is to improve user experience. Provide the best service for users.
  

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

How to bind elements?

• The first usage is to use the label tag to directly include the input form, which is suitable for single form selection
• The second usage of the for attribute specifies which form element the label is bound to (by id).

  First type <label> Username: 
    <input type="radio" name="usename" value="Please enter your user name">   
  </label>
  The second type <label for="sex">male</label>
  <input type="radio" name="sex" id="sex">

3. Textarea control (text area)

• The textarea control allows you to easily create a multi-line text input box
• .cols="number of characters in each line" rows="number of rows displayed" We don't need to use it in actual development
  

 <textarea>
    Text content</textarea>

Difference between text box and text field

4. Select drop-down list

• If there are multiple options for users to choose from, in order to save space, we can use the select control to define a drop-down list.
• Defined in option When selected = "selected", the current item is the default selected item.
• We use it less in actual development
  

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  ...
</select>

3. Form fields

How to pass the collected user information to the server?

• Through form fields

Purpose:

• In HTML, the form tag is used to define form fields to collect and transmit user information. All contents 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:

Each form should have its own form fields. When you learn ajax background interaction later, you will need form fields.

Difference between GET and POST

GET is harmless if the browser falls back, while POST will submit the request again.
GET requests will be actively cached by the browser, but POST will not, unless manually set.
GET requests can only be url encoded, while POST supports multiple encoding methods.
The GET request parameters will be completely retained in the browser history, but the parameters in the POST will not be retained.
The size of a GET request is generally (1024 bytes). The http protocol does not have any limit, but it is related to the server and operating system. Theoretically, there is no size limit for POST, and the http protocol specification does not have any size limit either. However, in reality, the amount of data that can be transmitted by POST depends on the server settings and memory size.
For parameter data types, GET only accepts ASCII characters, while POST has no restrictions.
GET is less secure than POST because the parameters are exposed directly in the URL and therefore cannot be used to pass sensitive information.

Team Agreement:

Element attribute values ​​use double quotes syntax

Write all the element attribute values ​​that can be written

Recommended <input type="text" /> 
<input type="radio" name="name" checked="checked" />

What happens from inputting the URL to displaying the page (Interview)

Author: Twinkle_
Link: https://juejin.im/post/6869279683230629896
Source: Nuggets

Multi-process architecture of browsers

• The entire process from browser input of the URL to page rendering is completed by the cooperation between various processes in the browser architecture.
• Browser main process: manage subprocesses and provide service functions
• Rendering process: Renders HTML, CSS, and JS into an interface. The js engine v8 and the layout engine Blink are on it. It will create a rendering process for each tab page.
• GPU process: originally responsible for processing 3Dcss, but later the UI interface was also drawn by GPU
• Network process: is responsible for network requests and network resource loading processes
• Plugin process: responsible for the operation of the plugin. Because plugins are prone to crash, put them in independent processes to prevent them from affecting others.

From user input to page display, different processes are at work, as shown in the following diagram:

As can be seen from the figure, the whole process requires the cooperation between various processes. The process can be roughly described as:

• The user enters the URL, processes the input information, the main process starts navigation, and hands the work to the network process
• The network process initiates a network request, which may cause redirection
• After the server responds to the URL, the main process will notify the rendering process and you will start working.
• The rendering process is ready. To submit data to the rendering process, this time is called submitting the document.
• The rendering process receives the data and completes page rendering.

Specific process

1. Enter the URL

The user enters the URL and processes the input information:

• If it is a string without a URL structure, the browser default engine will be used to search for the string.
• If it is a string with a URL structure, the browser main process will hand it over to the network process to start working.

2.1 Find the browser cache

• The network process will first check whether there is a local cache. If so, it will directly return the resource to the browser process. If not, the next step is DNS-> IP -> TCP

2.2 DNS resolution

• After the network process obtains the URL, it will first perform DNS domain name resolution to obtain the IP address. If the request protocol is HTTPS, a TLS connection needs to be established.

2.2 Establishing a TCP connection, three-way handshake

• The next step is to use the IP address to establish a TCP connection with the server. After the connection is established, a request is sent to the server.

3. Server Response

• After receiving the request information, the server will generate a response line, response header, and response body based on the request information and send them to the network process. After the network process receives the response information, it begins to parse the contents of the response header.

The process of parsing the response line and response header information by the network process:

3.1 Redirection

• If the response line status code is 301 (permanent redirection) and 302 (temporary), it means that you need to redirect to another URL. At this time, the network process will read the redirected address from the Location field in the response header and re-initiate the network request.

3.2 Response data processing

• Navigation will determine the type of response body data through the **Content-type** field in the request header. The browser uses this to decide how to display the content of the response body. For example, if it is application/octet-stream, the request will be processed according to the download type and the navigation will end. If it is text/html, this tells the browser that the server returns the HTML format, and the browser will notify the rendering process that you have to work.

4. Prepare the rendering process

By default, there is one renderer process per page. But if they are on the same site (same root domain name + protocol), the rendering process will be reused.

5. Submit Documents

• After the rendering process is ready, the browser process sends a "document submission message". After the rendering process receives the message, it will resume the data transmission pipeline with the network process.
• After the data transmission is completed, the rendering process will tell the browser process to confirm the document submission. At this time, the browser will update the page, security status, URL, and forward and backward history.
• Navigation ends here and enters the rendering stage.

Note: When the browser starts loading an address, the icon on the tab enters the loading state. However, the page in the picture still shows the content of the previously opened page, and it is not immediately replaced by the Baidu homepage page. Because it is necessary to wait until the document submission stage before the page content will be replaced.

4. Front-end HTML basic interview questions

What are the disadvantages of iframes?

Advantages of iframes

• Iframe can display the embedded web page intact.
• If multiple web pages reference iframes, you only need to modify the content of the iframe to change the content of each called page, which is convenient and quick.
• If a web page has the same header and version for a unified style, it can be written as one page and nested with iframes to increase the reusability of the code.
• If you encounter slow loading third-party content such as icons and ads, these problems can be solved by iframes.

Disadvantages of iframes

• This will generate a lot of pages, which are not easy to manage.
• The iframe structure can sometimes be confusing. If there are many frames, up and down, left and right scroll bars may appear, distracting visitors and providing a poor user experience. generation
• The code is complex and cannot be indexed by some search engines. This is very critical. Current search engine crawlers cannot handle the content in iframes very well, so using iframes will be detrimental to search engine optimization.
• Many mobile devices (PDA phones) cannot fully display the frame and have poor device compatibility.
• Iframe pages will increase the server's http requests and are not advisable for large websites.
• Now Ajax is basically used to replace iframe, so iframe has gradually withdrawn from front-end development.

What is the function of label? How to use it?

Example 1: Click "Username:" to position the cursor in the input box

<form><label for="myid"> Username:</label>
<input type="text" id="myid" /></form>  

Example 2: Click "Username:" or press alt+1 to position the cursor in the input box

<form>
    <label for="myid" accesskey="1"> Username:</label>
    <input type="text" id="myid" tabindex="1" />
</form>  

for attribute function: indicates the HTML element to which the Label tag is bound. When you click this tag, the bound element will get the focus.

accesskey attribute

Function: Indicates the hotkey for accessing the element bound to the Label tag. When you press the hotkey, the bound element will get the focus.

Limitation: The shortcut key set by the accessKey attribute cannot conflict with the browser shortcut key, otherwise the browser shortcut key will be activated first.

How to turn off the autocomplete feature in HTML5 form?

HTML input boxes can have an auto-complete function. When you enter content into the input box, the browser will search for similar content from the history of your previous input boxes with the same name and list them below the input box. In this way, you don't have to enter all of it, you can directly select the item in the list.

But sometimes we want to turn off the auto-complete function of the input box. For example, when the user enters content, we want to use AJAX technology to search and list from the database instead of searching in the user's history.

There are 3 ways to turn off the auto-complete function of the input box:

1. In the Internet Options menu of IE, set the content in AutoComplete

2. Set the form's autocomplete to "on" or "off" to turn the autocomplete feature on or off

3. Set the autocomplete of the input box to "on" or "off" to turn on or off the autocomplete function of the input box

View HTML5 as an open web platform

What are the basic building blocks of HTML5?

• Semantics - Provides a more accurate description of the content.
• Connect - Provides new ways to communicate with the server.
• Offline and Storage - Allows web pages to store data locally and run effectively offline.
• Multimedia - Video and audio are treated as first-class citizens in the Open Web.
• 2D/3D Graphics and Special Effects - Provides more presentation options.
• Performance and Integration - Provides faster access and better performing computer hardware.
• Device Access - Allows the use of various input and output devices.
• Appearance - Rich themes can be developed.

How does the browser manage and load HTML5 offline storage resources?

Add the manifest attribute to the browser's HTML header. If it is the first time to access the browser, it will download and store the offline content according to the content of the manifest. If it has been accessed before, it will load it from the offline storage and then update the offline storage if there is new content after comparing with the server.

When offline, the browser directly uses the resources stored offline.

The browser's rendering process?

1. Parse the obtained HTML into a DOM tree 2. Process CSS to form a cascading style sheet model CSSOM
3. Merge the DOM tree and CSSOM into a rendering tree 4. Calculate the node layout of the rendering tree according to CSSOM 5. Draw the rendering tree node style onto the page // Note that the rendering process is top-down rendering.
js will block the rendering of the page, so wait for js to complete execution first. If the style is changed during the rendering process, it will cause reflow and require re-rendering.

What is the difference between link and @import?

1. Differences in subordinate relationships:
Link belongs to the HTML tag, while @import is provided by CSS.
2. Difference in loading order:
When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading.
3. Compatibility differences:
Import can only be recognized by IE5 and above, while link is an HTML tag and has no compatibility issues.
4. DOM operability difference:
You can use JS to manipulate the DOM and insert link tags to change the style; since the DOM method is document-based, you cannot use @import to insert styles.
5. Weight difference:
If the same style already exists, the style introduced by @import will be overlaid by the style of the CSS file itself, showing an intuitive effect that the style weight of the link method is higher than that of @import.
(In short, link and @import, whichever is written later, whose style is applied, and the later style overrides the previous style.)

What is the difference between src and href?

1.href points to the location of a network resource, establishes a link with the current element (anchor) or the current document (link), and is used for hyperlinks.

2. src points to the location of external resources, and the content pointed to will be embedded in the location of the current tag in the document; when the src resource is requested, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frame elements, etc. When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same applies to elements such as images and frames, which is similar to embedding the pointed resource into the current tag. This is also why you should put js scripts at the bottom instead of at the top.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!