如何使用Sublime快速添加DOCTYPE等信息

Coding Alan 9年前 (2015-08-08) 5953次浏览 0个评论 扫描二维码

Sublime Text 常用快捷键

快捷键组合 功能
shift + cmd + p 打开命令面板
control + ` 控制台
cmd + n 新建标签
cmd + 数字 标签切换
cmd + option + 2 分成两屏
control + 数字 分屏时移动到不同的屏幕
cmd + delelte 删除光标前所有字符, 貌似是Mac快捷键
cmd + f 查找
option + cmd + f 查找替换
cmd + t 文件跳转
control + g 行跳转, 类似vim中的num + gg
cmd + r 函数跳转
cmd + / 给选中行添加或去掉注释
cmd + [或 cmd + ] 智能行缩进
cmd + k + b 开关侧边栏

在HTML5之前DOCTYPE这段声明实在是太过繁冗,前端工程师通常都是直接复制或者使用Dreamweaver这样的工具默认进行添加,通常不会有人去记下那么一长串的代码。今天我们要讲的是如Sublime中快速添加这段声明以及整个HTML框架,使用下面的功能需要配合安装Emmet插件,安装方法可以参见Sublime Text 使用指南一文。

具体做法是在文件中输入下面粗体部分的内容然后按下tab键即可得到下面对应的内容

html:4t

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

</body>
</html>

html:4s

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

</body>
</html>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:5

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

</body>
</html>
喜欢 (1)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址