A 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()
Second, what is HTML?
htyper text markup language that is HTML
Hypertext: refers to the inside pages can contain images, links, and even music, programs and other non-text elements.
Markup Language: markers (labels) constituting the language
== HTML page document, parsed by the browser to display
Static pages: static resources, such as test.html
Dynamic pages: html code language developed by some dynamically generated according to a user request
html document tree structure diagram:
Third, the label
● is constituted by word wrap angle brackets, for example: <html> * all tag word is not possible to begin with a number.
● label case-insensitive. <Html> and <HTML>. Lowercase recommended.
● label is divided into two parts: the start tag and end tag <a> </a> section between the two labels we called the tag body.
● using some relatively simple label to a label and this label is called self-closing tags example:... <br/> <hr /> <input /> <img />
● tags can be nested, but not cross nested. <a> <b> </a> </ b>
Fourth, the label attribute
● usually in the form of key-value pairs. For example name = "simon"
● property can only occur at the beginning or self-closing tags and labels.
● all lowercase attribute name. * Attribute values must be double or single quotes wrapped e.g. name = "simon"
● If the property value and attribute names exactly the same. Write directly attribute name. For example readonly
Five, <! DOCTYPE html> tag
Due to historical reasons, each browser there are differences in the rendering of the page, or even different versions of the same browser, the rendering of the page is different. In the
previous W3C standards promulgated, there is no unified standard browser on page rendering, resulting in a difference (Quirks mode or called Compatibility
Mode); due to the introduction of W3C standards, the browser rendering the page with a unified standard (CSScompat or called Strict mode is also called the Standars
the MODE), which is both the simplest difference.
After the introduction of W3C standards, browsers are beginning to adopt the new standards, but there is a problem is how to ensure that the old can continue to browse the web, before the standard came out,
many pages are written according to the old rendering method, if the criteria used to rendering, will cause the page to be displayed correctly. In order to maintain compatibility browser rendering, in order to make
the front page can be viewed properly browser retains the old rendering methods (such as: Microsoft IE). In this way the browser rendering arises Quircks mode
and Standars mode, two kinds of rendering methods co-exist on a browser.
window.top.document.compatMode:
// BackCompat: quirks mode, the browser uses its own quirks mode rendering parsing the page.
// CSS1Compat: standard mode, the browser uses the W3C standard analytical rendering the page.
This property will be to identify and use the browser, but if your page does not DOCTYPE declaration, then compatMode default is BackCompat,
This is the beginning of the devil - the browser in its own way to resolve rendering the page, then, will show different styles in different browsers.
If you add a page <! DOCTYPE html> So, it is equivalent to the standard mode is turned on, the browser must honestly in accordance with the W3C
Standard analytical rendering the page, this way, your page displayed in the browser on all is a way of.
This is the <! DOCTYPE html> role.
Six, head tag
<meta>
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: name attribute is used to describe the main 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.
1 <meta name = "keywords" content = "meta summary, html meta, meta attributes, meta jump"> 2 3 <Meta name = "the Description" Content = "old boys training institution created by an old boys' >
2: http-equiv name suggests, is equivalent to the role of http headers, which can be returned to the browser some useful information to help correct and accurate display Web content, the corresponding attribute value content, the content content in fact, each variable parameter values.
. 1 <Meta HTTP-equiv = "the Refresh" Content = "2; the URL = HTTPS: //www.baidu.com"> // (note marks behind, respectively, in front of and behind the URL of seconds)
2
. 3 < HTTP-equiv = Meta "Content-the Type" the UTF8 charset = ">
. 4
. 5 <Meta HTTP-equiv =" X--the UA-Compatible "Content =" IEs = the EmulateIE7 "/>
Note: X-UA-Compatible
The new version of IE for each major function is to make the browser easier to use, increased security and more support for industry standards. As these features of IE, which
is a risk that the old version of the site can not be displayed correctly.
To minimize this risk, IE6 IE allows Web developers choose to compile and display their web pages. "Quirks mode" as the default, which will
make the page appear in older versions of the browser's point of view, "Standards mode" (also called "strict mode") feature is the most comprehensive support for industry standards.
However, to take advantage of this enhanced support, page must contain the appropriate <! DOCTYPE> directive.
If a page does not contain <! DOCTYPE> instruction, IE6 it is shown in quirks mode. If the page contains valid <! DOCTYPE> directive but Liu
browser does not recognize, IE6 it will be displayed in IE6 standards mode. Because few sites already contain <! DOCTYPE> instruction compatibility mode switch quite successful. This allows web developers to choose the best time to transfer their website to the standards mode.
As time passes, more sites start using standards mode. They have begun to use the features and functions to detect IE6 IE. For example, IE6 does not support universal selector (i.e. the global css selector * {}), then use it to some sites do for a specific IE corresponds.
When IE7 added support for global selector, features that rely on IE6 website can not detect this new version of the browser. So for those of IE -specific correspondence can not be applied IE7, resulting in these sites as they can not be expected to display. Because <! Loud website owners are forced to update their website so that it can support IE7.
Than any previous version of IE8 browser is more support for industry standards, and therefore may not appear as expected for an older version of web browser design. To help assist alleviate all the problems, IE8 introduced the concept of file compatibility, so you can select a specific version of IE your web design to map. File Compatibility IE8 increase in the number of new patterns that tell the browser how to parse and compile a Web page. If your page can not be displayed correctly in ie8, you can update your site so that it supports the latest web standards (preferences) or add a meta element is used to tell how IE8 according to the old version of the browser on your page compilation your page.
This will allow you to choose your site updated to support new features of IE8 time.
When Internet Explorer 8 encounters pages are not included X-UA-Compatible header, it uses <! DOCTYPE> directive to determine how to display the page. If the instruction is missing or specified standards-based document type, Internet Explorer 8 will IE5 mode (Quirks mode) display the 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>
Seven, body tag
<HN> : n-ranges from 1 to 6; descending to represent the title..
<P> : paragraph tag contents of the package are a line wrap and also the gap between the upper and lower content...
<B> <strong> : bold tag.
<Strike> : is text with a line.
<EM> : text italic.
<SUP> and <Sub> : lower corner table and superscripts <br>. : wrap <. HR> : horizontal <div> <span>
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
Characteristics of Block (Block) element
Always start on a new line;
width default is 100% of its container unless a set width.
It can accommodate inline elements and other block elements
Features inline elements
And other elements on one line;
the width of the text or image is its width, unchangeable
inline element can only receive text or other inline elements
Special characters
< >；"；©®
Graphics two tags: <img>
src: To display the image path.
Alt: Tips when no image is successfully loaded.
title: mouse message when suspended.
width: Width of the image
height: height (width and height attributes two pictures will automatically use only one geometric scaling.)
Three hyperlink tag (anchor tag) <a>
href: To connect the resource path in the following format: href = "http://www.baidu.com"
target: _blank: open hyperlinks frame name in a new window: Open the connection contents in the specified frame.
name: the definition of a Bookmark the page
for jumping href:. #id (anchor)
Four-column label:
<ul>: unordered list
<ol>: An ordered list
<li>:. Each entry in the list
<dl> definition list
<dt> list title
<dd> list item
5 Form tags: <table>
border: table borders.
cellpadding: padding
cellspacing: margins.
width: the percentage of pixels (length and width is preferably set by CSS).
<TR> : Table Row
<TH> : Table Cell head
<TD> : Table Data Cell
rowspan: how many vertical lines across cell
colspan: how many columns across the cell (i.e., merged cell)
<TH>: table header <tbody> (not used): The partition table.
Six form tag <form>
Form for transmitting data to the server.
Form can comprise input elements, such as text fields, check boxes, radio buttons, and so on submit button.
Forms may also contain textarea, select, fieldset and label elements.
1. Form Properties
HTML form for receiving different types of user input, data transfer to the server when the user submits the form, enabling user interaction with the Web server. Form tags, all content should be submitted in the label.
action: general points where the form is submitted to the server a program, the program receives the data (i.e., form element) for the corresponding process over the form submission, such https://www.sogou.com/web.
method: form submission post / get the default value is get (envelopes)
get: 1. The key submitted to the address bar on the back of the relatively poor safety url 2. 3. there are restrictions on the length of the submission....
post:. 1 key submitted to the relatively high security is not in the address bar 2. 3. Submissions length theoretically unlimited...
get / post requests are common to both ways.
2. Form Elements
Attributes and their corresponding values of <input> tag
type: text text entry box
password password input box
radio checkbox
checkbox checkbox
submit submit button
button button (with js need to use.) button and submit the difference?
file submission: form Form need to add property = enctype "multipart / form-the Data"
name: key entry form submission of the difference between attention and id attributes:. name attribute is the name of the server and used for communication; and the id attribute is the browser end use of the name of the property that is primarily for convenience of the customer
client program, and used in the javascript css
value: value of the entry form submission for different input types, usage value is different attributes:
|
1
2
3
4
5
|
type
=
"button"
,
"reset"
,
"submit"
-
定义按钮上的显示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定义输入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定义与输入相关联的值
|
checked: radio and checkbox is selected by default readonly: read-only text and password. Disabled: used to input all so.
Upload files note two points:
1 post request is to be made
2 enctype="multipart/form-data"
<Select> tag is selected from the pull-down properties
name: Form button to submit entries.
size: Option number
multiple: multiple
Every attribute <option> select the drop-down:
value: form submission value of the item selected:. selected drop-down option is selected by default
<optgroup> for each item plus packet
<Textarea> Text Field
name: key entry form submission.
cols: default text field how many columns
rows: default text field how many rows
<label>
<fieldset>