IDEA快捷键之html篇-1
前端IDE中Emmet插件快捷输入HTML代码
前端IDE中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。
1.输入html:5，然后按tab键或enter键，效果如下：
1 <!-- 输入html或者html:5生成页面模板 -->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10 <body>
11
12 </body>
13 </html>
html:5
2.输入link:css引入css样式文件，输入script:src引入js
<!-- 输入html或者html:5生成页面模板 -->1 <!-- 输入link:css引入样式 -->
2 <link rel="stylesheet" href="">
3 <!-- 输入script:src引入js -->
4 <script src=""></script>
link:css
3.输入标签名自动补齐
1 <!-- 输入标签名 h1 按tab键或Enter键自动补齐 -->
2 <h1>HTML快捷输入练习</h1>
3 <!-- {}可输入标签内的文本 如输入：h2{填充文本} -->
4 <h2>填充文本</h2>
标签名自动补齐
4.随机文本的输入
1 <!-- Lorem自动输入一段随机文本(默认30个单词)，Lorem10 输入10个单词，Lorem*5 输入5遍随机文本 -->
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?
3 <!-- Lorem10 的结果-->
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
5 <!-- Lorem10*10 的结果-->
6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.
随机文本的输入
5.使用"#"输入id，"."输入class，"[]"输入属性
1 <!-- div#main.content 输入id、class -->
2 <div id="main" class="content"></div>
3 <div id="foot" class="foot" data="结束"></div>
4 <!-- div[alt=到底了]{结束} 添加属性及包裹文本 -->
5 <div alt="到底了">结束</div>
"#"输入id，"."输入class，"[]"输入属性
6.使用">"输入嵌套标签，"+" 输入并列的兄弟标签，"^"上级元素
1 <!-- div>div#imgs{put some imgs here} 标签的嵌套-->
2 <div>
3 <div id="imgs">put some imgs here</div>
4 </div>
5
6 <!-- div#left{I am left}+div#right{I am right} 并列标签 -->
7 <div id="left">I am left</div>
8 <div id="right">I am right</div>
9
10 <!-- 看网上资料说^上级元素,没懂是什么意思，试了几个体会一下 -->
11 <!-- div#div1>p^div#div2 把div1提出成一行和div2同级 -->
12 <div id="div1">
13 <p></p>
14 </div>
15 <div id="div2"></div>
16 <!-- div>div#div1>p^div#div2 -->
17 <div>
18 <div id="div1">
19 <p></p>
20 </div>
21 <div id="div2"></div>
22 </div>
23
24 <!-- div>p>img^div>ul>li -->
25 <div>
26 <p><img src="" alt=""></p>
27 <div>
28 <ul>
29 <li></li>
30 </ul>
31 </div>
32 </div>
33 <!-- div>div>div^div -->
34 <div>
35 <div>
36 <div></div>
37 </div>
38 <div></div>
39 </div>
40 <!-- div>div^div -->
41 <div>
42 <div></div>
43 </div>
44 <div></div>
使用">"输入嵌套标签，"+" 输入并列的兄弟标签，"^"上级元素
7.使用"{}"对标签分组及使用"*"生成多个相同的标签
1 <!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签-->
2 <div id="list1">
3 <ul>
4 <li></li>
5 <li></li>
6 </ul>
7 </div>
8 <div id="list1">
9 <ul>
10 <li></li>
11 <li></li>
12 </ul>
13 </div>
标签分组及生成多个相同的标签
8.自增符号$
1 <!-- $ 自增符号 -->
2 <!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] -->
3 <ul>
4 <li><img src="./imgs/1.jpg" alt="img 1"></li>
5 <li><img src="./imgs/2.jpg" alt="img 2"></li>
6 <li><img src="./imgs/3.jpg" alt="img 3"></li>
7 </ul>
8
9 <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
10 <ul>
11 <li><img src="./imgs/001.jpg" alt="img 001"></li>
12 <li><img src="./imgs/002.jpg" alt="img 002"></li>
13 <li><img src="./imgs/003.jpg" alt="img 003"></li>
14 </ul>
15
16 <!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->
17 <ul>
18 <li><img src="./imgs/04.jpg" alt="img 04"></li>
19 <li><img src="./imgs/05.jpg" alt="img 05"></li>
20 <li><img src="./imgs/06.jpg" alt="img 06"></li>
21 </ul>
自增符号$
IDEA快捷键之html篇-1的更多相关文章
- IDEA快捷键之html篇-2
.qa-item .qa-item-ft .icon { display: inline-block; width: 16px; height: 16px; vertical-align: sub; ...
- Mac OS X 快捷键（完整篇） 转载
转载自:http://www.nooidea.com/2011/01/mac-os-x-keyboard-shortcuts.html 快捷键是通过按下键盘上的组合键来调用 Mac OS X 功能的一 ...
- 【转】Mac OS X 快捷键（完整篇）
原文网址:http://www.nooidea.com/2011/01/mac-os-x-keyboard-shortcuts.html 没有写到基本的一些组合,只是一些可能大家不太常用到但及其提高机 ...
- Mac OS X 快捷键（完整篇）
不少朋友提出要求,希望有个「高质量」的列表.其实这样的资源真是太多,平果官网就有 快捷键文档(多国语言版本).于是花了20分钟,浏览了一些网站,整理了点资源放过来供大家参考. 快捷键是通过按下键盘上的 ...
- chrome浏览器开发常用快捷键之基础篇-遁地龙卷风
1.标签页和窗口快捷键 打开新的标签页,并跳转到该标签页 Ctrl + t 重新打开最后关闭的标签页,并跳转到该标签页 Ctrl + Shift + t 跳转到下一个打开的标签页 Ctrl + PgD ...
- Eclipse常用快捷键之技巧篇
如何让你阅读代码如虎添翼?使用快捷键可以让你快到飞起来~ 显示类的方法和属性:ctrl+o ctrl+o能够看到你的类的层次结构,使你搜索该类某个方法更加的方便 显示类的继承:ctrl+T ctrl+ ...
- Eclipse快捷键与使用技巧总结
快捷键 功能 Ctrl + / 双斜杠注释 Ctrl + Shilft + / 块注释 Alt + / 代码提示 Ctrl + I (或 Ctrl + Shift + F) 格式化代码 Ctrl + ...
- Eclipse快捷键大全(转载)
一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+Y(重做).CTRL+/(双 ...
- 转载 Android快捷键 转载
一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+Y(重做).CTRL+/(双 ...
随机推荐
- [AcWing 32] 调整数组顺序使奇数位于偶数前面
点击查看代码 class Solution { public: void reOrderArray(vector<int> &array) { int i = 0, j = arr ...
- 在vue-cli中安装scss，且可以全局引入scss的步骤
简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...
- JUC自定义线程池练习
JUC自定义线程池练习 首先上面该线程池的大致流程 自定义阻塞队列 首先定义一个双向的队列和锁一定两个等待的condition 本类用lock来控制多线程下的流程执行 take和push方法就是死等, ...
- JS 的 new 是个啥？
JS 的 new 是个啥? 本文写于 2019 年 11 月 25 日 new关键字在很多语言里面,总是用于把类实例化,可是 JS 之前就没有"类"这个概念呀. 那 JS 的new ...
- 基于dhtmlxGantt的Blazor甘特图组件
基于dhtmlxGantt实现的甘特图组件,目前仅做到了数据展现,方法及插槽暂未实现,若需可按照dhtmlxGantt的文档及微软的Balzor文档,自行扩展. 数据发生变化后甘特图会立即发生变化. ...
- Redis设计与实现3.1：主从复制
主从复制 这是<Redis设计与实现>系列的文章,系列导航:Redis设计与实现笔记 SLAVEOF 新旧复制功能 旧版复制功能 旧版复制功能的实现为 同步 和 命令传播: 当刚连上Mas ...
- 关于Linux添加字体
安装字体命令 yum -y install fontconfig 查看已经安装的字体 fc-list # 查看已经已经安装的中文字体 fc-list :lang=zh 在字体目录下创建新的目录或者使用 ...
- linux篇-linux面试题汇总
Linux经典面试题,看看你会几题? 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统 ...
- [源码解析] TensorFlow 分布式之 ClusterCoordinator
[源码解析] TensorFlow 分布式之 ClusterCoordinator 目录 [源码解析] TensorFlow 分布式之 ClusterCoordinator 1. 思路 1.1 使用 ...
- 每天一个 HTTP 状态码 102
102 Processing 102 Processing 是用于 WebDAV协议 请求的状态码. 这个状态码表示服务器已经收到了客户端的请求,正在处理,但暂时还没有可接触的响应.可以用于防止客户端 ...