[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: //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:
Copy code | |
//No need to write type="text/css", otherwise you will be repeating yourself
Hello world Hello world Hello world
Hello world
|
-------------------------------------------------- ------------------------------------
Add a link to the entire block of content (including multiple block-level elements)
Copy code | |
Headline text< ;p>Paragraph text. //HTML5: Headline textParagraph text. |
-------------------------------------------------- ------------------------------------
HTML5 design principle four: seeking truth and being pragmatic The new semantic elements involve header, footer, section, article...
Copy code | |
... ... |
//HTML5 :
Note: The new elements section, article, aside and nav represent a new content model, an unprecedented content model in HTML - partitioning content.
It is more valuable to use new elements as replacements for classes, because these elements can be used not only once in a page, but can be used multiple times and can be nested.
The most common section can be said to be the one most relevant to the content. And article is a special kind of section. Aside is a special section. Finally, Nav is also a special section.
/
The code is as follows | Copy code |
/HTML 4.01 XHTML 1.0: ...
... //HTML5: |
##Note: In HTML5, As long as you create a new content block, whether using section, article, aside, nav, or other elements, you can use H1 in it without worrying about what level the title in this block should be ranked in the entire page; H2 , H3, there is no problem.
-------------------------------------------------- ------------------------------------
HTML5 design principle five: Smooth degradation
Gradual The flip side of enhancement is smooth degradation.
Use the type attribute to enhance the form:
Copy code | |
input type="range" input type="email" input type="date" input type="url" |
Existing browsers cannot understand these new type values, but when they see a type value that they do not understand, they will interpret the value of type as text.
HTML5 also adds new attributes to input elements, such as placeholder (placeholder), which is used to pre-place some text in the text box. No JavaScript is required to implement it, it’s perfect.
-------------------------------------------------- ------------------------------------
HTML5 video versus Flash video (video element):
If the browser supports the video element and Ogg, then use the second video.
If the browser does not support the video element, then you should try Flash video.
If the browser does not support the video element or Flash, I also provide a download link.
Follow another design principle, Metcalfe’s Law:
The above is the detailed content of Analysis of design principles for getting started with html5. For more information, please follow other related articles on the PHP Chinese website!