Home > Developer > Web Develop
Concept:
HTML5 is another important version following HTML4.01, XHTML 1.0 and DOM 2 HTML,
Designed to eliminate the reliance of rich Internet programs (RIA) on Flash, Silverlight, JavaFX-type browser plugins.
1991 HTML1.0 Standard appears
1997 HTML4.0 released, browser limitations under the 4.0 standard
Flash (Security and stability worrying, power consumption, touch, not open)
Silverlight
Javaapplet
HTML5 appeared in 2008, w3c2014 October 29, the World Wide Web Consortium announced that, after nearly 8 years of hard work, the standard specification was finally finalized.
HTML5 enhances the native functionality of the browser, and the browser functionality that conforms to the HTML5 specification will be more powerful, reducing the Web application's dependency on plugins,
Let the user experience better, make the development more convenient, in addition the HTML4.0 from the introduction of the 5.0 to 17 years, the change of HTML is very small, this does not conform to a good product evolution rules.
1.2. The difference between HTML5 and HTML1), on the document type declaration
Html:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
HTML5:
<!doctype html>
2), on the document declaration:
HTML has a long code, and it is difficult to remember this code, but HTML5 is different, only simple statement, which is also convenient for people's memory.
3), on the structure semantics
HTML: A label that does not embody structural semantics, usually named <div id= "header" ></div>, which represents the head of the Web site.
HTML5: There is a great advantage in semantics. Some new tags are available, such as:
Browsers that support HTML5 include Firefox (Firefox), IE9 and later, Chrome (Google Chrome), Safari,opera;
1.4. HTML5 characteristics1. Semantic characteristics (class:semantic)
HTML5 will give the web a better sense and structure. Richer labels will build a data-driven web that is more valuable to programs and users, with support for RDFA, micro-data, micro-formats, and more.
2. Local Storage features (Class:offline & STORAGE)
Web apps based on HTML5 have shorter start-up times and faster networking speeds thanks to the HTML5 APP Cache, local storage capabilities, Indexed DB (one of the most important technologies for HTML5 local storage), and API documentation.
3. Device compatibility features (Class:device ACCESS)
Since the API documentation for the geolocation feature has been exposed, HTML5 has provided more functional optimization options for Web application developers, bringing more experience capabilities. HTML5 provides unprecedented access to data and applications to open interfaces. Enables external applications to directly connect to the data inside the browser, for example: video and audio can be directly linked to the microphones and camera.
4. Connection characteristics (class:connectivity)
More efficient connection efficiency enables page-based live chat, faster web game experience, and more optimized online communication. HTML5 has more efficient server push technology, Server-sent event and WebSockets is one of the two features that can help us implement the server to "push" the data to the client's function.
5. Web Multimedia features (Class:multimedia)
Support the audio, video and other multimedia functions on the web side, and complement the website's own apps, cameras and AV functions.
6, three-dimensional, graphics, special effects features (class:3d, graphics & effects)
Based on the 3D capabilities of SVG, Canvas, WebGL, and CSS3, users will marvel at the amazing visuals that appear in the browser.
7, performance, integration characteristics (class:performance & Integration)
No user will ever wait for you. LOADING--HTML5 will solve previous cross-domain issues through XML Http Request 2 technology, and help Web applications and websites work faster in a diverse environment.
8. CSS3 characteristics (CLASS:CSS3)
Without sacrificing performance and semantic structure, CSS3 offers more style and stronger results. In addition, the Web's Open font format (WOFF) provides greater flexibility and control than previous Web typography.
1, improve the usability and improve the user's friendly experience;
2, there are several new tags to help developers define important content;
3, can bring more multimedia elements (video and audio) to the site;
4, can be a good alternative to flash and Silverlight;
5, when involved in the site crawl and index, SEO is very friendly;
6, can be used in a large number of mobile applications and games;
7, good portability.
1.5.2, disadvantage 1.6, HTML5 effect show 1.7, HTML5 learning and development tools Second, HTML5 new tags 2.1. Discarded labelsThe following HTML 4.01 elements have been deleted in HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
The <article> tag defines the external content. For example, a new article from an external news provider, or a text from a blog, or a text from a forum.
Html5:<article></article>
Html4:<div></div>
<aside> Tag definition: Content other than side article. The content of aside should be related to the content of article.
Html5:<aside>aside content is independent, but should be relevant to the content of the document. </aside>
Html4:<div>aside content is independent, but should be relevant to the content of the document. </div>
<audio> tags define sounds, such as music or other audio streams.
Html5:<audio src= "Someaudio.wav" > your browser does not support audio tags. </audio>
Html4:<object type= "Application/ogg" Data= "someaudio.wav" ><param name= "src" value= "someaudio.wav" >< /object>
<canvas> tags define graphs, tables and other images. This HTML element is designed for client-side vector graphics. It does not act on its own, but presents a drawing API to client JavaScript so that the script can draw everything it wants to draw onto a canvas.
Html5:<canvas id= "MyCanvas" width= "height=" ></canvas>
Html4:<object data= "Inc/hdr.svg" type= "Image/svg+xml" width= "$" height= "></object>"
<command> tags define command buttons, such as radio buttons, check boxes, or buttons.
HTML5: <command onclick=cut () "label=" Cut ">
Html4:none
<datalist> tags define a list of optional data. In conjunction with the INPUT element, you can make a drop-down list of input values.
HTML5: <datalist></datalist>
Html4:see ComboBox.
<details> tag defines the details of the element, which the user can view or hide by clicking. Use with <legend> to make detail titles. The title is visible to the user and can be turned on or off when clicked on detail.
HTML5: <details></details>
HTML4: <dl style= "Display:hidden" ></dl>
<embed> tags define embedded content, such as plugins.
HTML5: <embed src= "Horse.wav"/>
HTML4: <object data= "flash.swf" type= "Application/x-shockwave-flash" ></object>
The <figcaption> tag defines the caption of the figure element. The "figcaption" element should be placed in the position of the first or last child element of the "figure" element.
HTML5: <figure><figcaption>PRC</figcaption></figure>
Html4:none
<figure> tags are used to group elements. Use the <figcaption> element to add a caption to an element group.
HTML5: <figure><figcaption>prc</figcaption><p>the people ' s Republic of China is born in 1949...</p></figure>
HTML4: <dl>
The <footer> tag defines the footer for section or document. Typically, it contains the creator's name, the date the document was created, and/or contact information.
HTML5: <footer></footer>
HTML4: <div></div>
The HTML5: HTML4: <div></div>
HTML5: HTML4: <div></div>
The <keygen> tag defines the generated key.
HTML5: <keygen>
Html4:none
<mark> is used primarily to visually present to users those words that need to be highlighted. A more typical application of <mark> tags is to highlight search keywords to users in search results.
HTML5: <mark></mark>
HTML4: <span></span>
<meter> tags define weights and measures. Measures that are used only for the known maximum and minimum values. The scope of the measure must be defined, either in the text of the element or in the Min/max property.
HTML5: <meter></meter>
Html4:none
<nav> tags define the part of the navigation link.
HTML5: <nav></nav>
Html4:<ul></ul>
<output> tags define different types of output, such as the output of a script.
HTML5: <output></output>
HTML4: <span></span>
<progress> the process in which the tag is running. You can use the <progress> tag to display the process of time-consuming functions in JavaScript.
HTML5: <progress></progress>
Html4:none
<rp> tags are used in ruby annotations to define what is displayed by browsers that do not support ruby elements.
HTML5: <ruby> <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt></ruby>
Html4:none
<rt> tags define the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
HTML5: <ruby> <rt>ㄏㄢˋ</rt></ruby>
Html4:none
<ruby> tags define ruby annotations (Chinese phonetic notation or characters).
HTML5: <ruby> <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt></ruby>
Html4:none
<section> tags define the sections (section, section) in the document. such as chapters, headers, footers, or other parts of the document.
HTML5: <section></section>
HTML4: <div></div>
<source> tags define media resources for media elements such as <video> and <audio>.
HTML5: <source>
HTML4: <param>
The <summary> tag contains the title of the details element, which is used to describe the details of the document or document fragment. The "Summary" element should be the first child element of the "details" element.
HTML5: <details><summary>html 5</summary>this document teaches you everything the about HT ML 5.</details>
Html4:none
The <time> tag defines the date or time, or both.
HTML5: <time></time>
HTML4: <span></span>
<video> tags define videos, such as movie clips or other video streams.
HTML5: <video src= "Movie.ogg" controls= "Controls" > your browser does not support video tags. </video>
Html4:<object type= "Video/ogg" Data= "MOVIE.OGV" ><param name= "src" value= "MOVIE.OGV" ></object>
HTML5 Learning Summary--html5 Getting started and adding tags
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
