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 75] 和为S的两个数字
点击查看代码 class Solution { public: vector<int> findNumbersWithSum(vector<int>& nums, in ...
- Mysql 连续时间分组
该方案:不限于本例的时间连续,也可适用于其他按连续分组. 连续条件 分组这问题困扰了很久,之前觉得在SQL上很难处理,都是在程序上做处理.后面实在有太多这需求了,所以只能想办法在SQL上处理了. 如下 ...
- 微服务生态组件之Spring Cloud OpenFeign详解和源码分析
Spring Cloud OpenFeign 概述 Spring Cloud OpenFeign 官网地址 https://spring.io/projects/spring-cloud-openfe ...
- arts-week14
Algorithm 923. 3Sum With Multiplicity - LeetCode Review Building a network attached storage device w ...
- Java实现飞机大战游戏
飞机大战详细文档 文末有源代码,以及本游戏使用的所有素材,将plane2文件复制在src文件下可以直接运行. 实现效果: 结构设计 角色设计 飞行对象类 FlyObject 战机类 我的飞机 MyPl ...
- Fail2ban 命令详解 fail2ban-client
Fail2ban的客户端操作命令,用于控制服务端. root@ubuntu:~# fail2ban-client --help Usage: /usr/bin/fail2ban-client [OPT ...
- 协议层安全相关《http请求走私与CTF利用》
0x00 前言 最近刷题的时候多次遇到HTTP请求走私相关的题目,但之前都没怎么接触到相关的知识点,只是在GKCTF2021--hackme中使用到了 CVE-2019-20372(Nginx< ...
- 对于vjudge在有些网络下无法打开的问题
因为有些网络会屏蔽vjudge,所以打开 镜像网址 不行再试试这个:最新镜像网址
- 浅谈Javascript单线程和事件循环
单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...
- 花两万培训Java的三个同学，最后都怎么样了
仙路尽头谁为峰,学完Java学Python. 前言 对于IT行业的培训,例如Java.大数据.H5等等,我一直保持着肯定的态度. 因为当年大学时期的我,也差点去参加Java培训.一是因为那时钱包空空, ...