Front-end learning (1)

A first need to write a Socket Server　

import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('192.168.1.5',8888))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        connection.recv(1024)
        
        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
        with open('helloworld.html','rb') as f:
            data = f.read()
            connection.sendall(data)

        connection.close()

if __name__ == '__main__':

    main()

　　Create an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

　　In this way the Server run up, you can enter the IP + port number used to access the browser.

Two HTML statement

　　Three Musketeers front end: HTML, js, css

　　1. What are tags?

　　　　. A is wrapped by a pair of angle brackets word, eg: <html> Note: You can not begin with a number;

　　　　. B case insensitive, recommended lower case;

　　　　. C tab has two parts, a start tag <h1>, end tag </ h1>, a portion between the two labels is called the tag body;

　　　　. D Some tags only one, <br/> <hr />, and called a self-closing tag, relatively simple;

　　　　. E nested tags do not cross; <h1> <h2> </ h1> </ h2>

　　2. <! DOCTYPE html> tag

　　　　The browser to render the page in standard mode.

　　3. <meta> tag　　　

< Meta name = "keywords" Content = "front-end learning"> keyword search # 

<Meta name = " the Description Content =" Damon front-end learning " > # For the description of the page 

<meta http-equiv =" Refresh "content = "2; URL = htps: //www.baidu.com "> # for two seconds enough to refresh the page to jump to the page URL in the 

<meta http-equiv = "content -Type, charset = UTFB"> pages of code # format 

<mata http-equiv = "X -UA-compatible content =" IE = EmulateIE7 "> # IE7 browser compatible

　　4. <body> tag　

< HN > : n-the range 1-6; tab font size thereof is gradually decreased, is used to indicate the title;
 < P > : paragraph tags, the content is wrapped wrap, and interlaced between the uplink contents ;
 < B > < strong > : bold tag;
 < Strike > : adding a line in the text; (not recommended)
 < EM > : text italic;
 < SUP > and < Sub > : superscripts and subscripts;
 < br > : wrap;
 < HR > : horizontal line;
 < div > : What features are not; use very much, and is mainly used with CSS;
 < span > : 
special symbols: & nbsp; space
　　　　　& Lt; smaller than & gt; greater than & quot; & copy; & reg; HTML online special symbol table

Block-level tags: one area on the page belong to this tag; <p> <h1> <table> <ol> <ul> <form> <div> tag belongs to a block-level.

Inline tags: really according to the size of your text or image to allocate the area. <a> <input> <img> <sub> <sup> <textarea> <span>

　　5. <img> tag image

src: image path; 

Alt: not load successfully Tip Image 

title: mouse message when suspended in a picture; 

width: Image width control; 

heigth: control of high picture;

　　6. <a> hyperlink tag

href: resource path to be connected, for example: < A the href = "https://www.baidu.com" > Baidu </ A > 

to the present page jump: href = "# id" id is the jump destination tag the id value 

target: open hyperlinks in a new window. target = "_ blank"

　　7. label list

< UL > unordered list
     < Li > </ Li > 
</ UL > 

< OL > ordered list
     < Li > </ Li > 
</ OL > 

< DL > 
    < dt > </ dt > List Header
     < dd > < / dd > list item

　　8.form label

　　Form for transmitting data to the server.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吴静</title>
</head>
<body>
    <h1>hello world</h1>
    <img src="1.jpg" title = "美女" alt="Error">
    <form action="127.0.0.1:8880/damon/" method= "GET" the enctype = "multipart / form-Data" > {#method post method there are used a method for transmitting data} #
        < P > < INPUT type = "text" name = "username" > < / P > {# text entry #} 

        < P > < iNPUT type = "password" name = "password" > </ P > {# text entry #} 

       < P > < iNPUT type = "Button" value = "Press" > </ P >Js used with {#,} to a triggering event # 

        < P > < INPUT type="checkbox" name="hobby" value="1"></p> {#复选框#}
       <p><input type="checkbox" name="hobby" value="2"></p> {#复选框#}

       <p><input type="radio" name="sex" value="0"></p> {#互斥选框#}
       <p><input type="radio" name="sex" value="1"> </ P > {#} mutex box # 

       < P > < INPUT type = "File" > </ P > {#} uploaded # 

       < P > < INPUT type = "RESET" value = "RESET" > < / P > {# input data clear #} 

       < P > < iNPUT type = "file" name = "Test" > </ P >   {# submission (and above enctype used together, method = "post") the need to support the back-end to receive the file. } # 

　　　　< P > < SELECT name = "= "2" > {#multiple for multiple selections to display a maximum of two size} # 
　　　　　　
　　　　　< optgroup label = "Chinese" > 
　　　　　　< Option value = "Beijing" > Beijing </ Option > 
　　　　　　< Option value = "Tianjin" > Tianjin </ the Option > 
　　　　　　< the Option value = "shanghai" > shanghai </ the Option > 
　　　　　</ optgroup > 
　　　　</ the SELECT > </ the p- > 
　　　　< the p- > <textarea rows="6", Cols = ". 5" > mij </ TextArea > </ P > {#. 6 rows 5 #}
　　　　< label for = "Test" > Name </ label > 
　　　　< INPUT ID = "Test" type = "text" > {#lable following tags associated input label, for the id} must be the same as #
　　　　< P > < input type = "Submit" value = "Submit" > </ P > {# #} submit data
     </ form > 
</body>
</html>

　　 get method: Key submitted to the address bar in the back url, less secure, there is a limit on the submission length; the default is get

　　 post method: Key submitted to, high security, for the length of the submission theoretically unlimited;

　　 The input name as the rear end of the incoming data dictionary key, value as the value.

Front-end learning (1)

Guess you like