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

List five,

The biggest characteristic of a list is that it is neat, clean and orderly, similar to a table, but it can be combined with a higher degree of freedom.

5.1 Unordered list UL

Items in an unordered list are juxtaposed rather than ordered. The basic syntax is as follows:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>.</ul>
Copy the code

For example, news is not in order, there is no queue, first come, first served, first published first displayed.

Conclusion:

1. can only nest

. It is not allowed to type other tags or text in

tags.

can hold all elements.

5.2 Ordered list OL

An ordered list is a list with an order, and its items are defined in a certain order. The basic syntax of an ordered list is as follows:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>.</ol>
Copy the code

All features are basically consistent with UL. But it’s actually used a lot less than unordered lists.

5.3. Custom lists

Defining lists are often used to explain and describe terms or nouns without any bullet in front of the list item. The basic syntax is as follows:

<dl>
  <dt>Noun 1</dt>
  <dd>Explanation 1</dd>
  <dd>Explanation 2</dd>.<dt>Term 2</dt>
  <dd>Noun 2 Explanation 1</dd>
  <dd>Explanation 2</dd>.</dl>
Copy the code

Defining lists are often used to explain and describe terms or nouns without any bullet in front of the list item. The basic syntax is as follows:

5.4 List summary

Six, forms,

6.1. Form Overview

The form in real life is similar to the form we fill out when we go to the bank to apply for a credit card. The following figure

** function: **

The purpose of forms is to collect user information. In our web pages, we also need to interact with users and collect user information, so we also need forms. In HTML, a complete form usually consists of three parts: form controls (also known as form elements), prompts, and form fields.

1. Form controls:

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

2. Prompt message:

A form also usually contains some descriptive text that prompts the user to fill in and do something about it.

3. Form fields:

It acts as a container for all form controls and prompts, and defines the URL address of the application used to process the form data, as well as the method of submitting the data to the server. If you do not define a form field, the data in the form cannot be sent to the backend server.

6.2 input control

<input type="Attribute value" value="Hello">
Copy the code

6.2.1. Type Attribute

• This property determines which input form you belong to by changing its value.
• For example, type = ‘text’ indicates that the text box can be used as a user name, nickname, etc.
• For example, type = ‘password’ indicates that the user’s input in the password field is invisible.

User name:<input type="text" />The secret code:<input type="password" />
Copy the code

6.2.2 Value Attribute

User name:<input type="text"  name="username" value="Please enter user name"> 
Copy the code

• Value Indicates the default text value. Some forms want to display a few text by default when the page is opened.

6.2.3 Name attribute

User name:<input type="text"  name="Username" />  
Copy the code

Name Specifies the name of the form, so that the background can find the form using the name attribute. There are many forms on the page, and the main purpose of name is to distinguish between different forms.

• The value after the name property is our own definition.

• Radio if it’s a group, we have to give them the same name name so we can pick one of them

<input type="radio" name="sex"  />male<input type="radio" name="sex" />femaleCopy the code

• The name property, which we don’t use much right now, is a must as we learn about Ajax and the background.

6.2.4. Checked Attributes

• It is selected by default. More commonly seen in radio buttons and check buttons.

Don't:<input type="radio" name="sex" value="Male" checked="checked" />male<input type="radio" name="sex" value="Female" />femaleCopy the code

6.2.5,

6.3 label Label

The label tag is used to bind a form element, and when clicked, the bound form element gets input focus. We bind elements in two ways:

1. The first is to include the input form directly with a label, suitable for a single form selection.

<label>User name:<input type="radio" name="usename" value="Please enter user name">   </label>
Copy the code

2. The second use of the for attribute specifies which form element label is bound to.

<label for="sex">male</label>
<input type="radio" name="sex"  id="sex">
Copy the code

6.4. Textarea control

<textarea >The text content</textarea>
Copy the code

It has two functions:

1. You can easily create a multi-line text input box with the Textarea control.

2. Cols =” number of characters per row “rows=” number of rows displayed” which we don’t actually use

Text fields and text fields

6.5. Select a drop-down list

If there are multiple options for the user to choose from, we can use the Select control to define a drop-down list to save space.

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>.</select>
Copy the code

Note:

1. contains at least one pair of options
2. When option is defined as selected =” selected “, the current item is selected by default.
3. But our actual development will use less

6.6. Form field

In HTML, the form tag is used to define the form field to collect and deliver user information, and all content in the form is submitted to the server.

<form action="Url" method="Method of Submission" name="Form name">Various form controls</form>
Copy the code

Common attributes:

Each form should have its own form field. We now do the page, do not write to see the effect, but if later learning ajax background interaction, you must need the form field.