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+/(双 ...
随机推荐
- 团队Arpha5
队名:观光队 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 服务器网络 ...
- k8s和Docker关系简单说明
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 这篇文章主要介绍了k8s和Docker关系简单说明,本文利用图文讲解的很透彻,有需要的同学可以 ...
- 请收藏，Linux 运维必备的 40 个命令总结，收好了~
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 1.删除0字节文件 find -type f -size ...
- 2021 CSP-J复赛 我的备战与游记
目录 备战 2021.10.18 2021.10.19 2021.10.20 2021.10.21 2021.10.22 比赛当日 早上 线下见面 正文 比赛后 赛后总结与讲解 简单总结 Candy ...
- 异步编程利器：CompletableFuture
一.一个示例回顾Future 一些业务场景我们需要使用多线程异步执行任务,加快任务执行速度. JDK5新增了Future接口,用于描述一个异步计算的结果.虽然 Future 以及相关使用方法提供了异步 ...
- JavaScript中if语句优化和部分语法糖小技巧推荐
前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...
- 好客租房12-JSX的注意点
1.4注意点 1React元素的属性名使用驼峰式命名法 2特殊属性名 class-className for->htmlFor 3没有子节点可以用单标签表示 4使用小括号包裹jsx const ...
- Oceanbase读写分离方案探索与优化
[作者] 许金柱,携程资深DBA,专注于分布式数据库研究及运维. 台枫,携程高级DBA,主要负责MySQL和OceanBase的运维. [前言] 读写分离,是一种将数据库的查询操作和写入操作分离 ...
- Ajax前后端交互——后端接收前端页面变量
核心代码: app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.r ...
- webpack.config.js和vue.config.js的区别
webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...