search

Home >Web Front-end >H5 Tutorial >22 basic skills about HTML5 (graphic tutorial)_html5 tutorial skills

22 basic skills about HTML5 (graphic tutorial)_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:51:121538browse

Web technology is developing so fast that if you don't keep up with the times, you will be eliminated. Therefore, in order to cope with the upcoming HTML5, this article summarizes 22 basic HTML5 skills. I hope it will be helpful for you to further learn HTML5 well.
1. New Doctype declaration
The declaration of XHTML is too long. I believe that few front-end developers can write this Doctype declaration by hand.

Copy code
The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 The Doctype declaration is very short. I believe you will be able to remember it immediately after seeing this declaration. You don't have to waste your brain cells to remember the long and a bit abnormal XHTML Doctype declaration.

The short DOCTYPE declaration of HTML5 allows modern browsers such as Firefox and Chrome and browsers such as IE6/7/8 to enter (quasi-) standards mode. You may be surprised that IE6/ 7 can actually support HTML5 Doctype. In fact, IE will enter standards mode as long as the doctype conforms to this format.
2.
tag
Look at the following simple code:

Copy code
The code is as follows:

About image
image of Mars.< ;/h6>


Unfortunately, the h6 tag here seems to have nothing to do with the img tag, and the semantics are not clear enough. HTML5 realized this and adopted the
tag. When the
is used in combination with the
tag, the h6 tag and the img tag can be combined, and the code becomes more semantic.

Copy code
The code is as follows:


< img alt="about image" src="path/to/image">

This is an image of something interesting.

< /figcaption>



3. Redefine
Not long ago, I used Tags to create subtitles related to your logo. However, the tag has been redefined in HTML5 to make it more semantic. The font size of will become smaller. It would be a good idea to think about using this tag for copyright information at the bottom of the website. .
4. Remove the type attribute of Javascript and CSS tags
Usually you will add the type attribute to and <script>: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode68"> <br><link rel="stylesheet" type=text/css href="path/ to/stylesheet.css"><br> <script type="text/javascript" src="path/to/script.js"></script>


In HTML5, the type attribute is no longer needed because it seems a bit redundant. Removing it can make the code more concise.

Copy code
The code is as follows:





5. Whether to use Double quotes
This is a bit confusing, HTML5 is not XTHML, you can omit the double quotes in the tags. I believe that most comrades, including me, are used to adding double quotes, because it makes the code look more standard. However, it depends on your personal preference whether to use double quotes or not.

Copy code
The code is as follows:

start the reactor.



6. Make web content editable

7. Email input box
A new input has been added in HMTL5 The email attribute of the box can detect whether the input content conforms to the writing format of the email. The function is becoming more and more powerful. Before HTML5, it could only be detected by JS. Although built-in form validation will soon become a reality, many browsers do not yet support this attribute and will only treat it as an ordinary text input box.

Copy code
The code is as follows:









So far, not supported even by modern browsers This attribute, so this attribute is still unreliable for the time being.
8. Placeholders
Placeholders in the text box (see the search box effect on this blog) are helpful to improve the user experience. Before, we could only rely on JS to achieve occupying For the effect of placeholders, the placeholder attribute placeholder is added in HTML5.

Copy code
The code is as follows:




Similarly, the current mainstream modern browsers do not support this attribute very well. Currently only Chrome and Safari support this attribute. Property, Firefox and Opera do not support this property.

9. Local storage
HTML5’s local storage function allows modern browsers to “remember” what we input, even if the browser is closed and refreshed. affected. Although some browsers do not support this function, IE8, Safari 4, and Firefox 3.5 still support this function. You can test it.

10. More semantic header and footer
The following code will no longer exist in HTML5

Copy code
The code is as follows:





Usually we define a div for header and footer, and then add another id, but the
and
tags can be used directly in HTML5, so the above code can be rewritten as:

Copy code
The code is as follows:


...


.. .



Be careful not to confuse these two tags with the header and footer of the website, they are just containers that represent them.
11. IE’s support for HTML5
IE browser’s current support for HTML5 is not good, which is also a major stumbling block to the faster popularization of HTML5. However, IE9’s support for HTML5 The degree is still very good.
IE parses all the new tags in HTML5 into inline elements, but in fact they are block-level elements, so it is necessary to define a style for them:

Copy code
The code is as follows:

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


Despite this, IE still cannot parse these new HTML5 tags. At this time, you need to use Javascript to solve this problem:

Copy code
The code is as follows:

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


You can use this piece of Javascript code to fix IE better Parse HTML5

Copy code
The code is as follows:



12. Title group (hgroup)
This Similar to the second tip. If you use h1 and h2 tags to represent the name and subtitle of the website respectively, this will make the two titles that are closely related in nature not related. At this time, you can use the
tag to combine them, so that the code will be more semantic.

Copy code
The code is as follows:


< hgroup>

Recall Fan Page


Only for people who want the memory of a lifetime.






13. Required attributes
Front-end personnel must have done many form validation projects, one of which is very important There are some input boxes that must be filled in, so you need to use Javascript to check them. In HTML5, a new "must be filled in" attribute is added: required. There are two ways to use the required attribute. The second method is more structural, while the first is more concise.

Copy code
The code is as follows:





With this attribute, the form can be submitted Verification becomes easier, take a look at the simple example below:

Copy the code
The code is as follows:









If the input box is empty, the form will not be submitted successfully.
14. Automatically obtain focus
Similarly, HTML5 no longer requires Javascript to solve the problem of automatically obtaining focus for input boxes. If an input box should be selected or obtain input focus, HTML5 adds a new attribute autofocus:

Copy code
The code is as follows:



autofocus can also be written as "autofocus=autofocus ”, this seems more standard, this depends on your personal preference.
15. Audio playback support
HTML5 provides the