Translate into code as follows:
Web:ImportSocketdefhandle_request (client): BUF= CLIENT.RECV (1024) Client.sendall (bytes ("http/1.1 201 ok\r\n\r\n","UTF8")) Client.sendall (bytes ("","UTF8"))defMain (): Sock=Socket.socket (socket.af_inet, socket. Sock_stream) Sock.bind (('localhost', 8082)) Sock.listen (5) whiletrue:connection, Address=sock.accept () handle_request (connection) connection.close ()if __name__=='__main__': Main ()
The code is as follows
The relationship between HTML CSS and JS
What is HTML?
Htyper Text Markup Language is Hypertext Markup language
Hypertext: Refers to the page can contain pictures, links, and even music, programs and other non-text elements.
Markup Language: The language in which tags (tags) are composed.
Web page ==html document, parsed by the browser, used to show the
Static Web pages: Static resources, such as xxx.html
Dynamic Web pages: HTML code is dynamically generated by a development language based on user requests
HTML Document tree structure diagram
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 tag. For example: <br/>
- tags can be nested. But cannot cross-nest. <a><b></a></b>
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
<! DOCTYPE html> Label
Head tag:
- <meta>meta Tags: Meta tags have two properties, respectively, they are the Http-equiv property and the Name property, and different attributes have different parameter values, these different parameter values to achieve a different page function.
1 The Name property is mainly used to describe the Web page, and its corresponding property value is content,content content is mainly convenient for search engine robots to find information and classification information.
<meta name= "keywords" content= "meta Summary, HTML Meta,meta properties, meta jump" >
<meta name= "description" content= "Old boy training institution was created by an old boy" >
2 Http-equiv as the name implies, the equivalent of HTTP file header function, it can send back some useful information to the browser to help correctly and accurately display the content of the Web page, with the corresponding property values for content, contents is actually the variable value of each parameter.
<meta http-equiv= "Refresh" content= "2; Url=https://www.baidu.com ">//(Note the following quotes, respectively, before the number of seconds and after the URL)
<meta http-equiv= "Content-type" content= "Text/html;charset=utf8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
- <title> old boy </title>
- <link rel= "icon" href= "Http://www.jd.com/favicon.ico" > Add an icon
Body tag:
A basic label
<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.
<b> <strong>: Bold label.
<strike>: Add a median line to the text.
<em>: Text becomes italic.
<sup> and <SUB>: Upper corner and lower corner table.
<br>: line break.
<div><span>
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.
Special characters:
< >"©®
Two graphic Tags: :
SRC: The path of the picture to display.
ALT: The picture does not load successfully when prompted.
Title: The message when hovering the mouse.
Width: The width of the picture
Height: The height of the picture (width height Two attributes only one will be automatically equal to zoom.)
Three hyperlink tags (anchor label) <a>:
HREF: The resource path format to be connected is as follows: href= "http://www.baidu.com"
Target: _blank: Opens the hyperlink in a new window. Frame name: Opens the connected content in the specified frame.
Name: Defines a bookmark for a page.
For jumping href: #书签名称.
Four List Labels:
<ul>: Unordered list
<ol>: Ordered list
<LI>: Each item in the list.
<dl> definition List
<dt> List Title
<dd> list Items
Five table Tags: <table>:
Border: Table border.
cellpadding: Inner margin
cellspacing: Margin.
Width: Percentage of pixels. (preferably with CSS to set the length width)
<tr>: Table row
<th>: Table Head cell
<td>: Table Data cell
RowSpan: How many rows the cell spans vertically
colspan: How many columns the cell spans (that is, merged cells)
<th>: Table header <tbody> (infrequently used): partitioning the table.
Six-form label (Django) <form>:
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 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"
defIndex (Request):Printrequest. POSTPrintrequest. GETPrintrequest. FILES forIteminchrequest. Files:fileobj=request. Files.get (item) F= Open (Fileobj.name,'WB') Iter_file=fileobj.chunks () forLineinchIter_file:f.write (line) f.close ()returnHttpResponse ('OK')
View Code
Name: The key of 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 values of the form submission item.
The use of the Value property differs 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.
<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
<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
<label>
<label for="www"> name </label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend> Login bar </legend>
<input type="text">
</fieldset>
"Html-1"