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. python爬虫----爬取阿里数据银行websocket接口

    业务需求:爬取阿里品牌数据银行的自定义模块==>>>人群透视==>>>查看报告==>>数据 发现:数据通过websocket接口传递,此类型接口的详细理 ...

  2. MySQL的联表查询

    MySQL的联表查询 首选:分析查询的字段来自哪些表 进而:确定交集 然后:确定判断的条件 比如:从student表 和 result表 查学号.考试名称.学时.考试日期.考试成绩 表1: 学号 考试 ...

  3. CodeForces 1144C

    链接 https://vjudge.net/problem/CodeForces-1144C #include<bits/stdc++.h> using namespace std; in ...

  4. 推荐7个GitHub项目

    CS-Notes https://github.com/CyC2018/CS-Notes 技术面试必备基础知识.Leetcode.计算机操作系统.计算机网络.系统设计.Java.Python.C++. ...

  5. window10安装nginx及请求转发到tomcat服务器访问项目及开机自启

    一.安装ngnix 1.  到nginx官网上下载相应的安装包,http://nginx.org/en/download.html: 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在 ...

  6. Centos7安装gitlab-ce

    1.官方推荐方式安装 参考https://www.gitlab.com.cn/installation/#centos-7?version=ce sudo yum install -y curl po ...

  7. 解决lucene更新删除无效的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180921233809 问题描述 在使用deleteDocuments,updateDocument方法根据id ...

  8. 动态生成sku组合输入列表

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  9. dmesg用法

    百科概念:dmesg是一种程序,用于检测和控制内核环缓冲.程序用来帮助用户了解系统的启动信息. 解释:dmesg命令显示linux内核的环形缓冲区信息,我们可以从中获得诸如系统架构.cpu.挂载的硬件 ...

  10. eclipse的一些使用

    1.恢复默认视图 window->perspective->open perspective ->open java 2.打开其他的一些视图,比如server(tomcat,目前使用 ...