Sublime快速生成html快捷方式(平时较常用)

tab键很强大,输入要输入的信息后,点击tab键,效果即现。

头部部分:(html5)

1、输入“!”,按tab键;
2、输入“html:5”,按tab键;
得到:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注意:编写中文网页,记得把头部语言<html lang="en">改为<html lang="zh-cn">。
css样式引用:
输入“link”,按tab键;
得到:

<link rel="stylesheet" href="">

代码补全:

要输入一段代码段,用拼接形式。
1、子集合 用“>”拼接,几个子集用 星号 拼接,标签内文本用“{value}”拼接,有序数字用“$”拼接
如:ul>li
4>a{value$}
得到:

<ul>
    <li><a href="">value1</a></li>
    <li><a href="">value2</a></li>
    <li><a href="">value3</a></li>
    <li><a href="">value4</a></li>
</ul>

2、同级元素用 "^" 拼接,可以用()把要优先级区别开
如:div>(header>ul>li*2>a)+footer>p
得到:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

3、设置元素id,class,类似于css中id设置用#,class用. 。
如:#header{头信息}
得到:

<div id="header">头信息</div>

如:.title{标题}
得到:

<div class="title">标题</div>

4、快速输入标签,输入标签名称,按下tab键
如:div input label video audio 等
得到:

<div></div>
<input type="text"> 
<label for=""></label>  
<video src=""></video> 
<audio src=""></audio>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,840评论 1 92
  • 作者:德淸原文地址:http://qiudeqing.com/tools/2015/05/31/sublime-t...
    IT程序狮阅读 6,547评论 1 28
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,650评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,359评论 1 41
  • 客厅里有正在发霉的饼干 醉酒的男人碰碎银色的伞 橘色的猫咪在沙发上慵懒 我手中握着的金属货币一文不值 铜臭味吸引来...
    闻起来像十罐雪碧阅读 181评论 0 0