最近接手了公司官网跟新的任务,需要编写HTML页面。页面中存在大量重复内容(导航条、页脚、侧边栏等),每次复制粘贴也不是个事,网上搜了相关的HTML模板创建问题,还找到了。楼主使用的是Sublime text3,相关创建HTML模板的方法如下:

1. 使用相关的包,如SublimeTmpl,安装步骤如下:

    1.1 安装Package Control组件

    1.2 按下Ctrl + Shift + P调出命令面板,选择Install Package选项并回车

    1.3 输入要安装的插件,如SublimeTmpl

    1.4 安装成功后,使用Ctrl + alt + h就可以新建一个html5文件了。

    1.5 html5模板修改,点击Preferences → Browse Packages,在SublimeTmpl文件夹下,依次找templates→html.tmpl进行修改。

2. 自定义模板,步骤如下:

    2.1 打开工具--插件开发--新建代码片段,会出现下图:

    2.2 在<![CDATA[和]]>内写下你要的代码片段,注意的是代码片段要靠最左边,并把下面tabTrigger标签的注释打开,中间的yhdt就是你的快捷键。

    2.3 Ctrl+s保存,后缀必须是.sublime-snippet。例如yhdongtai.sublime-snippet

    2.4 新建一个页面test.html,输入yhdt,然后按Tab键,就出现你设置的代码片段了。

Sublime text3 创建html模板的更多相关文章

  1. python学习笔记(六)---sublime text3 创建python项目

    1.创建项目 依次鼠标左键点击Project>Add Folder to Project...,选择test文件夹: 2.保存项目 依次鼠标左键点击Project>Save Project ...

  2. MacOS中创建Sublime Text3快捷方式返回Operation not permitted的原因及解决

    在类Unix系统中我们可以很随心的添加一些程序在终端里快捷方法,比如将一些常用的工具放在/usr/bin下面 Sublime Text3是一个小巧精致而又功能强大的程序,而且本猫也安装了Swift语言 ...

  3. 一个前端程序猿的Sublime Text3的自我修养

    来源于:http://guowenfh.github.io/2015/12/26/SublimeText/ 详细设置 && 20+插件 本文章会在本人有插件或者设置更新时,进行不定时更 ...

  4. 【网络资料】如何优雅地使用Sublime Text3

    如何优雅地使用Sublime Text3 Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相 ...

  5. 为什么要选择Sublime Text3?

    为什么要选择Sublime Text3? Sublime Text3 自动保存,打开图片 跨平台启动快!!!!多行游标,太好用. 插件,简直选不过来. 代码片段 VIM兼容模式 菜单栏基础功能介绍 F ...

  6. 如何优雅地使用Sublime Text3

    此文非原创,出处见文章结尾. 一.Sublime Text 3插件安装 优雅使用Sublime Text,插件则是不可缺少的存在:而插件的备份就显得非常的重要(譬如:各平台同步:更换系统/电脑,迅速使 ...

  7. Sublime Text3搭建PHP开发环境

    Sublime Text3搭建PHP开发环境 本文主要给大家分享了关于Sublime Text3搭建PHP开发环境 ,感兴趣的小伙伴可以做一下参考 一.Sublime text3安装 到官网http: ...

  8. 4.8 Sublime Text3 中配置 Python环境 --之下Sublime配置Python环境

    返回总目录 目录: 1.没有配置之前 2.安装Package Control插件 3.安装其他库: 4.配置其他操作: (一)没有配置之前: 我们试着运行以下,会效果怎么样? 1.首先选择Python ...

  9. 如何优雅地使用Sublime Text3(转)

    转自http://www.jianshu.com/p/3cb5c6f2421c/ Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩 ...

随机推荐

  1. ubuntu android studio 编译及运行错误Error retrieving parent for item: No resource found that matches the given name

    安装好android studio并且安装其它需要的SDK或组件后,根据向导生成新的项目, 编译或运行时可能会出现下面的错误: Error:Error retrieving parent for it ...

  2. [原创]java WEB学习笔记14:JSP的9 个隐含对象 及 JSP 的基本语法

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  3. java-从这里开始认识

    <java是什么:>Programming language 程序语言Development environment 开发环境Application environment 应用环境Dep ...

  4. 算法(Algorithms)第4版 练习 2.1.27

    package com.qiusongde; import edu.princeton.cs.algs4.StdOut; public class Exercise2127 { public stat ...

  5. 算法(Algorithms)第4版 练习 1.5.9

    不可能.如果是weighted quick-union的话,6的父节点应该是5,而不是5的父节点是6.

  6. Oracle的select检索数据

    --Select语法 select [distinct | All] select_list from table_list [where_clause] [group_by_clause] [Hav ...

  7. 数据分析第二篇:matplotlib 常用的几个绘图方法

    Matplotlib matplotlib是python的绘图库,使用它可以很方便的绘制出版质量级别的图形 matplotlib的基本功能 1.基本绘图 1.1 绘制坐标系中连续的线,设置线型/线宽/ ...

  8. 绘图工具--turtle模块

    turtle模块主要使用两个类,一个是TurtleScreen类,表示画布(窗口),用来展示画的位置:一个是Turtle类,用来充当画笔,用来画. 两个类的方法也以同名的函数的形式存在,所以可以以面向 ...

  9. AAC头部格式

    一共有2种AAC头格式,一种是StreamMuxConfig,另一种是AudioSpecificConfig 1.AudioSpecificConfig 读写header的代码参考    ffmpeg ...

  10. 错误名称:Uncaught SyntaxError: Unexpected identifier

    控制台输出: 1.谷歌:Uncaught SyntaxError: Unexpected identifier 2.火狐:SyntaxError: missing ] after element li ...