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

This article mainly introduces the relevant knowledge of "case analysis of common html5 skills". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope this article "case analysis of common html5 skills" can help you solve the problem.

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

Copy the code

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.

Copy the code

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:

Copy the code

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.

Copy the code

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.

Copy the code

The code is as follows:

Start the reactor.

6. Make web page content editable

Copy the code

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.

Copy the code

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.

Copy the code

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.

Copy the code

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.

Copy the code

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.

This is the end of the content of "case study of html5 common skills". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.