Python Front end

HTML5Introduction

HTML5 is the latest revised version of HTML, which was developed by the World Wide Web Consortium in October 2014.

The HTML5 is designed to support multimedia on mobile devices.

HTML5 is simple and easy to learn.

What is HTML5?

HTML5 is the next generation of HTML standards.

HTML, a previous version of HTML 4.01 was born in 1999. Since then, the Web world has undergone great changes.

HTML5 is still in perfect. However, most modern browsers already have some HTML5 support.

How did the HTML5 start?

HTML5 is the result of the cooperation between the WHATWG and the WHATWG, which refers to the Web Hypertext application Technology working Group.

WHATWG is dedicated to Web forms and applications, while the website focuses on XHTML 2.0. In 2006, the two sides decided to work together to create a new version of HTML.

Some interesting new features in HTML5:

• Canvas Elements for painting
• Video and audio elements for media playback
• Better support for local off-line storage
• New special content elements such as article, footer, header, nav, section
• New form controls, such as Calendar, date, time, email, url, search

First, the introduction of HTML:
---------------------------------------
1. What is HTML?
Hypertext Markup Language, < tag name >--tags (tags, nodes)

2. HTML is composed of: tags and content

3. There are two types of programming languages: Explanatory languages (HTML, PHP, Javascript) and compiled languages (c, C + +, Java)


4. HTML tag components, attributes, entities

Entities for HTML: <:&lt;  >:&gt; Space:&nbsp;

5. Comments in HTML: <!--....-->
Purpose of the note: 1. Auxiliary Instructions 2. Code debugging

6. Syntax for HTML tags (tags): tags are enclosed by "<" and ">"
Double label:< tag name >....</tag name >
Single label:< label name/>

7. Color in HTML: can be a color word: red/blue/green/yellow ...
It can also be: #000000---#ffffff
The first two are red, the median is two green, and the last two represent blue.

Second, the head header setting in HTML
----------------------------------------
....

Third, text labels in html
----------------------------------------
1. *<br/> line break
2. *<p>...</p> Change Paragraph
3. <i>...</i> Italic
4. <em>...</em> emphasizes italic
5. <b>...</b> Bold
6. *<strong>...</strong> emphasis on bold
7. *8. <cite></cite>
9. <sub&gt </sub> ^...
10.*<del></del> Delete Line
....

Iv. hyperlinks in *html a
------------------------------------------------
<a href= "" ></a> hyperlink Tag
attribute: href must, refers to the link jump address
Target: Indicates how the link is opened:
_blank New Window
_parent parent Window
_self this window (default)
_top Top-level windows
FrameName window Name
Title: Text hint attribute (details)
Anchor Point Links:
Define an anchor point: <a id= "A1" ></a>
Use Anchor point: <a href= "#a1" > jump to A1 </a>


Five, * picture tag img
---------------------------------------
Insert a picture in a webpage
Properties: src: Image name and URL address
ALT: Message when a picture fails to load
Title: Text Prompt Property
Width: Picture width
Height: Picture height
Border: Border line thickness

VI. Multimedia Tags (familiar)
------------------------------------




Seven, * Table label
------------------------------------
Table
Caption
Tr
Th
Td

Thead
Tbody
Tfoot

Eight, * * Form label
------------------------------------
1. Form: Form label with attributes: Action, method, name, enctype ...

2. Form Item Labels:
Input: The most common common form item label: where the type attribute value determines why the form item is.
Properties: Type=text (single line of text), password (password), radio (radio),
CheckBox (multiple selection), file (document upload), image (Picture button),
button (normal buttons), submit (Submit), reset (reset),
Hidden (hidden), as well as HTML5 supported properties.

Select
Option

TextArea



Nine, IFRAME label
------------------------------------

X. Other labels (layout labels)
------------------------------------

Form form Labels
---------------------------------------------------------
1. <form></form>--form label
Form label Common Properties:
*action Property: The Destination Address (URL) of the submission
*method properties: How to submit: Get (default) and post
The Get method is the URL address bar visible, the length is limited (ie2k Firefox 8k), relatively insecure.
The Post method is the URL address is not visible, the length is unrestricted, is relatively safe.
Enctype: Submission Type
Target: Where to open the destination URL.
Name: The attribute is the name of the form. HTML5 not supported. Replace with the ID.

2. The <input> form item label input defines the input field in which the user can enter data. In HTML 5, the type attribute has a number of new values.
Detailed below are detailed below:
Example: <input type= "text" name= "username" >

3. <select> tag Create drop-down list.
*name property: Defines the name that is used to store the drop-down value of the
Size: Defines the number of items visible in the menu, HTML5 does not support
Disabled when this property is true, the menu is disabled.
Multiple multi-choice
*<option> drop-down selection tab, used for embedding into <select> tags;
*value property: The value of the drop-down item
*selected property: The default drop-down specifies an item.

4. *<textarea> multiple lines of text input area
*name: Defines the name that is used to store values in the text area.
*cols: Specifies the number of columns visible within the text area.
*rows: Specifies the number of rows visible within the text area.
Disabled: Whether to disable
ReadOnly: Read-only
...

5. *<button> Label definition button.
You can place content, such as a document or an image, in a BUTTON element. This is where the element differs from the button created by the INPUT element.


6. <fieldset> HTML5 tags--fieldset elements group related elements within a form.
Disabled property: Defines whether the fieldset is visible.
Form property: Defines one or more forms that the fieldset belongs to.

7. <legend> HTML5 label--<legend> tags are <fieldset>, <figure>, and <details> element definition headings.
<form>
<fieldset>
<legend> Health Information:</legend>
Height: <input type= "Text"/><br/>
Weight: <input type= "Text"/><br/>
</fieldset>
</form>

8. <optgroup> HTML5 label--<optgroup> label define option group. This element allows you to combine options
Examples:
<select>
<optgroup label= "Swedish Cars" >
<option value= "Volvo" >Volvo</option>
<option value= "Saab" >Saab</option>
</optgroup>
<optgroup label= "German Cars" >
<option value= "Mercedes" >Mercedes</option>
<option value= "Audi" >Audi</option>
</optgroup>
</select>

9. <datalist> HTML5 label--<datalist> label defines a list of optional data. In conjunction with the INPUT element, you can make a drop-down list of input values.
Examples:
<form action= "demo_form.asp" method= "Get" >
<input list= "Browsers" name= "Browser" >
<datalist id= "Browsers" >
<option value= "Internet Explorer" >
<option value= "Firefox" >
<option value= "Chrome" >
<option value= "Opera" >
<option value= "Safari" >
</datalist>
<input type= "Submit" >
</form>

The properties in the <input/> form item can provide
*type property: Represents the type of the form item: The value is as follows:
Text: Single-line textbox
Password: Password entry box
CheckBox: Multiple marquee note to provide value values
Radio: Radio box note to provide value values
File: Upload selection box
Button: Normal buttons
Submit: Commit button
Image: Picture Submit button
Reset: Reset button to revert to start (when first turned on) effect
Hidden: The form hides the field, mainly is the information which submits with the form one piece, but does not need the user to modify
*name Property: The name of the table item that stores the value of the content
*value Property: Entered value (default specified value)
Size property: The width value of the input box
MaxLength property: Maximum length of input for input box
ReadOnly Property: Read-only property on input box
*disabled Properties: Disabling properties
*checked properties: Specify default options for the selection box
AccessKey Properties: Specify shortcut keys (not commonly used) (ie:alt+ key Firefox: alt+shift+ key)
TabIndex property: Specifies the order in which the TAB key is toggled by number (not commonly used)

SRC and Alt are set for the picture button

NOTE: The Reset reset button restores the form data to the state it was on when it was first opened, not empty
The image Image button, which has the Submit form feature by default.


Second, the frameset label--instead of the body tag defines the frame page and defines how many rows and columns the frame will be divided into
------------------------------------------------------------------------------------
1. Frameset Tags Common properties:
*cols-Defines how many columns and columns the framework contains (each value is separated by commas).
Value is pixel px or percent%
*rows-Defines how many rows and rows the frame contains (each value is separated by commas).
Value is pixel px or percent%
*border--Defines the bounding rectangle (per pixel) of the frame page defined by the frame, using CSS to implement
Frameborder--Defines whether the frame page is a border (this property should be written inside the frame label and should not appear here)
Framespacing--Defines the distance between frames pages, using CSS to implement

<noframes> tags
Text can be displayed for browsers that do not support frames, and <body> combinations are used
Can be displayed when the browser does not support IFRAME tags
*<iframe> Label
Create an inline frame that contains another document, and the contents of the IFRAME tag.

Frame Label--Define the contents of each frame page in the frameset tag
The frame tag appears alone, <frame/>
Common Properties:
Frameborder-Defines the border of the content page, with a value of (1|0), with a default value of 1
1--Display a border between each page
0--Don't show borders
*name-Used when a frame page is linked to another frame page (another frame page can use the target to define a linked page)
Noresize--Defines whether the browser can be dragged to change the size of the frame page, with a value of (noresize)
Scrolling--Defines if there is a scrollbar, the value is (Yes|no|auto), the default value is auto
Yes--show scroll bar
No--no scroll bar displayed
Auto-Displays scroll bars when needed
*SRC--Defines the content page URL
border– Setting the border thickness

Python Front end