Home > Developer > Web Develop
1. New Doctype are you still using annoying, hard-to-remember XHTML document type declarations?
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
If it's still in use, why? As Douglas Quaid says, go to the new HTML5 document type, which will make you look younger. In fact, do you really know that the document type declaration of XHTML is no longer necessary in HTML5? Now however in use and also the old browsers need such a special statement. In standard mode, browsers that do not recognize this type of document declaration will simply translate the tags contained within them. So don't worry, feel free to throw your worries into the air, and embrace HTML5 's new document type statement.
2. Consider the following label for a picture:
<p>image of Mars. </p>
Unfortunately, there is no simple or meaningful way to combine a picture with its explanatory text in a piece of markup that contains the image element itself. HTML5 used the <figure> tag to fix the problem. Now that the label contains the <figcaption> element, we can combine the picture with the relevant explanatory text.
<figure>
<figcaption>
<p>this is an image of something interesting. </p>
</figcaption>
</figure>
3. redefinition of <small>
Not long ago, I used <small> elements to create a small headline that was closely related to the logo. It is a useful visual representation element. Now, however, this usage seems inappropriate. The <small> element has been redefined to be more suitable for performing small fonts. Imagine your page footer's copyright statement, based on the new HTML5 definition of this element,<small> label is more suitable for doing such things. The small element now refers to "small print".
4. Scripts and Links no longer use the types property
You may still add the type attribute to your link and script tags.
<link rel= "stylesheet" href= "Path/to/stylesheet.css" type= "Text/css"/>
<script type= "Text/javascript" src= "Path/to/script.js" ></script>
It's not necessary now. This means that the two tags refer to style sheets and scripts, respectively. In this way, we can remove the type attribute from them together.
<link rel= "stylesheet" href= "Path/to/stylesheet.css"/>
<script src= "Path/to/script.js" ></script>
5. Use no quotation marks
With no quotes as a problem, remember that HTML5 is not XHTML. If you don't want to, you don't have to wrap the attribute values in quotation marks. You don't have to close your elements. If you feel comfortable, there is no mistake in this practice. I feel that I am in favor of doing so.
<p class= "MyClass" id=someid> Start the reactor.
On this issue, the benevolent see of the beholder. Anyway, if you like a more structured document, stick with quotes.
6, so that your content can be edited
The new browser has a nice new property that can be applied to the element, which is contenteditable. As the name indicates, it allows the user to change any text contained in the element, including its sub-objects. This property has many uses, including a simple to-do list application.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>untitled</title>
<body>
<ul contenteditable= "true" >
<li> break Mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
Here is the code to remove the quotation marks <ul contenteditable=true>
7, e-mail address input
There is one thing: we use an "email" type to format the input, which tells the browser to allow only the character input of the valid email address structure. Can HTML5 do it? Yes, the built-in format validator was implemented immediately. Of course, we can't rely on this for the most part because it's obvious that in an old browser that can't parse the email type, they'll simply be treated as plain text boxes. Now, we can't rely on the browser to verify, still need to use the server/client mode to solve the problem. It should be noted that all browsers are not very sure about whether they support certain elements or attributes. For example, Opera seems to support email address validation, just to specify the Name property. However, it does not support the placeholder property that we will refer to in the next article.
8. Placeholder
Previously, we had to use JavaScript to create placeholders for text boxes. Of course, you can assign a value to the Value property when initializing. However, once the user deletes the placeholder text, the input box is empty again. The placeholder property compensates for this problem.
<input name= "Email" type= "email" placeholder= "[email protected]"/>
This element is not supported by all browser versions at this time, but they have been supported by the release of a new version, such as Firefox and Opera, which do not now support the placeholder property, but it is also harmless.
9. Local Storage
Thanks to the local storage feature (not HTML5 officially released, for convenience) we can make the browser "Remember" our type even if the browser is turned off or refreshed.
10. Header and footer with semantics
Previously we used <div id= "header" ></div>, even if the id,divs was determined there is no semantics. Now, we have the two elements of It is very common to have multiple headers and footer in the project. Be careful not to confuse these two elements with the "header" and "footer" of the site. They represent only their containers.
11. More HTML5 formatting features
With this video, we can learn more useful HTML5 formatting features:Subscribe to We YouTube page to watch all of the video tutorials!
12. IE Browser and HTML5
Unfortunately, in order to parse the new HTML5 element, the hateful IE browser is a bit of a hassle.
To ensure that the new HTML5 element is correctly displayed as block-level elements, the following code must be used at this stage:
Header, footer, article, section, Nav, menu, Hgroup {
Display:block;
}
Header, footer, article, section, Nav, menu, Hgroup {
Display:block;
}
Because IE does not know these elements, it will still ignore these formats, so you need to use the following code to solve this problem:
Document.createelement ("article");
Document.createelement ("footer");
Document.createelement ("header");
Document.createelement ("Hgroup");
Document.createelement ("Nav");
Document.createelement ("menu");
Document.createelement ("article");
Document.createelement ("footer");
Document.createelement ("header");
Document.createelement ("Hgroup");
Document.createelement ("Nav");
Document.createelement ("menu");
To reduce the workload during development, Remy Sharp creates a script file that you can use in the following code:
<!--[If ie]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<!--[If ie]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
Hgroup.
Imagine the title of the site, followed by a subtitle in the name of the site, and tagged with a
14. Required Properties
A new attribute is added to the form, which is the require required property. Depending on your coding style, you can declare this attribute with either of the following two methods:
<input type= "text" name= "Someinput" required>
Or with a more structured one:
<input type= "text" name= "Someinput" required= "required" >
Using the above code, and the browser supports this property, if the input box is empty, it cannot be submitted. Here's a simple example, and we've added the placeholder attribute because the two properties work together often. If the input box is blank and the form is submitted, the text box is highlighted.
15. Automatically get focus properties
As mentioned earlier, HTML5 has added a lot of elements, the functionality previously implemented with Javas is now easy to implement with elements. Here, we can use the Autofocus property to get the input field to focus automatically.
<input type= "text" name= "Someinput" placeholder= "Douglas Quaid" required autofocus>
You can use autofocus only in your code to mark this property, or you can use the form of autofocus=autofocus.
16. Sound Support
We no longer have to rely on third-party plug-ins to use sound. HTML5 now offers <audio> elements. Don't worry about the plugins anymore. Today, only the latest browsers provide support for HTML5 sound. Therefore, it is necessary to adopt appropriate compatibility measures when using.
<audio autoplay= "AutoPlay" controls= "Controls" >
<source src= "File.ogg"/>
<source src= "File.mp3"/>
<a href= "http://net.tutsplus.com/tutorials/html-css-techniques/25- Html5-features-tips-and-techniques-you-must-know/file.mp3 ">download This file.</a>
</audio>
For audio formats, Mozilla and WebKit have made little headway. Firefox will focus on the. ogg type of audio, while WebKit will only extend the normal MP3 format. This means that at the very least you should now use two versions of the audio format to take care of a variety of browsers. Safari does not recognize the. ogg type of audio when loading the page, and will automatically jump to the MP3 type. Note, however, that IE does not support this operation, and OPERA10 or earlier versions only support files in. wav format.
17. Video Support
Like the <audio> element, the new browser has also supported HTML5 video. In fact, YouTube has just announced that it has made new HTML5 technology videos for browsers that support HTML5. Unfortunately, the HTML standard does not specify a specific video encoding, which requires the browser to decide which format to use. Safari and Internet Explorer 9 will support videos in the format of the video (Flash Player is also playable), and Firefox and opera stick to the open source Theora and Vorbis formats. So, when playing HTML5 video, you have to provide both formats for the codecs.
<video Controls Preload>
<source src= "COHAGENPHONECALL.OGV" type= "VIDEO/OGG; Codecs= ' Vorbis, Theora ' "/>
<source src= "Cohagenphonecall.mp4" type= "VIDEO/MP4; ' codecs= ' avc1.42e01e, mp4a.40.2 ' "/>
<p> Your browser is old. <a href= "Cohagenphonecall.mp4" >download this video instead.</a> </p>
</video>
Chrome can correctly play the video encoded in "Ogg" and "MP4" format. Here are a few things to watch out for. Technically speaking, there is no requirement to specify the type attribute, but if it is not specified, the browser will decide for itself. Save some bandwidth and declare it yourself. Not all browsers support HTML5 video. For this we can provide a download link, or additional embedded a flash version of the video, it doesn't matter, see what you do.
18. Video Pre-loading
The Preload property is just like you guessed. You should first decide when you want the browser to preload the video. Preloading is necessary, and if a visitor reads a page that is specifically made for playing the video, you will definitely preload the video and save the visitor the wait time. By setting preload= "preload" or a simple preload, the video can be preloaded. I prefer the latter solution because it is more streamlined.
<video preload>
<video preload>
<video preload controls>
19. Playback Control
If your work is closely related to these technologies, you may already know it. If you use the code above, the video shows just like a picture, without any control. To be able to parse the playback control function, we must specify the controls property in the video element.
<video preload controls>
Please note that each browser is different from its own player parsing method. (Translator: Remind us to test a few more browsers AH)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
