Python development [front-end]: HTML and python development front-end
HTML
HTML is short for Hyper Text Mark-up Language (Hypertext Markup Language). It is a standard Language for making web pages ). It is equivalent to defining a unified set of rules, and everyone will follow them, so that the browser can explain it according to the markup language rules.
The browser is responsible for translating tags into the format that users can understand and present them to users! (Example: djangomoan template engine)
Standard Template:
<! DOCTYPE html> # Standard SpecificationDoctype Standard
Doctype tells the browser what html or xhtml specifications are used to parse html documents
There is no difference
This attribute will be recognized and used by the browser. However, if your page does not have a DOCTYPE declaration, compatMode is BackCompat by default, this is the beginning of the Devil-the browser parses and renders the page in its own way, then different styles will be displayed in different browsers. If your page is added, it is equivalent to enabling the standard mode, so the browser has to honestly parse and render the page according to W3C standards, your page is displayed in all browsers.
Yes. What is it used?
<Head> page header
Meta (metadata information)
Provides metadata about the page, for example, page encoding, refresh, jump, description and keywords for search engines and update frequency.
Page code (tell the browser what code it is)
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
Refresh and redirect
<Meta http-equiv = "Refresh" Content = "30"> 30 seconds Refresh <meta http-equiv = "Refresh" Content = "5; Url = http://www.autohome.com.cn"/>
Keywords
<Meta name = "keywords" content = "Star 2, old interstellar boy, interview, F91, light color, JOY">
Description
Example: cnblogs
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Microsoft's IE6 was released through XP, Win2003, and other operating systems. As a dominant desktop operating system, Internet Explorer also occupies the status of notification. When many websites were developed, it is developed according to IE6 standards, and IE6's own standards are also defined by Microsoft. When IE7 came out, it adopted Microsoft internal standards and some W3C standards. At this time, when many websites were upgraded to IE7, it was quite painful. After many codes had to be adjusted, to run normally. In Microsoft's IE8 version, the standards defined by Microsoft are basically abandoned, and W3C standards are fully supported due to a thorough change in standards, websites that were previously accessible in earlier versions of IE8 cannot be normally accessed in IE8, resulting in various compatibility errors such as typographical disorder, overlapping texts, and incomplete display.
Compared with any earlier browser versions, Internet Explorer 8 provides closer support for industry standards. Therefore, Websites designed for earlier versions of browsers may not be displayed as expected. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, allowing you to specify the version of Internet Explorer supported by the site. New modes are added to Internet Explorer 8 for document compatibility. These modes tell the browser how to interpret and present the website. If your site cannot be correctly displayed in Internet Explorer 8, you can update the site to support the latest Web standards (preferred ), you can also force Internet Explorer 8 to display the content by viewing the site in the browser of the old version. You can use the meta element to add the X-UA-Compatible header to the webpage.
When Internet Explorer 8 encounters a webpage that does not contain the X-UA-Compatible header, it uses commands to determine how to display the webpage. If this command is missing or a standard-based document type is not specified, Internet Explorer 8 displays the webpage in IE5 mode (Quirks mode ).
Title Tag
Webpage header information
Link label
<!--css-->< link rel="stylesheet" type="text/css" href="css/common.css" ><!--icon-->< link rel="shortcut icon" href="image/favicon.ico">
Style label
Write styles on the page
Example: <style type = "text/css">. bb {background-color: red;} </style>
Script tag
<! -- Import file --> <script type = "text/javascript" src = "http://www.googletagservices.com/tag/js/gpt.js"> </script> <! -- Write js code --> <script type = "text/javascript">... </script>
<Body> page subject
Tags are generally divided into two types: block-level labels and intra-Row labels.
Special symbols
More-"http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
P and br labels
<P> paragraph </p> <! -- P indicates a paragraph. By default, there is an interval between paragraphs! --> <Br/> <! -- Br is a line break -->
A tag
<A href = "http://www.autohome.com.cn"> </a> 1. target attribute, _ black indicates opening 2.
H tag
Titles h1, h2, h3, h4, h5, h6, and h7 indicate different sizes
Span tag
Intra-row label-Whiteboard
Div tag
Block-level label-whiteboard, you can add attributes and then transform
Form tag
Form is equivalent to a form. With the input tag submit, the content of the form can be submitted to the specified position. The submitted content is submitted in dictionary form {'user': xx, 'email ': xx, 'pwd': xx}. The key value is the name attribute value.
<form action="http://localhost:8888/index" method="post" ></form>
Action indicates the submission action. Data is submitted to the specified path. methon specifies the submission type. The default value is get.
Difference between post and get:
The default method is the get type. The data is included in the html header for submission. It is displayed in the form of clicking submit and viewing the submitted data form content in the external url path. The effect is as follows:
http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123
If the method is set to post, the data will be included in the html body for submission. The information in the method cannot be seen from the outside.
No one is safe to say about the two, because packet capture can catch
Input series labels
Combined use of input and form
<Body> <form action = "http: // localhost: 8888/index" method = "post"> <span> User: </span> <input type = "text" name = "user"> <br/> <span> Email: </span> <input type = "text" name = "email"> <br/> <span> password: </span> <input type = "password" name = "pwd"> <br/> <input type = "button" value = "cannot be submitted"> <input type =" submit "value =" submit "> </form> </body>
Tornado script used in combination (data submission address)
#!/usr/bin/env python# -*- coding:utf-8 -*-#-Author-Lianimport tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler): def get(self): print("get") u = self.get_argument("user") e = self.get_argument("email") p = self.get_argument("pwd") print(u,e,p) def post(self,*args,**kwargs): print("post") u = self.get_argument("user") e = self.get_argument("email") p = self.get_argument("pwd") print(u,e,p)application = tornado.web.Application([ (r"/index", MainHandler),])if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start()Form data receiving end. py
Page effect:
After you click submit, the tornado script displays the following results:
postlianzhilei James@123.com 123123
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
