002. knowledge of front-end development, front-end basic HTML (2020-01-07)

First, the list of labels

1. unordered list ul

< UL > 
  < Li > list item. 1 </ Li > 
  < Li > list item 2 </ Li > 
  < Li > list item. 3 </ Li > 
  ...... 
</ UL >

2. ordered list ol

Ordered list that is a list of the order of arrangement, each of which is defined in terms of a list of items arranged in a certain order

< OL > 
  < Li > list item. 1 </ Li > 
  < Li > list item 2 </ Li > 
  < Li > list item. 3 </ Li > 
  ...... 
</ OL >

3. Custom List

< DL > 
  < dt > noun 1 </ dt > 
  < dd > noun interpretation 1 1 </ dd > 
  < dd > noun interpretation 1 2 </ dd > 
  ... 
  < dt > noun 2 </ dt > 
  < dd > nouns 2 explained. 1 </ dd > 
  < dd > noun interpretation 2 2 </ dd > 
  ... 
</ DL >

Second, the form table

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the Document </ title > 
    < style > 

    </ style > 
</ head > 
< body > 
<! - the distance between the cells and cell cellspacing    -> 
<! - the distance from the unit cell contents cellpadding frame    -> 
    < Table width = "500" border="1" align= "Center" cellspacing = "0" cellpadding = "0" > 
        < Caption > personal information table </ Caption >   table header  
         < TR >   
            < TH > Name </ TH >  
            < TH > gender </ TH > 
            < TH > Phone </ TH > 
        </ TR > 
        < TR > 
            < TD > Amy </ TD >
            <td>女</td>
            <td>110</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>120</td>
        </tr>    
    </table>
</body>
</html>

1. Table Properties

2. Table structure

When using tables for layout, the table can be divided into head, body, and footer.

　　<Thead> </ thead>: Defines a table for the head.

　　<Tbody> </ tbody>: used to define the body of the table.

3. table header

< The Table > 
   < Caption > I am a table headers </ Caption > 
</ the Table >

4. Merge Cells

　　Interbank merger: rowspan across columns merge: colspan

　　Thinking merged cells: a plurality of content time of the merger, there will be extra things, delete it. For example the three td combined into one, it would be redundant two, need to be removed.

　　Formula: The number of deleted = Merge number --1

　　The combined first order on the first left

<body>
    <table width="400" height="100" border="1">
        <tr>
            <td>123</td>
            <td>abc</td>
            <td>abc</td>
        </tr>
        <tr>
            <td colspan="2">123</td>
            
            <</Test>TDTD > 
        </ TR > 
        < TR > 
            < TD > 123 </ TD > 
            < TD > ABC </ TD > 
            < TD > ABC </ TD > 
        </ TR > 

    </ Table > 
    1. confirm combined across columns colspan 
    2 after the first rear left and right lower first 
    number of deleted 3. 

    < Table width = "400" height = "100" border = ". 1" > 
        < TR >
            <td>123</td>
            <td>abc</td>
            <td rowspan="3">abc</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            
        </tr>
        <tr>
            <td>123</td>
            <td>abc</ TD >         
        </ TR > 
    </ Table > 
    1. confirm interbank rowspan combined 
    at the rear left and right after the first 2 to 
    the number of delete 
</ body >

Third, the form - the purpose is to collect user information.

　　In HTML, a form is typically a complete form controls (also known as form elements), suggesting that three parts constituting the information and form fields.

　　Form controls: contains the specific form functional items, such as the single-line text input box, the password input box, check box, Submit button, Reset button and the like.

　　Message: a form usually need to include descriptive text, and prompts the user to fill operation.

　　Form fields: He corresponding to one container, for receiving controls and all form message, the method can be submitted to the server by his form data definition processing program url addresses, and data. If you do not define the form fields, form data can not be transferred to the backend server.

1. the INPUT controls

2. label tag

Role: for a binding form elements, click on the label when the label when bound form elements will get the input focus.

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

3.textarea控件(文本域)

通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

4.下拉菜单

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

5.表单域

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

四、查文档

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/