几个简单但是非常有用的HTML5代码-老妖IT乐园

友情提示:小白购买需注意,程序不包安装,无技术支持,因资源可复制性,不接受任何理由退款。

本站资源仅供学习测试！不得用于非法用途！商业用途与本站无关！资源自行测试不做任何保证！

本站资源默认解压密码：www.itxen.cn或者自行在下载页面查询

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

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

-- 完 --

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

本站网络名称： 老妖IT乐园

本站永久网址： https://www.itxen.cn

网站侵权说明：本站采用知识共享署名-相同方式共享 4.0国际 (CC BY-NC-SA 4.0)进行许可，转载或引用本站文章应遵循相同协议。
1 本站仅为转载分享，不提供任何上传下载服务，所有内容均来自互联网第三方分享站点所提供的公开引用内容。更多查阅免责申明
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3本站资源售价只是赞助，收取费用仅维持本站的日常运营所需，并且本站不提供任何免费技术支持！
4 如果有侵犯版权的资源请尽快联系站长，我们会在三个工作日内删除有争议的资源。点击侵删流程
站长邮箱：admin@itxen.cn

THE END