HTML5 reflects the dramatic changes on the network and the way in cloud implementation services. This article is the first part of a series consisting of four parts of the article series aimed at finding and highlights changes in HTML5. It begins to introduce new organizational tabs and pages, and then provide some high-level information on web design, such a form is created, API is used and its value lies, and some rather innovative approach may provide Canvas and so on.
HTML5 is a design language to organize web content, and its purpose is to create a standard and intuitive UI markup language for the web design and development becomes easier. HTML5 provides a variety of tools and cutting division of the page, which allows you to create not only cutting assembly can be used to logically organize sites, but also gives the ability to websites aggregation. HTML5 is a "method of mapping information to web design" because it embodies the essence of the mapping information, partition information, and to information tagged to make it easy to use and understand. This is the basis expressive HTML5 semantic and practical aesthetics, HTML5 gives designers and developers the ability to publish various levels of a wide variety of content out, from simple text to rich, interactive multimedia are all included.
HTML5 provides efficient data management, mapping, video and audio tools that facilitate the development of cross-browser and portable device on a web application. HTML5 is one of the driving mobile cloud computing technology development services, because it allows for greater flexibility, support the development of very exciting interactive website. It also introduces a new label (tag) and enhanced functionality, including an elegant structure, control form, API, multimedia, database support, and significantly improve the processing speed.
HTML5 new labels are able to evoke highly correlated, their role in the package label and usage. More HTML version of the past is to use non-descriptive label, however, HTML5 has a highly descriptive, intuitive label, which provides a wealth of content to make people recognize the contents of the label immediately. For example, <div> tag have come in two Added <section> and <article> tag is frequently used. <Video>, <audio>, <canvas> and adding <figure> tag provides a more accurate description of the specific types of content.
HTML5 provides:
1. The exact description of its contents are intended to be included in the label2. The enhanced network communication
3. greatly improved the common memory
4. Web Worker to run background processes
5. Establish a persistent connection between the local applications and servers WebSocket interface to
store data retrieval methods 6. better
7. speed up page loading speed and saving
8. use CSS3 to manage the GUI support, which means that HTML5 can be content-oriented
9. improved browser form processing
the API 10. the SQL-based database, which allows the client local storage
11. the canvas and video, graphics and video can be added without the need to install third-party plug
12. Geolocation API specification, by which to move into the positioning function using a smartphone cloud services and applications
13. the enhanced form, which reduces this necessity JavaScript code downloaded, allowing for more efficient communications between mobile devices and cloud services.
HTML5 to create a more attractive user experience: page design using HTML5 can provide similar experience of desktop applications. HTML5 also provides enhanced multi-platform development through the API function and ubiquitous browser that combines a. By using HTML5, developers can provide a smooth modern application experience across various platforms.
HTML5 when you say the word, you use a short word to express a continuing innovation. The new mark, a new set of methods, and based on HTML5 and its two colleagues with complementary: the interaction between the general development framework CSS3 and JavaScript, which is customer-centric processes phenomenon core applications. In addition to the many desktop deployment techniques and methods of HTML5 technology, HTML5 can also be implemented in feature-rich mobile phone web browser - mobile phone browser is a growing market, Apple iPhone, Google Android and Palm webOS running the popularity of mobile phones everywhere that you can prove it.
HTML5's powerful features in a very important aspect is mapping information - or should we say content blocking (content blocking). If you like - this approach will produce a much easier to understand the process. You can see on the web by increasing process control in this area, this tool in the design and development has become just how efficient.
HTML5 herald There are some situations, that it has a more efficient semantic processing on the text level, and have a greater control on the form, structure and usage. All of these features and many other innovative HTML5 subtleties that make up the basis of a growing dominance of the paradigm. Many institutional entities, commercial and other - many do not even put processing and communication of information as their primary agency activities of the organization - the development of the phenomenon of varying degrees is growing by the invasion.
HTML5 is not a magic lamp, there will be no wizard appears. However, its technology and methods of making it a piece of property next best thing, second only to polish a lamp of this matter.
Plan page
You will want to create a simple web page. In this process, I will discuss several new HTML5 tags introduced. In order to create an efficient and effective is the web page, you have to develop a plan, consider all the components you want to create. Web page you create will have high-level design shown in Figure 1, page design contains a Header area, a Navigation area, a region that contains the Article Section area and a three Aside region, and a final Footer area. This page is designed to work in Google's Chrome browser, which eliminates some of the visual clutter, confusion is caused by these adjustments browser compatibility issues, but also hinder the understanding of the infrastructure. Our goal is to create a clear description of the use of new HTML5 tags of the page, showing how to use them to create well-formed code and elegant page design.
Figure 1. Acme United plan pages
During the creation of this page, I will be involved in CSS3, I need it to correctly render HTML5 page. For HTML5 CSS3 page style, navigation and the general perception is essential, some of its property group, you can (see Resources section) in WsSchool of CSS3 find these attributes on the reference site, which includes some useful elements, such as background, font, marquee and animation and so on.
However, before beginning construction page, you need to learn some new HTML5 tags.
Header area
Examples Header area contains the page title and subtitle, <header> tag is used to create content Header area of the page. In addition to the page itself, <header> tag may also contain information about the disclosed <section> and <article> of. Page created here a Header area of the page, which gives the high-level design, and one in the interior of the Article and Section area Header area. Listing 1 provides an example of a <header> tag tag.
Examples of Listing 1. <header> tag
<Header>
<h1 of> Title Text </ h1 of>
<P> may be placed in a text or image here </ P>
<P> Logo usually placed in this place </ P>
</ header>
<Header> tag may also comprise a <hgroup> tag, as shown in Listing 2. <Hgroup> tag the packet header together, using <h1> to <h6> classifying these titles to display the main titles and subtitles here.
The example in Listing 2. <hgroup> tag
<Header>
<HGroup>
<h1 of> main title </ h1 of>
<H2> sub-title </ H2>
</ HGroup>
<P> text or image may be placed here </ P>
</ header>
Navigation Area
You can use the <nav> tag to create Navigation area of the page. <Nav> element defines a special area for navigation, <nav> tag should call the shots navigation sites, rather than to place the link is contained in the other area of the page. Navigation region may contain code such as that shown in Listing 3.
The example in Listing 3. <nav> tag
< nav>
< ul>
< li>< a href="#" kesrc="#">Home< /a>< /li>
< li>< a href="#" kesrc="#">About Us< a>< /li>
< li>< a href="#" kesrc="#">Our Products< /a>< /li>
< li>< a href="#" kesrc="#">Contact Us< /a>< /li>
< /ul>
< /nav>
Article and Section area
Your page contains a design Article area, the storage area for the actual content of the page. You use the <article> tags to create this area, the contents of the tag can be defined independently of the other content pages in use. For example, if you want to create an RSS feed (RSS feed), then you can use the <article> to uniquely identify the content. <Article> tag identification that may be deleted, may be placed in another context, and is to be fully understood.
Acme United Planning Article area contains three Section area, you can use <setction> tags to create these zones. <Section> region contains components relevant web content, <section> tag - and <article> tag - may contain a header, footer, or other components required to complete the portion of the content. <Section> tag content for the packet, <section> tag and <article> tag is typically a <header> and to begin with a <footer> end, the contents of the tag is placed between the two.
<Section> tag can also contain <article> tag, like <article> tag can contain <section> tag the same. It is removed or the case of grouping similar information <section> tag should be used, and the <article> tag should be used to place an article or blog information such as a class, these elements can not affect the meaning of the content It is placed into a new context. <Article> tag, just as its name implies, provides a complete information packet. In contrast, <section> tag contains the associated information, the information itself can not be placed in a different context, since they represent the meaning of that case will be lost.
Usage example <article> and <section> tag, see Listing 4.
4. <article> tag and list examples of <section> tag
< article>
< section>
Content
< /section>
< section>
Content
< /section>
< /article>
< section>
< article>
Content
< /article>
< article>
Content
< /article>
< /section>
Picture element
<Section> and <article> tag both, as well as <header> and <footer> tag can contain a <figure> tag, you use the tag to add images, diagrams and photographs.
<Figure> tag can contain <figcaption>, the label contains the header graphics contained in the <figure> tag Accordingly, it allows you to enter a description, the more closely related graphics and content together. Listing 5 provides an example <figure> and <figcaption> tag structure.
Examples Listing 5. <figure> and <figcaption> tag
< figure>
< img src="/figure.jpg" kesrc="/figure.jpg" width="304" height="228" alt="Picture">
< figcaption>Caption for the figure< /figcaption>
< /figure>
Media elements
<Section> and <article> tag can also contain a variety of media elements, HTML5 label provided immediately convey the meaning of its contents. Media elements, such as music and video, previously only be embedded, but now can be more precisely identified it.
<Audio> tag identifies the sound content, such as music or any other audio streams. <Audio> tag is used to control some of the properties of the audio content, like the case of when and how to play areas, these properties are: src, preload, control, loop and autoplay. In the example given in Listing 6, as long as a page to load audio player on the meeting, which will continue to play, control provided allows users to stop or resume audio playback.
Examples Listing 6. <audio> tag
< audio src="MyFirstMusic.ogg" kesrc="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
< /audio>
<Video> tag allows you to play a video clip or visual media fluidization. Which has <audio> tag all attributes, plus another three: poster, width and height. When the video is being loaded or in the worst case there is no video loaded in, poster property allows you to find a picture to deal with first.
7 provides an example of a list of <video> tag structure
The example in Listing 7. labels
< video src="MyFirstMovie.ogg" kesrc="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
< /video>
<Video> and <audio> tag may comprise a <source> tag, which defines the multimedia resources <video> and <audio> tag. Using this element, you can specify an alternative video or audio file, then the browser will be based on its media type or supported codecs to choose from. Listing 8 has two options, if WMA version of a file can not be played in the browser used in the case, would no longer try MP3 version. Otherwise, it displays information so that users know why the audio is not available.
Examples Listing 8. <source> tag
< audio>
< source src="/music/good_enough.wma" kesrc="/music/good_enough.wma" type="audio/x-ms-wma">
< source src="/music/good_enough.mp3" kesrc="/music/good_enough.mp3" type="audio/mpeg">
< p>Your browser does not support the HTML 'audio' element.< /p>
< /audio>
<Embed> tag defines embedded content can be brought to a page - for example, a plug-in Adobe Flash SWF files. Listing 9 contains the type attribute, indicating the resource is embedded Flash file.
Examples Listing 9. <embed> tag
< embed src="MyFirstVideo.swf" kesrc="MyFirstVideo.swf" type="application/x-shockwave-flash" />
In addition to the src and type attribute, <embed> tag also has a height and width attributes.
Reproduced in: https: //www.cnblogs.com/Leeyong/archive/2011/09/03/2165538.html