HTML content of the Frontend knowledge

HTML Introduction

The nature of Web services

socket.server.py

Import Socketsk=socket.socket () Sk.bind ('127.0.0.1',8080)) Sk.listen (5) while 1: Conn,addr=sk.accept () data= Conn.recv (9000) print (data) conn.send (b'HTTP 1.1 ok\r\n\r\n') fixed format with open ('test,html','RB') asF:conn.send (F.read ()) Conn.close ()

Test.html

"http://www.sogo.com">sogo</a>

The browser sends the request-->HTTP protocol--the server receives the request--and the server returns the response--the server sends the HTML file content to the browser

-Browser Rendering page

What is HTML?

Hypertext Markup Language (hypertext Markup language,html) is a markup language for creating Web pages

is essentially a browser-aware rule, we write the page according to the rules, the browser renders our web page according to the rules, for different browsers, the same tag may have different interpretations. (compatibility issues)

Web page File extension: HTML (Common) or HTM (not commonly used)

What is HTML?

HTML is a markup Language (markup language), which is not a programming language

HTML uses tags to describe web pages

HTML Document Structure

The most basic HTML document

<! DOCTYPE html>"zh-cn">" UTF-8 ">    <title>css Style priority </title>
1. <! DOCTYPE html> declared as HTML5 document
2. is the beginning and end of the document. is the root element of the HTML page, between them is the head of the document
(head) and body (Boby)
3. defines the beginning of the HTML document, and the content between them is not displayed in the browser's document window.
Contains meta data for the document.
4.<title>,</title> defines the page title, which is displayed in the browser title bar
5. The text between<boby>,</boby> is visible on the page body content
Note: For Chinese web pages need to use <meta charset = ' utf-8 ' > declaration encoding, otherwise garbled.
Some browsers will set GBK as the default encoding, then you need to set it to <meta charset= ' GBK ' >
HTML tag format
HTML tags are keywords surrounded by angle brackets, such as ,<div> , etc.
HTML tags are usually paired, such as:<div> and </div>, the first tag is the start, the second is the end tag, there is a slash
There are also parts that are presented separately, such as:<br/>,, , etc.
Tags can have several properties, or without attributes.
Syntax for tags
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> Content section < tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>
Several very important properties:
ID: Unique in the id,html document that defines the label
Class: Defines one or more classes (classname) for HTML elements (CSS style class name)
Style: The inline style of the specified element (CSS style class name)
HTML comment:<!--comment Content--
<! Doctype> Label
<! 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
HTML Common Tags
Common tags in head

 
 
 
  
  
 
   
 
    
label
 
    
meaning
 
   
 
  
 
  
  
 
   
 
    
<title></title>
 
    
Define page Titles
 
   
 
   
 
    
<style></style>
 
    
Defining an internal style sheet
 
   
 
   
 
    
<script></script>
 
    
Define JS code or introduce an external JS file
 
   
 
   
 
    
<link/>
 
    
Introducing external style sheet files
 
   
 
   
 
    
<meta/>
 
    
Define the original page information
 
   
 
  
 
 
 
Mate label
Meta Tag Introduction:
The <meta> element provides the original information about the page (mata-information), a description of the search engine and the frequency of updates, and keywords.
The <meta> tag is located in the header of the document and does not contain any content.
The information provided by <meta> is not visible to the user.
Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.
1.http-equiv property: Equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter.
<!--2 seconds to jump to the corresponding URL, note the quotation marks--><meta http-equiv="refresh" content="2; url=https://www.oldboyedu.com"><!--the encoding type of the specified document--><meta http-equiv="  Content-type" charset=utf8"><!--tell IE to render documents in superlative mode--><meta http-equiv= " x-ua-compatible " content=" > "ie=edge"
2.name properties: Mainly used to describe the Web page, the corresponding property value of content,content content is mainly for the search engine to find information and classification information.
<meta name= "keywords" content= "meta Summary, HTML Meta,meta properties, meta jump" ><meta name= "description" content= " Old boy Education Python Academy ">
Basic tags (block-level labels and inline tags) used in body
<b> Bold </b><i> Italic </i><u> underline </u><s> Delete </s><p> paragraph tags </p> 
Special characters
 
  
 
  
   
 
    
 
     
content
 
     
corresponding Code
 
    
 
   
 
  
   
 
    
 
     
Space
 
     
&nbsp;
 
    
 
    
 
     
>
 
     
&gt;
 
    
 
    
 
     
<
 
     
&lt;
 
    
 
    
 
     
&
 
     
&amp;
 
    
 
    
 
     
￥
 
     
&yen;
 
    
 
    
 
     
Copyright
 
     
&copy;
 
    
 
    
 
     
Registered
 
     
&reg;
 
    
 
   
 
 
  
div tags and span tags
div tags are used to define a block-level element and have no practical meaning. It is mainly given a different performance by CSS styles.
The span tag is used to define inline (inline) elements and has no practical meaning. It is mainly given a different performance by CSS styles.
The difference between a block-level element and an in-line element:
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.
Attention:
About tag nesting: usually block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
P tags cannot contain block-level labels, nor can p tags contain p tags.
IMG Tags
A label
Hyperlink label
A hyperlink is a link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.
What is a URL? The URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet. URL example http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/ intro.htmlURL address consists of 4 parts part 1th: For protocol: http://, ftp://   Part 2nd: For the site address: can be a domain name or IP address part 3rd: The directory for the page in the site: Stu Section 4: For the page name, for example, index.html the "/" symbol between the sections separated.
<a href= "http://www.oldboyedu.com" target= "_blank" > Point me </a>
The href attribute specifies the destination Web page address. The address can have several types:

 
  

  
   
 
    
Absolute URL-point to another site (such as href= "http://www.jd.com)
 
    
Relative URL-refers to the exact path in the current site (href= "index.htm")
 
    
Anchor URL-point to anchor in page (href= "#top")
 
   
 
  
Target

 
  

  
   
 
    
_blank to open the destination page in a new tab page
 
    
_self indicates that the destination page is open in the current tab page
 
   
 
  
List
1. Unordered list
<ul type= "disc" >  <li> First </li>  <li> second </li></ul>
Type property:

 
  

  
   
 
    
Disc (solid dot, default value)
 
    
Circle (Hollow Circle)
 
    
Square (solid block)
 
    
None (no style)
 
   
 
  
2. Ordered list
<ol type= "1" start= "2" >  <li> First </li>  <li> second </li></ol>
Type property:

 
  

  
   
 
    
1 List of numbers, default values
 
    
A Capital Letter
 
    
A lowercase letter
 
    
Ⅰ Capital Rome
 
    
Ⅰ Small Roman
 
   
 
  
3. Title List
<dl>  <dt> title 1</dt>  <dd> content 1</dd>  <dt> title 2</dt>  <dd > Content 1</dd>  <dd> content 2</dd></dl>
Form
A table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.
The basic structure of the table:
<table>  <thead>  <tr>    <th> serial number    </th> <th> name </th>    <th> Hobbies </th>  </tr>  </thead>  <tbody>  <tr>    <td> 1</td>    <td>Egon</td>    <td> bar Niang </td>  </tr>  < Tr>    <td>2</td>    <td>Yuan</td>    <td> Day </td>  </tr>  </tbody></table>
Property:

 
  

  
   
 
    
Border: Table border.
 
    
cellpadding: Inner margin
 
    
cellspacing: Margin.
 
    
Width: Percentage of pixels. (preferably with CSS to set the length width)
 
    
RowSpan: How many rows the cell spans vertically
 
    
colspan: How many columns the cell spans (that is, merged cells)
 
   
 
  
Form
Function:
Forms are used to transfer data to the server, enabling users to interact with the Web server
The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain textarea, select, FieldSet, and label labels.
Form Properties

 
  
 
  
   
 
    
 
     
Properties
 
     
Description
 
    
 
    
 
     
Accept-charset
 
     
Specifies the character set used in the submitted form (default: page character set).
 
    
 
    
 
     
Action
 
     
Specifies where to submit the form's address (URL) (Submit page).
 
    
 
    
 
     
AutoComplete
 
     
Specifies that the browser should automatically complete the form (default: On).
 
    
 
    
 
     
Enctype
 
     
Specifies the encoding of the data being submitted (default: url-encoded).
 
    
 
    
 
     
Method
 
     
Specifies the HTTP method (default: GET) that is used when the form is submitted.
 
    
 
    
 
     
Name
 
     
Specifies the name of the recognition form (for DOM use: document.forms.name).
 
    
 
    
 
     
Novalidate
 
     
Specifies that the browser does not validate the form.
 
    
 
    
 
     
Target
 
     
Specifies the destination of the address in the Action property (default: _self).
 
    
 
   
 
 
  
Form elements
Basic concepts:
HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.
Forms are typically used to collect user input information
How the form works:
When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.
This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information.
Django Receives upload file code
 fromdjango.conf.urls Import URL fromdjango.shortcuts Import httpresponsedef Upload (Request): Print ("request. GET:", request. GET) Print ("request. POST:", request. POST)ifrequest. Files:filename= Request. files["file"].name with open (filename,'WB') asF: forChunkinchRequest. files['file'].chunks (): F.write (chunk)returnHttpResponse ('Upload Successful')    returnHttpResponse ("I got it! ") Urlpatterns=[url (r'^upload/', upload),]
Input
The <input> element changes to a variety of patterns based on the different type attributes.

 
   td> Password input box 
     

  
   
 
    
 
     
Type property Value
 
     
form of expression
 
     
corresponding Code
 
    
 
   
  
   
 
    
 
     
 text 
 
     
 single line Input text 
 
     
 <input type=text "/> 
 
    
 
    
 
     
 password 
 <input type= "password"  /> 
 
    
 
    
 
     
 date 
 
     
 date input box 
 
     
 <INP UT type= "date"/> 
 
    
 
    
 
     
 checkbox 
 
     
 check box 
 
     
 <input type= "checkbox" checked= "checked " /> 
 
    
 
    
 
     
 Radio 
 
     
 Radio 
 
     
 <input type=" Radio " /> 
 
    
 
    
 
     
 Submit 
 
     
 Submit Button 
 
     
 <input type= "Submit" value= "commit"/> 
 
    
 
    
 
     
 Reset 
 
     
 reset button 
 
     
 <input type= "reset" value= "reset"  /> 
 
    
 
    
 
     
 button 
 
     
 normal button 
 
     
 <input type= "button" value= "normal button"  /> 
 
    
 
    
 
     
 hidden 
 
     
 Hide Input box 
 
     
 <input type= "hidden"  /> 
 
    
 
    
 
     
 file 
 
     
 text selection box 
 
     
 <input type= "file"  /> 
 
    
 
   
 
  
Property Description:

 
  

  
   
 
    
Name: the "key" when the form was submitted, the difference between the notice and the ID
 
    
Value: Values for the corresponding item when the form is submitted 
     
 
      
Type= "button", "Reset", "submit" when the text is displayed on the button for the year content
 
      
Type= "text", "Password", "hidden" when the initial value of the input box
 
      
Type= "checkbox", "Radio", "File", the value associated with the input
 
     
 
    
Checked:radio and checkbox are selected by default
 
    
Readonly:text and password set read-only
 
    
Disabled: All input is available
 
   
 
  
Select Label
<form action= "" method= "post" >  <select name= "City" id= "City" >    <option value= "1" > Beijing </ option>    <option selected= "selected" value= "2" > Shanghai </option>    <option value= "3" > Guangzhou </ option>    <option value= "4" > Shenzhen </option>  </select></form>
Property Description:

 
  

  
   
 
    
Multiple: Boolean property, set to multiple selection, otherwise the default radio
 
    
Disabled: Disable
 
    
Selected: This item is selected by default
 
    
Value: Defines the option value at commit
 
   
 
  
Label label
Define the:<label> label to define the callout (tag) for the INPUT element.
Description

 
  

  
   
 
    
The label element does not present any special effects to the user.
 
    
The For property value of the <label> tag should be the same as the id attribute value of the related element.
 
   
 
  
<form action= "" >  <label for= "username" > user name </label>  <input type= "text" id= "username" Name= "username" ></form>
TextArea multiple lines of text
<textarea name= "Memo" id= "Memo" cols= "rows=" >  default Content </textarea>
Property Description:

 
  

  
   
 
    
Name: Names
 
    
Rows: Number of rows
 
    
COLS: Number of columns
 
    
Disabled: Disable
 
   
 
  
HTML content of the Frontend knowledge