Emmet插件：可以用 emmet代码+Tap  写出更多并快捷的html代码，主流编辑器均可安装，安装方法也均不相同！

<!-- html:5或者!可以生成html5文档 -->

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- meta:utf -->

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <!-- meta:vp -->

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <!-- meta:compat -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- link -->

    <link rel="stylesheet" href="">

    <!-- link:css -->

    <link rel="stylesheet" href="style.css">

    <!-- script -->

    <script></script>

    <!-- script:src -->

    <script src=""></script>

    <title>Document</title>

</head>

<body>

    1,生成带类样式的标签

    <!-- P.info -->

    <P class="info"></P>

    <!-- div.red -->

    <div class="red"></div>

    <!-- .red -->

    <div class="red"></div>

    2,生成带id的标签

    <!-- h2#header -->

    <h2 id="header"></h2>

    <!-- #header -->

    <div id="header"></div>

    3,a标签

    <!-- a -->

    <a href=""></a>

    <!-- a:link -->

    <a href="http://"></a>

    <!-- a:mail -->

    <a href="mailto:"></a>

    4,根据标签之间的位置来生成标签

    生成同级,兄弟标签

<!--     h2.header+p#info{信息} -->

    <h2 class="header"></h2>

    <p id="info">信息</p>

    后代标签

    <!-- ul>li -->

    <ul>

        <li></li>

    </ul>

    <!-- ul>li+li+li -->

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <!-- ul>li*3 -->

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    生成当前标签的父级,也叫上级标签

    <!-- h2>span^p -->

    <h2><span></span></h2>

    <p></p>

    5,你也可以在生成标签的时候,同时创建内部的文本

    <!-- ul>li.info{demo}*4+li.info{index} -->

    <ul>

        <li class="info">demo</li>

        <li class="info">demo</li>

        <li class="info">demo</li>

        <li class="info">demo</li>

        <li class="info">index</li>

    </ul>

    <!-- p[title="这是一段说明文字"] -->

    <p title="这是一段说明文字"></p>

    <!-- form[action="{:url('index/demo')}" method="post"]>input[type="text" name="info"]{内容} -->

    <form action="{:url('index/demo')}" method="post"><input type="text" name="info">内容</input></form>

    6,快速生成一个有8个列表项的导航

    <!-- ul.list>li.item*8>a{导航} -->

    <ul class="list">

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

        <li class="item"><a href="">导航</a></li>

    </ul>

    7,给标签自动添加编号和排序:$.@

    <!-- ul.list>li.item*4>a{导航$} -->

    <ul class="list">

        <li class="item"><a href="">导航1</a></li>

        <li class="item"><a href="">导航2</a></li>

        <li class="item"><a href="">导航3</a></li>

        <li class="item"><a href="">导航4</a></li>

    </ul>

    <!-- ul.list>li.item*4>a{导航$$} -->

    <ul class="list">

        <li class="item"><a href="">导航01</a></li>

        <li class="item"><a href="">导航02</a></li>

        <li class="item"><a href="">导航03</a></li>

        <li class="item"><a href="">导航04</a></li>

    </ul>

    ul.list>li.item*4>a{导航$$@-}

    <ul class="list">

        <li class="item"><a href="">导航04</a></li>

        <li class="item"><a href="">导航03</a></li>

        <li class="item"><a href="">导航02</a></li>

        <li class="item"><a href="">导航01</a></li>

    </ul>

    ul.list>li.item*4>a{导航$$$$@100}

    <ul class="list">

        <li class="item"><a href="">导航0100</a></li>

        <li class="item"><a href="">导航0101</a></li>

        <li class="item"><a href="">导航0102</a></li>

        <li class="item"><a href="">导航0103</a></li>

    </ul>

    ul.list>li.item*4>a{导航$$@-100}

    <ul class="list">

        <li class="item"><a href="">导航103</a></li>

        <li class="item"><a href="">导航102</a></li>

        <li class="item"><a href="">导航101</a></li>

        <li class="item"><a href="">导航100</a></li>

    </ul>

</body>

</html>

用Emmet写前端代码的更多相关文章

  1. 基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)

    基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...

  2. Effective前端5：减少前端代码耦合

    什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: ...

  3. 【grunt第二弹】30分钟学会使用grunt打包前端代码（02）

    前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...

  4. 前端代码标准最佳实践：CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  5. 腾讯ISUX网页前端代码分析

    看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...

  6. HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么？

    在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多.作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景. (图片说明:所有浏览器都支持iframe,无论什么版 ...

  7. bootStrap-table服务器端后台分页的使用，以及自定义搜索框的实现，前端代码到数据查询超详细讲解

    关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...

  8. app前端代码打包步骤

    一.搭建项目环境 1.安装node.js 在网上找到nodejs压缩包,下载解压后安装node-v8.9.3-x64.msi文件. 安装完毕后,在windows的cmd控制台输入node -v或nod ...

  9. javascript功能插件大集合，写前端的亲们记得收藏

    伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn ...

随机推荐

  1. php中的require和include区别

    require是无条件包含也就是如果一个流程里加入require,无论条件成立与否都会先执行require 1.require 的使用方法如 require("MyRequireFile.p ...

  2. Windows7下Docker的安装

    转自  https://blog.csdn.net/xiangxiezhuren/article/details/79698913 无法打开图3,打开属性.给其添加git路径 无法使用图2下载   h ...

  3. nginx proxy_set_header Host $host 和 proxy_set_header Host $http_host 的作用对比

    转载自https://www.jianshu.com/p/7a8a7eb3707a 1.浏览器直接访问服务,获取到的 Host 包含浏览器请求的 IP 和端口 测试服务器,centos 7 sudo ...

  4. WordPress 背后的故事竟然是这样

    原文链接:The Story Behind the New WordPress.com 译者:杰微刊-Leo Xu 一年半以前,我们对使用 WordPress 构建网站所需要采用的技术和开发流程进行大 ...

  5. Docker最全教程——从理论到实战（十四）

    本篇教程主要讲解基于容器服务搭建TeamCity服务,并且完成内部项目的CI流程配置.教程中也分享了一个简单的CI.CD流程,仅作探讨.不过由于篇幅有限,完整的DevOps,我们后续独立探讨. 为了降 ...

  6. join方法，wait()和sleep()

    join方法解释:方法x.join()的作用是使所属线程x 正常执行run()中的方法,而使得调用x.join()的线程处于无限期阻塞状态,等待x线程销毁后再继续执行线程z后面的代码. 1.方法joi ...

  7. 简单的Spring1.0小配置

    开始Spring AOP的小理解 拿一个小例子来说吧!    老师上课   这样的例子!    老师上课--就是一个核心的业务!     那么上课之前需要点名,天气太热,需要开空调! 这个时候,一个老 ...

  8. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  9. [Codechef CHSTR] Chef and String - 后缀数组

    [Codechef CHSTR] Chef and String Description 每次询问 \(S\) 的子串中,选出 \(k\) 个相同子串的方案有多少种. Solution 本题要求不是很 ...

  10. 在多租户（容器）数据库中如何创建PDB：方法2 克隆本地PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆本地PDB(从本地其他PDB创建新的PDB) 对应路径:Creating a PDB --> Cloning --> ...