HTML introduces the nature of Web services
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
The browser sends the request--the HTTP protocol--the server receives the request--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 pages according to rules, and browsers render our pages according to rules. For different browsers, there may be different interpretations of the same tag. (compatibility issues)
Web page file extension:. html or. htm
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>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css style priority</title>
</head>
<body>
</body>
</html>
<! DOCTYPE Html> is declared as a HTML5 document.
<title>, </title> defines the page title, which is displayed in the browser title bar.
The text between <body> and </body> is visible as the main content of the page.
Note: for Chinese web pages it is necessary to use <meta charset= "Utf-8" > declaration encoding, otherwise garbled characters will appear. Some browsers will set GBK as the default encoding, then you need to set <meta charset= "GBK" >.
HTML tag format
HTML tags are keywords surrounded by angle brackets, such as
HTML tags are usually paired, such as:<div> and </div> The first tag is the start and the second is the end. The end tag will have a slash.
Also some of the labels are presented separately, such as:<br/>,
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: The unique id,html that defines the label unique in the document tree
Class: Defines one or more classes names (classname) for HTML elements (CSS style class names)
Style: The inline style of the specified element (CSS style)
HTML annotations
<!--comment Content--
Comments are the mother of the code. --excerpt from the quotes
<! 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.
Common tags in the head of common HTML tags
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
META tags
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 later jump to the corresponding URL, pay attention to the quotes -->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--Specify the encoding type of the document -->
<meta http-equiv="content-Type" charset=UTF8">
<!-- Tell IE to render the document in the most advanced 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 attribute, 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 label</p>
<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Title 6</h6>
<!--Line break-->
<br>
<!--Horizontal--><hr>
Special characters
content corresponding Code
Space
> >
< <
& &
￥ ¥
Copyright ©
Registered ®
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
<img src="path of the picture" alt="prompt when the picture is not loaded successfully" title="prompt information when the mouse is hovering" width="wide" height="high" (the width and height of the two attributes are only used one will automatically wait Than zoom)">
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.
URL
<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>The first item</li>
<li>Second item</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>The first item</li>
<li>Second item</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>Order</th>
<th>Name</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>Pole</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.
From django.conf.urls import url
From django.shortcuts import HttpResponse
Def upload(request):
Print("request.GET:", request.GET)
Print("request.POST:", request.POST)
If request.FILES:
Filename = request.FILES["file"].name
With open(filename, ‘wb‘) as f:
For chunk in request.FILES[‘file‘].chunks():
F.write(chunk)
Return HttpResponse (‘Upload success ‘)
Return HttpResponse("received!")
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">username</label>
<input type="text" id="username" name="username">
</form>
TextArea multiple lines of text
<textarea name="memo" id="memo" cols="30" rows="10">
Default content
</textarea>
Property Description:
Name: Names
Rows: Number of rows
COLS: Number of columns
Disabled: Disable
HTML content of the Frontend knowledge
