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

Editor to share with you what are the common skills of html5, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. New Doctype statement

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

HTML5's Doctype statement 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.

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

two。 Label

The code is as follows:

Image of Mars.

Take a look at the following simple code:

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

The code is as follows:

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 HTML5 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:

The code is as follows:

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

The code is as follows:

5. Whether to use double quotation marks

This is a bit confusing, HTML5 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.

The code is as follows:

Start the reactor.

6. Make web page content editable

The code is as follows:

To-D0 List

Break mechanical cab driver

Drive to abandoned factory

Watc

7. Email input box

HMTL5 has added an e-mail property in the input box to check whether the input is in line with the e-mail writing format, which is becoming more and more powerful. Before HTML5, you can only rely on JS 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.

The code is as follows:

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. Before, we can only rely on JS to achieve the placeholder effect. We added the placeholder attribute placeholder in HTML5. For a detailed description of this attribute, you can click here: HTML5 form placeholder property.

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

HTML5'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 HTML5

...

...

Go

20. Test browser support for HTML5 attributes

Because different browsers have different support for the HTML5 attribute, this creates some compatibility problems. However, you can use a method to detect whether the browser supports these attributes, and the code in the above example can use Javascript code to detect whether the pattern property is recognized by the browser.

The code is as follows:

Alert ('pattern' in document.createElement (' input')) / / boolean

In fact, this is a common way to make sure that browsers are compatible, which is often used by jQuery libraries. The above code creates an input tag and detects whether the pattern attribute is supported by the browser. If it can, the browser supports this feature, otherwise it does not.

The code is as follows:

If (! 'pattern' in document.createElement (' input')) {

/ / do client/server side validation

}

21. Mark tag

Tags are used to highlight words that need to visually highlight their importance to the user, and the string wrapped in this tag must be relevant to the user's current behavior.

For example, if I search for "Open your Mind" in some blogs, I can use JavaScript in the tag to wrap each action.

The code is as follows:

Search Results

They were interrupted, just after Quato said, "Open your Mind".

twenty-two。 How to use div tags correctly

Some people may wonder, with and waiting for these tags, is the tag still useful in HTML5? The answer is yes, for example, if you want to create a container that can wrap special content, free and flexible must be the first choice, while you want to create an article or a navigation menu, it is recommended that you use more semantic and tagging.

Many people think that HTML5 may still be a long way off, so just ignore it. In fact, many websites have begun to use HTML5. In fact, some new properties and functions of HTML5 make the code more concise, which is always a good thing and should be respected by us.

The above is all the content of this article "what are the Common skills of html5?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.