HTML Basics (Part 2)

In the last HTML article, we talked about the basic knowledge of HTML and the browser kernel used and basic tags, etc. This time we will talk about HTML tables and forms syntax. This is the last lecture on HTML basics, and next time we’ll move on to the important styling part of the front end! Note: This series of articles is suitable for beginners. Please correct the article if there are any omissions.

Tables in HTML

Generally speaking, tables are used to display data, lists are used for layout, and forms are used to collect data that users fill in. The function of tables is also very important, in the early HTML basically used tables to lay out the user’s data filling and layout. Three steps to create a table

  • Table: label of a user-defined table
  • Tr: User-defined rows in a table
  • Td: User-defined cells in a table
  • Th: header cell (bold, usually written in the header)
<table>
	// If it is the header of the table, you can set th directly
	<th>
		<td>The header of the table</td>
	</th>
	// tr represents table rows
	<tr>// TD represents the first cell under the row<td>Text inside a cell</td>.</tr>
</table>
Copy the code

Table properties

  • Border: Sets the border of the table (default border = “0” is no border)
  • Cellspacing: Sets the spacing between cells and cell borders (default: 2 pixels)
  • Cellpadding: Sets the spacing between the cell content and the cell border
  • Width: sets the table width. Height: sets the table height
  • Align: sets the horizontal alignment of the table on the page: left, right, center
  • Caption: Indicates the table’s title, as the table begins to move. These properties can be set directly in the table.

See Figure 1

<table border width="300" height="50" align="center" cellspacing="10" cellpadding="5"  >
<caption>I'm the title of the table, and I move with the table</caption>
	<tr>
		<td></td>.</tr>
</table>
Copy the code

Merged cell

There are also two types of merge operations that can be performed in a table, one is cross-row merge and cross-column merge.

  • Rowspan = “2” (2 indicates the number of merges)
  • Colspan = “2” (2 indicates the number of merges)

This is shown in Figure 2

<table>
	<tr>
 		<td>1</td>// Cross-bank merge<td rowspan=2>1</td>
 	</tr>
 
 	<tr>
 		<td>2</td>
	</tr>
 
  	<tr>// cross-column merge<td colspan="2">3</td>
 	</tr>
 
 	<tr>
 		<td>4</td>
  		<td>4</td>
 	</tr>
</table>
Copy the code

Table summarizes

  • Table: indicates the table label
  • Tr: Table row label
  • Td: cell label
  • Th: indicates the header unit label
  • Caption: Indicates the table title label
  • Colspan: cross-column merge
  • Rowspan: cross-row merge
Table partition structure

There is also a form representation in the table, which is easy to control, divided into three parts, header, body and footnote. This opens up in Chrome’s Developer tools, and what you see is the header and content and the tail, which are easy to manage. This is shown in Figure 3

  • Thead: header
  • Tbody: the body of
  • Tfoot: footnote
<table>
	<thead>
		<tr>
			<td>The header of the table</td>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>The content section of the table</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td>The end of the table</td>
		</tr>
	</tfoot>
</table>
Copy the code

A list tag in HTML

Another type of tag in HTML that will be used heavily in most scenarios of future layouts is the list tag. In particular, list tags are heavily used at the end of the page. List labels are classified into ordered lists and unordered lists. However, in future CSS, there will be an initial CSS for lists and p, div tags, etc., and they will be modified uniformly. This can be explained in more detail in CSS later.

  • Ul-li: unordered list
  • Ol-li: Ordered list
  • Dl-dt: custom list

See Figure 4

// Unordered list
<ul>
	<li>1</li>
	<li>2</li>
</ul>

// Ordered list
<ol>
	<li>1</li>
	<li>2</li>
</ol>

// Customize the list
<dl>
	<dt>1</dt>
	<dt>2</dt>
</dl>
Copy the code

The form tag

The form is used to collect information about the user

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

In the form, value represents the default text value. There are several types of type attribute values, including the following ones

  • Text: single-line text input box
  • Password: password input box
  • Radio: Radio button
  • Checkout: check box
  • Image: Submit button in the form of an image
  • File: indicates the text field

These are basically the values of the type attribute in the input box, which will not be shown here. If you are interested, you can open the editor for yourself, such as the following example to try. The value of type is password

<input type="password" value="Please enter your password">
Copy the code

In addition, the form contains checked properties, button, submit, and reset.

  • Checked: Indicates the default checked state (common in checkboxes and checkboxes)
  • Button: a normal button (a normal button requires a value to indicate the name of the button)
  • Submit: submit attribute (value is not required)
  • Reset: Resets the button
// checked indicates the default check status
<input type="radio" checked="checked">
Copy the code

The label tag

Label: indicates the label of the label. The label does not have any display on the page.

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

This paragraph means that the user can directly input content in the input when clicking the mouse “user name” in the three words, which can increase the user experience.

Textarea text field

Textarea: Represents the content of a text field, usually used in situations such as message boards.

Select the drop-down box

Select: indicates the drop-down list

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

However, with the advent of UI frameworks, the native SELECT style is largely abandoned, first because it is not pretty, and second because select is displayed differently in different browsers. So you’re going to use div as select, and we’ll talk about that in the future, but it’s important to understand what select is for, right

Form form the domain

  • Form field: To collect and transfer user information, all content in the form will be submitted to the server.
  • Action: URL Address Specifies the URL of the form data server program that accepts and processes it
  • Method: get/POST This parameter is used to set the submission mode of form data. The value can be GET or POST
  • Name: The name is used to specify the name of the form to distinguish multiple forms on the same page

conclusion

In this lecture, THE whole HTML is over. This lecture mainly introduces the common attributes of HTML, involving important attributes such as tables and forms, which will be used extensively in future work. The foundation must be solid in order to go further. In addition, in HTML also need to learn to check the document, their understanding is not in place or fuzzy place, must check the document, learn to analyze problems and solve problems in the work is also an essential part. MDN is the most authoritative website for the front end.

MDN website link