On-the-ground python "13th chapter": HTML and CSS styles for Web front-end Basics

On-the-ground Python "14th chapter": The HTML and CSS style of Web front-end Foundation The essence of Web framework

As we all know, for all Web applications, is essentially a socket server, the user's browser is actually a socket client.

#!/usr/bin/env python#coding:utf-8  Import Socket  def handle_request (client):    buf = CLIENT.RECV (1024)    client.send ("http/1.1 ok\r\n\r\n")    client.send ("Hello, World")  def Main ():    sock = Socket.socket (socket.af_inet, Socket.) SOCK_STREAM)    sock.bind ((' localhost ', 8000))    Sock.listen (5)      while True:        connection, address = Sock.accept ()        handle_request (connection)        Connection.close ()  if __name__ = = ' __main__ ':    Main ()

From the socket code above to achieve its essence, we can see that the server sent to the client a "Hello, the World", we ran the browser after the same word, we put the code to change

Client.send ("
Second, HTML tags
When we create a new HTML file in Pycharm, the following:
<! DOCTYPE html>
<! doctype> Definition and Usage
First line <! DOCTYPE html>, what is this?
DOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document
<! The doctype> declaration must be the first line in the HTML document, before the 
<! The doctype> declaration is not an HTML tag; it is a directive that instructs the Web browser to write which HTML version of the page to use.
 　 
This element tells the browser that it is itself an HTML document. This tab can only have one page.
Inside the lang= "en" is called the tag internal attribute, which represents this page in English
The 
The header of the document describes various properties and information about the document, including the title of the document, its location in the Web, and its relationship to other documents. Most of the data contained in the header of a document is not actually displayed to the reader as content.
The following tabs are available in the Head section: <base>, <link>, <meta>, <script>, <style>, and <title>.
<title> defines the title of the document, which is the only required element in the head section.
Attention:
1, the 
2. Remember to always set a title for your document!
<meta> Tags
1, provide meta-information about the page, such as: page encoding, refresh, jump, search engine and update the frequency of the description and keywords
2, page encoding (tell the browser what encoding)
< meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
3. Refresh and jump
< meta http-equiv= "Refresh" content= "30″>
< meta http-equiv= "Refresh" content= "5; Url=http://www.autohome.com.cn "/>
4. Key words
< meta name= "keywords" content= "StarCraft 2, star old boy, interview, F91, small color, JOY" >
5. Description
< meta name= "description" content= "This is my Python blog" >
<Title> tags
Web header information
<Link> tags
Css
< link rel= "stylesheet" type= "Text/css" href= "Css/common.css" >
Icon
< link rel= "shortcut icon" href= "Image/favicon.ico" >
<Style> tags
Write a style on a page
For example:
< style type= "Text/css" >
. bb{
background-color:red;
}
</style> <Script> Tags
Introduction of documents
< script type= "Text/javascript" src= "Http://www.googletagservices.com/tag/js/gpt.js" > </script >
Write JS code
< script type= "Text/javascript" > ... </script >
Third, the common label
First, the label is generally divided into two kinds: block-level labels and inline labels
 
     
 
      
 
       
A, span, select, etc.
 
       
Div, H1, p, etc.
 
      
 
     
The three differences between the elements in the line and the block-level functions
1. The visual difference between inline and block-level elements
Inline elements are arranged in a straight line, all in the same row, arranged horizontally
Block-level elements occupy one line and are arranged vertically. Block-level elements start at the beginning of the new row and then a line break.
2. Block-level elements can contain inline elements and block-level elements. Inline elements cannot contain block-level elements.
3. The difference between the inline element and the block-level element attribute is mainly on the box model attribute
The inline element setting width is invalid, the height is invalid (can be set line-height), margin is invalid, padding up and down invalid
Three, inline elements are converted to block-level elements
Display:block (the literal representation is set to block level)
<p> and <br>
P is the paragraph, there is a gap between the default paragraphs!
BR is line break
<a> tags
< a href= "http://www.autohome.com.cn" > </a>
1. Target property, _black means open on new page
2. Anchor
<H> label H1h2h3h4h5h6<select> labelShanghaiBeijingGuangzhouShanghaiBeijingGuangzhouGuangzhouShanghaiBeijingGuangzhouGuangzhouShijiazhuangHandanTaiyuanPingyao<input type= "checkbox" > Label<input type= "Redio" > Label maleWomanConfidential

ManWomanConfidential<input type= "Password" > tags<input type= "button" > & <input type= "Submit" > tags <input type= "file" > tags
When submitting a file: Enctype= ' multipart/form-data ' method= ' POST '
<textarea> tags<textarea></textarea> <textarea style="width: 500px; height: 200px"></textarea><label> Tag Name:Marriage No: 
Name:Marriage No:<ul>< ol> <dl> Tags
Ul
 
     
 
      
 
       
Ul.li
 
       
Ul.li
 
       
Ul.li
 
      
 
     
Ol
 
     
 
      
 
       
Ol.li
 
       
Ol.li
 
       
Ol.li
 
      
 
     
Dl
 
     
 
      
 
       

         Hebei Province 
       
 
       

         Handan 
       
 
       

         Shijiazhuang 
       
 
       

         Shanxi Province 
       
 
       

         Taiyuan 
       
 
       

         Pingyao 
       
 
      
 
     
<table> tags 
     
 
      
 
       
 
        
1
 
        
2
 
        
3
 
       
 
       
 
        
1
 
        
2
 
        
3
 
       
 
       
 
        
1
 
        
2
 
        
3
 
       
 
      
 
     


 
     
 
      
 
       
 
        
1
 
       
 
       
 
        
1
 
        
2
 
        
3
 
       
 
      
 
      
 
       
 
        
1
 
        
2
 
        
3
 
       
 
       
 
        
1
 
        
2
 
        
3
 
       
 
       
 
        
1
 
        
2
 
        
3
 
       
 
       
 
        
1
 
        
3
 
        
3
 
       
 
       
 
        
3
 
        
3
 
       
 
       
 
        
3
 
        
3
 
       
 
       
 
        
3
 
        
3
 
        
3
 
       
 
      
 
     
<fieldset> tags   Login 
User name:
 
Password:
  <form> Forms
File: enctype= ' multipart/form-data ' method= ' POST '
Four, CSS style
CSS is an abbreviation for the English cascading style sheets, called Cascading style sheets, to beautify the page.
There are three ways to exist: element inline, page embedding, and external introduction, comparing the pros and cons of three different ways.
Syntax: style = ' key1:value1;key2:value2; '
 
     
 
      
 
       
Use style= ' xx:xxx in the label; '
 
       
Embed < style type= "Text/css" > </style > blocks in the page
 
       
Introducing an external CSS file
 
      
 
     
Necessity: The American Union is responsible for the color collocation of the page and the beautification of the picture, and the developer must know how to achieve it.
Tag Selector
div{}
<div > </div>
Class Selector
. bd{}
<div class= ' BD ' > </div>
ID Selector
#idselect {background-color:red;}
<div id= ' Idselect ' > </div>
Association Selector
#idselect p{}
<div id= ' idselect ' > <p> </p> </div>
Combo Selector
input,div,p{}
Property Selector
Input[type= ' text ']{width:100px; height:200px;}
Background 
     
 
      
 
       
Background-color
 
      
 
     
 
     
 
      
 
       
Background-image
 
      
 
     
 
     
 
      
 
       
Background-repeat (NO-REPEAT;REPEAT-X;REPEAT-Y)
 
      
 
     
 
     
 
      
 
       
Background-position
 
      
 
     
Border

Margin
Padding
Display
Display:none
Originalnone
Display:block
contentcontent
Display:inline
Contentcontent
Cursor
Cursor value provided by CSS
Pointer | |  Help | | Wait | | Move | | crosshair
Fake hyperlinks
Pointer
Custom (not normally used)
Mine
Floating LeftRight


LeftRight
On-the-ground python "13th chapter": HTML and CSS styles for Web front-end Basics