Basics of front-end development - 3.HTML tags (Part 2)

1.Table label

1.1 The main function of the table

The form is mainly used forDisplay and display data, because it can make the data display very regular and very readable. Especially when displaying data in the background, it is very important to be able to use tables skillfully. A clear and simple table can present complex data in an organized manner.

Summary: Tables are not used to lay out pages;display dataof.

1.2 Basic syntax of tables

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

1. <table> </table>Is the label used to define the table.
2. <tr> </tr>Labels are used to define rows in a table and must be nested within <table> </table>labels.
3. <td> </td>Used to define cells in the table and must be nested in <tr></tr>labels.
4. The letters td refer to table data, that is, the contents of data cells.

1.3 Header cell label

Generally, the header cell is located in the first row or column of the table. The text content in the header cell is bold and centered. The <th>label represents the header part of the HTML table (abbreviation of table head)
code:

<table>
 <tr>
 <th>姓名</th>
 ...
 </tr>
 ...
</table>

Effect:

Name

Summary: The header cell is also a cell and is often used in the first row of the table to highlight the importance. The text in the header cell will be bold and centered.

1.4 Table properties

This part of the table tag attributes is not commonly used in our actual development. We will set it later through CSS.
There are two purposes:

1. Remember these English words, they will be used in CSS later.
2. Intuitively feel the appearance of the table.

1.5 Table structure tag

Usage scenario: Because the table may be very long, in order to better express the semantics of the table, the table can be divided into two parts: the table header and the table body. In the table tags, respectively use: label table header area
, <thead>label <tbody>table The main area. This can better distinguish the table structure.

1. <thead></thead>: Used to define the header of the table. Must have tags inside. Usually located on the first line.
2. < tbody></tbody>: used to define the body of the table, mainly used to put the data ontology.
3. The above tags are all placed <table></table>in tags.

1.6 Merge cells

Under special circumstances, multiple cells can be merged into one cell. Here, students will simply merge the cells.

1. Merge cell method
   Merge across rows: rowspan="Number of merged cells"
   Merge across columns: colspan="Number of merged cells"
   

2. Target cell
   Cross row: The top cell is the target cell, write the merge code
   Cross column: The leftmost cell is the target cell, write the merge code
   

3. Steps to merge cells

   1. First determine whether to merge across rows or columns.
   2. Find the target cell. Write the merge method = the number of cells to be merged. For example: <td colspan=“2”></td>.
   3. Delete redundant cells.

2. List tags

The table is used to display data, then the list isused for layoutof.
listThe biggest feature is that it is neat, tidy and orderly, and it will be more free and convenient as a layout.
According to different usage scenarios, lists can be divided into three major categories:Unordered lists, ordered lists and custom lists。

2.1 Unordered list (emphasis)

<ul>Tags represent an unordered list of items in an HTML page. List items are generally presented as bullets, and list items are <li>defined using tags.
The basic syntax format of an unordered list is as follows:

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>

1. There is no order level between the various list items in the unordered list, they are parallel.
2. <ul></ul>can only be nested in <li></li>. Directly <ul></ul>entering other tags or text into the tag is not allowed.
3. <li>Between and </li>is equivalent to a container that can hold all elements.
4. The unordered list will have its own style attributes, but in actual use, we will use CSS to set it.

2.2 Ordered list (understanding)

An ordered list is a list in an order, and its individual list items are arranged and defined in a certain order. In HTML tags, <ol>tags are used to define ordered lists, list sorting is displayed numerically, and <li>tags are used to define list items.
The basic syntax format of an ordered list is as follows:

<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>

1. <ol></ol>can only be nested in <li></li>. Directly <ol></ol>entering other tags or text into the tag is not allowed.
2. <li>is equivalent to </li>a container that can hold all elements.
3. The ordered list will have its own style attributes, but in actual use, we will use CSS to set it.

2.3 Customized list (key points)

Usage scenarios of custom lists:
Custom lists are often used to explain and describe terms or nouns. There are no bullets before the list items of the definition list.

In HTML tags, <dl>the tag is used to define a description list (or definition list), which will be used with <dt>(define items/names) and <dd>(describe each item/name).
Its basic syntax is as follows:

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>

1. <dl></dl>It can only contain <dt>and <dd>.
2. <dt>There is no limit to <dd>the number of digits, usually one <dt>corresponds to multiple digits <dd>.

In HTML tags, <dl>the tag is used to define a description list (or definition list), which will be used with <dt>(define items/names) and <dd>(describe each item/name).

3. Form tags

3.1 Why forms are needed

The purpose of using the form is toTo collect user information.
In our web page, we also need to interact with users and collect user information. At this time, forms are needed.

3.2 Composition of the form

In HTML, a complete form usually consists ofForm fields, form controls (also called form elements), and tooltipsComposed of 3 parts.

3.3 Form fields

A form field is an area containing form elements. In HTML tags, <form>tags are used to define form fields to collect and deliver user information.
<form> will submit the form element information within its range to the server.

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

Common attributes:

There are only two points to remember here:

1. Before we write form elements, there should be a form field to contain them.
2. Form fields are form tags.

3.4 Form controls (form elements)

Various form elements can be defined in form fields. These form elements are content controls that allow users to enter or select in the form.

3.4.1 input input form element

In the English word, input means input, and in the form element <input>labelUsed to collect user information.
In <input>the tag, there is a type attribute. According to different type attribute values, the input field has many forms (it can be a text field, a check box, a masked text control, a radio button, a button, etc.).

<input type="属性值" />

• The label is a single label
• The type attribute sets different attribute values ​​to specify different control types.

typeThe attribute values ​​and descriptions of the attributes are as follows :

In addition to the type attribute, tags have many other attributes, and their commonly used attributes are as follows:

1. name and value are attribute values ​​that each form element has, mainly used by backend personnel.
2. name is the name of the form element, requiring radio buttons and check boxes to have the same name value.
3. The checked attribute is mainly used for radio buttons and check boxes. Its main function is to select a form element by default as soon as the page is opened.
4. maxlength is the maximum number of characters that users can enter in a form element, and is generally rarely used.

3.4.2 select drop-down form element

In the page, if there are multiple options for users to choose and we want to save page space, we can use <select>label controls to define drop-down lists.
Syntax:

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

1. <select>contains at least one pair <option>.
2. <option>When selected = " selected " is defined in , the current item is the default selected item .

3.4.3 textarea text area element

Usage scenario: When the user inputs a lot of content, we cannot use the text box form. At this time, we can use labels.
In form elements, labels are controls used to define multi-line text input.
You can enter more text using a multi-line text input control. This control is commonly used in message boards and comments.
grammar:

<textarea rows="3" cols="20">
 文本内容
</textarea>

1. <textarea>Multi-line text input boxes can be easily created using the tag.
2. cols="Number of characters in each line", rows="Number of rows displayed", we will not use it in actual development, we all use CSS to change the size.

3.4.4 Tags

<label>Tags define labels (labels) for input elements.
<label>Tags are used to bind a form element. When <label>the text in the tag is clicked, the browser will automatically shift the focus (cursor) to or
select the corresponding form element to enhance the user experience.
Syntax:

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

Core: <label>The for attribute of the tag should be the same as the id attribute of the related element.

4. Check the documentation

Frequently consulting documents is a very good learning habit.
Recommended URL:

• Baidu: http://www.baidu.com
• W3C : http://www.w3school.com.cn/  MDN:
• https://developer.mozilla.org/zh-CN/