1. Common labels and attributes of tables

1.1 basic use of form labels

What is the main function of the form?

• Display data neatly in rows and columns (tables), such as stock prices
• Layout pages in tables

Basic syntax of table:

<table>
  <tr>
    <td>Cell content</td>
    ... //Repeat td → cell
  </tr>
  ... //Repeat tr → line
</table>

How many table labels are commonly used? What do they mean?

Three basic table labels:

Serial number	Tag name	explain
1	table	Table label for containing multiple TRS
2	tr	Defines a row in a table that contains more than one td
3	td	Define the cells in the table to store the cell contents

be careful:

• Table and tr are used to build a table structure and cannot store the actual content;
• td is used to store cell data.

<table>
        <tr>
            <td>Serial number</td>
            <td>full name</td>
            <td>Gender</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Zhang San</td>
            <td>male</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Li Si</td>
            <td>male</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Wang Wu</td>
            <td>female</td>
        </tr>
    </table>

1.2 header cell label

What is the function of header label?

The first row is usually used to display the title rather than the actual data, which is convenient for users to read and understand the meaning of the data in the lower table

What is the label?

th can also store content, but it will be bold and centered by default.

<table>
        <th>
            <td>Serial number</td>
            <td>full name</td>
            <td>Gender</td>
        </th>
        <tr>
            <td></td>
            <td>1</td>
            <td>Zhang San</td>
            <td>male</td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>Li Si</td>
            <td>male</td>
        </tr>
        <tr>
            <td></td>
            <td>3</td>
            <td>Wang Wu</td>
            <td>female</td>
        </tr>
    </table>

1.3 table related attributes

In which label should the table attributes be written? Why?

Attributes are used to describe the characteristics (display effect) of the tag, so attributes should be written in the table tag

Attribute grammar review:

<table Attribute 1="Value 1" Attribute 2="Value 2"></table>

be careful:

• Attribute names do not require quotation marks
• Attribute values must be quoted, usually in double quotes
• Attribute = "value" is also called key value pair - attribute name: key / attribute value: value / pair
• Each key value pair is separated by a space
  Common attributes of tables:

Attribute name	Attribute value	describe
align	left,center,right	Alignment
border	Width pixel value or ''	Table border, default "" no border
width	Pixel value	width
height	Pixel value	height
cellspacing	Pixel value	Spacing between cells, default 2 pixels
cellpadding	Pixel value	The distance between the content and the border, which is 1 pixel by default

Center the table, and set the table border, width, height, content spacing and cell spacing.

<table  align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="100">
        <th>
            <td>Serial number</td>
            <td>full name</td>
            <td>Gender</td>
        </th>
        <tr>
            <td></td>
            <td>1</td>
            <td>Zhang San</td>
            <td>male</td>
        </tr>
            <td></td>
            <td>2</td>
            <td>Li Si</td>
            <td>male</td>
        </tr>
            <td></td>
            <td>3</td>
            <td>Wang Wu</td>
            <td>female</td>
        </tr>
    </table>

2. Table structure and common list

2.1 table structure label

In terms of semantics, what two areas can a table be divided into? What labels do they correspond to?

In terms of semantics, a table can be divided into the following two areas:

• thead defines the table header (header row). It must have a tr label, which is usually located in the first row
• tbody defines the body of the table and usually contains the table data area below the header row
  Note: thead and tbody are only used to divide the table structure and distinguish the header row and data area. They cannot replace the original tr, th and td tags.

2.2 merging cells

What are two ways to merge cells?

How to merge cells:

• Cross row merge (rowspan): merge cells of multiple rows → vertical merge
• colspan: merge cells of multiple columns → merge horizontally

What are the steps to merge cells?

1. Specify the consolidation method (cross row / cross column)
2. Find the target cell td and add the merged cell attribute

• Cross row rowspan="x" (vertical)
• Straddle colspan="y" (landscape)

<table align="center" width="640" height="240" cellspacing="1" cellpadding="20" border="2">
        <thead>
            <tr>
                <th colspan="4">Student information</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>full name:</td>
                <td>Ju Xiaoshuai</td>
                <td>Class:</td>
                <td>Hefei phase 10</td>
            </tr>
            <tr>
                <td>date of birth:</td>
                <td>2000-02-14</td>
                <td>Gender:</td>
                <td>Xiaoshuai</td>
            </tr>
            <tr>
                <td>cell-phone number:</td>
                <td>110</td>
                <td>wechat number:</td>
                <td>119</td>
            </tr>
        </tbody>
    </table>

1. Delete extra cells

2.3 unordered list

What is the main purpose of the list?

Lists are used for layout. They can display data in a neat and orderly manner. Using lists for layout will be more free and convenient;

How many lists do we have to learn?

• Unordered list (ul)
• Ordered list (ol)
• Custom list (dl)

How many tags are there in the unordered list? What are they and what are their functions? What are the precautions?

Basic syntax for unordered lists:

   <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      ...
   </ul>

Two unordered list labels:

• ul unordered list. Only multiple li tags are allowed
• Liused to store the contents of li st items
  be careful:
• ul is used to build a structure and cannot store the actual content;
• ul only allows multiple li tags;
• li is used to store list item data

2.4 with sequence table

What is the difference between an ordered list and an unordered list?

The ordered list ol will automatically add numerical sorting in front of the list items, and the sorting will increase in turn;

The basic syntax of an ordered list is basically the same as that of an unordered list. You only need to replace ul with ol:

    <ol>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      ...
    </ol>

Is there any difference between the use and precautions of ordered list and unordered list except sequence number?

In addition to the serial number, the ordered list is no different from the use and precautions of the unordered list.

3. Customize lists and forms

3.1 custom list

What are the application scenarios for custom lists?

The website navigation below the website home page can usually be realized by using a custom list
Basic syntax for custom lists:

<dl>
  <dt></dt>
  <dd>
    ...
  </dd>

  <dt></dt>
  <dd>
    ...
  </dd>
</dl>

Note: Although a dl can contain multiple DTS, it usually contains only one dt in actual development, because it is more convenient for layout

How many labels are there in the custom list? What do they mean?

Three custom list labels:

Serial number	Tag name	explain
1	dl	Custom list, only dt and dd tags are allowed
2	dt	It is used to store keyword (term) content. It is brotherly with dd, but subsequent dd follows the previous dt
3	dd	It is used to store the list item contents of the previous dt keywords

3.3 form usage scenarios and classification

What is the application scenario of the form?

When developing a website, you can use forms to collect user information and submit it to the background for processing;

What parts does the form consist of?

A form usually consists of three parts:

1. Form field: the entire form area summarizes the data to be collected and submits it to the background. For example, it contains complete user information records such as name and gender;
2. Form control (form element): interact with users, allowing users to enter or select a single specific information, such as name;
3. Prompt information: prompt the user what information each form control collects.

3.4 form fields

What is the role of a form field?

• Realize the collection and transmission of user information, such as collecting the complete information of users, and then uniformly transmitting it to the background;
• Basic syntax of the form:

    <form>
      ... form control  ... Prompt information
    </form>

3.5 input type attribute text box and password box

What is the role of form controls?

Users can input or select content through form controls to achieve the purpose of collecting information through forms.

How many categories can form controls be divided into?

Form controls include the following three categories:

1. Input input
2. Select select
3. textarea text field

Basic syntax of input tag:

  <input type="Attribute value" />

Common attribute values of type:

type	Attribute value	describe
input	text	Enter text
input	password	password
choice	radio	Radio button, select one more
choice	checkbox	Check box (tick)
Click to select a file	file	File upload use
click	button	Button
click	image	Button
Form operation	submit	Submit and send the data to the server
Form operation	reset	Reset will clear all data in the form

4. Form input

4.1 ☆ input type attribute submission and reset button

What is the function of the submit button?

The submit button can submit the data in the form field to the background

What is the function of the reset button?

The reset button can clear the data in the form field

What is the use of the value attribute?

The value attribute allows you to specify the text in the submit button or reset button

4.2 radio button and check box of input type attribute

What are the application scenarios for radio boxes?

When selecting more than one, use the radio, such as gender;

What is the application scenario of the check box?

When selecting more than one, use the checkbox, such as hobbies.

Note: during development, it is not suitable to provide too many options, whether single choice or check

4.3 name and value attributes of input

Which property can distinguish form controls? (different controls are responsible for collecting different information)

• The name attribute can distinguish form controls
• The value property can record the value entered by the user in the control or the selection result

How can users be allowed to select only one item among multiple radio buttons?

For the same set of radio boxes or check boxes, the value of the name attribute should be consistent

5. Form input

5.1 checked and maxlength attributes of input

What is the application scenario of the checked attribute?

• If the user wants to modify the previously saved information, the checked attribute can select the user's previous selection, for example, modify personal information
• The checked attribute can help users agree to the user agreement by default;

What is the application scenario of maxlength attribute?

• When the input item in the input box has a length limit, you can use the maxlength attribute;
  Common attributes of the input tag:

attribute	describe
type	type
name	Name that distinguishes the control
value	Value that records or sets the value of the control
checked	A radio or check box is selected by default
maxlength	Maximum input length of input box

Note: in H5, checked="checked" can be abbreviated as checked.

5.2 type attribute of input ordinary button and file field

Which attribute can set the display text of ordinary buttons?

The value attribute can be used to set the attribute value of ordinary buttons

What is the value of the type attribute of the uploaded file?

The type attribute value of the uploaded file is file;

Can I submit the form by clicking the normal button?

Clicking the normal button cannot submit the form. After learning JavaScript, the normal button is very useful.

5.3 label

What is the function of label?

label can be bound to the elements in the form to increase the click range and improve the user experience

What are the steps to use the label?

Steps:

1. Set a unique id attribute value for the input tag to be bound;
2. Use < label for = "control ID" > label text < / label > to bind the label to the corresponding control.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label label</title>
</head>
<body>
    <form action="demo.php" method="get">
        <!-- Required action Property specifies where to send form data when the form is submitted. -->
        <dl>
            <dt><h4>User information</h4></dt>
        </dl>
        user name:<input type="text" value="enter one user name" maxlength="6"><br>
        <!-- input	text	Enter text -->
        dense &nbsp; Code:<input type="password" name="password" value="password"><br>
        <!-- input	password	password -->
        Gender: Male<input type="radio" name="sex" checked>female<input type="radio" name="sex">Simon?<input type="radio" name="sex"><br>
        <!-- choice	radio	Radio button, select one more -->
        Hobbies: all<input type="checkbox" name="hobby" checked='checked' id="basketball"><label for="basketball"> Basketball</label><input type="checkbox" name="hobby" id="football"><label for="football">Football</label><input type="checkbox" name="hobby" id="sing"><label for="sing">sing</label><input type="checkbox" name="hobby" id="dance"><label for="dance">dance</label><input type="checkbox" name="hobby"><br>
        <!-- choice	checkbox	Check box (tick) -->
        File upload:<input type="file" name="file" id=""><br>
        <!-- Click to select a file	file	File upload use -->
        button Button: <input type="button" value="Get SMS verification code"><br>
        <!-- click	button	Button -->
        Upload Avatar:<input type="image" value="images"><br>
        <input type="submit" value="Submit">
        <!-- Form operation	submit	Submit and send the data to the server -->
        <input type="reset" value="Reset">
        <!-- Form operation	reset	Reset will clear all data in the form -->
    </form>
</body>
</html>

5.4 select drop-down form

What is the application scenario of the drop-down list?

There are too many options. If you want to save space and improve the user experience, you can use the drop-down list

Basic syntax of drop-down list:

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

How many labels are there in the drop-down list? What do they mean?

• Labels for three drop-down lists:

  Serial number	Tag name	explain
  1	select	Drop down list
  2	option	Drop down list options for storing options
  3	selected	Property can select an item by default.

  In H5, selected = "selected" can be abbreviated as selected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select Drop down form</title>
</head>
<body>
    List of options
    <select>
        <!-- Drop down list -->
        <option value="">List 1</option>
        <!-- Drop down list options for storing options -->
        <option value="">List 2</option>
        <option value="">Listing 3</option>
        <option value="">Listing 4</option>
        <option value="">Listing 5</option>
        <option value="">Listing 6</option>
        <option value="" selected>Listing 7</option>
        <!-- use selected Property can select an item by default. -->
    </select>
</body>
</html>

appendix

1. Label

Table label

Serial number	Tag name	explain
1	table	Table label for containing multiple TRS
2	tr	Defines a row in a table that contains more than one td
3	td	Define the cells in the table to store the cell contents
4	th	Defines the cell in the header. It is used to store the cell content. It is bold and centered by default
5	thead	To define the table header (header row), you must have a tr label
6	tbody	Defines the body of the table, usually including the table data area below the header row

List label

Serial number	Tag name	explain
1	ul	Unordered list. Only multiple li tags are allowed
2	ol	Ordered list, only multiple li tags are allowed
3	li	Used to store the contents of list items
4	dl	Custom list, only dt and dd tags are allowed
5	dt	It is used to store keyword content. It is brotherly with dd, but subsequent dd follows the previous dt
6	dd	It is used to store the list item contents of the previous dt keywords

Form label

Serial number	Tag name	explain
1	form	Define form fields and uniformly collect and transfer data
2	input	Input control, which can be text box, radio, check, select file, button, etc
3	select	Drop down list
4	option	Drop down list options for storing options

Common attributes of the input tag:

attribute	describe
type	type
name	Name that distinguishes the control
value	Value that records or sets the value of the control
checked	A radio or check box is selected by default
id	Control ID, used with label label
maxlength	Maximum input length of input box

Common attribute values of input tag type:

type	Attribute value	describe
input	text	Enter text
input	password	password
choice	radio	Radio button, select one more
choice	checkbox	Check box (tick)
Click to select a file	file	File upload use
click	button	Button
click	image	Button
Form operation	submit	Submit and send the data to the server
Form operation	reset	Reset will clear all data in the form

2. Shortcut keys

VSCode shortcut key

Shortcut key	effect
ctrl + n	new file
ctrl + s	Save file
ctrl + z	revoke
ctrl + shift + z	Resume undo
ctrl + plus / minus	Zoom in / out
ctrl + c / v	Copy and paste a line (text cannot be selected)
ctrl + x	Delete a row
alt + ↑ / ↓	Move code up and down
alt + shift + ↑ / ↓	Copy one line of code up and down
ctrl + /	notes
ctrl + d	Multi select the same content backward
alt + z	Auto wrap

Emmet syntax

ul>li*6{h$}

dl>dt+dd*3

Key words

Serial number	English	chinese
1	table	form
2	row	that 's ok
3	data	data
4	align	alignment
5	left	Left
6	center	in
7	right	right
8	cell	Cell
9	spacing	Distance between the outside and each other
10	padding	The distance between the inner margin (filler) content and the border
11	row	that 's ok
12	col / column	column
13	term	term
14	input	input
15	select	choice
16	selected	Selected
17	area	region
18	type	type
19	submit	Submit
20	reset	Reset
21	name	Name, name
22	value	value
23	radio	Radio
24	checkbox	Checkbox
25	option	option