Home >
Article > Web Front-end > 22 basic skills about HTML5 (graphic tutorial)_html5 tutorial skills
22 basic skills about HTML5 (graphic tutorial)_html5 tutorial skills
WBOYOriginal
2016-05-16 15:51:121467browse
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.
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:
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
