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

Source: Internet
Author: User
Tags prefetch

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>

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.