html模板代码快捷键(html框架快捷键)
1. html框架快捷键
Editplus是一款非常优秀的编辑器，可以用来编辑文本。也可以用作编程开发工具。通常好多人会使用Editplus编写HTML文件，编写好的html源码怎样直接在Editplus中查看效果呢？
工具/原料
html文件；
Editplus软件。
方法/步骤
1、打开Editplus，然后新建一个HTML文件；
2、编写HTML代码；
3、编写好HTML代码，要查看HTML效果。点击查看-查看为网页；或者直接按下：Ctrl+B快捷键；
4、HTML效果展示：
5、如果要返回进行HTML代码编辑或者修改，则点击菜单栏的浏览器，然后选择：编辑源文件项；或者直接按下Ctrl+E快捷键。
6、Editplus又返回到了HTML代码编辑界面，可以继续编写代码了。
2. html5基本框架快捷键
1.iterm2
免费的终端神器, 然后安装好zsh和oh-my-zsh开启你的程序员之路吧，前端也可以用
2.CodeKit
是incident57开发的一套前端开发助理工具，能够自动编译Less, Sass等前端代码，可以对js文件进行合并
，压缩
，语法检查
工作，支持Compass
(Sass
)，对JPEG.PNG 格式图片进行压缩优化，代码编辑过程中可自动刷新浏览器查看效果
3.postman
用来追踪请求，查看返回数据，还可以看各种请求地址里的文件，前端必备
4.homebrew
用来安装各种插件和软件包
5.dash
各种api文档，配合alfred
查找效果更佳哦
6.vscode
编辑器配合插件，前端写代码必备，插件基本上满足日常需求，还能配合zsh和iterm2使用，虽然是微软开发的，感觉比windows上好用，，当然也会有人推荐sublime和coda2
7.ps插件-cutterman
一键切图简单高效
8.snap
方便截图，然后保留在一个区域，随时取用
9.hype3
快速设计html5特效
10.CheatSheet
快速查各软件快捷键，提高效率
11.Cornerstone
mac上比较好的svn软件
12.WeFlow
是一个 GUI 的前端工具，其功能和用法可以参考市面上比较出名的一款软件：CodeKit
13.sip
颜色拾取，方便快捷，还可以存储历史值和配色
14.pixelmator
比ps小但功能满足需求的软件，偏设计的前端可以使用
-----------------------------------我是分割线，不算是Mac专属的插件-----------------------------------
1.node插件anywhere
简单安装简单操作，搭建简单服务器，仅需兩步 npm install anywhere -g;
在项目目录下 anywhere 8080
2.vscode插件，
live html边改边看页面效果，chrome也有类似插件live
3.chrome插件,browserstack,
在云端测试各种浏览器，比如ie;restlet Client
，调试接口；animation
,开发工具调试css3动画
---------------------------------------------------------------------------------------------------------------
等等还有许多小软件和chrome插件配合开发使用，美哉
--------2017.07.15新增---------------------------------------------
paw
:前端请求数据，调试API工具，功能比postman更强大
legoflow
:前端构建化软件，可搭配vue,webpack使用
snippetslab
:存储代码片段，快捷指令输出
panel
：复制粘贴神器，合理保存历史记录
textexpander
:高效的输出指令工具，帮助提高输入
sketch
:偏向设计的前端必备设计软件
password2
:记录密码，帮助快捷登录
codekit
：代码构建工具
--------2019.01.16新增---------------------------------------------
compresser:
前端万能压缩
regex101:
正则可视化工具
snippetsLab
:代码片段收集管理
switchHosts!:
切换host
3. html整理代码快捷键
cdr 2020快捷键：
第一类，基本操作类常用快捷键
建新文件【Ctrl】+【N】
打开文件【Ctrl】+【O】
保存文件【Ctrl】+【S】
撤消上一次的操作【Ctrl】+【Z】
撤消上一次的操作【ALT】+【Backspase】
打印文件：【Ctrl】+【P】
复原操作：【Ctrl】+【Z】
重做操作：【Ctrl】+【Shift】+【Z】
重复操作：【Ctrl】+【R】
剪下文件：【Ctrl】+【X】
复制文件：【Ctrl】+【C】
粘贴文件：【Ctrl】+【V】
再制文件：【Ctrl】+【D】
复制属性自：【Ctrl】+【Shift】+【A】
第二类，图像处理类常用快捷键
绘制正圆或正多边形【Ctrl】
选择多个对象【Shift】
前移一层：将选定对象按照对象的堆栈顺序放置到向前一个位置【Ctrl】+【PgUp】
后移一层：将选定对象按照对象的堆栈顺序放置到向后一个位置【Ctrl】+【PgDn】
移至顶层：将选择的对象放置到最前面【Shift】+【PgUp】
移至底层：将选择的对象放置到最后面【Shift】+【PgDn】
擦除图形的一部分或将一个对象分为两个封闭路径【X】
垂直定距对齐选择对象的中心【Shift】+【A】
垂直分散对齐选择对象的中心【Shift】+【C】
垂直对齐选择对象的中心【C】
将文本更改为垂直排布(切换式)【Ctrl】+【.】
打开一个已有绘图文档【Ctrl】+【O】
打印当前的图形【Ctrl】+【P】
打开“大小工具卷帘”【ALT】+【F10】
运行缩放动作然后返回前一个工具【F2】
运行缩放动作然后返回前一个工具【Z】
发送选择的对象到后面【Shift】+【B】
将选择的对象放置到后面【Shift】+【PageDown】
发送选择的对象到前面【Shift】+【T】
将选择的对象放置到前面【Shift】+【PageUp】
发送选择的对象到右面【Shift】+【R】
发送选择的对象到左面【Shift】+【L】
将对象与网格对齐(切换)【Ctrl】+【Y】
对齐选择对象的中心到页中心【P】
绘制对称多边形【Y】
拆分选择的对象【Ctrl】+【K】
第三类，文字处理类常用快捷键
将字体大小缩减为前一个点数 【Ctrl】+数字键盘【2】
将字体大小缩减为「字体大小列表」中的前一个设定 【Ctrl】+数字键盘【4】
将字体大小增加为「字体大小列表」中的下一个设定 【Ctrl】+数字键盘【6】
将字体大小增加为下一个点数 【Ctrl】+数字键盘【8】
变更文字对齐方式为不对齐 【Ctrl】+【N】
变更文字对齐方式为强迫上一行完全对齐 【Ctrl】+【H】
新增/删除文字物件的首字放大 (切换式)【Ctrl】+【Shift】+【D】
变更文字对齐方式为完全对齐 【Ctrl】+【J】
变更文字对齐方式为向右对齐 【Ctrl】+【R】
变更文字对齐方式为向左对齐 【Ctrl】+【L】
变更文字对齐方式为置中对齐 【Ctrl】+【E】
变更选取文字的大小写 【Shift】+【F3】
显示非打印字符 【Ctrl】+【Shift】+【C】
选取上移一段的文字 【Ctrl】+【Shift】+【↑】
选取上移一个框架的文字 【Shift】+【PageUp】
选取上移一行的文字 【Shift】+【↑】
选取下移一段的文字 【Ctrl】+【Shift】+【↓】
选取下移一个框架的文字 【Shift】+【PageDown】
选取下移一行的文字 【Shift】+【↓】
选取至框架起点文字 【Ctrl】+【Shift】+【HOME】
选取至框架终点文字 【Ctrl】+【Shift】+【END】
选取至文字起点的文字 【Ctrl】+【Shift】+【PageUp】
选取至文字终点的文字 【Ctrl】+【Shift】+【PageDown】
选取至行首文字 【Shift】+【HOME】
选取至行首文字 【Shift】+【END】
打开「选项」对话框并选取「文字」选项页面 【Ctrl】+【F10】
寻找图文件中指定的文字 【ALT】+【F3】
显示图文件中所有样式的列表 【Ctrl】+【Shift】+【S】
变更文字样式为粗体 【Ctrl】+【B】
变更文字样式为有底线 【Ctrl】+【U】
变更全部文字字符为小写字母 【Ctrl】+【Shift】+【K】
变更文字样式为斜体 【Ctrl】+【I】
显示所有可使用或作用中的粗细变化 【Ctrl】+【Shift】+【W】
显示所有可使用或作用中的字体列表 【Ctrl】+【Shift】+【F】
显示所有可使用或作用中的 HTML 字体大小列表 【Ctrl】+【Shift】+【H】
将字体大小缩减为前一个点数 【Ctrl】+数字键盘【2】
将字体大小缩减为「字体大小列表」中的前一个设定 【Ctrl】+数字键盘【4】
将字体大小增加为「字体大小列表」中的下一个设定 【Ctrl】+数字键盘【6】
将字体大小增加为下一个点数 【Ctrl】+数字键盘【8】
显示所有可使用或作用中的字体大小列表 【Ctrl】+【Shift】+【P】
4. html标签快捷键
html是一门标记语言，只要多写，掌握常用的标签就可以了。
HTML即超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML一般与CSS配套使用，HTML编写网页骨架，而CSS负责处理网页样式，从而实现网页的结构与样式分离。。
5. html运行的快捷键
工具原料演示电脑：普通家用机演示软件：word2019演示系统：win10演示浏览器：Edge
基础知识分步阅读
1
/3
HTML是一种文本标记语言，浏览器通过解析HTML，来生成对应的界面。
（在浏览器上按下F12，就会出现这种标记语言本来的样子。）
2
/3
但是HTML生成的页面比较丑陋，所以在HTML之上，还是用一种叫做CSS的东西控制网页的显示。
（浏览器中，按下F12，出现在HTML右边的代码（即叫做样式）既是CSS）
3
/3
一般将HTML格式转为word格式的时候，HTML部分可以顺利转换，而CSS部分一般无法转换为word格式。
（视觉效果上，就是转换为word后比较丑，感觉少了一些东西。少的就是CSS）
转换方法
1
/2
首先选中要复制的html网页部分，然后按下快捷键「ctrl+C」进行复制。
（如果是整个网页，按快捷键「ctrl+A」全选）
2
/2
然后回到word，按下快捷键「ctrl+V」进行粘贴，此时就把HTML转为word了。
（需要注意的是，由于CSS样式的存在，不存在可以完全原模原样地把html转为word的方法，或多或少样式都会发生变化）
6. html框架快捷键输入代码
方法：
1、打开Eclipse软件：打开后在工具栏依次点击【File】>>>【New】>>>【Dynamic Web Project】，这个就代表新建的项目是WEB项目。
2、如果找不到【Dynamic Web Project】这个选项，说明以前没有建立过WEB项目，所以不在快捷导航里，这时点击【Other】这个选项。
3、这个界面弹出的是查询窗口，查询的内容是所有可以建立的项目类型，比如JAVA项目、WEB项目等，都可以在这个窗口查询得到。
4、在查询输入框里输入【WEB】，下面会列出所有WEB相关的项目，鼠标选中【Dynamic Web Project】，然后点击【Next】按钮。
5、这个是填写项目的基本信息，包括项目名、项目运行时服务器版本，你可以选择tomcat或者其他都可以，看你的项目需要，在这里输入一个【Test】来测试项目的建立，输入完毕后点击【Next】。
6、这个窗口显示的WEB项目中需要编译的JAVA文件的目录，默认是SRC目录，这个不需要改，直接点击【Next】。
7、接着弹出窗口，显示的是WEB项目，WEB文件相关的目录，就是html或者jsp还有js那些web相关的文件存放的目录，默认是【WebContent】，你也可以修改成你想要的文件名，注意，下面有个复选框，表示的是是否要自动生成web.xml文件web.xml：这个文件是WEB项目的核心文件，也是WEB项目的入口，老版本的Eclipse都会有这个文件，但是新版本的Eclipse因为可以使用在JAVA代码中注解的方式，所以提供让用户选择是否要生成，如果是新手最好选择生成然后点击【Finish】。
8、下面就是我们新建的WEB项目的目录结果
JAVA存放目录：SRC
WEB文件目录：WebContent
WEB配置文件：web.xml
现在，你可以开始你的JAVA开发之旅了。
7. html基本结构快捷键
你的编辑器按快捷键Ctrl＋F这个适合绝大多数程序查找，如Word等办公软件也是，还有浏览器里面也可以使用
8. 生成html标签快捷键
使用sublime text新建文件快速生成HTML头部信息的方法：
1、HTML文档需要包含一些固定的标签，比如 doctype、html、head、body 以及 meta 等等，现在只需要1秒钟就可以输入这些标签。比如输入!或html:5，然后按 Tab 键：
2、如果想生成 HTML4 的过渡型结构，那么输入指令 html:xt 即可生成如下结构：