Get twice the result with half the effort: Five HTML5 features you should know

HTML5 has five features that allow you to achieve twice the result with half the effort. They are DNS Prefetching, Link Prefetching, Download attributes, Regular Expressions, and Datalist elements. The emergence of HTML5 has brought many new and interesting JavaScript and HTML APIs to Web apps and mobile App development. This article will introduce five HTML5 features that help you get twice the result with half the effort.

 

1. DNS Prefetching

DNS host name resolution may slow down the website speed. Modern browsers are already very smart when it comes to DNS resolution-before a user follows a link, the browser first tries to resolve the domain name and then caches it.

The DNS Prefetching feature allows developers to manually control the domain name to be resolved by the browser. The Code is as follows:

[Html] <link rel = "dns-prefetch" href = "// fonts.googleapis.com">
<Link rel = "dns-prefetch" href = "// google-analytics.com">
<Link rel = "dns-prefetch" href = "// www.google-analytics.com">
<Link rel = "dns-prefetch" href = "// platform.twitter.com">

<Link rel = "dns-prefetch" href = "// fonts.googleapis.com">
<Link rel = "dns-prefetch" href = "// google-analytics.com">
<Link rel = "dns-prefetch" href = "// www.google-analytics.com">
<Link rel = "dns-prefetch" href = "// platform.twitter.com">
2. Link Prefetching

The Link Prefetching feature allows developers to pre-load the pages or elements they want to specify when loading pages. The Code is as follows:

[Html] <link rel = "prefetch" href = "http://daker.me/2013/05/hello-world.html"/>
<Link rel = "prefetch" href = http://www.bkjia.com/uploadfile/2013/0528/20130528035105279.png "/>

<Link rel = "prefetch" href = "http://daker.me/2013/05/hello-world.html"/>
<Link rel = "prefetch" href = http://www.bkjia.com/uploadfile/2013/0528/20130528035105279.png "/> You can also use the prerendering feature to make your website faster, the browser can get and render the entire page in the background, when you click the corresponding link, the page is displayed for the user. The Code is as follows:
[Html] view plaincopyprint? <Link rel = "prerender" href = "http://daker.me/2013/05/hello-world.html"/>

<Link rel = "prerender" href = "http://daker.me/2013/05/hello-world.html"/>
3. Download attributes

With the Download attribute of HTML5, developers can Download objects directly instead of downloading objects on a specific page. This operation can be executed without relying on the server code. The Code is as follows:

[Html] <a href = "download_assist.php? Id = 15 "download =" myfileprohibited "> Download PDF </a>

<A href = "download_assist.php? Id = 15 "download =" myfileprohibited "> Download PDF </a>
4. Regular Expressions

Once you enter a valid email or URL address, the pattern attribute allows you to directly use regular expressions without checking JS or server code. The Code is as follows:

[Html] <input type = "email" pattern = "[^ @] * @ [^ @] *" value = "">

<Input type = "email" pattern = "[^ @] * @ [^ @] *" value = "">
5. Datalist Element

If you use the jQuery plug-in to perform the auto-fill input operation, you need to access the server code and database every time you press the keyboard. With the Datalist element, developers do not have to use the jQuery plug-in to complete this operation. The Code is as follows:

[Html] <form action = "form. php" method = "post">
<Input list = "cars" name = "cars">
<Datalist id = "cars">
<Option value = "Volvo">
<Option value = "BMW">
<Option value = "Bugatti">
<Option value = "Cadillac">
<Option value = "Chevrolet">
<Option value = "Chrysler">
</Datalist>
<Input type = "submit"/>
</Form>

<Form action = "form. php" method = "post">
<Input list = "cars" name = "cars">
<Datalist id = "cars">
<Option value = "Volvo">
<Option value = "BMW">
<Option value = "Bugatti">
<Option value = "Cadillac">
<Option value = "Chevrolet">
<Option value = "Chrysler">
</Datalist>
<Input type = "submit"/>
</Form>