几个简单但是非常有用的HTML5代码 | VPS无忧 - 便宜美国VPS|国外VPS主机推荐|VPS优惠信息|日本韩国新加坡VPS|云服务器cloud|国外虚拟主机

制作网页必须会基本的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://<a href="https://www.vpswy.com/tag/html5/" title="查看更多关于html5的文章" target="_blank">html5</a>shim.googlecode.com/svn/trunk/<a href="https://www.vpswy.com/tag/html5/" title="查看更多关于html5的文章" target="_blank">html5</a>.js"></script>
    <![endif]-->
  </head>
  <body>
        
  </body>
</html>

异步加载JavaScript

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

<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"/script.js"</span> <span class="atn">async</span><span class="tag">></script></span>

定义响应式视图

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

<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/<a href="https://www.vpswy.com/tag/gif/" title="查看更多关于gif的文章" target="_blank">gif</a>;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]-->

添加代码并高亮

先切换到文本选项，输入

<pre class="prettyprint linenums" >
//code this
</pre>

然后切换到可视化选项，将复制粘贴的无格式文本粘贴进去。

如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明 vps无忧 https://www.vpswy.com/html5daima/