HTML5 features to be noted in front-end development

HTML5 has been on fire for some time, I believe that as a web-related development engineer, certainly more or less understand and try to some HTML5 features and programming. Remember the HTML5 new label we introduced before. As the future front-end development technology trend and vane, HTML5 absolutely cannot ignore.
　　
In today's technology sharing article, we will introduce several important features of HTML5, which can help you improve the overall Web application experience and development efficiency, I believe you will be interested!
　　
　　feature one: Regular Expressions
　　
I believe everyone will love this feature, without server-side detection, using the local browser function can help you determine the format of e-mail, URL, or phone format, prevent users from entering the wrong information, by using the HTML5 pattern attribute, we can easily integrate this function, The code is as follows:
　　
<input type= "Email" pattern= "[^ @]*@[^ @]*" Value= "" >
　　
Run as follows:
　　
If you are running in a Firefox browser and you enter the wrong email address, you will see the following:
　　
Gbdebug Online Debug Address: http://www.zzfriend.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm
　　
attribute two: Data list elements
　　
In the absence of HTML5 days, we will choose to use some JS or well-known jquery UI to achieve auto-completion function, and in HTML5, we can directly use the DataList element, as follows:
　　
<form action= "/server" method= "POST" >
　　
<input list= "Jslib" name= "Jslib" >
　　
<datalist id= "Jslib" >
　　
<option value= "JQuery" >
　　
<option value= "Dojo" >
　　
<option value= "Prototype" >
　　
<option value= "Augular" >
　　
</datalist>
　　
<input type= "Submit" value= "complete"/>
　　
</form>
　　
To run the code:
　　
If you enter the letter "J", you can see the following auto-fill effect:
　　
Gbdebug Online Debug Address: http://www.zzfriend.com/gb/debug/0c8a7fea-4a30-4cc4-9282-1921e1251726.htm
　　
feature three: Download Properties
　　
HTML5 Download properties can allow developers to force download a page, rather than loading that page, so you do not need to implement some server-side functions to achieve the same effect, is not very intimate?
　　
<a href= "download_pdf.php" download= "somefile.pdf" > download PDF file </a>
　　
feature four: pre-load processing of DNS
　　
To know that the parsing cost of DNS is very high, often causing the site to load slowly. Now the browser has developed a more intelligent processing for this problem, it will cache the domain name, when the user click on the other page address automatically after the acquisition.
　　
If you want to get NDS in advance, you can control your browser to resolve the domain name, for example:
　　
<link rel= "Dns-prefetch" href= "//www.zzfriend.com" >
　　
<link rel= "Dns-prefetch" href= "//bbs.zzfriend.com" >
　　
<link rel= "Dns-prefetch" href= "//m.zzfriend.com" >
　　
<link rel= "Dns-prefetch" href= "//s.zzfriend.com" >
　　
feature five: pre-loaded processing of linked pages
　　
To know that the link can help the user navigate in the page, but the speed of the page load determines the user experience is good and bad, using the following HTML5 Prefetch property can help you preload the page or specific resources on the page for the specified address, so that when the user clicks, You will find that the page loading speed has increased. It Hot jobs
　　
<link rel= "prefetch" href= "http://www.ytbdqn.com/show-4-84-1.html"/>
　　
<link rel= "prefetch" href= "http://www.ytbdqn.com/show-4-84-1.html"/>
　　
Or you can use the PreRender property, which will help you load the entire page in advance, as follows:
　　
<link rel= "PreRender" http://www.ytbdqn.com/show-4-84-1.html/>

HTML5 features to be noted in front-end development