Continue to explain the skills of HTML5:
16. Video support
The audio element <audio> is very similar and supports HTML5 videos on new browsers. In fact, just recently YouTube announced a new HTML5 video embed. Unfortunately, since the HTML5 documentation does not indicate a specific encoder for the video, it mainly depends on the browser. Although Safari and IE9 can support videos in H.264 formats, Firefox and Opera still stick to the Theora and Vorbis formats. Therefore, when displaying HTML5 videos, you must provide two formats.
17. Video preloaded
You first need to decide whether you need a browser to preload the video. Is there a need? Suppose that a visitor enters a page dedicated to displaying videos, it is very necessary to preload the page to save some waiting time. You can preload the video by setting preload=preload, or add preload between them.
<video preload>
…
</video >
18. Display controls
You may have noticed that with the above code, the video will only appear as a picture without any controllable components. In order to obtain these playback controls, we must specify these control properties in the video element.
<video preload controls>
…
</video >
19. Regular expressions
Thanks to the properties of the new pattern, we can insert a regular expression directly into the code.
<form method=post action=>
<label for=username>create a username: </label>
<input id=username type=text name=username placeholder=4 <> 10″ required=required autofocus=autofocus pattern=[A-Za-z]{4,10}>
<button type=submit>Go </button>
</form>
If you are more familiar with regular expressions, you will notice this new pattern: [A-Za-z]{4,10} only accepts upper and lower case letters. This string must have at least four characters, up to ten characters.
20. Detect browser support for attributes
As mentioned earlier, not all browsers support these properties, so is there any way to tell whether the browser can recognize them? This question is very good. Here are two ways to introduce you to you. The first option is to use Modernizr to detect, or you can also create and analyze these elements to see what the browser has. For example, in the previous example, if we want to determine whether the browser can execute the pattern property, we can add JavaScript to the page:
alert( 'pattern ' in document.createElement('input ') ) // boolean;
In fact, this is a very common way to determine browser compatibility. The jQuery library takes advantage of this trick. In the above code, we create a new input element and confirm whether the pattern attribute can be recognized. If it can be recognized, the browser supports this function, otherwise it will not be supported.
<script>
if (! 'pattern ' in document.createElement('input ') ) {
// do client/server side validation
}
</script>
Remember, this will need to be achieved by relying on JavaScript!
21. Mark elements
The main function of the <mark> element is to highlight text on the page that needs to visually highlight its importance to the user. The string wrapped in this tag must be related to the user's current behavior. For example, if I search for Open your Mind in some blogs, I can use JavaScript in the <mark> tag to wrap each action.
<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>Open your Mind</mark>. </h6>
22. When to use <div>
Do you still need to use the <div> tag? Of course it is necessary. For example, if you want to wrap a piece of code in an element, especially for content positioning, <div> will be a very ideal choice. However, if it is not the above situation but to wrap a blog post or footer link list, it is recommended that you use <article> and <nav> elements respectively.