web front-end development of HTML5 registration FAQs

After the HTML5 tag was a quick introduction, you might think of a lot of problems. Here are some answers to some possible answers.

Why are these changes remain in effect in older browsers?

To understand why this is not a problem, we can compare HTML5 CSS3 and some new features added, which will be discussed in a later section.

In CSS, when adding new features (for example, border-radiuswhen you add fillets to the attribute of the element), this function must be added to the browser's rendering engine, so older browsers will not recognize it. If you view the page in a browser that does not support border-radius, the fillet will be displayed as a square. This happens because the default is four corners, the browser will ignore the border-radiusstatement. Other features of CSS3 similar behavior, leading to experience reduced to a certain extent.

Many developers expect HTML5 to work in a similar way. Although for certain advanced functionality and API may be correct, we will discuss later in this book, but so far, to change what we do not. In other words, the syntax is simpler, less excess property as well as new doctype.

Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

After careful consideration of the contents of the older browsers can handle and can not handle, more or less defines the syntax of HTML5. For example, the composition of the HTML5 doctype declaration of 15 characters is that each character browser to display the minimum desired page in standard mode.

Similarly, although XHTML take longer character encoding declaration and htmladditional attributes on the elements to be verified, but they do not actually need a browser to display the page correctly. Again, examined the behavior of older browsers, and can simplify determine the character encoding and xmlnsdelete properties - and the browser will still view the page in the same way.

And changes to different CSS3 and JavaScript, CSS3 and JavaScript changes are supported only if the browser manufacturers actual implementation, but to wait for the release of a new version of the browser without the use of HTML5 markup syntax. When using the new semantic elements, just use a bit of JavaScript to make all really old browsers can be used.

Note: The standard mode and quirks mode

When a standards-based web design in its infancy, browser makers will face a problem: in many cases, to support emerging standards will undermine the existing pages intended for older non-standard browsers implemented backwards compatibility. Browser manufacturers need a signal that indicates the criteria presented in accordance with a given page. They found that in the doctype such a signal: the new standard pages include the correct format doctype, while the older non-standard page is usually no. Use as a signal doctype, the browser in a standard mode (in terms of presentation elements try to follow the letter of the standard) and switch between quirks mode (try to imitate older browsers "weird" rendering capabilities). To ensure that the expected results page rendering).

It's safe to say that in the current development environment, almost every page has a proper doctype, and therefore will be the standard mode rendering. Therefore, you almost do not have to deal with the page to quirks mode rendering. Of course, if the user is using very old browsers (such as IE4) view a Web page, then the browser to render the page rendering mode to use. That's quirks mode imitate, no matter what doctype to use, it will do so.

Although older XHTML and HTML document type contains information about the exact version of the specification to which they refer, but the browser never really used that information. As long as there is seemingly correct document type, they will render the page in standard mode. Therefore, HTML5's doctype has been streamlined to the minimum required to trigger any browser in the standard mode. Can in Wikipedia to find more information and an overview of results in charts of different browsers rendered in quirks mode content . You can also SitePoint's CSS reference read a complete overview of the relevant standards and quirks mode on .

Whether it should close all tabs?

In XHTML, the necessary elements must be closed - using the corresponding end tag (e.g. html), or, in the case where the void element, at the end of a forward slash mark. Void element is an element not contain sub-elements (e.g. input, imgor link).

You can still use the syntax style in HTML5 (the sake of consistency and maintainability of reasons, you may be more like it), but verification is no longer necessary to add a slash on void elements. Continue to be "reduced fat" as the theme, HTML5 allows you to omit the trailing slash such elements it can be said that the mark neater and less confusing.

 

Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

It is noteworthy that, in HTML5, most can contain elements nested elements (but happens to be empty) still need to be paired with the corresponding closing tag. There are exceptions to this rule (e.g., ptag and lilabel), but it is common to assume even simpler.

Other habits based on the syntax of XHTML and how?

When we discuss this topic, omitting slash just one aspect of the HTML5 syntax, XHTML and different. In fact, HTML5 verification process completely ignores the problem of grammar style, only the code may destroy documents in some way wrong throw an error.

This means that in the eyes of the verifier, the following five elements are labeled the same:

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>LINK</span> <span style="color:#669900">REL</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">HREF</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>Link</span> <span style="color:#669900">Rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">Href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span>stylesheet</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span>css/styles.css</span><span style="color:#999999">></span></span></code></span>

In HTML5, you can use lowercase, uppercase or mixed-case tag names or attributes, and attribute values ​​are not quoted or unquoted (as long as these values ​​do not contain spaces or other reserved characters), they will only verify fine.

In XHTML, all attributes must have values, even if they are redundant as well. For example, in XHTML, you will often see this mark:

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">disabled</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>disabled<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span></code></span>

In HTML5, you may simply be "on" or "off" property (referred to as a Boolean attribute) value has not been specified. Therefore, the above inputelements can be written as:

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">disabled</span><span style="color:#999999">></span></span></code></span>

Therefore, at least in terms of grammar, HTML5 requirement for verification of very loose. Does this mean you should be mad, and use any syntax want on any given element? No, we certainly do not recommend it.

Developers are encouraged to select syntax style and stick with it - especially in a team environment where code maintenance and readability is essential. We also recommend that you (although this is optional) choose a simple coding style, while maintaining consistent.

The following are some guidelines for you to consider using:

• As in XHTML, use lowercase letters for all elements and attributes.

• Although some elements do not need to close the tag, but we recommend closing all the elements contained in the content (as described <p>Text</p>).

• Although you can leave the property value without quotation marks, but most likely you will need to have cause to attribute quotes (for example, when you declare multiple classes separated by spaces, or the value of the query string appended to the URL when). Therefore, in order to maintain consistency, I recommend that you always use quotation marks.

• Void elements are omitted (e.g., metaor input) a trailing slash.

• Avoid providing redundancy values (e.g., using Boolean attribute <input type="checkbox" checked>instead <input type="checkbox" checked="checked">).

Again, these recommendations are by no means universally accepted; however, we believe that they are to achieve clean, easy to read syntax can maintain a reasonable suggestion mark.

If you do use the code style run amok, including too many unnecessary operations, it is no reason to add extra bytes. You can also make the code difficult to maintain, especially if you are working with other developers together on the same code base.