HTML 5 Tutorial

HTML5 is the next generation of HTML. It is necessary to go through it again. Take a look at the point.

See Http://www.w3school.com.cn/html5/index.asp tutorials for details

and HTML5 label Reference manual

Learning Record:

--------------------------

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

Browser support

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

Video

Audio

---------------------------

Page content can be dragged and dropped, specifically explained Http://www.w3school.com.cn/html5/html_5_draganddrop.asp

Basically, set the content to be dragged: The Draggable property is true;

Drag What:

function drag (EV) {ev.dataTransfer.setData ("Text", ev.target.id);}
-----------

Where to put it:

If you need to set allow placement, we must block the default handling of elements. This is done by invoking the event for OnDragOver events. Preventdefault ();

---------

To place:

The OnDrop property invokes a function, drop (event):

function Drop (EV) {ev.preventdefault (); var data=ev.datatransfer.getdata ("Text"); Ev.target.appendChild ( document.getElementById (data));}

Code Explanation:

• Call Preventdefault () to avoid browser default handling of data (the default behavior of the drop event is to open as a link)
• The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. The method returns any data that is set to the same type in the SetData () method.
• The dragged data is the ID of the dragged element ("Drag1")
• Appends the dragged element to the placement element (the target element)

--------------------

What is Canvas?

The HTML5 canvas element uses JavaScript to draw an image on a Web page.

A. Add a canvas element to the HTML5 page.

B. The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.fillstyle= "#FF0000"; Cxt.fillrect (0,0,150,75);</script>
----------------
Cxt.moveto (10,10);

Cxt.lineto (150,50); Cxt.lineto (10,50); Cxt.stroke ();
---------

Cxt.beginpath (); Cxt.arc (70,18,15,0,math.pi*2,true); Cxt.closepath (); Cxt.fill ();
--------
Drawing, very energetic, the effect is a bit.

HTML5 supports inline SVG.

What is SVG?

• SVG refers to a scalable vector graphic (Scalable vector graphics)
• SVG is used to define vector-based graphics for the network
• SVG defines graphics using XML format
• SVG images have no loss of graphics quality when zooming in or out of size
• SVG is the standard of the World Wide Web Consortium

Advantages of SVG

Compared to other image formats (such as JPEG and GIF), the advantage of using SVG is that:

• SVG images can be created and modified by a text editor
• SVG images can be searched, indexed, scripted, or compressed
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• SVG can be amplified when the image quality is not degraded

The example is not clear, canvas and SVG need to find a corresponding tutorial to see and get started.

Comparison of Canvas and SVG

The following table lists some of the differences between canvas and SVG.

Canvas

• Dependent resolution
• Event handlers are not supported
• Weak text rendering capabilities
• Ability to save result images in. png or. jpg format
• Best for image-intensive games where many of the objects are redrawn frequently

Svg

• Not dependent on resolution
• Support for event handlers
• Best for applications with large rendering areas (e.g. Google Maps)
• High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
• Not suitable for gaming applications

Geographical location, see the actual use of the map call, domestic such as Baidu map of the German map QQ map

----------

HTML 5 Web Storage stores data on the client

HTML5 provides two new ways to store data on the client:

• Localstorage-Data storage with no time limit
• Sessionstorage-Data storage for a session

The Sessionstorage method stores data for a session. when the user closes the browser window, the data is deleted.

HTML 5 Application Caching Cache Manifest Basics

To enable application caching, include the manifest attribute in the

<! DOCTYPE html>
Each page that specifies a manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached (unless the page is specified directly in the manifest file).
The recommended file name extension for the manifest file is: ". AppCache".
Please note that the manifest file needs to be configured with the correct mime-type, "Text/cache-manifest". Must be configured on the Web server.
"This piece of concrete again, there is no contact, the actual development of a lot of data-related business, and sometimes forcibly remove the cache function"
HTML 5 Web Workers
Web worker is a JavaScript that runs in the background and does not affect the performance of the page.
I haven't been in touch yet.
HTML 5 server sends the event PHP code (demo_sse.php):
<?phpheader (' Content-type:text/event-stream '); header (' Cache-control:no-cache '); $time = Date (' R '); echo "Data: The server time is: {$time}\n\n "; flush ();? >
Code Explanation:

 
 

  
  
 
   
Set the header "Content-type" to "Text/event-stream"
 
   
No caching of pages is required
 
   
Output send date (always start with "data:")
 
   
Refresh output data to a Web page
 
  
 
 
Have not tried, do not know and WebSocket realize how big difference, logically looked similar, backstage pushes the data, front end receives for processing.
-------------
HTML5 the new Input type
HTML5 has a number of new form input types. These new features provide better input control and validation.
This chapter provides a comprehensive overview of these new input types:

 
 

  
  
 
   
Email
 
   
Url
 
   
Number
 
   
Range
 
   
Date pickers (date, month, week, Time, DateTime, datetime-local)
 
   
Search
 
   
Color
 
  
 
 
Some actual check, or with regular judgment, the attribute of number is a bit pit (try not to use)
New form elements for HTML5:
HTML5 has several elements and attributes that involve forms.
This chapter describes the following new form elements:

 
 

  
  
 
   
DataList
 
   
Keygen
 
   
Output
 
  
 
 
The inside of the DataList function is very good, with the Select Dropdown has a spell
The new form property:
 
 

  
  
 
   
AutoComplete
 
   
Novalidate
 
  
 
 
The new input property:
 
 

  
  
 
   
AutoComplete
 
   
Autofocus
 
   
Form
 
   
Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
 
   
Height and width
 
   
List
 
   
MIN, Max and step
 
   
Multiple
 
   
Pattern (regexp)
 
   
Placeholder
 
   
Required
 
  
 
 
This multiple is a good choice.
Multiple Property
The Multiple property specifies that multiple values can be selected in the input field.
Note: The Multiple property applies to the following types of <input> tags: email and file.
Instance
multiple="multiple"/>
Pattern Property
The Pattern property specifies the mode (pattern) used to validate the input field.
Pattern is a regular expression. You can learn something about regular expressions in our JavaScript tutorials.
Note: The pattern attribute applies to the following types of <input> tags: text, search, URL, telephone, email, and password.
The following example shows a text field (with no numbers and special characters) that can contain only three letters:
Instance
Country code: <input type= "text" name= "Country_code" pattern="[A-z]{3}" title= "three letter country Code"/>
Placeholder Property
The placeholder property provides a hint (hint) describing the value that the input field expects.
Required Property
The Required property specifies that the input field must be filled in before submission (cannot be empty).
Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox, Rad Io and file.
Finally, you can come to the test and start the quiz now! Good luck to you.
HTML 5 Tutorial