Sublime Text2 新建文件快速生成Html头部信息和炫酷的代码补全

预备:安装emmet插件(previously known as Zen Coding

方法一  package control法:

上一篇博客已经介绍了如何安装package control。打开sublime,mac下用command + shift + p调出命令窗口,输入install,选中package control:install package,等待1-2秒,下拉选中emmet plugin回车,等待2-3秒,重启sublime。

方法二 手动安装法:

  git下emmet plugin,打开sublime,preferences,browse packages,将下载的zip文件解压放到packages文件夹下,重启sublime。

  参见:官方安装文档  用命令 command + F 查找 install即可。

删除已安装插件:按ctr+shift +p然后输入remove 回车,再输入要删除的插件名。

开始体验:输入以下简写,按tab键

html:5

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8
 9 </body>
10 </html>

html:4t

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8
 9 </body>
10 </html>

html:4s

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8
 9 </body>
10 </html>

html:xxs

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8
 9 </body>
10 </html>

ul#nav>li.itemS*4>a{Item $}

1  <ul id="nav">
2        <li class="itemS"><a href="">Item 1</a></li>
3        <li class="itemS"><a href="">Item 2</a></li>
4        <li class="itemS"><a href="">Item 3</a></li>
5        <li class="itemS"><a href="">Item 4</a></li>
6  </ul>

更多炫酷信息和emmet语法请参见:

时间: 2024-08-18 06:55:25

Sublime Text2 新建文件快速生成Html头部信息和炫酷的代码补全的相关文章

visual studio code快速生成Html头部信息和炫酷的代码补全

html:4t.html:4s.html:xt.html:xs.html:xxs.html:5 Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> Climb-u

Sublime Text2 新建文件快速生成html头部信息及常用快捷命令

一.安装emmet插件 菜单栏: Preferences->Package Control->选中Package Control:Install Package->然后输入emmet plugin 回车,即开始安装,安装完成后会有信息提示,重启即可. 二.常用命令   命令+回车 html:5 回车 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="

sublime text2 emmet 快速生成HTML头部信息Emmet

html:4t <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="${lang}"> <head> <meta http-equiv="Content-Type" content="text/htm

pycharm 设置py文件的默认模版头部信息

pycharm 设置py文件的默认模版头部信息,打开设置settings 进入File->settings->Editor->File and Code Templates->Python Script 在Python Script中输入: # encoding: utf-8 #set( $SITE = "http://www.cnblogs.com/andu99/" ) """ @version: ?? @author: andu

Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键

一.快速生成HTML5的头部信息的步骤: 1.Ctrl + N,新建一个文档: 2.Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式: 3.输入  !,再按下 Tab键或者 Ctrl + E ,就能快速打开HTML5的整体结构. 二.十分常用的快捷键: Ctrl + P,打开搜索框.具体操作为:1.输入当前项目中的文件名,快速搜索文件,2.输入@和关键字,查找文件中函数名,3.输入:和数字,跳转到文件中该行代码,4.输入#和关键字,查找

CCS 6新建文件自动生成注释

对于CCS6,可以通过配置,达到新建源文件或者头文件时,自动生成适当的注释: 一.新建源文件自动生成配置. 在某个文件夹下右击选择 New - Source File. 点击 Configure,再选择对应的语言,然后点击Edit. 此时就出现了一个可编辑的模版.适当的配置模版,保存.可以参考下列程序: 1 /**************************************************************** 2 @版权 : 个人开发,禁止用于商业用途 3 @文件名

Sublime Text 新建文件的模版插件: SublimeTmpl

写了个sublime的模版插件, 项目主页: https://github.com/kairyou/SublimeTmpl这样就可以新建文件时使用模版的内容了, 目前添加了html/js/css/php/python/ruby的模版. 不需新建空白文件, 再从其他文件复制内容过来了.已增加对Sublime Text3的支持. 使用: 1. ST菜单, File-New File (SublimeTmpl), 选择列表里的相应菜单, 可直接使用模版新建文件.2. 命令, cmd+shift+p,

sublime 设置新建文件自动添加author(作者)等文件头信息

很多时候, sublime 自带自动添加文件头信息, 但是并不是我们想要比如下面这样的:新建一个python文件 自动添加的author 信息== 上面并不是我想要的, 我想要下面这样的效果:== 这就需要我们设置插件来自定义化, 步骤1) 安装 file Header 插件 (一般默认已经安装)2) 设置变量 比如author 值, email 的值3) 修改语言 模板具体如下:第一步: 查看是否已安装 file Hdader 插件== 能找到 File Header 就说明已经安装, 如果没

使用vscode时,如何在.vue文件中使用html代码补全功能

一.在vscode中把这个插件下载了并且启用,然后翻阅插件的ReadMe,我们可以看到如下图得FAQ: 二.settings.json中配置files.associations对象 首先,依次打开"文件 --> 首选项 --> 设置",就会看到settings.json文件了 然后在settings.json中找到"常用设置"里的files.associations对象 然后把鼠标滑到对象的左边,会出现如图所示的一个"编辑"的标志,点