整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器。
本文通过实例来介绍项目中常用快捷键和插件的用法，熟悉快捷键和引用插件可以极大地提高我们的开发效率。
输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构，转换为的代码如下图：
Tips：需安装Emmet插件；
右下角的文本类型要选为“html”。
输入“div.wrapper>div.header>span.title{标题}”或“ul.lis>li*5>p.title+p.content”后点击Tab可以快速生成相应的代码，转换为的代码如下图：
Tips：上面两种写法只是其中的一部分，大家可以自己练习多种组合；
img[src="face/bd/$.gif"] ＋Tab，bd目录下自动从1开始到最后，适合于一次性增加从1--多个的图片。
“Ctrl+Shift+P”用于快速更改文件类型（js/css）（第一图）、安装插件（第二图）等，如下图：
“Ctrl+G”用于快速定位到行数，比如审查元素知道修改的样式在那一行，就可以点击快捷键，然后输入行数，就能定位到相应的位置进行修改；
“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢复信息，都可多次操作；
“Ctrl+/”用于注释信息，可单行也可以多行；
“Ctrl+F”用于查找输入的内容，可往前、往后或全部查找；
“Ctrl+Shirt+D”用于复制游标所在行；
“Ctrl+D”用于选择游标所在单词，连续“Ctrl+D”实现多个选择（选择与第一次选择相同的单词）；如果中间有要跳过的相同单词，可以先点击“Ctrl+K”再点击“Ctrl+D”；
“Alt+F3”用于选择所有与游标所在单词相同的单词，跟上面一个快捷键对于批量修改非常方便。
“Alt+Shift+1/2/3”，后面数字表示要显示多少列，如下图，对于参照html编写css和js有很大的便利。
Tips：从标题到这块是最经常用到的快捷键，一定熟悉记住。
“Ctrl+] ”增加缩进，“Ctrl+] ” 减小缩进，好的排版有利于查看；
“Ctrl+Shift+V”保持缩进粘贴，直接用“Ctrl+V”有时会导致显示排版乱了，使用该快捷键可以保持原来的排版；
“Ctrl+PgUp”往前切换Tab栏的文件，“Ctrl+PgDn”往后切换Tab栏的文件；
“/**+Tab”常用于js的自动补全注释信息和内容；
“Ctrl+P”用于快速查找并打开文件，点击快捷键后打开命令面板，直接点击就可以打开文件，也可以进行搜索操作；
“Ctrl+L”用于选择单行；
“Ctrl+H”用于查找替换，可替换单个或全部替换；
“Ctrl+Shift+Enter”在当前上方添加一行；
右键点击“Open Containing Folder”可以打开该文件的本地目录。
“Ctrl+Shift+P”打开命令面板，输入range点击第一条就会出现了，然后输入开始和结束数字，可以批量修改序号，需安装插件Text Pastry。
“跟踪函数ctags”在使用函数调转功能前，需要先生成.tags文件，只需在项目文件管理器的项目文件上右键点击Ctags:Rebuild Tags即可（注意，在改动文件之后会重新生成.tags）；所有工作都准备充分之后，就可以在函数名上右键点击navigate 头definition跳转到指定函数了，返回用jump back，需安装插件ctags。
直接安装：直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）；
使用Package Control组件安装（在线安装）：点击“Ctrl+`”，然后输入“import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())（）”回车，下载完毕后，重启Sublime Text程序；如果在Perferences->中看到package control这一项，则安装成功。
Tips：输入代码为3版本，其他版本代码可以百度搜索。
用Package Control安装插件的方法，按下“Ctrl+Shift+P”调出命令面板，输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。
比如“Emmet”，在搜索框输入“Emmet”，列表就会显示插件“Emmet”，然后点击该条数据，就会开始安装该插件，安装信息可查看左下角。
Tips：安装插件时保持网络畅通，避免插件由于网络原因奔溃。
常用插件的用法说明：
Emmet（原名 Zen Coding）：一种快速编写html/css的方法；
Autoprefixer：CSS3私有前缀自动补全插件；
AutoFileName：显示路径下文件名；
SyncedSidebarBg：自动同步侧边栏底色为编辑窗口底色；
HTML-CSS-JS Prettify：html/css/js格式化工具，依赖node.js，格式化的HTML不能有中文和中文符号等，HTMLPrettify.sublime-settings路径对应node安装目录，使用快捷键“Ctrl+Shift+H”；
sublimelinter：检查js语法；
jQuery：补全JQ代码；
Text Pastry：可以一次性改批量序号，用法快捷键里面有介绍；
ctags：跟踪函数，用法快捷键里面有介绍；
Less2Css：保存less文件时候自动生成css文件，windows下，Less2CSS对lessc.cmd有依赖，请下载：https://github.com/duncansmart/less.js-windows/releases后并将其路径（ E:/Less）添加至系统环境变量中；一般建议生产环境不使用less，所以这个还是蛮方便的；
SideBarEnhancements：设置浏览器，如下图。
人在校生一枚，希望可以找到志同道合的小伙伴一起进步，不定期的更新自己的收获，如果有大神的话可以指出我的不足，我用的是VS code软件来写代码的
HTML 是个缩写，全称Hyper Text Markup Language，译为超文本标记语言。它是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
在<hard>头部标签中你可以 插入脚本（scripts）,样式文件（CSS），以及各种meta信息。可以添加在头部区域的元素有：<title>，<style>，<meta>，<link>等等
注释快捷键：CTRL+? （注释是不被运行的，作用就是帮助程序员记东西）
<!--这是一个注释-->HTML完整结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--头部，js和css写在这里面-->
</head>
<body>
<!--内容主体-->
</body>
</html>
可能我写的会有些不清楚，到后面有代码的时候就会清楚了
节课开始前，我们先回忆一个事情，我们小时候写作文时，老师都会教我们一些“规矩”，比如说：题目要在中间写，也就是居中，要分段，要有标点符号，第一段要空两个格子等等。那同样的！ HTML文件也有他们的书写规则 ？那他们都有什么规则呢？我来慢慢告诉你！
通过上节课学习，你已经认识了，在浏览器中运行的文件就是网页，那么这个文件到底是什么呢？其实就是一个以 html 为后缀的普通文件，说到这，你可能会出现疑问了，这个文件我也没见过，应该怎么创建和书写呢？
先来尝试一下，新建一个 test.html 文件（注意是html为后缀名哦！如果不能改后缀名的话，度娘查一下，如何显示文件后缀名，就可以更改了），右键点击文件， 使用记事本打开。
可以看到 html 文件可以直接在这里面进行读写了 但是记事本的功能比较少 不够强大 ，就像我们要编辑一个文字文件需要Word一样，我们需要用到一个专业读写 html 文件的软件 我们叫它代码编辑器
市面上有各种各样的代码编辑器 比如说 Notepad++， sublime， DreamWeaver， webStorm， Hbuilder， 等等。
今天为大家推荐的一款编辑器 是开发工程师们使用频率比较高的一款软件 vscode 它是一款轻量级编辑器 上手方便 操作简单
只需要来到官网（Visual Studio Code - Code Editing. Redefined） 点击下载 下载好以后双击安装 你可以自己选择安装路径 也可以用默认安装路径 安装好以后 桌面上会出现一个图标 这就是我们的VScode代码编辑器了
那我们吃饭的家伙有了 我们先来认识一下它，双击图标 打开软件一看是是英文的，根本看不懂！没关系 我们只需要安装一个汉化插件就好了。
首先点击左侧这个按钮 在输入框内输入 Chinese 对应搜索结果的第一个 点击 install 稍等一会 即可安装完成 此时 我们只要重启 vscode 这个编辑器 会发现 英文变成中文了
接下来就可以使用这个vscode 来进行 html 文件的创建和编辑了
首先在电脑桌面上面点击鼠标右键 新建一个文件夹 命名为千锋学习 这个文件夹用来存储其他文件夹和网页相关的文件，用编辑器打开文件夹可以右击选择→通过code打开，也可以直接直接将文件夹拖到编辑器里直接打开
接下来新建一个文件，在这里关于文件的命名 希望你遵循以下规范
根据文件命名规则 我们在 vscode 里创建一个文件，点击这里的新建文件图标 书写文件名 start.html 注意 你要手动写上文件后缀 这样一个标准的 html 文件就创建好了
点击文件 我们看到在右侧打开了这个文件 目前内容还是空白的 我们直接写入 hello world 点击这里的保存按钮 也可以使用快捷键 ctrl + s 完成文件保存 此时 一个简单的 html 文件就写好了 我们赶紧到浏览器内运行一下吧
返回到文件夹——右键点击文件——打开方式——用浏览器打开
好啦！我们的第一个网页运行成功了。
到这里 细心的小朋友发现了 每次这样打开文件岂不很麻烦 其实可以在 vscode 内安装一个的插件 直接打开浏览器 就像安装 Chinese 汉化版插件一样。
再次点击 扩展 按钮 搜索 open in browser 点击安装 在文件位置点击右键 选择 open in default browser 就可以直接在浏览器打开了 或者你可以直接使用快捷键 alt + b
回到编辑器的 start.html 再来写点内容 前端培训界的扛把子——千锋HTML5大前端 首先记得ctrl+s保存文件，然后打开浏览器
点击刷新按钮—看到新增的文字也出现了，仔细观察发现：所有的文字格式都一样，如果你想把某些文字变得不一样。该怎么办呢？
这时候就需要用到标签了 比如：我们来书写一个 < h1 >再写一个</h1> 两个组合在一起形成一个完整标签 ，这个标签对中间可以书写一段内容，把我们的这一段内容复制进去，再次打开浏览器刷新，这一段内容变得不一样了 这就是 h1 标签的作用
在HTML 中 有很多不同的标签 各自有不同的作用 我们就是用这些标签来组成页面的骨架。
这节课你学会了编写一个简单的网页 并了解了文件的书写规范，我们也只是了解了冰山一角，九牛一毛。那其他的标签，都有什么呢？标签又有什么书写规范呢？
我们下一篇文章等你哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
