| Sublime Text实现代码自动生成，快速编写HTML/CSS代码 | 您所在的位置：网站首页 › mac写html代码 › Sublime Text实现代码自动生成，快速编写HTML/CSS代码 |
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插件。 使用自动生成插件之前，得让sublime text先知道文件类型，两种方式： 方式一：新建文件后保存为*.html文件 方式二：软件右下角选择语言类型 初始化页面输入 ! 或 html:5 ，然后按tab键，自动生成html页面框架代码。 DOCTYPE html> Document 自动补全标签配对输入任意成对的标签，如div，按tab键，自动生成一对html标签 自动添加类名和id名输入div.myclass#div1，按tab键，生成如下代码 自动填充文本内容输入span{hello}和a[href=here]，按tab键，生成如下代码 hello 自动生成同级标签标签之间用+号，输入div+span+p，按tab键，生成如下代码 自动生成嵌套标签标签之间用>号，输入table>tr>td，按tab键，生成如下代码 自动生成提级标签使用符号，可以上子标签往上提一级，输入div+div>p>span+embq，按tab键，自动生成代码如下 输入div+div>p>span+em^^bq，按tab键，自动生成代码如下 自动生成分组标签输入**(div.class1>span)+(div.class2>span)**，按tab键，生成如下代码 自动生成多个元素输入ul>li*6，按tab键，生成如下代码 上面这种感觉是最爽的，也是效率最高的。再比如输入table.table>tr>td*5，按tab键，生成如下代码 自动生成带多个属性的元素输入ul>li.class$*4，按tab键，生成如下代码 自动生成隐式标签不输入标签名，直接输入.class1，按tab键，会根据父标签判断生成什么，如在body中，生成如下代码 如在ul中，生成如下代码 下面是所有的隐式标签名称： 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。 |
【本文地址】