Full stack engineer knowledge points summary --html5 (on)

A, HTML5

1, new features:
1. Cancel outdated display tag <font> </ font> and <Center> </ Center> ...
2. Form new element into
the introduction of new semantic tag 3.
4. canvas tags ( graphic design)
5. local database (local storage)
6. Some API
benefits:
1. cross-platform
For example: For example, you developed a HTML5 game, you can easily ported to the UC open platform, Opera game Center, Facebook application platform, and even can be issued through the package of technology to the App Store or Google Play, so it's very powerful cross-platform, which is the main reason most people interested in HTML5.

Disadvantages:
1. PC side browser support is not particularly friendly, resulting in poor user experience


2, ## new semantic tags

 

### Web page layout structure and compatible label deal

```html
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....

Label layout structure compatible with IE treatment:

a、document.createElement("nav");
display:block;


b, through plug-js - (semantic tags compatible processor plug-ins: html5shiv.js)
<Script type = "text / JavaScript" the src = "code / semantic tags compatible processing /html5shiv.min.js"> </ script>

c, (the final solution) shortcut: cc: ie6 + tab key
- <[IF LTE IEs. 8]!>
<Script type = "text / JavaScript" the src = "code / semantic tags compatible process /html5shiv.min. JS "> </ Script>
<[endif] -!>

 

### multimedia tags and attributes Introduction

<video> </ video> Video
Properties: controls the display control bar
Properties: autoplay AutoPlay
attribute: loop disposed loop

<audio> </ audio> Audio
Attribute: controls the display control bar
Properties: autoplay AutoPlay
attribute: loop disposed loop


Tag compatible multimedia effect mode in a web page (clever compatible with source)

<Video>
<Source the src = "code / Multimedia tab /trailer.mp4">
<Source the src = "trailer.ogg">
<Source the src = "trailer.WebM">
</ Video>

 

### intelligent form control

<input type = "email">

email: enter a valid email address (eliminating the need to write a regular expression of annoyance)
url: URL enter a valid
number: only numbers
range: Slider
color: Color Picker
date: Displays the date
month: January show
week: Show a few weeks
time: displays the time

 

### Form Properties

form attributes:
AutoComplete = ON | OFF automatically (by default)
novalidate (= to true | false) is closed check


input attributes:
* The autofocus automatically get focus
multiple effects to achieve multiple-choice
* placeholder: "" placeholder (message)
* required required

form = "id"

list = "id"
例: <input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>

 

Guess you like

Origin www.cnblogs.com/kathyhong/p/11225342.html