--- front-end basis 2

table of Contents

form form
css

form form

Can get user input (input, select, uploaded files) and all content entered by the user is sent to the back-end

form parameters

action: control address data submitted

1. Do not write, the default is to submit this data towards the address of the current page is located

2. Write the full path ( https://www.baidu.com )

3. Write only the path suffix (/ index /)

Normally input label used in combination with the required

<label for="d1">用户名:<input type="text" id="d1"></label>

After binding id value click anywhere inside the label tag can automatically select the input box

Action can trigger form submission data form, there are two labels

1.input tag type = submit

2.button label

Interact with back-end, all labels get user input, should have a name attribute

1.name key attribute is similar to a dictionary

2.input frame are acquired user input into the input box value attribute

3. For the selection box, spread to the back-end data, determined by the value attribute

4.form If you want to submit the form data file, you must modify the properties in the form of

enctype="multipart/form-data"

css

Html tag is used to control the style

Comment:

注释
/*单行注释*/

/*多行注释1
多行注释2*/

css syntax structure

Selector {Attribute 1: 1 Attribute Value}

Three ways to introduce css

1. The introduction of external css file through a link tag (most formal)

Css code by direct writing style tags within the head 2 directly on the html page

<head>
    <meta charset="UTF-8">
    <title>伪类选择器测试</title>

    <h1>伪类选择器</h1>

    <style>

        input:focus{
            background-color: red}

    </style>

</head>

3. writing directly within the line of formula (style attribute within the tag by directly

<h1 style="color: orange">我是Oscar</h1>

Find css

1. Basic selector

Element selector

id selector

Class selector

Universal selector

2. Combination Selector

div span

div>span

div+span

div~span

3. attribute selectors

Any label has its own default properties id class

Tag also supports you to customize any number of attributes (which means allowing label to help you carry some extra data)

4. pseudo class selector

Four states a tag

1. has not been clicked

2. The mouse was suspended above

3. After clicking grimdeath

4. Click to go back after

We will input box after the mouse into a state called the input it gets the focus, also called focus focus

Mouse state is called out after a input box loses focus

The pseudo-element selector

Clearly the negative impact brought by floating

You can add text by css

Priority selector

1. Under the same selector, the introduction of different ways: follow the principle of proximity, who is away from the label closer who heard

2. Selector different cases: the row selector> id selector> class selector> selector element