Python full stack development 12, HTML

Starting today, this series of articles will start with the front end, from Htnl,css,js and so on, the knowledge of Python basics can be seen in front of my blog, and the knowledge of Python web framework will start to update after learning the front end.

First, the related concepts of HTML

HTML is Htyper text Markup language is Hypertext Markup Language, text refers to the page can contain pictures, links, and even music, programs and other non-text elements, and markup language: that is, tags (tags) constitute the language.

Web pages are equivalent to HTML documents, parsed by the browser, used to display static Web pages, such as static resources, such as xxx.html, Dynamic Web pages are HTML code that is generated dynamically by a development language based on user requests.

What is a label:

• is made up of a pair of bracketed words. For example:
• Labels are case-insensitive .
• The label is divided into two parts: start tag <a> and end tag </a>. The part between the two tags we call the label body.
• Some labeling functions are simple. Use a label. This label is called a self-closing and label. For example: <br/>
• tags can be nested. But cannot cross-nest.

Properties of the Label:

• Usually occurs as a key-value pair. Like Name= "Alex."
• Attributes can only be present in the start tag or in the self-closing and label.
• Attribute names are all lowercase. * Attribute values must be wrapped in double or single quotes such as name= "Alex"
• If the property value is exactly the same as the property name. Write the property name directly. e.g. ReadOnly

Block-level labels and inline labels

Block-level label:<p>

Inline Tags: <a><input><sub><sup><textarea><span>

Features of block (blocks) elements
① always start on a new line;
② height, row height, margin and inner margin can be controlled;
The ③ width defaults to 100% of its container unless a width is set.
④ it can accommodate inline elements and other block elements

Features of the inline element
① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

For inline elements, be aware of the following
Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.

Here's a look at the HTML document book

Second, the HTML tag 1, head tag

The

The following tabs are available in the Head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

2. Body tag
The BODY element defines the body of the document. The BODY element contains all the contents of the document (such as text, hyperlinks, images, tables, lists, and so on)
　　 <p id= "abc" >affffdaddddddda</p>  This is a link </a> <ol> # ordered list & lt;li>a</li> <li>b</li> <li>c</li> </ol> <ul> # None 　　　　　　　Sequence table <li>a</li> <li>b</li> <li>c</li> </ul> <dl> # Custom list <dt>a</dt> <dd>1</dd> <dd>2</dd> <dd> 3</dd> </dl> <table border= "2px" cellpadding= "1" cellspacing= "1" > # table, Border, padding, margin <thea                D> Forms </thead> # thead and tbody can be used without writing <tr> <td> a </td>            <td> two </td> <td> three </td> </tr> <tbody>    <tr>            <td>1</td> <td colspan= "2" >2,3</td> # Merge Cells </tr > <tr> <td>4</td> <td>5</td> <                TD rowspan= "2" >6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </tbody> </table>
3. Form Label
Forms are used to transfer data to the server. A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on. Forms can also contain textarea, select, FieldSet, and label elements.
1. Form Properties
HTML forms are used to receive different types of user input, which transmits data to the server when the user submits the form, thus enabling the user to interact with the Web server. Form label, all content to be submitted should be in that tag.
Action: Where the form is submitted. Generally point to the server side of a program, the program receives the form submitted by the data (that is, the form element value) for the corresponding processing, such as Https://www.sogou.com/web
Method: How the form is submitted post/get default value is get (envelope)
Get:1. Committed key-value pairs. Put it in the address bar after the URL. 2. The security is relatively poor. 3. There is a limit to the length of submissions.
Post:1. Committed key-value pairs are not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited.
Get/post is a common two-way request.
2. Form elements
<input> Type:
Text input Box
Password Password entry box
Radio Radio Box
CheckBox multiple Marquee
Submit button
button (need to use with JS.) What is the difference between button and submit?
File submission: Form form needs to add attribute enctype= "Multipart/form-data"
In the form submission, be sure to specify what the name and value are in the form
Name
The key for the form submission item. Note the difference from the id attribute: The name attribute is the one used when communicating with the server, and the id attribute is the name used by the browser side, which is primarily intended for client programming and is used in CSS and JavaScript.
Value
The value of the form submission item. The Value property uses different values for different input types:
Type= "button", "Reset", "submit"-defines the displayed text on the button
Type= "text", "Password", "hidden"-defines the initial value of the input field
Type= "checkbox", "Radio", "image"-defines the value associated with the input
Checked:radio and checkbox are selected by default
ReadOnly: Read only. Text and password
Disabled: It works for the input you use.
3. <select> drop-down tab properties:
Name: The key of the form submission item.
Size: Number of options
Multiple:multiple
<option> drop-down check each of the properties: value: The values of the form submission item. Selected:selected drop-Down is selected by default
<optgroup> for each item plus grouping
4. <textarea> Text field name: The key of the form submission item. COLS: How many columns the text field defaults to rows: How many rows the text field defaults to
5. <label>
<label for="www"> name </label>
<input id="www" type="text">    
6. <fieldset>
<fieldset>
<legend> Login bar </legend>
<input type="text">
</fieldset>
<form action= "" method= "" enctype= "Multipart/form-data" > Username<input type= "text" name= "Query" > <br> password<input type= "password" name= "PD" > <br> male <input type= "Radio" name  = "Sex" value= "male" > Female <input type= "Radio" name= "Sex" value= "female" > <br> basketball <input        type= "checkbox" name= "Hobby" value= "basketball" > Soccer <input type= "checkbox" name= "hobby" value= "soccer" > <p><input type= "button" value= "buttons" ></p> <p><input type= "file" Name= "file_name" >& lt;/p> <select name= "It" > <optgroup label= "It" > <option value= "java" ;java</option> <option value= "C + +" >C++</option> <option value= "C" >c& lt;/option> </optgroup> </select> <br> <textarea name= "textarea" &G T    </textarea>    <p> <label for= "in" > Name </label> <input id= "in" type= "text" > <            /p> <p><input type= "Submit" value= "Submission" ></p> <fieldset style= "width:200px" >  <legend >Python</legend> <input type= "text" > </fieldset> </form>
Additional Knowledge points
1, Border-collapse:collapse; if possible, the borders are merged into a single border. The Border-spacing and Empty-cells properties are ignored.
2, border-spacing:5px; Border-spacing property sets the distance between the borders of adjacent cells (for border detach mode only)
3. The caption element defines the table title, and the caption tag must immediately follow the table label
4, Clear:both, the left and right sides are not allowed to float elements.
5, <input type= "Radio" name= "Gender" value= "male" checked> male checked will be selected by default
6. <option value= "Fiat" Selected>fiat</option> selected is selected by default
Python full stack development 12, HTML