"Front-end notes"? Html

1. What is HTML5

the 5.0 version of the Web page . The HTML5 standard has been customized over the past 8 years

2. Why use HTML5

1> Cross- platform : UI interface written with HTML5 can run on all platforms that have a browser

2> HTML5 running platform: browser

3> But HTML5 can not complete some specific functions, such as: Photo (Imagepickercontroller), access to the album ....

3. How to use HTML5

1> himself to write a lot of HTML5 code

2> using off-the-shelf HTML5 Framework

Sencha-touch

PhoneGap

JQuery Mobile

Bootstrap

4. Development mode of mobile APP

1> Native (pure OC)

2> Pure HTML5

3> native +html5

5. Why Study HTML5

a trend in the future of 1>

2> to increase interview and develop competitiveness

Android programmer Java, server,HTML5

6. Division of Company Positions

1> Graphic Designer drawing, transduction,HTML,CSS

2> Front-end engineer HTML,CSS,Javascript, template technology

3> Backend Engineer Server (Java,. Net,PHP), database

4> Mobile Engineer (IOS/android) mobile UI Interface (OC,HTML5), interacting with the server

7. A New era of WEB development

Web1. 0

Mainstream technology :html+css

Web2.0

Mainstream technology :Ajax (javascript/dom/ Asynchronous data requests )

Web3.0

Mainstream technology :HTML5+CSS3

HTML5 Highlights :Canvas,HTML5 audio and video,Web storage,geolocation,Workers Multithreading

CSS3 Highlights : design animation,2D Distortion,N many new features

8. Composition of the Web page

A complete Web page with a specific function, typically consisting of 3 parts

1HTML: specific content and structure of Web pages

2CSS: The style of Web pages (the most important piece of landscaping)

3JavaScript ( mastering ): Interactive Effects of web pages, such as responding to user mouse events

HTML \ CSS \ JavaScript Learning material:http://www.w3school.com.cn/

9. HTML

What is HTML: The full name of HTML is hypertext Markup Language, Hyper-text markup Language

In fact, it is the text, the browser is responsible for parsing it into specific Web content.

The composition of HTML

like XML , HTML consists of N tags (nodes, elements, tags)

HTML syntax is very loose, the current version is 5.0, which is HTML 5

11. Common HTML tags

• Title:H1,H2,H3,h4,h5 ....
• Paragraph:p
• Line break:BR
• Containers:Div,span(to hold other tags)
• Table:table,tr,TD
• List:ul,ol,li
• Image:img
• Form:input
• Link:a

New Tags for HTML5

HTML5 added a new label element, discarding the three tag elements , including : structural tags, block tags, in-line semantic tags, interactive tags

1" Structural label

Responsible for the definition of the WEB context structure, ensuring that the HTML document includes:

Article article main content (a blog, a forum post, a section of user comments, plugins )

Header tag Header area content (header of article)

Footer Mark the contents of the foot area (at the bottom of the article)

Section Area Chapter representation (section of the article)

Nav Menu Navigation , link navigation

2 "Block-level label (for chunking)

Complete The partitioning of the Web page area to ensure effective separation of content, including:

Aside notes , tips , sidebar , summary , inserted references as supplementary subject content

a figure that combines and presents elements of multiple elements , often in conjunction with figcaption

code represents a block of blocks

Dialog person-to-person dialogue , including DT and DD two combination elements (dt is used to denote the speaker,DD is used to denote the speaker's content)

3 "In-line semantic tags

Complete The WEB page specific content references and representations, enrich the display content, including:

Meter values within a specific range, such as wages, quantity, percentage

Time Value

Progress progress bar, can be controlled by Max,min, step, complete the presentation and monitoring of the progress

Video video elements for playback, support for buffering preload and multiple video media formats

　　　　　　<!--video Playback--

tell the browser that I want to use your player controls

<video src= "source/bigbuck.m4v" controls= "Controls" ></video>

Audio elements for audio playback, support for buffered preload and multiple audio media formats

　　　　　　<!--audio Playback--

tell the browser that I want to use your player controls

<audio src= "source/music.m4a" controls= "Controls" ></audio>

4 "Interactive label

The expression of functional content, with certain content and data related, is the basis of various events, including:

Details represent a specific piece of content that is not displayed by default and interacts with legend in some way (click) to display

DataGrid controls client data and display, which can be used to update dynamic scripts in a timely manner

Menu for interactive menus

command is used to handle the commands button

HTML Tag type

• HTML has more than N tags, depending on the type of display, can be divided into 3 major categories

1"block level label

Label for exclusive row

Width and height can be set at any time (e.g. div,p,H1,H2,ul,Li)

2"inline label (inline label)

Multiple inline labels can be displayed in one line at a time

Width and height depend on the size of the content (e.g., span,a,label)

3"Inline - block-level label (inline -block- level label)

Multiple inline - block-level labels can be displayed on the same line

Width and height can be set at any time (e.g. input,button)

The difference between a div and a span tag:

div tags are block-level labels that have a single line and can be set to width and height.

span labels are inline labels: multiple inline labels can be displayed on one line at a time, and the width and height depend on the size of the content.

14. Modify the display type of the label

There is a display property in the CSS that can modify the type of label displayed

1"none: Hide Tags

div {

color: red;

<!--hide tags (including the structure and contents of tags) --

display: none;

}

2"block: Make tag a block-level label

span {

background-color: yellow;

/* Change the current label to a block-level label (you can have a single row and set the width of the label) */

display: block;

}

3"inline: Make tags into inline labels

div {

background-color: red;

/ * Change the current label into inline label * /

display: inline;

}

4"inline-block: Make the label inline - block-level label (inline -block- level label)

div {

background-color: red;

/ * Change the current label to inline block-level labels * /

display: inline-block;

}

"Front-end notes"? HTML