: Defines an area in the document, which can be used to divide the page structure and apply styles
: defines an input box in the form, which can be used for users to enter text, password, select date, etc.
Classification according to characteristics
1. Single label img br hr 2. Dual tags a h p div 3. Classify according to tag attributes 1. Block tags Take a line by yourself h1-h6 p div 2. Inline (inline) tags The size of the own text is as large as it is a span u i b s
div tag and span tag
These two tags have no arbitrary meaning and are mainly used to ‘lay out’ the page. div is generally used to occupy position layout span is generally used in text layout
Nesting of tags
Tags can be nested within each other, tags within tags Block-level elements can nest all tags
Tags cannot nest block-level elements, but they can nest inline elements. Inline elements can only nest inline elements, and block-level elements cannot be nested. Unless nesting is written, no error will be reported, but it will have no effect. For the front end, errors will not be reported easily! If you write it wrong, there will be no corresponding effect.
src: 1. Internal image address 2. Write the address of the external link title： The content displayed when the mouse is hovering (required for all labels) width: width of the image height: the height of the picture Under normal circumstances, only one is written, and it is scaled proportionally. alt: the content displayed when the image does not exist
The href attribute specifies the destination page address. The address can be of several types: ● Absolute URL – points to another site (eg href=”http://www.jd.com) ● Relative URL – refers to the exact path in the current site (href=”index.htm”) ● Anchor URL – points to an anchor in the page (href=”#top”)
target: ● _blank means opening the target web page in a new tab ● _self means opening the target webpage in the current tab
Two important attributes of the tag
id value: equivalent to a person’s ID card. In a document, the id value cannot be repeated and must be unique. Class value: There can be multiple class values. One label can have multiple class values, and one class value can also be owned by multiple labels.
#d1 .c1 To use the id value, it must start with # To use the class value, you must use .Start
List
1.Unordered list
<ul type="disc">
<li>First item</li>
<li>second section</li>
\t</ul>
type attribute:
● disc (solid dot, default value)
● circle (empty circle)
● square (solid square)
● none (no style)
2.Ordered list
3.Title list
Table
id name age gender salary
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
table tag
<table>
<thead>
<tr>
<th>Serial number</th>
<th>Name</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>Gang Niang</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
Attributes:
● border: table border.
● cellpadding: padding
● cellspacing: margins.
● width: pixel percentage. (It is best to set the length and width through css)
● rowspan: how many rows the cell spans vertically
● colspan: how many columns the cell spans (that is, merged cells)
form form tag
<form action="">
<p>
<label for="inp1">
username: <input type="text" id="inp1">
</label>
</p>
<p>
<label for="inp2">
password: <input type="password" id="inp2">
</label>
</p>
<p>
<label for="inp3">
password: <input type="date" id="inp3">
</label>
</p>
<p>
<input type="checkbox" name="hobby"> read
<input type="checkbox" name="hobby"> music
<input type="checkbox" name="hobby"> tangtou
</p>
<p>
<input type="checkbox" name="hobby1"> read1
<input type="checkbox" name="hobby1"> music1
<input type="checkbox" name="hobby1"> tangtou1
</p>
<p>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Unknown
</p>
<p>
<input type="hidden" value="123">
</p>
<p>
<input type="file" multiple>
</p>
<p>
<select name="" id="">
<option value="">Shanghai</option>
<option value="">Beijing</option>
<option value="">Henan</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10">
</textarea>
<p>
<input type="submit" value="Login">
<input type="reset" value="Reset">
</p>
</form>
Property description:
● name: "key" when submitting the form, please note the difference with id
● value: the value of the corresponding item when the form is submitted
○ When type="button", "reset", "submit", it is the text displayed on the button
○ When type="text","password","hidden", it is the initial value of the input box
○ type="checkbox", "radio", "file", enter the associated value
● checked: The items that radio and checkbox are selected by default
● readonly: text and password are set to read-only
● disabled: Applicable to all inputs
select attribute
Property description:
● multiple: Boolean attribute, after setting, it is multiple selection, otherwise it defaults to single selection.
● disabled: disabled
● selected: This item is selected by default
● value: Define the option value when submitting
<form action="">
action:
"""Write the address submitted to the backend"""
Whatever address you write here, you will submit data to this address. You should fill in the backend address.
1. Write nothing: submit to the current address
2. Write in full: http://127.0.0.1:5000/index/ Submit to this address
3. Write only the suffix
/index/-------->IP:PORT/index
"""For a form to submit data to the backend, each tag must have a name attribute."""
The attribute value of name is the key value submitted to the backend data, and the content entered by the user is the value value.
There should be a value attribute for checkbox and radio button labels to distinguish which option the front-end user selects.
## Submission of file data needs to meet the following two conditions:
1. The request method must be post
2. Data encoding method:
1. application/x-www-form-urlencoded
2. multipart/form-data
3.json
3. The encoding method must be multipart/form-data to submit an inquiry.
4. urlencoded can only submit data that is not a file, while form-data can submit ordinary data and file data.
5. What does data in urlencoded form look like:
username= & amp;password= & amp;date= & amp;hidden=123 & amp;myfile= & amp;city=
6. Data in form-data encoding format:
username= & amp;password= & amp;date= & amp;hidden=123 & amp;myfile= & amp;city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
file data
"""For the data submitted by form-data, the backend still retrieves the normal data in the form, and retrieves the file data in files"""
7. The form cannot submit json data
8. If you want to submit data in json format: Ajax technology, third-party api tool postman
