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+/(双 ...
随机推荐
- C++实例2--职工管理系统
职工管理系统 1. 头文件 1.1 workerManager.h 系统类 1 #pragma once // 防止头文件重复包含 2 #include<iostream> // 包含输 ...
- .net 关于Task.Run 和 Async await的执行顺序
一直捋不清楚用Task.Run异步的执行关系,网上找的些说明写得也有点复杂,所以自己做实验测一下. 直接上代码 这个是加await private static void TestFun() { Co ...
- linux网络配置,查看IP地址
linux等等学习参考博客:https://www.cnblogs.com/pyyu/p/9276851.html 1.在安装好的linux上面输入cd /etc/sysconfig/network- ...
- uniapp复制到剪贴板
uni.setClipboardData() ; 例: 给元素添加点击事件 <view @click="doCopy()">复制</view> 复制方法 d ...
- Jenkins安装详解
一.Jenkins是什么 Jenkins是一个独立的开源自动化服务器,可用于自动执行与构建,测试,交付或者部署软件相关的各种任务,是跨平台持续集成和持续交付应用程序,提高工作效率.使用Jenkins不 ...
- MySQL基准测试工具
一.基准测试 基准测试(benchmark)是针对系统设计的一种压力测试. 基准测试是简化了的压力测试. 1.1 常见指标 TPS QPS 响应时间 并发量 1.2 收集与分析数据脚本 收集数据的sh ...
- curl-URL请求
模拟HTTP请求,通过访问URL获取HTTP响应. 语法 curl [选项] 访问URL 选项 --connect-timeout SECONDS 设置最大请求时间. -C, --continue-a ...
- Spring Boot整合Swagger报错："this.condition" is null
前段时间看到群里有吐槽swagger整合问题,当时没仔细看,总以为是姿势不对. 这两天正好自己升级Spring Boot版本,然后突然出现了这样的一个错误: Caused by: java.lang. ...
- transforms.py
from PIL import Image from torchvision import transforms #python的用法-->tensor数据类型 #通过transforms.To ...
- 浅谈倍增法求解LCA
Luogu P3379 最近公共祖先 原题展现 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入格式 第一行包含三个正整数 \(N,M,S\),分别表示树的结点个数.询问 ...