Thirty-ninth, front-end HTML

HTML Introduction

1.Web service nature

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()

Manual server

　　The requesting browser -> HTTP protocol -> server receives the request -> response returned from the server -> server the HTML file content to the browser -> browser rendering the page

What is 2.HTML

HTML (Hypertext Markup Language, HTML) is a markup language used to create web pages.
Rule browser is recognizable in nature, according to the rules we write the page, the browser rendering our website according to the rules. For different browsers may have different interpretations of the same label. (Compatibility issues)
Web page file name extension: .html or .htm

3.HTML is not

　　HTML is a markup language (markup language), it is not a programming language.

　　HTML uses tags to describe web pages.

4.HTML document structure

The most basic HTML document:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

<! DOCTYPE html> declaration for the HTML5 document.
<Html>, </ html> tag of the document is the beginning and end tags. Is the root element HTML pages, among them the head of the document (head) and body (body).
<Head>, </ head> defines the beginning of the HTML document. Content between them does not appear in the document window browser. It contains documents yuan (meta) data.
<Title>, </ title> defines the page title is displayed in the browser title bar.
<Body>, the text between the </ body> is visible page body content.

　　Note: For Chinese web pages need to use <meta charset = "utf-8"> statement, otherwise it will be garbled. Some browsers set GBK encoding, then you need to set <meta charset = "gbk">.

5.HTML label formats

HTML tags are keywords surrounded by angle brackets, such as the <html>, <div> etc.
HTML tags are usually in pairs, such as: <div> and </ div>, a tag is first started, the second label end. Closing tag will slash.
There is a separate part of the label is also presented, for example: <br/>, <hr />, <img src = "1.jpg" /> and the like.
Labels which can have a number of attributes, attributes may be without.

Tag syntax:

<Tag attribute name = 1 "attribute value 1" Attribute 2 = "attribute value 2" ......> content portion </ tag name>
<Tag attribute name = 1 "attribute value 1" Attribute 2 = "attribute value 2" ...... />

A few very important properties:

id: The unique ID defined tags, HTML document tree unique
class: defining one or more class name for the html element (classname) (CSS style class name)
style: the elements specified inline styles (CSS style)

6.HTML comments

Single-line comments: <- footnotes -!>

Multi-line comments: <!

- footnotes ->

7.HTML commonly used tags

　　The head commonly used tags

label	significance
<title></title>	Define the page title
<style></style>	Internal style sheet definitions
<script></script>	Code or custom JS JS file import external
<link/>	The introduction of an external style sheet file or a Web site icon
<meta/>	The definition of the original web page information

Meta Tags

Meta tags Description:

<Meta> element provides meta-information about the page (mata-information), for the search engines and the frequency of updating the description and keywords.
<Meta> tag at the head of the document does not contain any content.
<Meta> The information provided is invisible to the user.

Consisting of meta tags: meta tag has two attributes, they are http-equiv and name attributes, different attributes have different parameter values, these different parameter values to achieve a different page functions.

1.http-equiv attribute: http equivalent to the role of head of the file, it can be returned to the browser some useful information to help correctly display Web content, the corresponding attribute value content, the content is actually the content of each variable parameter.

<-! Encoding type specified document (need to know) -> 
<Meta HTTP-equiv = "Content-Type" charset = UTF8 ">   
<! - 2 seconds after the jump to the corresponding website, pay attention to the quotation marks (Learn ) -> 
<Meta HTTP-equiv = "Refresh" Content = "2; the URL of = HTTPS: //www.oldboyedu.com"> 
<- tell IE to render the document in the most advanced mode (understand) ->! 
< meta http-equiv = "x- ua-compatible" content = "IE = edge">

2.name properties: mainly used to describe a web page, the corresponding content attribute values, the contents of the main content is to facilitate the search engine robots to find information and the classification information.

<meta name = "keywords" content = "meta summary, html meta, meta attributes, meta jump"> 
<Meta name = "the Description" Content = "Python Education College Old Boys">

Second, the common tag body

Basic tag (block-level tags and labels inline)

<b> bold </ B> 
<I> italics </ I> 
<U> underline </ U> 
<S> Delete </ S> 

<P> paragraph tag </ P> 

<h1 of> Title 1 </ h1 > 
<H2> title 2 </ H2> 
<H3> title. 3 </ H3> 
<H4> title. 4 </ H4> 
<H5> title. 5 </ H5> 
<H6> title. 6 </ H6> 

<! - wrap -> 
<br> 

<-! horizontal line -> <hr>

Special characters

content	Code corresponding
Blank
>	>
<	<
&	&
¥	¥
copyright	©
registered	®

div tags and labels span

div tag is used to define a block-level element, there is no practical significance. Mainly through CSS style giving it a different performance.
span is used to define the inline (inner line) elements, of no practical significance. Mainly through CSS style giving it a different performance.

The difference between block-level elements and inline elements: the
so-called block elements, based on a separate line start-rendered elements, inline elements are not subject to a new line. If a separate insert these two elements in a web page, will not have any impact on the page.
These two elements are defined specifically for the CSS style born.

note:

About nested tags: block elements may typically contain some inline elements or block elements, but the elements can not contain inline block elements, it can contain other inline elements.

p can not contain block-level tag label, the label can not contain p p tag.

img tag

<Img src = "Image Path" alt = "prompt when the image is not loaded successfully" title = "message when the mouse was suspended" width = "width" height = "high (width and height only two properties automatically like a zoom ratio) ">

a label

Hyperlink label

The so-called hyperlinks from a web page refers to the relationship between a connection point to the goal, this goal can be another Web page, it can be a different location on the same page, it can also be a picture, an email address, a file, or even an application.

What is the URL? 
URL is an acronym for Uniform Resource Locator (Uniform Resource Locator), also known as web address is the address of the standard resource on the Internet. 
Examples URL 
http://www.sohu.com/stu/intro.html 
http://222.172.123.33/stu/intro.html 

URL address is composed of four parts 
- Part 1: Protocol is: http: //, ftp: // etc. 
part 2: site address: the domain name or IP address may be 
part 3: a page directory site: STU 
part 4: name of the page, e.g. index.html 
between the parts with "/" symbols are separated.

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href attribute specifies the landing page address. The address can be of several types:

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

target：

_blank means open landing page in a new tab
_self means to open the landing page in the current tab

List

1. unordered list

<UL type = "Disc"> 
  <Li> first </ Li> 
  <Li> second </ Li> 
</ UL>

property type:

disc (solid circles, the default value)
circle (open circles)
square (solid squares)
none (no style)

2. ordered list

<OL type = ". 1" Start = "2"> 
  <Li> first </ Li> 
  <Li> second </ Li> 
</ OL>

property type:

A list of numbers, the default value
A capital letter
a lowercase letters
Ⅰ capital Rome
Ⅰ lowercase Roman

3. The list of titles

<DL> 
  <dt> Title. 1 </ dt> 
  <dd> contents. 1 </ dd> 
  <dt> Title 2 </ dt> 
  <dd> contents. 1 </ dd> 
  <dd> SUMMARY 2 </ dd> 
</ dl>

form

Data table is a two-dimensional space, a table is composed of rows, a plurality of cells form another row, Gerry unit may contain text content, lists, patterns, forms, numbers, symbols, text, and other pre-forms and the like.
The most important purpose of the table is a table showing category data. Class data table refers to a table format most suitable tissue (i.e., organized in rows and columns) of data.
The basic structure of the table:

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

Attributes:

border: table border.
cellpadding: padding
cellspacing: margins.
width: percentage of pixels (length and width is preferably set by css).
rowspan: How much vertical cross-cell line
colspan: how many columns the cell spans (that is, merged cells)

form

Features:

Form data for transfer to the server, enabling a user to interact with the Web server

Forms can contain a series of input labels, such as text fields, check boxes, radio buttons, submit buttons and so on.

Forms may also contain textarea, select, fieldset and label tags.

Form Properties

Attributes	description
accept-charset	Character set (default: page character set) specified for use in the submission form.
action	Address (URL) where the prescribed form is submitted (submission page).
autocomplete	The provisions of the browser should automatically complete a form (default: on).
enctype	Submitted predetermined encoded data (default: url-encoded).
method	Regulations when submitting forms use HTTP method (default: GET).
name	Name recognition predetermined form (for use DOM: document.forms.name).
novalidate	Provisions browser does not validate the form.
target	The objectives set out in the action attribute address (default: _self).

Form elements

The basic concept:
HTML is HTML form elements more complex parts, often forms and scripts, dynamic pages, data processing and other functions combined, so it is very important to create dynamic website content.
Enter the general information form is used to collect user
form works:
visitors have while browsing the web form, you can fill in the necessary information, and then press a button to submit. This information is transmitted to the server via the Internet.
A special program on the server to process the data, if there is an error returns an error message and ask to correct the error. When the data are complete and correct, the input server complete a feedback 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('上传成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

input

<input> 元素会根据不同的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用