International - English

Cart Console

Topic Center

Contact Sales

Home > Developer > Web Develop

HTML of the front end (i)

Last Update:2018-03-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the initial knowledge HTML1.1, the Web service Essence

Import Socketsock=Socket.socket (Socket.af_inet,socket. Sock_stream) Sock.bind (("127.0.0.1",8080)) Sock.listen (5) while 1: Conn,addr=sock.accept () data=CONN.RECV (1024x768) Print ("Data", Data.decode ("UTF8") ) with open ("index.html","R") asF:response=f.read () #可以吧html放在一个文档里面读出来 conn.send (("http/1.1 201 ok\r\n\r\n%s"%response). Encode ("UTF8"))

Browser send request->http Protocol, service side receive request, service side return response, service side Send response request to browser-browser rendering page

1.2. 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

1.3, HTML is not what

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

1.4. HTML Document Structure

<! DOCTYPE html> is declared as a HTML5 document.
is the opening and closing tags of the document. is the root element of an HTML page, between which is the document's Head (head) and body (body).

defines the beginning of the HTML document. The content between them is not displayed in the browser's document window. Contains meta data for the 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" >.

1.5. 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 important attributes

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)

Second, commonly used label 2.1, <! 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.
2.2. 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

2.2.1, 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.
<meta http-equiv="refresh" content="2; url=https://www.oldboyedu.com"><meta http-equiv=" Content-type" charset=utf8"><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= " Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market latest offer, Beijing Automobile report, Beijing easy car NET, Beijing Auto Group Purchase service "><meta name="description" content=" Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market, Beijing Automobile Report, Beijing Easy Car Network, Beijing Auto Group purchase service >
2.2.2, non-META tags
<link rel="icon" href="http://www.jd.com/favicon.ico " > <link rel="stylesheet" href= "css.css"> #加载css<script src="hello.js "></script> #加载js
2.3, the body commonly used label 2.3.1, label classification
label Classification One: self-closing Tags: single-label closure Tags: double label label Category Two: Block-level label: is the exclusive line, you can set the width of the high! such as: Div,p,h1-h6 inline Tags: by content placeholder, height and breadth are filled by their own content, such as: A,br,img determine the block-level label and inline label method: 1. Whether to have a single row (can be judged by setting the background color) 2. You can set the height and width individually for the element.
2.3.2, Basic label
<b> Bold </b><i> Italic </i><u> underline </u><s> Delete </s><p> paragraph tags </p>
2.3.3, special characters

content corresponding Code

Space  

> >

< <

& &

¥ ¥

Copyright ©

Registered ®

2.3.4, Div, 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.
2.3.6, IMG Tags
" picture path " alt=" The picture is not loaded successfully when prompted " title=" Mouse hover when the message " width=" width "height=" High ( Width Two attributes only one will be automatically scaled)">
2.3.7, 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.
1 What is a URL? 2 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. 3 URL Example4http//www.sohu.com/stu/intro.html5http//222.172.123.33/stu/intro.html6 7 The URL address is made up of 4 parts8Part 1th: For protocol: http://, ftp://wait9 Part 2nd: For the site address: can be a domain name or IP addressTen Part 3rd: Directories for pages in the site: Stu One Part 4: For page names, such as Index.html AEach part is separated by a "/" symbol.
What is a URL
<a href="http://www.baidu.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

2.3.8, 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 item </li> <li> the second </li></ol>
Type property:

1 List of numbers, default values

A Capital Letter

A lowercase letter

Ⅰ Capital Rome

Ⅰ Small Roman

3. List of headings
<dl> <dt> title 1</dt> <dd> content 1</dd> <dt> title 2</dt> < dd> content 1</dd> <dd> content 2</dd></dl>
2.3.9, Forms
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>header</th> </tr> </thead > <tbody> <tr> <td>data</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)

2.3.10, Form forms
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 value meaning

Action Url Specifies a form that processes the destination URL, and the form data is submitted to the handler for that URL address. If the property value is empty, it is committed to the document itself.

Method Get or Post Method of submitting form data to an HTTP server, default to get

Enctype application/x-www-form-urlencoded Specifies the type of encoding for the form data, which is valid only if the method property is set to post. The default value is Application/x-www-form-urlencode to encode all characters. If the form contains a control for file uploads (input type= "file"), then this property value must be set to Multipart/form-data and the character will not be encoded.

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
2.3.11, Input series

Type property value representation corresponding code

Text Single-Line Input text <input Type=text "/>

Password Password entry box <input type= "Password"/>

CheckBox check box <input type= "checkbox" checked= "Checked"/>

Radio Radio Box <input type= "Radio"/>

Submit Submit button <input type= "Submit" value= "Submission"/>

Reset Reset button <input type= "reset" value= "reset"/>

button Normal button <input type= "button" value= "normal button"/>

Hidden Hide button <input type= "hidden" value= "Hide button"/>

File Text selection box <input type= "File"/>

Type description:

Text: Input Box

Password: Password entry box

Radio: Radio Box

CheckBox: Multi Marquee

Submit: Commit button

Button: Clickable buttons, no behavior, general with JS use

Hidden: The ID value of the record data when it is not visible to the user and is typically used to modify a piece of data

File: Submit document form form need to add enctype= "Multipart/form-data", method= "POST"

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

2.3.12, select label
<form action=""Method="Post"> <SelectName=" 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

2.3.13, 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=""> for ="username"> User name </label> <input type="text" id="username" name= " username "></form>
2.3.14, textarea label
<textarea name= "Memo" id="memo " cols="30 " rows=" > Default content </textarea>
Property Description:

Name: Names

Rows: Number of rows

COLS: Number of columns

Disabled: Disable

HTML of the front end (i)

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

content	corresponding Code
Space
>	>
<	<
&	&
¥	¥
Copyright	©
Registered	®

Properties	value	meaning
Action	Url	Specifies a form that processes the destination URL, and the form data is submitted to the handler for that URL address. If the property value is empty, it is committed to the document itself.
Method	Get or Post	Method of submitting form data to an HTTP server, default to get
Enctype	application/x-www-form-urlencoded	Specifies the type of encoding for the form data, which is valid only if the method property is set to post. The default value is Application/x-www-form-urlencode to encode all characters. If the form contains a control for file uploads (input type= "file"), then this property value must be set to Multipart/form-data and the character will not be encoded.

Type property value	representation	corresponding code
Text	Single-Line Input text	<input Type=text "/>
Password	Password entry box	<input type= "Password"/>
CheckBox	check box	<input type= "checkbox" checked= "Checked"/>
Radio	Radio Box	<input type= "Radio"/>
Submit	Submit button	<input type= "Submit" value= "Submission"/>
Reset	Reset button	<input type= "reset" value= "reset"/>
button	Normal button	<input type= "button" value= "normal button"/>
Hidden	Hide button	<input type= "hidden" value= "Hide button"/>
File	Text selection box	<input type= "File"/>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:

front end struts front end ide front end engineer amazon steamroller front end python front end framework front end load balancer front end development languages

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending

Top 10 Tags

datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling

Top 10 Keywords

microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML of the front end (i)

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support