[Front-End Notes]☞HTML, front-end Notes html

[Front-End Notes]☞HTML, front-end Notes html

1. What is HTML5?

Version 5.0 of the web page. The HTML5 standard was customized in 2014 and lasted 8 years.

2. Why HTML5?

1> cross-platform: Use HTML5 UI to run on all platforms with browsers

2> HTML5 operating platform: Browser

3> however, HTML5 cannot complete some specific functions, such as ImagePickerController and album access ....

3. How to Use HTML5

1> write a large amount of HTML5 code by yourself

2> use a ready-made HTML5 framework

Sencha-touch

PhoneGap

JQuery mobile

Bootstrap

4. mobile APP development mode

1> native (pure OC)

2> pure HTML5

3> native + HTML5

5. Why study HTML5?

1> A Future Trend

2> increased the competitiveness of interviews and development

Android programmers Java, servers, HTML5

6. Division of company positions

1> graphic designer, cutting, HTML, CSS

2> front-end engineer HTML, CSS, Javascript, and template Technology

3> backend engineer servers (Java,. Net, PHP) and databases

4> mobile Engineer (iOS/android) Mobile UI (OC, HTML5) and server interaction

7. New Era of Web Development

Web1.0

Mainstream technology: HTML + CSS

Web2.0

Mainstream technologies: Ajax (JavaScript/DOM/asynchronous data requests)

Web3.0

Mainstream technologies: HTML5 + CSS3

HTML5 highlights: Canvas, HTML5 audio and video, Web storage, Geolocation, and Workers multi-thread processing

CSS3 highlights: design Animation, 2D deformation, N + new features

8. Composition of webpages

A complete webpage with specific functions is generally composed of three parts

1. HTML: the specific content and structure of a webpage

2 CSS: the style of a webpage (the most important part of beautifying a webpage)

3. JavaScript (master): Interactive Effect of web pages, such as responding to user mouse events

HTML \ CSS \ JavaScript learning materials: http://www.w3school.com.cn/

9. HTML

What is HTML? The full name of HTML is HyperText Markup Language.

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

10. HTML Composition

Like XML, HTML consists of N tags (nodes, elements, and tags ).

The HTML syntax is very loose. The latest version is 5.0, that is, HTML 5.

11. Common HTML tags

• Title: h1, h2, h3, h4, h5 ....
• Section: p
• Line feed: br
• Container: div and span (used to hold other labels)
• Table: table, tr, td
• List: ul, ol, li
• Image: img
• Form: input
• Link:

12. Add tags to HTML5

HTML5 has 27 new tag elements and 16 tag elements are discarded, including structural tags, hierarchical block tags, intra-row semantic tags, and interactive tags.

1. Structural tags

Defines the Web context structure to ensure HTML documents, including:

Main content of the article (a blog, a forum post, a user comment, and plug-ins)

Header indicates the content of the header area (the header of the article)

Footer marks the content of the foot area (bottom of the article)

Section (the section of the article)

Nav menu navigation, link navigation

2. Block-level labels (used in parts)

Divide the Web page areas to ensure effective separation of content, including:

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

Figure is usually used together with figcaption to combine and display multiple elements.

Code indicates a block of code

Dialog, which contains two elements: dt and dd (dt indicates the speaker and dd indicates the content of the speaker)

3. Intra-row semantic tags

Reference and describe the specific content on the Web page, enrich the presentation content, including:

The value of meter in a specific range, such as salary, quantity, and percentage.

Time Value

Progress bar, which can be controlled by max, min, and step to display and monitor the progress.

Video element, used for video playback. It supports buffer preloading 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 used for audio playback. It supports buffering preloads 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 tags

The expression of functional content has a certain relationship between content and data, and is the basis of various events, including:

Details indicates a specific piece of content, which is not displayed by default. It is displayed only when you interact with legend in a certain way (click ).

Datagrid controls client data and display, which can be used for timely updating of dynamic scripts

Menu for interactive menus

Command to process command buttons

13. HTML tag type

• HTML has N tags, which can be divided into three categories based on the display type.

1. Block-level labels

Exclusive label of a row

You can set the width and height at any time (for example, div, p, h1, h2, ul, and li)

2. Intra-Row Labels (Inline labels)

Labels in multiple rows can be displayed in one row at the same time.

The width and height depend on the content size (for example, span, a, label)

3 In-line-block-level labels (inline-block-level labels)

Multiple rows-block-level labels can be displayed in the same row

You can set the width and height (such as input and button) at any time)

 

Difference between div and span labels:

The div label is a block-level label that excludes a single row. You can set the width and height.

Span labels are intra-Row Labels. Multiple intra-Row labels can be displayed in one row at the same time. The width and height depend on the content size.

14. Modify the Label display type

CSS has a display attribute. You can modify the display type of tags.

1 "none: Hide tags

Div {

Color: red;

<! -- Hide tags (including the structure and content of tags) -->

Display: none;

}

2 block: Change tags into block-level tags

Span {

Background-color: yellow;

/* Change the current tag to a block-level tag (you can exclusively occupy one row and set the width and height of the tag )*/

Display: block;

}

3 inline: change a label to an in-row label

Div {

Background-color: red;

/* Change the current tag to an in-row tag */

Display: inline;

}

4 inline-block: change the label to intra-row-block-level label (inline-block-level label)

Div {

Background-color: red;

/* Change the current label to a block-level label in the row */

Display: inline-block;

}