html_ Back end engineer must know - do you understand all this?

Article catalog

What is an engineer

  • Web front end Engineer

    Responsible for webpage compilation

  • Web backend Engineer
    Responsible for compiling database and query logic

  • Web full stack engineer

    Both of the above and project control

Blogger I am going to develop Python back-end and full stack engineers, and python knowledge has been completely written in my blog classification column. I believe that many people are ready to attack in these two directions. As back-end engineers, they need to master front-end knowledge, and from today on, update what knowledge they need to master as back-end engineers.

This is my mind map. If you need me, please comment below.

1, Introduction to Html

HTML: hypertext markup language, mainly used to write web pages.
Hypertext: a text is a paragraph or document composed of text with complete meaning. Hypertext is beyond the scope of text in terms of expression:
    Hyperlinks, with jump objects,
    Pictures,
    Voice,
    video
    
Tag: refers to the code style of HTML. HTML relies on tags to express content:
    label:
          < tag name attribute = "value" >
    Single label
          < tag name attribute = "value" >
    Double label
          < tag name property = value > < tag name >

Create an html file in Pycharm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <h1> hello</h1>
    <h2> hello</h2>
    <h3> hello</h3>
    <h4> hello</h4>
    <h5> hello</h5>
</body>
</html>

Click Run to see the following effect

Based on the above case, we should have the following understanding:
  • The suffix of html file is. html
  • html tags are fixed, single tags and double tags are fixed. What we need to do is to summarize after learning.
  • The basic structure of html
  • Indicate to search engine that the page is html language, and the language is english website, its "Lang" means "language", and the language means "en", which means english page. If it is Chinese page, it can be changed to < html lang = "zh" > Zh, which means Chinese

  • HTML tag is the largest tag of HTML file, also known as root tag
  • html tags are nested to declare hierarchy
  • In the HTML tag, the whole html is divided into head tag and body tag
  • The header is responsible for declaring the properties of the page, and the title is the title of the page
  • The content section is responsible for the content on the page

2, Common HTML tags

1. h label

The title tag consists of six levels: h1-h6, and html represents the title.

2. Common labels for text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <!-- ①html Common labels for text -->
    <p>1,Use text content to express</p><!-- Text label one p a line -->
    <p>2,Use text content<br>De expression</p> <!-- br Label for wrapping -->
    <hr><!-- hr Label wrap one line -->
    <p>3,Use text content&nbsp;&nbsp;&nbsp;De expression</p><!-- &nbsp Space representation -->
    <p>4,hello&lt;wrold</p><!-- &lt Symbol< -->
    <p>5,hello&gt;wrold</p><!-- &ge Symbol> -->
</body>
</html>

3. Text decoration label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <!-- ②html Text decoration label -->
     <i>stable c9___html Learning notes</i>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- Skew, with statement inclusion, table emphasis -->
    <em>Text decoration label</em>&nbsp;&nbsp;&gt;<!-- Tilt only -->
    <b>The second stage</b>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- Bold -->
    <strong>Web study</strong>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- Bold, table emphasis -->
    <u>hello</u>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- Underline -->
    <del>world</del> <!-- Strikeout -->
</body>
</html>

4. div box label

Html layout history:
Now the content of learning is to put the content on the page. Later learning must involve the page layout, that is, how to put the tags learned today in the proper position on the page, so the technology is layout.
In the beginning, html popular table layout was similar to the current resume template. The whole page was regarded as a total table, and then the tables were merged to form a web page layout.

Later, with the development of the network, the form of expression becomes more and more complex, and the table layout is pale, so there is a new layout method, box layout. The whole page is regarded as a box, in which small boxes are nested, and the layout is carried out by describing the location, frame and margin of the box.

div is an element of box model, which is frequently used in web layout
It will be explained in detail later

5. img picture label


Image image image, image and html image tags use the image abbreviation img. Compared with the above tags, we will contact the tag attributes in the image tag.
<img>

  src image address can use absolute path
            Start with drive letter under Windows D:\
            Linux starts with root / usr/root/
  You can also use relative path to refer to the location of other files with the current file as the reference
            . / the current path can not be written by default
            .. / represents the previous layer
            /Project root
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img src="img/3.jpg" title="Test picture" alt="Picture not found" wigth="50px"> <!-- Picture label image Single label -->
    </body>
</html>

6. Hyperlink tab a


We don't need to have too many attributes, such as span,h,p,br,hr, just for text expression
If it is hypertext, it needs attributes: address, title, error prompt, height and width
In HTML, a tag is a hyperlink tag, and a tag is a double tag
<a>< / a > hyperlinks are also hypertext, so a tag also needs parameters:

  • href: hyperlink address, where to link
  • target: represents how to open a link

src can load external web pages or anchor operations

Load external web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">Click me,Open a new web page</a>
    <hr>
    <a href="https://www.baidu.com/" target="_self">Click me to refresh the original page</a>
</body>
</html>


Anchor operation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <a href="#1" >Jump to the bottom of the article</a>
    <hr>



    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>
    <p >Texttexttexttext</p><br>

    <h1 id="1">Bottom of article</h1>
</body>
</html>

Bad mapping. This is the same as skipping to the directory

7. List label

1. ol ordered label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <ol>
        <li>Python</li>
        <li>Java</li>
    </ol>
    
    <ol type="A" start="2">
        <li>Python</li>
        <li>Java</li>
    </ol>
</body>
</html>

By default, i Roman number can specify the type and start position through type

2. ul unordered label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <ul>
        <li>Python</li>
        <li>Java</li>
    </ul>

    <ul type="circle" >
        <li>Python</li>
        <li>Java</li>
    </ul>
</body>
</html>

The default is disc solid dot, which can be specified by type

3. dt custom label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <dl>
        <dt>catalog</dt>
        <dd>1,Python</dd>
        <dd>1,JAVA</dd>
    </dl>
</body>
</html>


In fact, it's the meaning of hierarchical directory

  • Custom list has no preceding characters
  • Custom list can be indented as required
  • Usually used as a navigation bar
  • Ordered or unordered lists can be nested

8. Table label

1. Table label table

table has a series of properties

1. Cell packing cell packing direct distance between cell and cell
2. Cellpadding cellpadding distance between cell and content
3. Width the width of the table
4. The height of the height table is usually not set because the number of data bars is not fixed

Here, the tr and td labels are used in advance to represent rows and columns respectively

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <table>
        <tr>
            <td>full name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Xiaoming</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Small red</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

We can see that it's like a table, but it's not like it. This is because of the table property

Set the table attribute to make it more like a table. The reader can adjust the data by himself and test it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>full name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Xiaoming</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Small red</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

Find that the distance is getting longer

In fact, there is no border. First, use the border css style in advance,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>full name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Xiaoming</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Small red</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

You can debug the table attribute according to the source code

2. tr label [line]

tr full name table row means table row
Of course, it has its own attributes
Attributes are written inside the label, such as < tr align = "center" >
Indicates that the contents are all in the middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>full name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Xiaoming</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Small red</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

3. td and th labels [column]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>full name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td align="center">Xiaoming</td>
            <td>18</td>
        </tr>
        <tr>
            <th>Small red</th>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

4. Table structure

In fact, it's for the sake of reading well and not writing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <caption>Personnel information questionnaire</caption>
        <thead>
            <tr align="center">
            <td>full name</td>
            <td>Age</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">Xiaoming</td>
                <td>18</td>
            </tr>
            <tr>
                <th>Small red</th>
                <td>20</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>Time: 2020-1-1 </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

5. Form consolidation

Now there's a need

If you have tried cellpacking and cellpadding of table attribute before, you will know that you can make a table

You can see whether you need to merge the rows of the photo section, or merge several columns

Start with a simple form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

You can see that this is a table

If we want to merge columns 1-2 and 1-3
You can follow the left to right principle and set the properties in the first column
ColSpan = "2" two of them represent merging two columns, so which column 1-3 is commented out and which one is deleted.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td colspan="2">1-2</td>
<!--            <td>1-3</td>-->
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

You can see the effect

We still use the original table source code

Change in demand, combine second line 2-2 and third line 3-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td rowspan="2">2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
<!--            <td>3-2</td>-->
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

You can see the success

9. Form label


Why use forms? What are forms?
The content learned before is to show data to users in html, but there is no place to get user data. The problem is that web development needs to realize the interaction between users and websites. Form technology is an important means to get user feedback.

1. form form label


Use control knowledge after point in advance

Use get method to display user input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
        <!--
        action: Address submitted
        method: How to submit
            get:Parameters will be spliced to url In general, it is not recommended to put sensitive information here and cannot upload more than 4 kb
            post:Parameters will not be spliced to url Medium, relative get,More secure, file upload must use post
        enctype: data type
            application/x-www-form-urlencoded: Non file upload, default value, can not write
            multipart/form-data: This value is required for file upload, and method Set to post-->
    <form action="#" method="get" enctype="application/x-www-form-urlencoded">
            <table>
                <tr>
                    <!--
                    input: Input control
                    type=" text" : Control type is text
                    name: Control name key
                    placeholder: User prompt
                    -->
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

You can see this thing on the page, your products, your details

That's what we usually do when we enter an account

After returning, check the url URL change

get is displayed in clear text. post is the opposite of it. Don't do an example here. Just change the source code above and try it

Now we can press F12 or set to find the developer terminal


Click to play the last one, look down, and you can see that we are in the control
In < input type = "text" name = "username" placeholder = "please enter user name" > name is the key that we define username to get the value value entered by the user.
The combination dictionary {"key": "value"} will introduce how to obtain the value of the front-end page and handle it in the back-end, which is the basic use of form data interaction.

2. input control

In fact, these controls are generally used in conjunction with the form, as the front and back end data interaction, and set the name, which has been mentioned before

I believe that you all have a general concept of input control, which has been used to specify why the control is based on type

Then I will demonstrate through the progress case, i.e. gradually use the above picture control

Version v1.0 password control

The password table is named face control

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    
    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Version v2.0 radio box

Control property description:
Circle selected by radio
Name = "sex" control name is gender
Value = "0 or 1" means that there can only be one, male or female
checked default options

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Version v3.0 check box

`"checkbox" means to select multiple checkboxes. For example, if a person has multiple hobbies, it is important to set "value" as the same, because it is not the only option Unlike men and women, 'value' is either 0 or 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>What's your hobby?</td>
                </tr>
                <tr>
                    <td>
                        Basketball<input type="checkbox" name="lanqiu" value="hobby">
                        Tennis<input type="checkbox" name="wangqiu" value="hobby">
                        Football<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Version v4.0 file box

File upload file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>What's your hobby?</td>
                </tr>
                <tr>
                    <td>
                        Basketball<input type="checkbox" name="lanqiu" value="hobby">
                        Tennis<input type="checkbox" name="wangqiu" value="hobby">
                        Football<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        Please select the avatar you want to upload<input type="file" name="pic">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Because no, pay attention to the layout, that password flies so far away, we ignore it.

Version v5.0 hidden domain

hidden users can't see it on the front page. It's used for testing. It's usually not used

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>What is your hobby?</td>
                </tr>
                <tr>
                    <td>
                        Basketball<input type="checkbox" name="lanqiu" value="hobby">
                        Tennis<input type="checkbox" name="wangqiu" value="hobby">
                        Football<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        Please select the avatar you want to upload<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Version v6.0 submit box reset box

`submit 'the button for submission after the user has registered `reset button
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>What's your hobby?</td>
                </tr>
                <tr>
                    <td>
                        Basketball<input type="checkbox" name="lanqiu" value="hobby">
                        Tennis<input type="checkbox" name="wangqiu" value="hobby">
                        Football<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        Please select the avatar you want to upload<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="Submit">
                        <input type="reset" name="Reset">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

Version v7.0 button button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>account</td>
                    <td>
                        <input type="text" name="username" placeholder="enter one user name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="Please input a password">
                    </td>
                </tr>
                <tr>
                    <td>
                       male <input type="radio" name="sex" value="0" checked>
                       female <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>What's your hobby?</td>
                </tr>
                <tr>
                    <td>
                        Basketball<input type="checkbox" name="lanqiu" value="hobby">
                        Tennis<input type="checkbox" name="wangqiu" value="hobby">
                        Football<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        Please select the avatar you want to upload<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="Submit">
                        <input type="reset" name="Reset">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Button one">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

3. name value

It is necessary to summarize

1. In the password box, name = "username" does not set value, but the value entered by the user is value, which is saved in the form of a dictionary. View {"username": "user input"} through F12
2. In the radio box, name = sex, value = 1, value = 0, indicating that only one gender can be selected
In the checkbox, name = "Zhuqi", name = "Wangqi", all value = "hobby" are the same, name represents different names, and value represents multiple choices
3. In the input control, the button setting value = button 1 indicates the middle name of the control

4. select multiple controls

Use with option
The selected property indicates the default option. Recall that there are also checked default options in radio and checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <select>
        <option>Hunan</option>
        <option selected>Guangdong</option>
        <option>Shanghai</option>
    </select>
</body>
</html>

You can see that I set the default Guangdong

5. testaera text field

Forms are often encountered. If you have other opinions, fill in
textarea set text field
cols set value column
rows setting row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    Other comments
    <textarea cols="40" rows="3">

    </textarea>
</body>
</html>

6. Button


The button has been said before
Mainly the submit, reset and button buttons in the input control

7. Control properties


Skip here. The control properties can perform these operations

3, html case

1. [text label text modifier label anchor]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    < H1 style = "text align: Center" id = "top" > Baidu Encyclopedia, Guangzhou</h1>
    <h2>Introduction</h2>
     Guangzhou, referred to as "Guangzhou", also known as Yangcheng and Huacheng, is the provincial capital, sub provincial city, National Central City and super city of Guangdong Province. It is an important central city in China approved by the State Council
    International Trade Center and comprehensive transportation hub [1]. <br>
    As of 2018, the city has 11 districts, with a total area of 7434 square kilometers, a built-up area of 1249.11 square kilometers, a permanent population of 15.359 million, and a urbanization rate of 86.46%. [2-3]

    <h2>Table of contents</h2>
    < a href = "ා1" > 1. History</a>
    <br><br>
    < a href = "ා2" > 2. Geographical environment</a>

    < H2 id = "1" > History</h2>
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six spikes of fine rice seeds, gave them to the local people and blessed that there would be no famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six ears of fine rice seeds, gave the rice ears to the local people, and blessed that there would never be famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six ears of fine rice seeds, gave the rice ears to the local people, and blessed that there would never be famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six spikes of fine rice seeds, gave them to the local people and blessed that there would be no famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six spikes of fine rice seeds, gave them to the local people and blessed that there would be no famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]
    It is said that the earliest place name of Guangzhou is "Chu Ting" (or "Chu Ting"). Under the Zhongshan monument on Yuexiu mountain, there is still a stone archway built by the Qing people, which is engraved with the words "ancient Chu Pavilion". <br>
    Many historical records regard "chuting" as the rudiment of Guangzhou, the earliest appellation of Guangzhou, 2847 years ago. <br>
    It is said that five immortals, dressed in colorful clothes and riding five colored sheep, came to "chuting" with one stalk and six spikes of fine rice seeds, gave them to the local people and blessed that there would be no famine here. <br>
    After that, the five immortals will fly away, and the five sheep will become stones. In order to commemorate the five immortals, the local people built a five immortals temple. It is said that the five immortals temple is where the "Chu court" is located. <br>
    Therefore, Guangzhou has the nicknames of "Yangcheng" and "Suicheng". [22]

    < H2 id = "2" > geographic location</h2>
    Guangzhou is located in the south of China, the south central part of Guangdong Province and the north central edge of the Pearl River Delta. It is the confluence of Xijiang River, Beijiang River and Dongjiang River, bordering the South China Sea, bordering BOLUO and Longmen counties in the East, Sanshui, Nanhai and Shunde in the West
    It is one of the starting points of the maritime Silk Road, and the "South Gate" of China
    It is the core city of Guangzhou Foshan metropolitan area, Guangdong Hong Kong Macao metropolitan area and Pearl River Delta metropolitan area. [33]  <br>
    <br>
    Guangzhou is located at 112 ° 57-114 ° 3 E and 22 ° 26-23 ° 56 n. The city center is located at 23 ° 06:32 N and 113 ° 15:53 E. [34]
    <br><br><br><br><br><br>
    < a href = "ාtop" > back to the top of the article</a>

</body>
</html>

2. [form, control, control property]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="text-align: center">questionnaire investigation</h1>
    <br>
    <p>Hello!</p>
    <p>Thank you for choosing this platform. In order to better understand your needs and expectations and provide you with better service, we sincerely invite you to participate in this client satisfaction survey,
        Please give your valuable opinions on the following questions. Your answers are of great value to our continuous improvement. Thank you for your cooperation!
    </p>
    <form action="#" method="post" >
        <table cellpadding="5">

            <tr><td>1,Is the curriculum design satisfactory</td></tr>
            <tr><td><input type="radio" name="question1" value="a1">satisfied</td></tr>
            <tr><td><input type="radio" name="question1" value="a2">commonly</td></tr>
            <tr><td><input type="radio" name="question1" value="a3">dissatisfied</td></tr>
            <tr><td><input type="radio" name="question1" value="a4">Very dissatisfied</td></tr>

            <tr><td>2,Are lecturers satisfied with their teaching style</td></tr>
            <tr><td><input type="radio" name="question2" value="b1">satisfied</td></tr>
            <tr><td><input type="radio" name="question2" value="b2">commonly</td></tr>
            <tr><td><input type="radio" name="question2" value="b3">dissatisfied</td></tr>
            <tr><td><input type="radio" name="question2" value="b4">Very dissatisfied</td></tr>

            <tr><td>3,Whether the accommodation is satisfactory</td></tr>
            <tr><td><input type="radio" name="question3" value="c1">satisfied</td></tr>
            <tr><td><input type="radio" name="question3" value="c2">commonly</td></tr>
            <tr><td><input type="radio" name="question3" value="c3">dissatisfied</td></tr>
            <tr><td><input type="radio" name="question3" value="c4">Very dissatisfied</td></tr>

            <tr><td>4,Overall satisfaction</td></tr>
            <tr><td><input type="radio" name="question4" value="d1">satisfied</td></tr>
            <tr><td><input type="radio" name="question4" value="d2">commonly</td></tr>
            <tr><td><input type="radio" name="question4" value="d3">dissatisfied</td></tr>
            <tr><td><input type="radio" name="question4" value="d4">Very dissatisfied</td></tr>

            <tr><td>5,What suggestions do you have for this client? What other improvements do we need to make in customer service?</td></tr>
            <tr><td><textarea name="respose" cols="80" rows="10"></textarea></td></tr>

            <tr><td>Thank you very much for your support and cooperation! We will continue to work hard to provide you with satisfactory services</td></tr>

            <tr><td>
                <input type="submit" value="Submit">
                <input type="reset" value="Reset">
            </td></tr>

        </table>
    </form>
</body>
</html>

3. [resume form]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table merge</title>
    <style>
        td{
            width: 40px;
        }
    </style>
</head>
<body >
    <div>
    <table border="1" cellspacing="0" cellpadding="0" width="800" >
        <caption>curriculum vitae</caption>
        <tr >
            <td>full name</td>
            <td> </td>
            <td>Gender</td>
            <td> </td>
            <td>date of birth</td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td>nation</td>
            <td> </td>
            <td>Political outlook</td>
            <td> </td>
            <td>height</td>
            <td> </td>
        </tr>
        <tr>
            <td>School system</td>
            <td> </td>
            <td>education</td>
            <td> </td>
            <td>household register</td>
            <td></td>

        </tr>
        <tr>
            <td>major</td>
            <td> </td>
            <td colspan="2">Graduate School</td>
            <td colspan="2"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">Skill, specialty or hobby</td>
        </tr>
        <tr>
            <td>Foreign language level</td>
            <td colspan="2"> </td>
            <td>computer</td>
            <td colspan="3"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">Personal resume</td>
        </tr>
        <tr>
            <td>time</td>
            <td colspan="2">Company</td>
            <td colspan="4">experience</td>
        </tr>
        <tr>
            <td>2002 April 2004</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003 March, 2015</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003 August, 2015</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">contact information</td>

        </tr>
        <tr>
            <td>postal address</td>
            <td colspan="3"></td>
            <td>contact number</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>email</td>
            <td colspan="3"></td>
            <td>Zip code</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">Self evaluation</td>
        </tr>
        <tr>
            <td colspan="7" height="160"></td>
        </tr>
    </table>
    </div>
</body>
</html>

4, Personal discussion

The back-end engineer needs to understand the general content of the front-end so that you can design data interaction

There are many learning websites on the Internet, which are recommended here

Rookie League
w3cschool

Tags: Python Attribute Java Database

Posted on Sat, 06 Jun 2020 02:27:53 -0400 by oliverw92