Category:Python Web
Article From:

HTML First acquaintance

webService essence

Copy code
import socket

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    while True:
        print("server is working.....")
        conn, address = sock.accept()

        request = conn.recv(1024)

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))

if __name__ == '__main__':

Copy code

htmlWhat is it?

  • Hypertext Markup Language (HTML) is passed.Label languageTo mark the parts of the page that you want to display. A set of rules, rules for browsers
  • The browser renderings the web page in sequence, and then explains and displays the content according to the symbol. But it should be noted that different browsers may have different interpretations (compatibility) for the same tag.
  • Static web page file extension:.Html or.Htm

htmlIt’s not what?

HTML It is not a programming language, but a markup language.
HTML Using tag tags to describe a web page



  • <!DOCTYPE html> Tell the browser what HTML or XHTML to parse the HTML document.
  • <html></html>It is the start and end mark of the document. This element tells the browser that it itself is an HTML document, which is the head of the document < head> and the main body < body>
  • <head></head>The element appears at the beginning of the document. The content between < head> and < /head&gt will not be displayed in the browser’s document window, but the elements therein are of special importance.
  • <title></title>Define the title of the web page and display it in the browser’s title bar. It
  • <body></body>The text between them is a visible content of the web.

htmlLabel format

The syntax of the label:

<The tag name attribute 1= “attribute value 1” attribute 2= “attribute value 2″… > content part < / label name >
<The tag name attribute 1= “attribute value 1” attribute 2= “attribute value 2″… />

Back to the top

Common label


<!DOCTYPE> The declaration is located in the front position of the document, before < html> before the tag. This label tells the browser document which HTML or XHTML specification to use.

Function: declare the resolution type (document.compatMode) of the document and avoid the strange mode of browser.


  1. BackCompat:In the weird mode, browsers use their weird patterns to analyze rendering pages.
  2. CSS1Compat:Standard mode, browser uses W3C standard to parse rendering pages.

This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, then compatMode is BackCompat by default.

<head>Internal common label


<meta>The element can provide meta information (meta-information) for the page, for the description and keywords of search engine and update frequency.
<meta>The tag is located on the head of the document and does not contain any content.
<meta>The information provided is not visible to the user.

metaThe composition of the label: the meta label has two attributes, which are the http-equiv attribute and the name attribute, and the different attributes have different parameter values, and the different parameter values make the different web functions. It

(1)nameProperties: mainly used to describe the web page, the corresponding attribute value is content, the content of content is mainly for search engine robot to find information and classified information. Such

<meta name="keywords" content="metaSummary, HTML meta, meta attributes, meta jump ">< meta name= "description" content= "old boy training institution is created by a very old boy" >.

(2)http-equivProperty: equivalent to the HTTP file header, it can send some useful information back to the browser to help correctly display the content of the web page. The corresponding attribute value is content, and the content in content is actually the variable value of the parameters.

<meta http-equiv="Refresh" content="2;URL="> //(Note the quotation marks at the back, respectively, in front of the seconds and behind the URLs.< meta http-equiv= "content-Type" charset=UTF8 ">";< meta http-equiv= "X-UA-Compatible" content = "IE=EmulateIE7" />

 Non meta label

    <link rel="icon" href="">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script> 

<body>Internal common label

Basic label (Block – level and inline Tags

Copy code
<hn>: nThe range of values is 1~6; from large to small, it is used to represent titles.< p>: paragraph labels. The contents of the package are changed, and there is a blank line between the contents.< b> < strong>: a rough label.< strike>: add a middle line to the text.< em>: words are turned into italics.< sup> and < sub>: upper corner and lower corner table.< br>: ChangeThat's ok.< hr>: horizontal lineSpecial characters:& lt; & gt; & quot; & copy; & reg;'' ''
Copy code

<div>And < span>

<div></div> : <div>It’s just a block level element. It has no real meaning. Mainly through the CSS style to give it different performance.
<span></span>: <span>It shows that there is no real meaning in the interbank (intra row element), and it mainly gives different performance to CSS through its style.

The difference between block – level elements and inner elements
The so-called block elements are elements that are rendered from another line, and the elements in the line do not need another row. If you insert these two elements alone, you will not have any impact on the page.
These two elements are specifically designed to define the CSS style.

Graphic label: < img>

Copy code
src: To display the path of the picture.The alt: picture does not have a prompt to load.Title: mouse suspending information.The width of the width: pictureThe height of the height: image (the width and height of the two attributes will be zoomed automatically only by one ratio).''''
Copy code

Hyperlink tags (anchor tags): < a> < /a>

What is a hyperlink?The so-called hyperlink refers to a connection from a web page to a target, which can be either another page or the same webpage.Different locations can also be a picture, an e-mail address, a file, or even an application.
Copy code

<a href="" target="_blank" >click</a>

hrefThe attribute specifies the target page address. There are several types of this address:Absolute URL - pointing to another site (e.g. href= "")Relative URL - refers to the exact path in the current site (HREf= "index.htm")Anchor URL - pointing to the anchor in the page (href= "#top")'' ''
Copy code

List label

Copy code
<ul>: Unordered list [type attribute: disc (solid dot) (default), circle (hollow circle), square (solid block)]< ol>: ordered list< li>: each item in the list.< dl> a list of definitions< dt> list title< dd> list item'' ''
Copy code

Table label: < table>

Table concept
A table is a two-dimensional data space. A table consists of several rows, a row and a number of cells. A cell can contain words, lists, patterns, forms, numeric symbols, preset text and other forms.
The most important purpose of the form is to display tabular data. Tabular data refers to data that is most suitable for organization in tabular format (i.e. rows and columns).
The basic structure of the table:

Copy code
                <td>Title < /td>< td> Title < /td>< /tr>< tr>< td> content < /td>< td> content < /td>< /tR>< /table>
Copy code


Copy code

<tr>: table row

<th>: table head cell

<td>: table data cell

Properties:Border: table border.Cellpadding: inner marginCellspacing: outer margin.Width: pixel percentage. (preferably set width by CSS.)How many rows of rowspan: cell vertical spanHow many columns do colspan: cells span (i.e. merge cells)?'' ''
Copy code


Form label: < form>

      Function: the form is used to transfer data to the server so as to realize the interaction between the user and the Web server.

      The form can contain input series tags, such as text fields, check boxes, check boxes, submit buttons, and so on.

      The form can also contain textarea, select, fieldset and label tags.

form properties

     action: Where the form is submitted. Generally, it points to a program on the server side, and the program receives the data submitted by the form (the form Yuan Suzhi) for the corresponding processing, such as

     method: The form submission mode post/get is get by default.

Form Elements

Basic concepts:
HTMLForm is a more complex part of the HTML element, and forms are often combined with scripts, dynamic pages, data processing and other functions, so it is an important part of making dynamic web sites.
Forms are generally used to collect user input information
The principle of form work:
When browsing a form web page, visitors can fill in the necessary information and submit it by pressing a button. This information is transmitted over the Internet to the server. It
Special programs on the server process these data. If there is an error, the error message will be returned and the error should be corrected. When the data is intact, the server returns an input message.

<input>Series label

Copy code
<1> form types
type: text Text input boxPassword password input boxRadio radio boxCheckbox multi - boxSubmit submission buttonButton button (need to cooperate with JS). What is the difference between button and submit?File submissionFile: the form form needs to add the attribute enctype= "multipart/form-data".Pay attention to two points:The 1 request must be post2 enctype= "multipart/form-data"
<2> form properties
name: The key to the form submission.Notice the difference from the ID attribute: the name property is the name used when communicating with the server.The ID attribute is the name used by the browser side, which is mainly for the convenience of client programming while in CSUsed in S and JavaScriptThe value of the value: form submit item. For different input types, the usage of the value attribute is also different.Type= "button", "reset"," "submit" - defines the text of the display on the buttonType= "text", "password", "hidden" - definition inputThe initial value of a fieldType= "checkbox", "radio", "image" - define the values associated with input.Checked:Radio and checkbox are selected by defaultReadonly: read-only. Text and passwordDisabled: is good for all the input used.'' ''
Copy code


Copy code
 <select> Drop-down label propertiesThe key to the submission of the name: form.Size: the number of optionsMultiple:multiple< optgroup> add groups for each item< option> every attribute of the drop-down:ValThe value of the ue: form submission.Selected: selected dropout default is selected'' ''
Copy code

<textarea> Multiline text box


Copy code

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“Width "rows=" "height" name= "name" >Default content< /textarea>< /form>'' ''
Copy code



Definition: < label> tag defines annotation (mark) for input element.
1 label The element does not present any special effects to the user.
2 <label> The for attribute value of the tag should be the same as the ID attribute value of the related element.

Copy code

<form method="post" action="">

        <label for=“username”>Username < /label>< input type= "text" name= "username" id= "username" size= "20" />< /fOrm>'' ''
Copy code


Copy code

    <legend>Log in to < /legend>< input type= "text" >< /fieldset>'' ''
Copy code


Link of this Article: HTML first acquaintance

Leave a Reply

Your email address will not be published. Required fields are marked *