Front-end overview

import socket

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

    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

        connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))

        connection.close()

if __name__ == '__main__':

    main()

The relationship between html css and js

Learning HTML

What is HTML?

htyper text markup language is hypertext markup language

Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs.

Markup Language: The language of tags (tags).

Web page == HTML document, parsed by the browser, used to display

Static webpage: static resources, such as xxx.html

Dynamic web pages: HTML code is dynamically generated by a certain development language according to user requests

HTML document tree structure diagram:

what is a label

It consists of a pair of words enclosed in angle brackets. For example: <html> *Words in all tags cannot start with a number.
Tags are not case sensitive. <html> and <HTML>. Lowercase is recommended.
The tag is divided into two parts: the opening tag <a> and the closing tag </a>. The part between the two tags is called the tag body.
Some tags are relatively simple. Just use one tag. These tags are called self-closing and tags. For example: <br/> <hr/> <input /> <img />
Tags can be nested. But they cannot be nested. <a><b></a></b>

attributes of tags

Usually in the form of key-value pairs. For example name="alex"
Attributes can only appear in opening tags or self-closing and tags.
Attribute names are all lowercase. *Attribute values must be enclosed in double or single quotes e.g. name="alex"
If the attribute value is exactly the same as the attribute name. Just write the attribute name directly. For example, readonly

<!DOCTYPE html> tag

Due to historical reasons, there are differences in the rendering of pages by various browsers, and even in different versions of the same browser, the rendering of pages is also different. Before the
introduction of the W3C standard, browsers did not have a unified standard for rendering pages, resulting in differences (Quirks mode or Compatibility
Mode). Strict mode is also called Standard
mode), which is the simplest difference between the two.
After the launch of the W3C standard, browsers have begun to adopt the new standard, but there is a problem of how to ensure that the old web pages can continue to be browsed. Before the standard came out,
many pages were written according to the old rendering method. Rendering will cause the page to display abnormally. In order to maintain the compatibility of browser rendering so that
previous pages can be browsed normally, browsers retain the old rendering method (eg, Microsoft's IE). In this way, the browser rendering produces Quircks mode
and Standards mode, and the two rendering methods coexist on one browser.

window.top.document.compatMode：
//BackCompat: Weird mode, the browser uses its own weird mode to parse and render the page.
//CSS1Compat: Standard mode, the browser uses the W3C standard parsing to render the page.

This property will be recognized and used by browsers, but if your page does not have a DOCTYPE declaration, then compatMode defaults to BackCompat,

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 you add <!DOCTYPE html> to your page, then it is equivalent to turning on the standard mode, then the browser must honestly follow the W3C

Standard parsing renders the page so that your page looks the same in all browsers.

That's what <!DOCTYPE html> does.

head tag

<meta>

The composition of the meta tag: The meta tag has two attributes, which are the http-equiv attribute and the name attribute. Different attributes have different parameter values. These different parameter values realize different web page functions.

1: The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.

 
            <meta name 
            = 
            "keywords"  
            content 
            = 
            "meta总结,html meta,meta属性,meta跳转" 
            > 
           
            <meta name 
            = 
            "description"  
            content 
            = 
            "老男孩培训机构是由一个老的男孩创建的" 
            >

2: http-equiv, as the name suggests, is equivalent to the file header function of http. It can send back some useful information to the browser to help display the content of the web page correctly and accurately. The corresponding attribute value is content, the content in content In fact, it is the variable value of each parameter.

 
            <meta http 
            - 
            equiv 
            = 
            "Refresh"  
            content 
            = 
            "2;URL=https://www.baidu.com" 
            >  
            / 
            / 
            (注意后面的引号，分别在秒数的前面和网址的后面) 
           
            <meta http 
            - 
            equiv 
            = 
            "content-Type"  
            charset 
            = 
            UTF8"> 
           
            <meta http 
            - 
            equiv  
            =  
            "X-UA-Compatible"  
            content  
            =  
            "IE=EmulateIE7"  
            / 
            >

Note: X-UA-Compatible

Each major version of IE adds features to make the browser easier to use, increase security, and support industry standards. Feature these as IE, which
One risk is that older versions of the site may not display correctly.

To minimize this risk, IE6 allows web developers to choose how IE compiles and displays their web pages. "Quirks mode" is the default, this will
"Standards mode" (also known as "strict mode") features the most complete support for industry standards, enabling pages to be displayed from the viewpoint of older browsers.
However, to take advantage of this enhanced support, web pages must contain the appropriate <! DOCTYPE > directive.

If a web page does not contain a <! DOCTYPE > directive, IE6 will display it in quirks mode. If the page contains a valid <! DOCTYPE > directive but the browser
If it is not recognized by the browser, IE6 will display it in IE6 standards mode. Because a few sites already contain the <! DOCTYPE > directive, compatibility mode's
The switch was quite successful. This enables web developers to choose the best time to move their web pages to standards mode.

Over time, more websites started using standards mode. They also started to use IE6 features and functions to detect IE. For example, IE6
Universal selector (ie, css global selector * {}) is not supported, and some websites use it to do specific correspondence for IE.

When IE7 added support for global selectors, websites that depended on IE6 features were unable to detect this new version of the browser. So those targeting IE
Certain mappings do not work in IE7, causing these sites to not display as they intended. Since <! DOCTYPE > supports only two compatibility modes, it is affected by
Severe website owners were forced to update their websites to support IE7.

IE8 supports industry standards more than any previous browser, so pages designed for older browsers may not render as expected. to help
To help alleviate all problems, IE8 introduces the concept of file compatibility, which enables you to choose the specific version of IE your web design should correspond to. File compatibility increased in IE8
There are some new modes that tell the browser how to parse and compile a web page. If your web page cannot be displayed correctly in ie8, you can update
Make your site support the latest web standards (preferred) or add a meta element to your page that tells IE8 how to follow older browsers
Compile your page.

This allows you to choose when to update your website to support the new features of IE8.

When Internet Explorer 8 encounters a web page that does not contain an X-UA-Compatible header, it will use the <! DOCTYPE > directive to determine
how to display the page. If this directive is missing or does not specify a standards-based document type, Internet Explorer 8 will run in IE5 mode
(Quirks mode) to display the web page.

non-meta tags

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

body tag

A basic tag ( block-level tags and inline tags )

<hn>: The value range of n is 1~6; from large to small. It is used to represent the title.

<p>: Paragraph tag. Wrapped content is wrapped. There is also a blank line between the top and bottom content.

<b> <strong>: Bold tags.

<strike>: Add a centerline to the text.

<em>: Text becomes italic.

<sup> and <sub>: Superscript and subscript tables.

<br>: newline.

<hr>: horizontal line

<div><span>

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

Features of the block element

Always starts on a new line; the
width defaults to 100% of its container unless a width is specified.
It can hold inline elements and other block elements

Features of inline elements

and other elements on one line; the
width is the width of its text or image, immutable
inline elements can only hold text or other inline elements

Special characters

< >；"；©®

Two graphics tags: <img>

src: The path to the image to display.

alt: The prompt when the image is not loaded successfully.

title: The prompt message when the mouse is hovering.

width: the width of the image

height: the height of the image (only one of the two properties of width and height will be automatically scaled proportionally.)

Three hyperlink tags (anchor tags) <a>

href: The format of the resource path to be connected is as follows: href="http://www.baidu.com"

target: _blank : Open the hyperlink in a new window. Frame name: Open the link content in the specified frame.

name: defines a bookmark for a page.

For jump href : #id. (anchor)

Four list labels:

<ul>: unordered list

<ol>: ordered list
         <li>: Each item in the list.

<dl> Definition list

         <dt> List title
         <dd> list item

Five table tags: <table>

border: table border.

cellpadding: padding

cellspacing: margins.

width: pixel percentage. (It is best to set the length and width through css)

<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 (ie merged cells)

<th>: table header <tbody> (not commonly used): partition the table.

Six form tags <form>

Forms are used to transmit data to the server.

Forms can contain input elements such as text fields, checkboxes, radio buttons, submit buttons, and more.

Forms can also contain textarea , select, fieldset , and label elements .

1. Form properties

　　HTML forms are used to receive different types of user input and transmit data to the server when the user submits the form, thereby realizing the interaction between the user and the Web server. The form tag, all content to be submitted should be in this tag.

action: where the form is submitted to. Generally, it points to a program on the server side, and the program receives the data submitted by the form (ie, the value of the form element) for corresponding processing, such as https://www.sogou.com/web

method: The form submission method post/get The default value is get (envelope)

get: 1. The submitted key-value pair. Put it behind the url in the address bar. 2. The security is relatively poor. 3. There is a limit to the length of the submitted content.

post: 1. The submitted key-value pair is not in the address bar. 2. The security is relatively high. 3. There is theoretically no limit to the length of the submitted content.

get/post are two common request methods.

2. Form elements

<input> tag attributes and corresponding values

type: text text input box

             password password input box

             radio radio button

             checkbox checkbox  

             submit submit button            

             button button (need to be used with js.) The difference between button and submit?

             file submit a file: the form form needs to add the attribute enctype="multipart/form-data"   

 name: The key of the form submission item. Note the difference with the id attribute: the name attribute is the name used when communicating with the server; and the id attribute is the name used by the browser, which is mainly for the convenience of customers.
          client-side programming, while using in css and javascript

value: The value of the form submission item. For different input types, the value attribute is used differently:

 
             type 
             = 
             "button" 
             ,  
             "reset" 
             ,  
             "submit"  
             -  
             定义按钮上的显示的文本 
            
             type 
             = 
             "text" 
             ,  
             "password" 
             ,  
             "hidden"  
             -  
             定义输入字段的初始值 
            
             type 
             = 
             "checkbox" 
             ,  
             "radio" 
             ,  
             "image"  
             -  
             定义与输入相关联的值

checked: radio and checkbox are checked by default

 readonly: read only. text and password

 disabled: good for all inputs used.

Note two points when uploading files:

1 The request method must be post

2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

<select> drop-down selection tag attributes

          name: The key of the form submit item.

          size: the number of options

          multiple：multiple

                 <option> Drop down each attribute selected:

                       value: the value of the form submission item. selected: selected drop-down selection is selected by default

                 <optgroup> group each item

<textarea> text area

name: The key of the form submit item.

cols: how many columns the text field has by default

rows: how many rows the text field has by default

<label>

<fieldset>

 
            <fieldset> 
           
            <legend>登录吧< 
            / 
            legend> 
           
            < 
            input  
            type 
            = 
            "text" 
            > 
           
            < 
            / 
            fieldset>

Introduction to HTML