A few simple but very useful HTML5 code

» network technique » A few simple but very useful HTML5 code

Making a web page must have basic knowledge of HTML code. When we write code, most of us estimate whether it is handwritten or not, and there will be a lot of copy and paste. Here are some HTML code segments that I often use and feel easy to use

几个简单但是非常有用的HTML5代码-极客公园

HTML5 blank template

Is this code very simple? Many people have written it. As long as you have written a page, you must have seen it. It is a blank HTML page template. Like Hello world, Yunluo writes it in the default new template of the editor

 <! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> <!--[ if lt IE 9]> <script src=" http://html5shim.googlecode.com/svn/trunk/html5.js "></script> <![ endif]--> </head> <body> </body> </html>

Load JavaScript asynchronously

Loading JavaScript asynchronously can significantly speed up the speed of web pages, and this is also one of the functions of HTML5. The method of adding is also very simple. You only need to use the script Add in label async Property, but you need to check the effectiveness of JavaScript when using it

 <script src="/script.js" async></script>

Defining responsive views

Open any responsive web page, such as the one you are looking at now, you will see a code similar to the following one. He tells the browser that this is a responsive web page, and how much scope I can see. Well, it's about this meaning. Just understand it

 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">

A 1 PX GIF bitmap

Many web pages will use very small image space, such as lazy loading, so you need a very small image to occupy space, or use the background image, use this very small Base64 code as the image

 <img src=" data:image/gif; base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Mailbox verification

There is a saying that "never trust what the user inputs". This tells us that we need to verify the user's input. Email submission is an input process we often encounter, such as registration. At this time, we need to verify the input content

 <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Experience:   

Form completion

When we input forms, we often meet the need of automatic completion, which will reduce the user's input process, improve the experience, and prevent errors

 <input type="text" name="frameworks" list="frameworks" /> <datalist id="frameworks"> < option value = Bank of China "> < option value = PetroChina "> < option value = China Telecom "> < option value = "China Mobile" > < option value = China Unicom "> </datalist>

Experience:   

Kill IE6

 <!--[ if IE 6]> <style>*{ position:relative }</style><table><input></table> <![ endif]-->

--Over--

Comment

Your email address will not be disclosed. Required item used * tagging

7 replies to "a few simple but very useful HTML5 code"