Sublime Text实现代码自动生成,快速编写HTML/CSS代码
目录
- 下载Sublime Text
- 安装emmet插件
- 常用自动生成HTML代码实例
- 初始化页面
- 自动补全标签配对
- 自动添加类名和id名
- 自动填充文本内容
- 自动生成同级标签
- 自动生成嵌套标签
- 自动生成提级标签
- 自动生成分组标签
- 自动生成多个元素
- 自动生成带多个属性的元素
- 自动生成隐式标签
- 常用自动生成CSS代码实例
- 自动生成值
- 单位别名列表
- 混合输入
- 常用缩写
下载Sublime Text
官网地址:www.sublimetext.com
上面有适合windows、linux、macos系统的各种类型,自行下载安装。
安装emmet插件
刚安装的sublime text是不会自动生成html/css代码的,需要安装插件。
同时按ctrl+shift+p键,或到菜单中点击Perferences->package control,输入install,看下图箭头指向提示点击安装Install Package功能。
同时按ctrl+shift+p键,输入emmet,看下图箭头指向提示点击安装emmet插件。
常用自动生成HTML代码实例
使用自动生成插件之前,得让sublime text先知道文件类型,两种方式:
方式一:新建文件后保存为*.html文件
方式二:软件右下角选择语言类型
初始化页面
输入 ! 或 html:5 ,然后按tab键,自动生成html页面框架代码。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
自动补全标签配对
输入任意成对的标签,如div,按tab键,自动生成一对html标签
<div></div>
自动添加类名和id名
输入div.myclass#div1,按tab键,生成如下代码
<div class="myclass" id="div1"></div>
自动填充文本内容
输入span{hello}和a[href=here],按tab键,生成如下代码
<span>hello</span><a href="here"></a>
自动生成同级标签
标签之间用+号,输入div+span+p,按tab键,生成如下代码
<div></div><span></span><p></p>
自动生成嵌套标签
标签之间用>号,输入table>tr>td,按tab键,生成如下代码
<table><tr><td></td></tr></table>
自动生成提级标签
使用符号,可以上子标签往上提一级,输入div+div>p>span+embq,按tab键,自动生成代码如下
<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>
输入div+div>p>span+em^^bq,按tab键,自动生成代码如下
<div></div><div><p><span></span><em></em></p></div><blockquote></blockquote>
自动生成分组标签
输入**(div.class1>span)+(div.class2>span)**,按tab键,生成如下代码
<div class="class1"><span></span></div><div class="class2"><span></span></div>
自动生成多个元素
输入ul>li*6,按tab键,生成如下代码
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
上面这种感觉是最爽的,也是效率最高的。再比如输入table.table>tr>td*5,按tab键,生成如下代码
<table class="table"><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
自动生成带多个属性的元素
输入ul>li.class$*4,按tab键,生成如下代码
<ul><li class="class1"></li><li class="class2"></li><li class="class3"></li><li class="class4"></li></ul>
自动生成隐式标签
不输入标签名,直接输入.class1,按tab键,会根据父标签判断生成什么,如在body中,生成如下代码
<div class="class1"></div>
如在ul中,生成如下代码
<li class="class"></li>
下面是所有的隐式标签名称:
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中
常用自动生成CSS代码实例
与html文件类似,要想使用css自动生成,新建文件后保存成*.css文件,或在软件右下角选择css代码类型。
自动生成值
在一个样式内,输入h20,按tab键,自动生成代码如下
height: 20px;
输入w50,按tab键,自动生成代码如下
width: 50px;
单位别名列表
p 表示%
e 表示 em
x 表示 ex
如输入w100p,按tab键,自动生成代码如下
width: 100%;
混合输入
输入h10p+m5e,按tab键,自动生成代码如下
height: 10%;margin: 5em;
常用缩写
oh : overflow: hidden;
bg : background: #000;
bgi : background-image: url();
mg : margin:
mgl5 : margin-left:5px;
pd : padding:
pdr4 : padding-right:4px;
本篇就介绍到这里,其实idea开发工具也可以实现自动生成代码,只不过杀鸡焉用牛刀,写个前端没必要开启使用系统资源较多的idea。
Sublime Text实现代码自动生成,快速编写HTML/CSS代码相关推荐
- Zen Coding: 一种快速编写HTML/CSS代码的方法
译自:Smashing Magazine 中文:Zen Coding: 一种快速编写HTML/CSS代码的方法 请尊重版权,转载请注明来源! 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开 ...
- sublime text3 快速编写 HTML/CSS代码
转自:http://www.cnblogs.com/EnSnail/p/6294897.html Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生. ...
- 50行python代码自动生成文章_50行Python代码,教你获取公众号全部文章
> 本文首发自公众号:python3xxx 爬取公众号的方式常见的有两种 - 通过搜狗搜索去获取,缺点是只能获取最新的十条推送文章 - 通过微信公众号的素材管理,获取公众号文章.缺点是需要申请自 ...
- 自定义Android注解Part2:代码自动生成
上一期我们已经把butterknife-annotations中的注解变量都已经定义好了,分别为BindView.OnClick与Keep. 如果你是第一次进入本系列文章,强烈推荐跳到文章末尾查看上篇 ...
- Spring Boot (七)MyBatis代码自动生成和辅助插件
一.简介 1.1 MyBatis Generator介绍 MyBatis Generator 是MyBatis 官方出品的一款,用来自动生成MyBatis的 mapper.dao.entity 的框架 ...
- 国产自主可控的代码自动生成工具SkyEye
传统的系统开发过程,都是由工程师根据项目需求书来编写代码完成系统的开发,但随着功能的扩充和版本的迭代,系统中庞大的代码量很难确保正确无误,给后期测试和仿真带来了很大的压力和成本,在航空航天.卫星系统. ...
- 亚马逊开源模型设计神器:AutoGluon,三行代码自动生成SOTA模型!
点击我爱计算机视觉标星,更快获取CVML新技术 本文转载自新智元. 亚马逊最近宣布推出AutoGluon,这是一个新的开源库,开发人员可以使用该库构建包含图像.文本或表格数据集的机器学习应用程序.使用 ...
- java生成iso9660工具_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo_20210212 v7.0.0 正式版发布,此次版本更新如下: 1.新增对DB2数据库的支持 2.新增按字段生成文件,支持把字段.JSON.XML数据转换成任何代码 3.新增大量新的自 ...
- 基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.9.0版)
TableGo_20200520 v6.9.0 正式版发布,此次版本更新如下: 1.新增对JDK9及以上版本Java环境的支持 2.生成JavaBean更名为生 ...
- 基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.4.0版)
TableGo_20210921 v7.4.0 正式版发布,此次版本累计更新如下: 1.新增企业或个人的简单定制版本,为企业和个人提供软实力的增值 2.新增导入 ...
最新文章
- ASP.NET重用代码技术 - 代码绑定技术
- [云炬创业基础笔记]第二章创业者测试8
- IPFS的相关操作命令
- CSAPP-C1-计算机系统漫游
- 【leetcode】416. Partition Equal Subset Sum
- 动态sql语句基本语法
- iredmail开源邮件系统部署
- mac文件修改权限设置
- 数据新闻周报:阿尔法狗将挑战德州扑克
- BitTorrent协议规范(BitTorrent Protocol Specification)之Peer Wire协议(Peer Wire Protocol)-第四部分...
- LeetCode 69. x的平方根
- web前端面试题讲解-网站重构的理解
- ApacheCN 活动汇总 2019.8.9
- Rme Babyface Pro FS娃娃脸声卡安装调试教程
- 苹果电脑上的Word打不开怎么办?Word文件怎么恢复?
- 贴吧顶帖工作室(贴吧怎么顶帖)
- 数据中台的规划设计理念
- X86 Debuggers And Tools-x86_en-us 下载及使用
- C++课程设计——健身俱乐部管理
- Educational Codeforces Round 132 A - D
热门文章
- Linux中使用SSH服务远程连接Linux系统
- 仿京东商城html网页源码
- OrCAD 与 Cadence Allegro PCB 入门 - 以 16.6版本为例 (1)
- 自学android编程教程,安卓编程入门教程 安卓编程如何自学
- 计算机网络图标显示不出来,网络图标不见了汇总解决教程
- WAP2.0的历史使命和技术演变
- vc6,vc.net,vc7,vc8,vc9,c,c++,c#的区别与联系
- 搞深度学习如何找到需要的代码
- 幼儿园管理系统的设计与实现
- bpa软件视频教程,BPA是什么软件