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+/(双 ...
随机推荐
- .NET桌面程序应用WebView2组件集成网页开发4 WebView2的线程模型
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件基于组件对象模型(COM),必须在单线程单元(STA)线程上运行. 线程安全 WebView2必须在使用消息泵的UI线程上创 ...
- vue 列表过滤和排序
<body> <div id="root"> <h1>员工列表</h1> <input type="text&quo ...
- 《手把手教你》系列基础篇（九十七）-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类（详解教程）
1.简介 上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...
- 「Python实用秘技08」一行代码解析地址信息
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第8期 ...
- 图片查看器——viewer.js
使用简介 https://github.com/FNNDSC/viewerjs(需要点击遮罩层关闭弹框的复制下面内容) https://www.jianshu.com/p/d98db3815823 v ...
- Web安全学习笔记 XSS上
Web安全学习笔记 XSS上 繁枝插云欣 --ICML8 XSS的分类和基本认识 XSS的危害 同源策略的基本认识 一.XSS的分类和基本认识 1. 简介 XSS全称为Cross Site Scrip ...
- Vue中mixins、extends、extend和components的作用和区别
关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...
- c++：-9
上节(c++:-8)主要学习了C++的流类库和输入输出,本节学习C++的异常处理. 异常处理 介绍 (1)异常处理的基本思想: (2)异常处理的语法: (3)举例:处理除0异常 #include &l ...
- 目标检测复习之Faster RCNN系列
目标检测之faster rcnn系列 paper blogs1: 一文读懂Faster RCNN Faster RCNN理论合集 code: mmdetection Faster rcnn总结: 网络 ...
- 一个全新的Vue拖拽特性实现：“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...