HTML5 learning materials (development and design principles)

“Be conservative in what you send; be liberal in what you accept.   –The Robustness principle”

"For their own output to strict; for others to be flexible input - the robustness of the principle."

Everything Speaking from robustness principle, the principle of robustness in the first place, in order:

1. Let us think with robustness to listen to the principle of sharing.

2. Robust main principle is to facilitate the design principles of HTML5.

3. robust acted extended meaning can rise to go.

A. XHTML2 between & HTML5 have to say the story

HTML Tag HTML document as a witness to the birth, but HTML Tag This document is not an official specification.

The real official HTML specification HTML2 from the beginning, HTML2 inherited the HTML Tag results, future, past and , instead of a separate portal, to start from scratch.

But the tragedy is small, HTML2 the introduction of standard time happens to be the era of browser wars, browser vendors each his own, ignoring the existence of standards and W3C also in this period does not stop converting some browsers into private properties part of the standard. (Cowpaths)

97 - 99 years, the browser wars in full swing, HTML standards have gone from 3.2 - 4.0 - Changes in version 4.01, very fast, but to HTML4.01 is, W3C's head may have been a bad knock, he said: " well, it is so HTML, HTML4.01 is the last version of HTML, and we do not need the HTML working group. "

W3C fact did not stop the development of the language, but they lost interest in HTML, after HTML4.01, they made xHTML1.0, although it sounds completely different, but in fact xHTML1.0 and HTML4.01 is the same, the only difference is that xHTML1.0 require the use of XML syntax. That we now take for granted: All tags must be lowercase, all attributes must be lowercase All attribute values ​​must be quoted, all tags must be closed ...

Specification itself from the content point of view, is actually the same, except that coding style, because browsers read in line with HTML4.01, HTML3.2 or xHTML1.0 specification pages are no problem for the browser it will produce the same DOM tree, but xHTML1.0 strict coding style so that people prefer.

By the year 2000, Web Standards Project's activities in full swing, there are individual and private developers for those features are intolerable, we are condemning browser vendors: "?! Fuck supports standard really so hard to do," CSS has happened at that time. made great progress, but the combination of xHTML1.0 is also very close, CSS xHTML1.0 basically became a "best practice." and xHTML kind of elegant writing style led by professionals, has become the industry's most It approved the accepted style.

Followed up after xHTML1.0 is xHTML1.1, I'm impressed by is: was still with Editplus, Quguan network to find a template of a xHTML1.1 results ...

xHTML1.1 and xHTML1.0 just 0.1 version adds such a difference, 1.1 is actually required documents must be marked as XML? The most advanced IE can not process the received XML document type of the document, which it too crashes . and the real reason people do not want to mark the document as XML is, if you even just a little bit wrong in the document, such as & is not encoded into & amp; that the entire page rendering result is a yellow screen, the game is this page has an error, you do not want to see this page of Ah. "If the parser error channel, then stop parsing" Yes. this is the error handling XML documents.

Vaguely remember xHTML2 grave not long grass, and promote the cause of his death is the robustness principle.

  1. Programmers are not going to support him, not backward compatible because XML error handling mechanism and xHTML2 deliberate and order.
  2. Browser vendors do not support him to go back, because the browser must ensure backward compatibility.

Of course not to say that such a specification is not good, on the contrary, from a theoretical point of view he is a very good standard, is a very good format, but only a theoretical perspective, the problem is that he does not actually.

It can be said robustness principle is to kill the theory of strategic weapons xHTML2.0 Also let him die the very rest in peace.

Okay, back to the original and xHTML2.0 par HTML5.

HTML5 is not directly developed by the W3C, HTML Just when everyone thought life should end in HTML4.01 time, so there is a group of people that "perhaps some of HTML should live longer, as long as we extend to him a little, as long as we put in xHTML time and effort to come up with a part, you can upgrade at the HTML form to allow closer HTML programming language, you can let him to the next level. "

Then, in 2004 Opera's Ian Hickson proposed an extension of HTML and suggestions for improvement, he suggested new tasks and xHTML2 parallel, but work on the basis of the existing HTML, HTML goal is to expand .W3C the voting result is NO, because HTML is dead, xHTML2 is the future.

So, Opera, Apple and other browser vendors as well as some members say, Well do not expect them, we ourselves can do it, we are out of W3C. They formed WHATWG. And in the next period of time, WHATWG working efficiency is very high, and some results obtained in a short time, because they are members of the working grounds browser vendors, because they can not only say that the increase on the increase, and can be achieved, we continue to put forward some good ideas and one by one do browser. What substantive progress xHTML2 the other hand, the W3C is not, especially from an implementation perspective, by standing still insufficient to describe all too much.

Dramatic thing happened again in 2006, Tim Berners - Lee wrote a blog, said: You know we were wrong, we were wrong overnight in an attempt to let the web into the XML age, our? the idea was unrealistic, yes, maybe we should rebuild the HTML working group.

So, in 2007 the story really so developed, W3C HTML5 working group set up, the first question of this working group is facing is: do we re-start, or both in what WHATWG working group that was established in 2004 work began on the outcome? the answer is obvious, they once again voted to continue work on the basis of the WHATWG .ok, W3C and WHATWG have fought side by side.

That second question has become the relationship between these two working groups, editor of the W3C working group who will be doing it? WHATWG is not to make the 伊恩希克森 (google) come? Another vote, consent this proposal.

It becomes a two working groups have a copy of your specifications, and looks basically the same, that in the end is the real share of Practice? In fact these two standards will still parted ways, W3C most important to develop a specific specification, which will eventually become a working draft, and then freeze, while the WHATWG? they are constantly iterations, even now HTMl5 can not cover their goal, they are developing a simple HTML or web technology.

Process working groups of the two diametrically opposed, because their ideas are completely different.

WHATWG is a form of dictatorship of the working mechanism. I just said, is editor Ian Hickson. He will listen to opinions from all sides to express their views on all members, after an adequate statement of his views, he approve he thinks is right views.

W3C is a democratic mechanism. All members can express their views, and each person has the right to vote to vote. The key to this process is that the vote

WHATWG working mechanism make people uncomfortable, and W3C working mechanism to sound very comfortable, but the reality is WHATWG working very smoothly, mainly due to Ian Hickson. He is indeed a very competent editor. When he listened to opinions from all sides, did not always do with personal feelings. W3C working mechanism is very fair, but in fact it is very easy on some aspects of the process or stuck, resulting in stalled, one thing to reach a decision often takes a long time.

Two distinct working groups have been able to work together, mainly due to design HTML5. Because they determine the HTML5 design principles to be adhered to from the start. As a result, we see not only a specification, which is published on the W3C site share documents, namely HTML5 language specification on the W3C site also saw another document, that is, HTML design principles.

Two .HTML5 Design Principles

Design principles, it is a belief, a principle, a concept that is the driving force action crowd design principles involved.

Whether the W3C norm, or generic, in the manufacture of automobile, or are we writing software, even large cattle in the creation of programming language design principles perhaps through a main vein of the whole thing, and setbacks can be any contradiction with his to measure.

For example our nearest Alibaba's design principles can be considered to be: Let the world not difficult business.

As another example Jquery design principles are: write less, do more.

Having said that, I thought it we should ask ourselves:

1. What is our industrial design principle is? 2. What is our design principle framework is? A. Avoid Needless Complexity

Avoid unnecessary complexity

For chestnut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href=""/> <script type="text/javascript"></script>

3-side code fragment above represent the XHTML1, to content writing when HTML4.01, XHTML1.1 document type and character encoding affirmed and affirmed the introduction of JavaScript and CSS. Well, who can put paragraphs dictation? Probably someone will say: "are you mad Why not use a template to generate it??" Well, let's take a look at this part of HTML5:

Nothing more. Well, even I can never forget the. I do not need to put a few characters written in a notepad. I have to say, the first time I saw this doctype time - I certainly think it is an HTML document doctype-- aback by it: I thought, "is not a number 5 is also less ah?" :?? "doctype want to tell the browser what does it say that this document is an HTML Could this be the only ever a HTML version of it, which is something I have to first find out, HTML future will never again have a new version yet ? "good one overweening rack! I was wrong, because this doctype does not mean that. To do this, you must first figure out why the document should write the beginning of a doctype. It is not written for the browser to read. Doctype is addressed to the validator to see. In other words, the reason I want to write that line XHTML doctype 1.0 at a beginning of the document, it is to tell the validator, let validator in accordance with the doctype to verify my documents.

Browser actually does not matter. Suppose I write is 3.2 document, the beginning of an HTML document written in HTML 3.2 doctype. And somewhere in the document, I used an element in HTML 4.01 phenomena. The browser how to handle this situation? It is because of this element appears in the HTML version doctype declaration later than the specification, the elements do not appear to explain? No, of course not! It will still be presented to explain the elements, do not forget to Perth Tal rule, do not forget robustness. Browser must be open at the time of reception. Therefore, it does not check any type of format, and will verify, verifier was concerned about the type of format. This is the real reason for the existence of doctype.

And according to another design principles of HTML5, it must be backwards compatible with forward compatibility with future versions of HTML - whether HTML6, HTML7, or something else - to be with the current version of HTML, HTML5 compatible. So bring a version number on the inside doctype does not mean much, even for the same verifier card.

Just now, I say doctype is not written for the browser, so that there is no problem in most cases. In one case, you use the doctype will affect the browser, I believe all of you all know. But in this case, Doctype is not really well spent, but only in order to achieve a particular purpose only use doctype. Microsoft had at the time of the introduction of CSS, walking in the standards front, they took the lead in the browser to support CSS, also launched its own box model - later issued a standard, but the standard is not used in the same box model. How they do? They want to support the standard, but also wanted to launch his past backward compatible encoding. They want to know how to use standard Web page authors, or want to use their old ways?

So they came up with a very clever idea. That it is to use doctype, using effective doctype to trigger standards mode rather than compatible model (quiks mode). This idea is very clever. Today, we are also doing so, when we add doctype to the document, it is equivalent to the statement "I want to use the standard mode", but this is not the intention of the invention of doctype. This is just to achieve a specific purpose in the use doctype.

This is the minimum number of characters to trigger standard mode in Internet Explorer. I think this also shows that the nature of the HTML5 specification: it is not the pursuit of theoretical perfection. HTML5 is not embodied "Oh, to author a short catchy doctype not you?" Yes, short easy to remember is fine, but if this can not be easy to remember doctype adapt existing browsers, not as it is better to forget. Therefore, this balance grasp very well, not only in theory a good idea - a short easy to remember doctype, but practice is also a good idea - you can still trigger standards mode. It should be said, Doctype is a very typical example.

Short easy to remember. I can back down.

Similarly, the write is valid. It not only applies to the latest version of the browser, as long as there are people are equally effective in the browser used today. why? Because when we put these meta elements into the browser, the browser will interpret it this way:. "Metadata (meta) little little point, the character set (charset) utf-8" This is the interpretation that the browser in line when the string really what we see. It must be noted that these contents, according to the Perth Tal rule, right?

I mentioned many times robustness principle, but there are people who do not understand. We put it another way, the browser will think, "Well, I think that the author is you want to specify a character set ...... Look, that's right, utf-8." These are the norms enshrined in. Today, not only you can save the slashes, and a total of just write meta charset = "utf-8" on the line.

About unnecessary complexity omitted, or to avoid unnecessary complexity, there are many examples. But the key is both to avoid unnecessary complexity, will not prevent the use of existing browser. For example, in HTML5, if I use the link element to link to a style sheet, I said a rel = "stylesheet", and then say type = "text / css", that is to repeat myself. For browsers, I'm repeating myself. Browsers do not need to see both properties. Browser you see rel = "stylesheet" is enough, because it can guess that you want to link a CSS style sheet. So you do not have to specify the type of property. You do not have to say that this is a style sheet Well; do not say the second time. Of course, you prefer, you can say; if you want to include the type attribute, go ahead.

Likewise, if you use a script element, you say type = "text / javascript", almost on the browser know how the story. For Web developers, you also use other scripting languages? If you really want to use other scripting languages, no one will stop you. But I want to advise you one, any browser will not support you.

I wish, you can add a type attribute. However, there may be nothing to write, the browser will naturally assume you are using JavaScript. Avoiding - unnecessary - complexity.

b. Support existing content

Support existing content

Obviously, we will consider the future of Web development better, but they must be considered in the past. Do not forget to W3C working group has a lot of people on behalf of the browser vendors, they will definitely have to consider supporting existing content.

Let's look at several chunks of code:

<img src="foo" alt="bar" /> <p class="foo">Hello World</p> <img src="foo" alt="bar"> <p class="foo">Hello World <IMG SRC="foo" ALT="bar"> <P class="foo">Hello World</P> <img src=foo alt=bar> <p class="foo">Hello World</p>

This code paragraphs there a problem? No, yes, no problem!

Because just coding style or writing style, it has nothing to do with what we are discussing correct syntax.

In JavaScript, you can add a semicolon at the end of each statement, but not required, because JavaScript is automatically inserted semicolon.

Of course, this does not prevent us to use XHTML syntax specification Specification document you write high recognition, of course, also possible to verify the correctness of the entire document to us by means of lint tool.

Personally, I think, not only for the team, even write your own code, but also insist on a grammatical style. From the browser parses perspective, what kind of grammar does not exist better than another question, but I think, as professionals, we must be able to confidently say "This is my coding style." However, I do not think language should be built in such a switch. You can use lint tools to unify coding style. Now it says lint tool. You can log htmllint.com, in which to run your HTML5 document, it will help you check whether the attribute value in quotes, elements are in lower case, you can also set other items by checking the check box.

c. solve real problems

Solve the problem of reality

It looks a bit like nonsense to say, who is not doing something to solve the problem in it?

And this is the real design principles to solve real problems facing people today, it is a headache problem.

Well, to continue to look at the code:

<h2>Heading text</h2> <p>Paragraph text.</p>

Now we need to add both text is a link, then we approach what would it be? H2 and p to add a label a difference? Perhaps, there are smart students will use a label to wrap the whole h2 and p, like:

<a href="somewhere"> <h2>Heading text</h2> <p>Paragraph text.</p> </a>

Written wrong? right? Just kind of not a good habit, and pass a rigorous check.

But such scenarios certainly exist, why not write it?

In fact, such an approach already exists in the browser, because it was written long ago, of course, this is not written before normative. So, that HTML5 solve the problem of reality, its essence or "You have written a lot of years, right? Now we have the standard changed, allowing you to write this."

d. pave the cowpaths

Pragmatic

Cowpath: The herd of cattle on the ground, and then to see how to go like cattle, then a paved road to herd the cows go according stepped traces.

Very interesting metaphor, since some say is the presence of some of the things become more standard. The standard is connected to the gas standard can be executed.

For chestnut:

WHATWG large number of sampling sites were analyzed, we come to this conclusion:

id = "header", id = "footer", id = "content", id = "navigation", id = "sidebar" This naming is very common, all right, then I will give you some of this label!

<section>,<article>,<aside>,<nav>,<header>,<footer>,<details>,<figure>

Look at the code:

<body> <div id="header"></div> <div id="navigation"></div> <div id="main"></div> <div id="sidebar"></div> <div id="footer"></div> </body>

change!

<body> <header></header> <nav></nav> <div id="main"></div> <aside></aside> <footer></footer> </body>

How about? Bigger way, right?

Look:

<div class="item"> <h2></h2> <div class="meta"></div> <div class="content"></div> <div class="link"></div> </div>

Then changed!

<section class="item"> <header><h2></h2></header> <footer class="meta"></ footer > <div class="content"></div> <nav class="link"></nav> </section>

Although in this document, we use these new elements is to replace the id, but in my personal opinion, as an alternative to class them more valuable. Why do you say? Because these elements on a page can be used more than once, but can be used multiple times. Yes, you can add a header (header) for the document, and then add a foot (footer); but the documentation for each partition (section) can also still have a head and a foot. And each partition to another partition can also be nested, nested partitions can still have its own head and feet, is not it?

The four new elements: section, article, aside and nav, the reason that they are powerful because they represent a new content model, model for HTML content in an unprecedented - to the contents of the partition. So far, we have been to organize content page with div, but as with other similar elements, div itself is not semantics. However, section, article, aside and nav is in fact clearly tell you - this one is like another document in the same document. Nothing located in these elements, can have its own summary, title, his feet.

One of the most common section, can be a most relevant content. The article is a special section. aside of it, it is a special section. Finally, nav is also a special section.

The most important thing is their semantics; nothing to do with location.

Here, please note, is not the most important thing I replaced the original div class plus a few new elements, but I replaced the original H2 H1-- shocked, and I see someone shaking. I've met a lot of professional Web developers, over the years they have always thought that says a specification document can only have one H1. There are some self-proclaimed SEO tips Almighty said to be equally so. Many SEO technique is actually very dogmatic. The so-called doctrine, meaning just do not believe the data. In the past, the performance of this dogma, "No, the page contains two or more H1, you would die." In HTML5, as long as you create a new piece of content, whether by section, article, aside, nav, or other elements, which are in use H1, without having to worry about the entire block where the title page should be at what level; H2, H3, no problem.

This change too much. Think about it, this change is revolutionary content management. Because now, you can put the contents of each partition to imagine an independent, to be able to come up with part from the page. At this point, depending on the context, this independent section H1, perhaps in the whole page will play the role of H2 or H3 - depending on where it appears in the document. Faced with this sudden change, maybe someone's mind temporarily turn, but turn to. It does not matter, but I can tell you, I think this is the real value of these new HTML5 semantic markup lies. In other words, we now have an independent element, and heading levels of these elements can be redefined.

e. degrade gracefully

Graceful degradation

HTML5 is designed in so many new stuff:

input type="number" input type="search“ input type="range" input type="email" input type="date" input type="url"

Very interesting, but the browser does not know, how to do it?

The most critical problem is that the browser when you see these values ​​will be how to deal with the new type. Existing browser, the browser is not the future, existing browser can not understand these new type values. But when they see the type of value they do not understand the value it will be interpreted as a type of text.

Whether you write input type = "foo" or input type = "bar", any existing browser will say: "ah, maybe the author's meaning is text." Thus, you can use these new from now on value, but you can also rest assured that those who do not understand their value as new browser will type = "text", but this is really a browser practice good example of graceful degradation principle.

For example, you can now enter the type = "number". Suppose you need to enter a numerical text box. Then you can set the type attribute to the input number, then the browser will understand it presents a lovely little control, such as the spinners with a small arrow icon. Right? And without understanding its browser, you'll see a text box, you are a familiar text box. That being the case, why not say input type = "number" will get a spinner with a small arrow icon it?

Of course, you can set the minimum and maximum values ​​of attributes, which may also be graceful degradation. This is the crux of the problem.

HTML5 also adds a new attribute input elements, such as the placeholder (placeholders). Some people do not know the usefulness of this property do not, right? Yes, that is used to advance to put some text in the text box. Does not label (label) - tag placeholders and not the same thing. Placeholder text box is an example of an acceptable content, the general color is gray. As soon as you click on the text box, it disappeared. If the content you've entered Delete All, and then click outside the text box, it will appear.

Of course, some code written in JavaScript can also achieve this function, but only with a HTML5 placeholder attribute to help us solve the problem.

Of course, do not support this attribute browser, you can still use JavaScript to implement the placeholder functions. To test browser does not support JavaScript support through the property is also very simple. If so, take a step back, get out of the way, to enjoy their music as can be. If not, you can let your JavaScript to simulate this function.

Let's look at an extreme graceful degradation scheme:

<video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> <object data="movie.swf"> <a href="movie.mp4">download</a> </object> </video>

NB it is very ...

f. Priority of  constituencies

End-user priority

Prior statement, which is very stripe design principles of philosophy, no code can be seen.

Its meaning is this: in the event of conflict, the end-user priority, followed by the author, followed by the implementers, followed by standard-setters, and finally a theoretical perfect.

It was suggested in a feature, and the HTML5 working group for this debate when no less, if browser makers said, "We will not support this feature, this feature will not be achieved in our browsers," then this feature is not It will be written into the specification. Because even the characteristics of the written specification, if there is no vendor implementations, but the norm is a dead letter, right? Implementors may refuse to implement norms.

Ah, we must learn to see the dialectic of these questions, do not like a dead end.

 

<!DOCTYPE html> <html> <meta charset="utf-8" /> <link rel="stylesheet" href="" /> <script src=""></script>

 

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href=""/> <script type="text/javascript"></script>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href=""/> <script type="text/javascript"></script>

Original articles published 0 · won praise 2 · Views 8704

Guess you like

Origin blog.csdn.net/u011927449/article/details/103980496