Super practical HTML5 code snippets that must not be missed

HTML5 is definitely a popular element that has been sought after by so many companies and organizations. Can you miss it as a geeks? In this article, we will share some extremely useful HTML5 code snippets. I believe everyone will like them!

HTML5 video and fallback

One of the advantages of HTML5 is that it simplifies the amount of Embedded Video and Audio Code. However, it is a headache to be compatible with browsers of earlier versions, especially in tianchao, the browser of the old version is absolutely dominant. The following code may help you:

<Video width = "640" height = "360" controls>

<Source src = "_ videoapps.mp4" type = "video/mp4"/>

<Source src = "_ videoapps.ogv" type = "video/ogg"/>

<Object width = "640" height = "360" type = "application/x-shockwave-flash" data = "_ flash0000.swf">

<Param name = "movie" value = "_ flash0000.swf"/>

<Param name = "flashvars" value = "controlbar = over & image =__ poster#.jpg & file =__ video=.mp4"/>

Title = "No video playback capabilities, please download the video below"/>

</Object>

</Video>

Input type in HTML5 and Verification

Before HTML5 appears, we generally use input to process email, url, or other input, and then use Javascript to verify the correctness. In HTML5, we can use the following code:

Enter a URL: <input type = "url" value = "">

Enter an email address: <input type = "email" pattern = "[^ @] * @ [^ @] *" value = "">

Note: The pattern attribute can be used to format the input content.

In addition, we can also use some HTML5 labels to process form verification, saving javascript, as shown below:

<Input title = "at least eight digits and at least one digit, one lower-case letter, and one upper-case letter" type = "text" pattern = "(? =. * \ D )(? =. * [A-z]) (? =. * [A-Z]). {8,} "required/>

<Input type = "text" required pattern = "(\ +? \ D [-.] *) {7, 13} "title =" international, national and local phone numbers "/>

The above defines the input content correctness principles.

HTML5 Add a project directly to the right-click menu of the browser

You can use HTML5 to directly add menu options to your browser's right-click menu. The Code is as follows:

<Section contextmenu = "mymenu">

<P> right-click here </p>

</Section>

<Menu type = "context" id = "mymenu">

<Menuitem label = "geek community" icon = "http://upload.chinaz.com/2013/0319/1364253484639.jpg"> </menuitem>

<Menu label = "geek application">

<Menuitem label = "online tutorial" onclick = "window. location. href = http://www.gbtags.com/gb/postgroups.htm"> </menuitem>

</Menu>

</Menu>

Right-click the text area on the webpage and you will see the following menu:

Online debugging

HTML5 datalist for Automatic completion

You should be familiar with the auto-completion function, including jQueryUI or third-party auto-completion plug-ins. In HTML5, we use datalist for implementation, as shown below:

<Input name = "frameworks" list = "frameworks"/>

<Datalist id = "frameworks">

<Option value = "Foundation">

<Option value = "Bootstrap">

<Option value = "Dojo Toolkit">

<Option value = "jQuery">

<Option value = "YUI">

</Datalist>

Online debugging

Automatic focus of an element

Javascript is not required, and the code is simple:

<Input autofocus = "autofocus"/>

If you have any questions, please visit the geek tag to ask questions or discuss them. Thank you for reading.