Home >Web Front-end >H5 Tutorial >Analysis of design principles for getting started with html5

Analysis of design principles for getting started with html5

巴扎黑Original: 2017-03-19 14:04:441700browse

[Introduction] This article is an article about design concepts from ued of alimama. It mainly talks about the design principles of getting started with HTML5 that I have started to browse. Friends in need can refer to it. The era of HTML5 and CSS3 has arrived. The new 2011 Taobao homepage has all used HTML5. Only by embracing changes

This article is an article about design concepts from ued of alimama. It mainly talks about the current start Browsing the design principles of getting started with HTML5, friends in need can refer to it.

The era of HTML5 and CSS3 has arrived. The new 2011 Taobao homepage has all used HTML5. The only way to embrace change is to embrace change. The translation of the article is very good. After reading it again, I feel that I understand a lot. I strongly recommend other children's shoes developers, especially front-end, to take a look.
Not only did I understand the relationship between html4, xhtml1.0, xhtml2.0, and html5, but I also understood why HTML5 appeared. At the same time, I stepped up the application of HTML5 in the project.

-------------------------------------------------- ------------------------------------
The famous Asimov three laws of robots:
Robots must not harm humans, or stand by and watch humans being harmed.
Robots must obey human orders unless the order violates the First Law.
Robots must defend themselves, as long as they do not violate the first and second laws.

-------------------------------------------------- ------------------------------------
The same points between xhtml1.0 and html4.0:
The contents of the two specifications are the same;
The vocabulary is the same;
All elements are the same;
All attributes are also the same;
xhtml1.0 and html4. 0The only difference:
XHTML 1.0 requires the use of XML syntax (strict coding style)
//All attributes must use lowercase letters;
//All elements must also use lowercase letters;
/ /All attribute values must be quoted;
//You have to remember to use closing tags, and remember to use self-closing tags for img and br.
The only change between XHTML 1.1 and xhtml1.0:
Mark the document as an XML document
//XML error handling model: If the parser encounters an error, it stops parsing.
//For browsers that cannot understand XML, users will not be able to see this web page directly.
XHTML 2 features (this specification is not complete):
Still uses the XML error handling model, you must ensure that the document is sent as the XML document type;
Intentionally no longer backward compatible with existing versions of HTML, Developers and browser vendors will never support it.
Design principles that are truly widely used:
Be conservative when sending; be open when receiving.
//As professionals, when sending documents, we will try to be conservative, try to use best practices, and try to ensure that the document is well formatted.
//But from the browser's perspective, they must be open to receiving any document.

-------------------------------------------------- ------------------------------------
HTML5
1, 2004 Web Hypertext was established Applications Technology Working Group (Web Hypertext Application Technology Working Group, WHATWG), completely separated from W3C.
2. W3C established the HTML5 working group in 2007 to continue its work based on the results of the WHATWG work.

-------------------------------------------------- ------------------------------------
HTML5 design principle one: avoid unnecessary complexity

The code is as follows

Copy code

1. How to write DOCTYPE:
/ /HTML 4.01：

//XHTML 1.0:

//HTML5：
//

This writing method will trigger The browser's standards mode. Note: Doctype is not written for browsers, Doctype is written for validators. Let the validator validate my document against that doctype.
2. How to write the character encoding of the specified document:

The code is as follows

Copy code

//HTML 4.01:

//XHTML 1.0:

//HTML5:

Note: This shorthand is not only applicable to the latest version of the browser, but is also valid as long as the browser is still used by people today.
Other concise writing methods of HTML5:

## The code is as followsCopy code##< link href="#" rel="stylesheet"/>

//No need to write type="text/css", otherwise you will be repeating yourself