HTML5 Study Notes (i)--HTML5 Overview and new tags

Directory

• I. SUMMARY of HTML5
• 1.1, why need HTML5
• 1.2. What is HTML5
• 1.3. HTML5 Status and browser support
• 1.4. HTML5 characteristics
• 1.5. HTML5 Advantages and disadvantages
• 1.5.1, advantages
• 1.5.2, disadvantages
• 1.6. HTML5 Effect Display
• 1.7. HTML5 Learning and development tools
• 1.7.1, basic requirements
• 1.7.2, development tools
• 1.8. HTML5 grammar rules and document declaration
• 1.8.1, grammar rules
• 1.8.2, document Declaration
• 1.8.2, document Declaration
• Second, the discarded label
• Third, the new label
• 3.1, the new structure tag
• 3.2. New additions to other elements
• 3.2.1, meter
• 3.2.2, Time
• 3.2.3, Progress
• 3.2.4, DataList
• 3.3. Multimedia tags
• 3.3.1, video tag
• 3.3.2, audio label
• 3.3.3, embed elements
• Iv. HTML5 Compatibility
• 4.1. Compatibility test
• 4.2, HTML5 backwards compatible
• 4.2.1, Compatibility test
• 4.2.2, Html5shiv
• 4.2.3, MODERNIZR
• V. Sample download

Directory

• I. SUMMARY of HTML5
• 1.1, why need HTML5
• 1.2. What is HTML5
• 1.3. HTML5 Status and browser support
• 1.4. HTML5 characteristics
• 1.5. HTML5 Advantages and disadvantages
• 1.5.1, advantages
• 1.5.2, disadvantages
• 1.6. HTML5 Effect Display
• 1.7. HTML5 Learning and development tools
• 1.7.1, basic requirements
• 1.7.2, development tools
• 1.8. HTML5 grammar rules and document declaration
• 1.8.1, grammar rules
• 1.8.2, document Declaration
• 1.8.2, document Declaration
• Second, the discarded label
• Third, the new label
• 3.1, the new structure tag
• 3.2. New additions to other elements
• 3.2.1, meter
• 3.2.2, Time
• 3.2.3, Progress
• 3.2.4, DataList
• 3.3. Multimedia tags
• 3.3.1, video tag
• 3.3.2, audio label
• 3.3.3, embed elements
• Iv. HTML5 Compatibility
• 4.1. Compatibility test
• 4.2, HTML5 backwards compatible
• 4.2.1, Compatibility test
• 4.2.2, Html5shiv
• 4.2.3, MODERNIZR
• V. Sample download

I. SUMMARY of HTML5

1.1, why need HTML5

HTML4 is not old enough to meet the growing needs of the Internet, especially the mobile internet. In order to enhance the browser function Flash is widely used, but security and stability worrying, not suitable for mobile use (power, touch, not open).

HTML5 enhanced the native functionality of the browser, the browser function that conforms to the HTML5 specification will be more powerful, reduce the Web application to rely on the plug-in, make the user experience better, make the development more convenient, In addition, from the introduction of HTML4.0 to 5.0, there has been a total of 17 years, the change in HTML is very small, this does not conform to a good product evolution rules.

1.2. What is HTML5

HTML5 refers to a set of technology combinations including HTML, CSS, and JavaScript. It wants to reduce web browsers ' rich Web application services (plug-in-based Rich Internet application,ria) that require plugins, such as: Adobeflash, Microsoft The needs of Silverlight and Oracle JavaFX, and provide more standard sets to effectively enhance network applications. HTML5 is the latest version of HTML, established in October 2014 by the World Wide Web Consortium (WWW) completion standard. The goal is to replace the 1999 set of HTML 4.01 and XHTML 1.0 standards, in order to enable the rapid development of Internet applications, the network standards to meet the needs of contemporary network.

1.3. HTML5 Status and browser support

Most mainstream browsers already support HTML5, but the way that browsers support them and the syntax is different. Browsers that support HTML5 include Firefox (Firefox), IE9 and later, Chrome (Google Chrome), Safari,opera and other modern browsers.

Support Score:

If you want to learn more, see the compatibility section of this article.

PC End (total score 555):

Tablet (total 555 points):

Mobile (total 555 points):

1.4. HTML5 characteristics

HTML5 Eight feature categories for 8 logo Semantic web, offline & storage, device access, communications multimedia, graphics and effects, performance and integration, rendering (CSS3)

1.4.1. Semantic characteristics (class:semantic)

HTML5 gives the web a better sense and structure. Richer labels will be along with the RDFa.

1.4.2. Local Storage Features (Class:offline & STORAGE)

HTML5 APP Cache, local storage function, IndexedDB, FILEAPI

1.4.3. Device Access features (Class:device access)

Born for mobile development. Gravity sensing, global geolocation, microphones, cameras

1.4.4. Connection characteristics (class:connectivity)

WebSocket, Server-sent events implement two-way connection, message push

1.4.5. Web Multimedia Features (Class:multimedia)

Support audio, video and other multimedia functions on the web side.

1.4.6. Three-dimensional, graphic and special effects features (class:3d, graphics & effects)

This trick will flash beat, graphics enhanced, svg,canvas,webgl,2d/3d games and page visual effects.

1.4.7. Performance and Integration features (Class:performance & Integration)

No user will ever wait for your loading,html5 to add Webworker, XMLHttpRequest2

1.4.8. Rendering (css3/styling)

In addition to the DOM interface, HTML5 adds a more diverse application interface (API):

Html5canvas API: APIs for dynamic output and rendering graphics, charts, images, and animations HTML5 audio and video: New elements in HTML5 that provide developers with a common, integrated, scripted API to process audio and video without installing any plugins Offline storage database (offline network application) editing drag-and-drop cross-document communication/network communication APIs: Two fundamental foundations for building real-time and cross-source (Cross-origin) Communications: cross-document communication Messaging) and XMLHttpRequest level 2. When browsing the history management MIME and protocol process, the header registration micro-data page stores the above technology, although it is the content of the WHATWG HTML documentation, but not all included in the HTML5 documentation. Some of the relevant technologies, like those listed below, are not included in any of these 2 documents. These technologies were published separately in the documentation. Geolocation API: Users can share geographic locations and enjoy the location-aware service (Location-aware Services) Index database API with the assistance of a web App (Indexed. Previously Websimpledb) file API: Handles file uploads and manipulates file directories and file systems: This API is designed to satisfy clients that store requirements for file writes in the absence of good database support: writing content from a Web application to a file A common misconception is that HTML5 can provide animated effects on Web pages, which is not right, and animation effects are needed to match JavaScript and CSS. However, the static HTML5 with CSS can represent the overlay of the typesetting structure and the native support and video mixing and control (control is generally run by JavaScript), so it is simple to understand the state of HTML5 unit time as the keyframe of the animation.

1.5, HTML5 advantages and disadvantages of 1.5.1, advantages

1, network standards Unified, HTML5 itself is recommended by the Web. 2, multi-device, cross-platform 3, instant update. 4. Improve usability and improve user friendly experience; 5, there are several new tags, which will help developers define important content, 6, can bring more multimedia elements (video and audio) to the site, 7, can be a good alternative to flash and Silverlight; 8, When it comes to the crawling and indexing of websites, it is very friendly to SEO, 9, is widely used in mobile applications and games.

1.5.2, disadvantages

A), security: Like the previous FIREFOX4 Web sockets and transparent proxy implementations have serious security issues, while the Web Storage, Web sockets such features are easily exploited by hackers to steal users ' information and information. b), perfect: Many features the level of support for each browser is different. c), technology threshold: HTML5 simplifies the work of developers while representing a lot of new properties and APIs that require developers to learn, such as web workers, Web sockets, Web Storage and other new features, background and even the knowledge of the browser principle, the opportunity is also a huge challenge D), Performance: Engine problems on some platforms cause HTML5 performance to be low. e), browser compatibility: The biggest drawback, IE9 the following browsers almost annihilated.

1.6. HTML5 Effect Display

HTML5 for the previous version, not a simple version upgrade, but a comprehensive framework and performance of the promotion and optimization, this is manifested in: The syntax is simpler, a large number of new semantic tags, powerful canvas elements in place of Flash, rich API interface use greatly facilitates the developer and browser interaction. Among them, the key improvement is: Based on HTML5 powerful new framework, such as mobile phone device and page interaction, such as gravity sensing, geo-location, offline operation, etc., in the mainstream mobile platform, can easily customize the performance of powerful WebApp, including games, animations and enterprise-class application development.

CSS3 drawing The Simpsons

Games developed by HTML5

1.7, HTML5 learning and development tools 1.7.1, basic requirements

Html+css+javascript with any kind of Web server background technology such as (java,dotnet,php)

1.7.2, development tools

Mainstream browsers such as Chrome browser, Firefox browser, Safari browser, ie9+ browser, IETester, etc.

HTML5 there is no limit to the development tools, any text editor can be as follows: webstorm/notepad++ + zendcode/textmate + zendcode/sublime 2,visual studio2013+,visual Studio Code,hbuilder, etc.

If you are accustomed to eclipse friends can use Hbuilder,eclipse is really not suitable for writing front-end script (40 million American DAO stuff ...) ），

Hbuilder is a web development IDE that supports HTML5 in Dcloud (Digital Paradise). It is based on eclipse, so it is naturally compatible with Eclipse plug-ins. Fast, is Hbuilder's biggest advantage, through the complete grammar hints and the code input method, the code block and so on, greatly enhances the HTML, JS, the CSS development efficiency. Official website: http://www.dcloud.io/

1.8. HTML5 grammar rules and document declaration 1.8.1, grammar rules

a), label to lowercase attribute value does not add "" or " B", can omit some tags HTML body head tbody C), can omit some end tag tr TD Li D), single label without adding end Tag img input e), abolished tags, see 2nd Font Center Big

1.8.2, document Declaration

<! The doctype> declaration must be in the first row in the HTML5 document, which is before the <HTML> tag. This tag informs the HTML specification used by the browser document. The DOCTYPE declaration is not an HTML tag, it is an instruction that tells the browser the version of the markup used to write the page. It is important to specify DOCTYPE in all HTML documents so that the browser can understand the expected document type. The DOCTYPE in HTML 4.01 requires a reference to the DTD because HTML 4.01 is based on SGML. While HTML 5 is not SGML-based, it does not require a reference to the DTD.

1.8.2, document Declaration II, discarded labels

The following HTML 4.01 elements have been removed in HTML5, and although browsers support these tags for compatibility considerations, it is recommended to use a new alternative tag, which contradicts the old browser's lack of support for new tags, depending on the audience of the project.

2.1. Elements that can be replaced with CSS

These elements include Basefont, big, center, font, S, Strike, TT, U. These elements are purely for page presentation, and the content of the presentation should be done by CSS.

2.2. Frame Framework

These elements contain frameset, frame, noframes. Frame frames are not supported in HTML5, only the IFRAME framework is supported, or the above three tags are removed with a page-by-page format created by the server side.

2.3. Only some elements supported by the browser

These elements include applets, Bgsound, Blink, Marquee, and so on.

2.4. Other elements that have been abolished

Abolition of RB

HTML5 Study Notes (i)--HTML5 Overview and new tags