最近Html5的呼聲越來越強烈，特轉載一篇Html5的簡介分享。
The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part serIEs that will introduce Html5 and its basic features as well as explain the key differences from HTML4.01 and XHtml 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:
1. New Elements
2. Semantic Changes
3. Getting it Working Today
This article will brIEfly introduce each of these topics to prepare you for the in-depth articles ahead.
APIsBefore we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. Html5 includes several new APIs that are integrated with some of the new Html5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:
2D drawing API which can be used with the new canvas element. API for playing of video and audio which can be used with the new video and audio elements. An API that enables offline Web applications. An API that allows a Web application to register itself for certain protocols or media types. Editing API in combination with a new global contenteditable attribute. Drag & drop API in combination with a draggable attribute. API that exposes the history and allows pages to add to it to prevent breaking the back button. Cross-document messaging.As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web aPPS. This is Excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline Access.
New Elements in Html5Html5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brIEf descriptions (source: w3schools):
<article> Defines external content <aside> Defines some content aside from the article it is placed in <audio> Defines sound, such as music or other audio streams <canvas> Defines graphic, such as graphs or other images <command> Defines a command button, like a radiobutton, a checkbox, or a button <datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list <datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value <datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements <details> Defines details of an element, which the user can see, and click to hide <dialog> Defines a dialog, such as a conversation <embed> Defines embedded content, such as a plug-in <event-source> Defines a source for events sent by a server <figure> Used to group some elements <footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information <header> Defines the header of a section or document <mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text <meter> Defines a measurement. Used only for measurements with a known minimum and maximum value <nav> Defines a section of navigation links <nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule> <output> Defines different types of output, such as output written by a script <progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript <rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest> <section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document <source> Defines media resources for media elements, such as <video> and <audio> <time> Defines a time or a date, or both <video> Defines video, such as a movIE clip or other video streamsThough we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.
Semantic ChangesThis is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:
1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>
Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.
Getting Html5 Working TodayDon’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with Html5 right away. In article four, we’ll take a look at how you can start your Html5 journey sooner rather than later.
HTML5通過引入新的標簽元素和API，大大增強其表現力。上述內容簡要的介紹了HTML5的新特性，各位通過閱讀上述文字，可以看到Html5的強大潛力。 給出了若干Html5的例子。