几个简单但是非常有用的HTML5代码

» 网络技术 » 几个简单但是非常有用的HTML5代码

制作网页必须会基本的HTML代码知识,而我们写代码的时候,绝大多数估计都是不是一个一个手写的,复制粘贴也会有很多,这里云落列出几个自己经常使用觉得比较好用的HTML代码段哦

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

HTML5空白模板

这个代码很简单吗,很多人都写过,只要你写过一个页面,那么肯定就见过,那就是一个空白的HTML页面模板,多见的和hello world一样,云落是把他写在编辑器的默认新建模板里面的.

<!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>

异步加载JavaScript

异步加载JavaScript可以明显加快网页速度,而且这个也是HTML5的功能之一,添加的方法也很简单,只需要在script标签内加入async属性即可,但是使用的时候需要检测JavaScript的生效问题哦

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

定义响应式视图

打开随便一个响应式网页,比如你现在看的这个网页,就会看到类似于下面的这个代码,他是告诉浏览器我这个是响应式网页,我能看到多大的范围,嗯,大概是这个意思,明白就行.

<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">

一个1px大小的Gif占位图

很多网页都会使用很小的图片占位,比如懒加载,那么就需要一个很小的图片来占位了,或者使用背景图,使用这个很小的base64代码作为图片吧

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

邮箱验证

有句话说是[永远不要相信用户输入的东西],这份是告诉我们需要对用户输入的内容进行验证,邮箱提交是我们经常遇到的输入过程,比如注册什么的,这个时候就需要对输入的内容进行验证了

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

体验一下 :  

表单自动完成

我们输入表单的时候经常会遇到自动完成的需要,这样就会减少用户的输入过程,提高体验,也防止错误.

<input type="text" name="frameworks" list="frameworks" />
<datalist id="frameworks">
	<option value="中国银行">
	<option value="中国石油">
	<option value="中国电信">
	<option value="中国移动">
	<option value="中国联通">
</datalist>

体验一下 :  

搞死IE6

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

-- 完 --

发表评论

电子邮件地址不会被公开。 必填项已用*标注

5 Replies to “几个简单但是非常有用的HTML5代码”