Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about the entry-level skills of HTML 5, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

The development of Web technology is so fast that if you don't keep pace with the times, you will be eliminated.

1. New Doctype statement

XHTML's statement is too long, and I believe very few front-end developers will write this Doctype statement.

The Doctype statement of HTML 5 is very short, and I'm sure you'll remember it right away. You don't have to waste your brain cells remembering the Doctype statement of the perverted XHTML.

HTML 5's brief DOCTYPE announcement allows modern browsers such as Firefox and Chrome and browsers such as IE6/7/8 to enter (quasi) standard mode. You may be surprised that IE6/7 can also support HTML 5 Doctype. In fact, IE will enter standard mode as long as doctype conforms to this format.

two。 Label

Take a look at the following simple code:

Image of Mars.

Unfortunately, the H7 tag here seems to have nothing to do with the img tag, and the semantics are not clear enough. HTML 5 realized this and adopted the tag. When combined with the use of tags, you can combine H7 tags with img tags, making the code more semantic.

This is an image of something interesting.

3. Redefine

Not long ago, I used tags to create subheadings related to logo. But the tag has been redefined in HTML 5 to make it more semantic, and the font size will be smaller, so it would be a good idea if the tag was used for copyright information at the bottom of the site.

4. The type attribute of Javascript and CSS tags has been removed

Usually you will add the type attribute to and:

In HTML 5, the type attribute is no longer needed because it is a bit redundant and can be removed to make the code more concise.

5. Whether to use double quotation marks

This is a bit confusing, HTML 5 is not XTHML, you can leave out the double quotation marks in the tag. I believe most comrades, including me, are used to putting double quotation marks because it makes the code look more standard. However, you can decide whether you want double quotation marks or not according to your personal preference.

Start the reactor.

6. Make web page content editable

7. Email input box

HMTL 5 has added an e-mail property in the input box to check whether the input is in line with the e-mail writing format. It is becoming more and more powerful. Before HTML 5, you can only rely on JavaScript to check. Although the built-in form validation feature will soon become a reality, this property is not supported by many browsers and will only be treated as a normal text input box.

Email: submit form

So far, this property is not supported by modern browsers, so it is unreliable for the time being.

8. Placeholder

The placeholder in the text box (see the search box effect of this blog) helps to improve the user experience. Previously, we can only rely on JS to achieve the placeholder effect, adding the placeholder attribute placeholder in HTML 5.

Similarly, the current mainstream modern browsers do not support this attribute very well. For the time being, it is only supported by Chrome and Safari, but not supported by Firefox and Opera.

9. Local Stora

HTML 5's local storage feature allows modern browsers to "remember" what we typed, even if the browser is closed and refreshed. Although this feature is not supported by some browsers, it is supported by IE8, Safari 4, and Firefox 3.5. you can test it.

10. More semantic header and footer

The following code will no longer exist in HTML 5

......

Usually we define a div for header and footer, and then add an id, but you can use the and tag directly in HTML5, so you can rewrite the above code as follows:

......

Be careful not to confuse these two tags with the headers and footers of the site, as they just represent their containers.

11. IE support for HTML 5

IE browsers currently have poor support for HTML5, and it's a big stumbling block to the faster adoption of HTML5, but IE9's support for HTML5 is good. IE parses the new tags in HTML 5 into inline elements, but they are actually block-level elements, so it is necessary to define a style for them:

Header, footer, article, section, nav, menu, hgroup {display: block;}

However, IE still can't parse these new HTML 5 tags, so you need to use Javascript to solve this problem:

Document.createElement ("article"); document.createElement ("footer"); document.createElement ("header"); document.createElement ("hgroup"); document.createElement ("nav"); document.createElement ("menu")

You can use this Javascript code to fix IE's better parsing of HTML 5.

After reading the above, do you have any further understanding of the entry-level skills of HTML 5? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.