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

HTML5空白模板

rn这个代码很简单吗,很多人都写过,只要你写过一个页面,那么肯定就见过,那就是一个空白的HTML页面模板,多见的和hello world一样,云落是把他写在编辑器的默认新建模板里面的.rn
<!DOCTYPE html>rn<html lang="zh-CN">rn  <head>rn    <meta charset="utf-8">rn    <title>Untitled</title>rn    <meta name="description" content="This is an example of a meta description.">rn    <link rel="stylesheet" type="text/css" href="theme.css">rn rn    <!--[if lt IE 9]>rn    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>rn    <![endif]-->rn  </head>rn  <body>rn        rn  </body>rn</html>rn
rn

异步加载JavaScript

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

定义响应式视图

rn打开随便一个响应式网页,比如你现在看的这个网页,就会看到类似于下面的这个代码,他是告诉浏览器我这个是响应式网页,我能看到多大的范围,嗯,大概是这个意思,明白就行.rn
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">rn<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">rn<meta name="HandheldFriendly" content="true">rn
rn

一个1px大小的Gif占位图

rn很多网页都会使用很小的图片占位,比如懒加载,那么就需要一个很小的图片来占位了,或者使用背景图,使用这个很小的base64代码作为图片吧rn
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">rn
rn

邮箱验证

rn有句话说是[永远不要相信用户输入的东西],这份是告诉我们需要对用户输入的内容进行验证,邮箱提交是我们经常遇到的输入过程,比如注册什么的,这个时候就需要对输入的内容进行验证了rn
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />rn
rn

表单自动完成

rn我们输入表单的时候经常会遇到自动完成的需要,这样就会减少用户的输入过程,提高体验,也防止错误.rn
<input type="text" name="frameworks" list="frameworks" />rn<datalist id="frameworks">rn    <option value="中国银行">rn    <option value="中国石油">rn    <option value="中国电信">rn    <option value="中国移动">rn    <option value="中国联通">rn</datalist>rn
rn

搞死IE6

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

添加代码并高亮

rn先切换到文本选项，输入rn
<pre class="prettyprint linenums" >rn//code thisrn</pre>rn
rn然后切换到可视化选项，将复制粘贴的无格式文本粘贴进去。