HTML5 study Excerpt

Design principle

It is not what is included in the specification, but why it is included in the specification, and how the designers look at it when designing the specification.

History: html2.0--"html3.2--" html4.0.1--"xhtml1.0--" XHTML1.1 and XHTML2.0 failure--"HTML5

Principle:

(1) Avoid unnecessary complexity

DOCTYPE for HTML 4.01:

<! DOCTYPE HTML PUBLIC "-//w3c/dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

DOCTYPE of XHTML 1.0:

<! DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

The DOCTYPE in HTML 5 is simplified into:

<! DOCTYPE html>

What document will write DOCTYPE at the beginning? It is not written to the browser to see. DOCTYPE is written to the authenticator. That is, the reason I wrote that line of XHTML 1.0 doctype at the beginning of the document was to tell the authenticator that the validator would follow that DOCTYPE to validate my document. The browser must be open when it is received. Therefore, it does not check for any format type, and the validator does not care about the format type. Another design principle of HTML5, which must be backwards compatible, compatible with future HTML versions-whether HTML6, HTML7, or whatever-is compatible with the current HTML version, HTML5. Therefore, placing a version number in the DOCTYPE does not make much sense, even for the verification certificate.

Note: When Microsoft introduced CSS in the first place, they took the lead in the browser to support CSS, but also launched their own box model-later standards released, but the standard used a different box model. They came up with a very ingenious idea. That is, using DOCTYPE, use effective DOCTYPE to trigger the standard mode instead of the compatible model (Quiks mode). When we add doctype to the document, it is tantamount to declaring "I want to use standard mode", but this is not the original intention of inventing DOCTYPE. This is only for the purpose of achieving special purposes in using DOCTYPE.

DOCTYPE HTML is the minimum number of characters that trigger standard mode in Internet Explorer before the document is finished.

There is also an example of how the specification omits unnecessary complexity and avoids unnecessary complexity. If the previous document was using HTML 4.01:

<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" >

When you specify the same encoding in XHTML 1.0, you have to hit the keyboard a bit more because you also have to declare that the META element is in a starting XML tag:

<?xml version= "1.0" encoding= "UTF-8"? ><meta http-equiv= "Content-type" content= "text/html; charset= Utf-8 "/>

In HTML5, the characters you want to knock are only:

<meta charset= "Utf-8" >

In HTML5, if I use the link element to link to a style sheet, use rel= "stylesheet" without saying type= "Text/css". With the script element, you don't have to say type= "Text/javascript", the browser will naturally assume you're using JavaScript. Avoid-unnecessary-complexity.

(2) Support for existing content

Element attributes can be case-insensitive, property values can be unquoted

(3) Solving real-world problems

The page already has a piece of content, I want to add a link to the whole piece of content, what to do?

<p><a href= "/path/to/resource" >paragraph text.</a></p>

In HTML5, I simply wrap all the content in a LINK element.

<a href= "/path/to/resource" >
<p>paragraph text.</p>
</a>

It solves a real problem. Links contain block-level elements, saying that HTML5 solves the real problem, the essence of which is "have you been writing this for years?" Now we have changed the standard, allowing you to write like this.

(4) Pragmatic

The new semantic element in HTML5 is the reflection of the principle of truth-seeking. The new elements are not too much, not infinitely scalable, but they are a good thing. Although the number is few, but the meaning is very unusual. These new elements involve head (header), foot (footer), partition (section), article (article) ..., phase

(5) Smooth degradation

<video>
<source src= "Movie.mp4" >
<source src= "MOVIE.OGV" >
<object data= "movie.swf" >
<a href= "Movie.mp4" >download</a>
</object>
</video>

The above code contains 4 different levels.
1, if the browser supports video elements, also support H264, nothing to say, with the first video.
2. If the browser supports the video element, OGG, then use the second video.
3. If the browser does not support video elements, then try Flash video.
4, if the browser does not support the video element, also does not support Flash, I also gave the download link.

(6) The end user first

Once a conflict is encountered, the end user first, followed by the author, followed by the implementation, and then the standard-setting, and finally the theoretical perfection.

The Drupal community has contacted Mark Bolton (Mark Boulton) and Lisa Reheute (Leisa reichilt) to design Drupal's interface. They plan to follow some design principles. To this end, they did not talk on paper, but after a period of thinking and brewing, to guide the future work of the 4 design principles:

Simplify the most common tasks so that infrequent tasks are not too cumbersome.
Designed for 80% only.
Give content creators the greatest rights.
The default setting is intelligent.

reference: >

What the hell is HTML5?

Generally speaking, the HTML5 contains three parts of HTML, CSS and JavaScript, not just the HTML part, CSS 3 and JavaScript also have a lot of innovation, so that the entire Web program function more colorful.

　　HTML5 's technical composition

　　Offline features

HTML5 provides several different offline storage capabilities through JavaScript, with better resiliency and architecture than traditional cookies, and the ability to store more content.

• WebStorage: Larger and more resilient storage than Cookies
• Web SQL database: local-side SQL databases
• Indexed Db:key-value's Local database
• Application cache: Caches some of the most commonly used Web content.

　　Real-time communication

In the past, due to the HTTP protocol and the browser design, real-time interactivity is quite limited, only some techniques can be used to "simulate" real-time communication effects, but HTML5 provides perfect real-time communication support.

• WebSocket: Real-time Socket online
• Web Workers: Once JavaScript is a single thread, you can have multiple operations through a Worker
• Notifications: Native cue message similar to growl hint like OS X

　　File and hardware support

I do not know if you have found that in Gmail and other new Web applications, can be dragged through the way the file as an email attachment? This is the Dragn drop and file API in the function of this part of the HTML5 file.

• Dragn drop:html Elements of the drag
• File API: Read the contents of a user's native computer
• Geolocation: geo-positioning
• Device Orientation: The direction of the handheld device
• Speech Input: Voice input

　　The semantics of

A semantic network is a way for a computer to understand more about the content of a Web page, and it can be a great help for search engine optimization (SEO) or referral systems.

• New Tags: tags like headers, sections, etc.
• Application Tags: is also a new label, such as meter, progress
• such as
• Microdata: Add semantic data so that websites like search engines can display correctly
• Form type:form can add more type, including email and Tel properties, the browser will assist in data format validation

　　Multimedia

Audio, video's label support, and canvas's functionality should be the most familiar part of HTML5, and the main reason many people think Flash will be replaced.

• Audio Video: Native playback support for movies and music
• CANVAS:2D support for drawing functions
• Canvas 3d:3d support for drawing features
• SVG: Vector diagram support

　　CSS 3

CSS3 supports the embedding of fonts, layout, and the most impressive animation features.

• Selector: More Resilient Selector
• Webfonts: Embedded Fonts
• Layout: A variety of typesetting options
• Stlying radius gradient Shadow: fillet, Gradient, shadow
• Border background: Background support for borders
• Transition: Moving Effects of components
• Transform: Deformation effect of the component
• Animation: Adding motion and morphing to animation support

　　Javascript

The fundamentals of comparing JavaScript have also added Dom's API, and browser-to-page record changes.

• Dom API: More convenient query DOM component
• History API: Browser page content modification, convenient Ajax can keep browsing records

For older browser compatibility, CSS3 pie, previously written, is a library of JavaScript libraries that allow legacy browsers to support CSS 3 functionality.

Modernizer is also a very important JavaScript library that provides developers with an easy way to determine whether the current user's browser has support for specific HTML5 functions.

Source: >

HTML5 study Excerpt