HTML5 Preliminary understanding

first, the use of HTML5 Ten reasons

Haven't you considered using HTML5? Of course, I guess you might have your reasons; it's not widely supported in IE, or you just prefer to write more stringent XHTML code. HTML5 is a major change in the world of web development, in fact, whether you like it or not, it represents the future trend. In fact, HTML5 is not difficult to understand and use. We can list a number of reasons why we should start using HTML5now.

There are a lot of articles about using HTML5 and the advantages and benefits of using it, yes, this article is similar. With more of these articles, as well as Apple's support, Adobe's product development around HTML5 , and the death of Mobile Flash, the support of so many websites, I want to say something to those who still don't or don't want to accept it. I think the main reason is that it looks like a mysterious thing. A lot of it feels like a jet pack or a flying car. An unproven extraordinary idea, but not practical. But in fact it is very practical now.

In order to decrypt the HTML5 and help the stubborn development designers, I have written here listed the use of HTML5 Several reasons, I hope to help you!

Tenth big reason: ease of use

Two reasons make it easier to create a site using HTML5 : semantically and Aria. New HTML tags like

Aria is a web-based standard used to specify "roles" for elements in HTML articles, and to create important page terrains through character attributes for example, header,footer,navigation or aritcle are necessary. This has been overlooked and is not widely used because it is not actually verified. However,HTML5 will verify such a property. At the same time,HTML5 will have these roles built in and cannot be overwritten. For more HTML5 and aria discussions, please check here.

Nineth big reason: video and audio support

Forget about Flash and other third-party apps, let your video and audio access resources through HTML5 tags <video> and <audio>. Playing media correctly has always been a very scary thing, you need to use <embed> and <object> tags, and for them to play correctly must give a lot of parameters. Your media tags will be very complex, with a lot of confusing code. and HTML5 video and audio tags basically treat them as pictures: <video src= ""/>. But other parameters such as width and height or autoplay? Don't worry, just define it like any other HTML tag: <video src= "url" width= "640px" height= "380px" autoplay/>.

In fact this process is very simple, but our old browsers may not like our HTML5, you need to add more code to get them to work correctly. But this code is much simpler than <embed> and <object>.

Eighth reasons: Doctype

Yes, it is doctype, there is no more content. Isn't that a very simple answer? There's no need to copy and paste a bunch of incomprehensible code and no extra head tags. The great news is that, in addition to being simple, it works in every browser, even if it's a notorious IE6.

Seventh big reason: clearer code

If you have a preference for a simple, elegant, easy-to-read code,HTML5 is definitely a tailor-made thing for you. HTML5 allows you to write code that is simple and clearly descriptive. Semantics-compliant code allows you to separate styles and content. Take a look at this typical simple Heaer code that has navigation:

<div id= "header" > 
Isn't it simple? But using HTML5 will make the code simpler and more meaningful:
With HTML5 you can finally solve your div and its class definition problem by using the semantics of the HTML header tag description. Previously you needed to use a lot of div to define each page content area, but use the new <section>,<article>,
The reason for the Big Six: smarter storage
　　The coolest feature in HTML5 is local storage. A bit like the old technology cookie and the fusion of the client database. It's better than Cooke because it supports multiple Windows storage, it has better security and performance, and can be saved even after the browser is closed.
Because it's a client-side database, you don't have to worry about users deleting any cookies, and all the major browsers support them.
Local storage is good in many cases, it is a HTML5 tool that does not require a third-party plug-in implementation. The ability to save data to a user's browser means that you can simply create application features such as saving user information, caching data, and loading the user's last application state.
Five reasons: Better interaction
We all like better interaction, we all like dynamic websites with feedback from users, and users can enjoy the interactive process. Input <canvas>,HTML5 's Drawing tab allows you to do more interactivity and animations, just like the effect we use with flash.
In addition to <canvas>,HTML5 also has a number of APIs that allow you to create better user experiences and more dynamic Web applications. Here is a list:

 
  

  
   
 
    
Drag and Drop (DnD)
 
    
Offline Storage Database
 
    
Browser History Management
 
    
Document editing
 
    
Timed Media Playback
 
   
 
  
Fourth big reason: game development
Yes, you can use HTML5 's <canvas> development game. HTML5 offers a very great, mobile-friendly way to develop fun interactive games. If you develop flash games, you will enjoy the development of HTML5 games.
Script-tutorials currently offers 4 parts of the HTML5 game development tutorials, and here's a look at the interesting games they have developed:

 
  

  
   
 
    
HTML5 Gaming Development Lesson One
 
    
HTML5 Gaming Development Lesson
 
    
HTML5 Gaming Development Lesson Three
 
    
HTML5 Gaming Development Lesson Four
 
   
 
  
The third big reason: Legacy and cross-browser support
Your modern popular browser supports HTML5(CHROME,FIREFOX,SAFARI,IE9 and Opera) and creates all of the browsers HTML5 doctype, Even very old very disgusting browser like IE6 can be used. But because the old browser is able to recognize DOCTYPE does not mean it can handle HTML5 tags and functions. Fortunately,HTML5 has made it easier to develop and support more browsers so that older IE browsers can add JavaScript code to use the new elements:
<!--[if Lt IE 9]> <script src= "http://HTML5shiv.googlecode.com/svn/trunk/HTML5. js" > </script><! [endif]-->
The second big reason: moving, moving, or moving
You can call it "intuition", but I think mobile technology will become more popular. I know, there are some very crazy guesses, some may you also think of –mobile is a fashion! Mobile devices will occupy the world. More acceptance of mobile devices will grow very quickly. This means that more users will choose to use mobile devices to access websites or web apps. HTML5 is the most mobile development tool. As Adobe announces the abandonment of mobile flash development, you will consider using HTML5 to develop WEBP applications.
When the mobile browser fully supports HTML5 then developing a mobile project will be as simple as designing a smaller touch display. Here are a number of META tags that allow you to optimize your movement:

 
  

  
   
 
    
Viewport: Allows you to define viewport width and zoom settings;
 
    
Full Screen Browser: The value specified by ISO allows the Apple device to display in full-screen mode;
 
    
Home screen icons: Like a desktop collection, these icons can be used to add favorites to the homepage of iOS and Android mobile devices.
 
   
 
  
The first big reason: it is the future, start using it!
The biggest reason today you start using HTML5 is because it is the future, don't fall behind! HTML5 does not go in every direction, but more elements have been adopted by many companies and are beginning to develop. HTML5 is actually more like HTML, it is not a new technology needs you to re-learn! If you develop XHTML strict, you are already developing HTML5 . Why not enjoy the HTML5 function more completely?
You don't actually have any excuse not to accept HTML5. In fact, the only reason I'm using HTML5 is because it's simple and clear in writing code. Other features I didn't actually use. You might consider starting with HTML5 writing code, which can help you change the way you write code and how it is designed. Start writing web Apps with HTML5 code, maybe the next mobile app or game app is developed with HTML5 !
The original: Top ten reasons to use HTML5 right now
Source: gbin1.com, Lei Feng net.
Ii. new elements of HTML5
Since 1999 HTML 4.01 has changed a lot, and today, several of the HTML 4.01 have been deprecated, and these elements have been deleted or redefined in HTML5.
In order to better deal with today's internet applications, HTML5 added a lot of new elements and features, such as: Graphic drawing, multimedia content, better page structure, better form processing, and several API drag-and-drop elements, positioning, including Web application caching, storage, web workers, and so on.

 
  
 <canvas> new elements
 
  
 
  
   
 
    
 
     
label
 
     
Description
 
    
 
    
 
     
<canvas>
 
     
Labels define graphs, tables, and other images. The label's JavaScript-based drawing API
 
    
 
   
 
 
  


 
  
 New multimedia elements
 
  
 
  
   
 
    
 
     
label
 
     
Description
 
    
 
    
 
     
<audio>
 
     
Defining audio Content
 
    
 
    
 
     
<video>
 
     
Defining videos (video or movie)
 
    
 
    
 
     
<source>
 
     
Define multimedia resources <video> and <audio>
 
    
 
    
 
     
<embed>
 
     
Define embedded content, such as plugins.
 
    
 
    
 
     
<track>
 
     
Specify external text tracks for media such as <video> and <audio> elements.
 
    
 
   
 
 
  


 
  
 New Form elements
 
  
 
  
   
 
    
 
     
label
 
     
Description
 
    
 
    
 
     
<datalist>
 
     
Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input.
 
    
 
    
 
     
<keygen>
 
     
Specifies the key pair generator field used for the form.
 
    
 
    
 
     
<output>
 
     
Defines different types of output, such as the output of a script.
 
    
 
   
 
 
  


 
  
 New semantic and structural elements
HTML5 provides new elements to create a better page structure:

 
  

  
   
 
    
 
     
label
 
     
Description
 
    
 
    
 
     
<article>
 
     
Defines a separate content area for a page.
 
    
 
    
 
     
<aside>
 
     
Defines the sidebar content of the page.
 
    
 
    
 
     
<bdi>
 
     
Allows you to set a piece of text away from the text orientation setting of its parent element.
 
    
 
    
 
     
<command>
 
     
Define a command button, such as a radio button, a check box, or a button
 
    
 
    
 
     
<details>
 
     
Details used to describe a part of a document or document
 
    
 
    
 
     
<dialog>
 
     
Define dialog boxes, such as prompt boxes
 
    
 
    
 
     
<summary>
 
     
Label contains the title of the details element
 
    
 
    
 
     
<figure>
 
     
Specify separate stream content (images, charts, photos, code, and so on).
 
    
 
    
 
     
<figcaption>
 
     
Define the title of the <figure> element
 
    
 
    
 
     
<footer>
 
     
Defines the footer of a section or document.
 
    
 
    
 
     
 
     
Defines the header area of the document
 
    
 
    
 
     
<mark>
 
     
Defines the text with a token.
 
    
 
    
 
     
<meter>
 
     
Define weights and measures. Measures that are used only for the known maximum and minimum values.
 
    
 
    
 
     
<nav>
 
     
Defines the progress (process) in the run.
 
    
 
    
 
     
<progress>
 
     
Defines the progress of any type of task.
 
    
 
    
 
     
<ruby>
 
     
Defines a ruby annotation (Chinese phonetic notation or character).
 
    
 
    
 
     
<rt>
 
     
Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
 
    
 
    
 
     
<rp>
 
     
Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
 
    
 
    
 
     
<section>
 
     
Define the sections (section, section) in the document.
 
    
 
    
 
     
<time>
 
     
Defines the date or time.
 
    
 
    
 
     
<wbr>
 
     
Specifies where in the text to fit the line break.
 
    
 
   
 
  


 
  
 Elements that have been removed
The following HTML 4.01 elements have been deleted in HTML5:

 
  

  
   
 
    
<acronym>
 
    
<applet>
 
    
<basefont>
 
    
<big>
 
    
<center>
 
    
<dir>
 
    
<font>
 
    
<frame>
 
    
<frameset>
 
    
<noframes>
 
    
<strike>
 
    
<tt>
 
   
 
  
Iii. ResourcesSunebear
Links: http://www.zhihu.com/question/24398907/answer/30239864
Source: Know
Copyright belongs to the author, please contact the author for authorization.

Animated Books with CSS 3D Transforms This is a 3D book, CSS3 done

=========HTML5 Effects Aggregation Site ========
Christmasexperiments.com's page
Chromeexperiments.com's page
Mr.doob
Litewerx.showcase
Form follows Function
Alteredqualia
Html5rocks.com's page

=========== visual effects and interactive video ============
http://www. thewildernessdowntown.com/  
Interactive Film "Itsumo kawaii"
http://www. beonlineb.com/ 
Arcade Fire/just a Reflektor
Aaronetrope 3D Sci Fi Video projection dialogue
Aleksandar Rodic 3D Stereoscopic Blog
Beanstalk
http://www. ro.me/ 
Three.js WebGL Dynamic Map
Ôgreen by special. T Aquatic Plant Advertising
Kimatica-creative Connections Tree Veins
Earth to Echo movie sci-fi propaganda website
http/middle-earth.thehobbit.com/map  Hobbit
Hellorun™ Line Draft room, first-person motion
LETTERS, Inc. integrated circuits
Dataveyes | Human Data Interactions Visual particles

========= Music and Visual ==========
http/do.adive.in/ 
Rocking Dendrites Rock and Tentacle
Arabesque-music colour particles beautiful pure music and colorful smoke
The sound of Compo.filler blue power
Lights Polka Dot
?? Berviz Electronics
A [Radiohead Music painting

========= Physical Properties Element ============
Blob Big Water polo
Andrew Hoyer Fabric-skeleton
HTML5 Fish Bowl ie-fish tank
Googlecode.com's page chrome-aquarium
Three.js WebGL Animals
Liquid particles 3D 3D particle flow

========== Drawing and generating ===========
Jaw dropping HTML5 and Javascript effects 10 pip effects
Wormz. HTML5 Canvas Experiment image generation CATERPILLAR ~ ~
Silk–interactive Generative Art Light effect
Sketch Toy:draw sketches and share replays with friends! Record Line Draft steps
Asciiflow Infinity ASCII character generation chart

======== Some of the sites that have incorporated HTML5 =======
Andrew McCarthy Rolling Animal Run
http//tokyomildfoundation.com/  Tokyo Tender Foundation
fifty-five | The Data agency vertical segmentation
A P R I L Z E r O Data analysis
Gaming Media Creative Horizontal scrolling
Luxaqua | Aquarium Design deep seabed longitudinal rolling
Kilfish Ghost Animal Portrait Rolling
There is a plum in Taiwan food longitudinal rolling
Vespillo le film Vespillo portrait scrolling
Exploring Moon Bears ie-Month Xiangzhi
Metal junk:the Game HTML5: Metal ruins, the game will not unfold ~ ~
HTML5 Preliminary understanding