IDEA快捷键之html篇-1
前端IDE如VSCode、Atom、Sublime Text和Intellij Idea中使用Emmet插件快捷输入HTML代码的介绍
前端IDE中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。
1.输入html:5，然后按tab键或enter键，效果如下：
1 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>Documenttitle> 9 head> 10 <body> 11 12 body> 13 html>html:5
2.输入link:css引入css样式文件，输入script:src引入js
1 2 <link rel="stylesheet" href=""> 3 4 <script src="">script>link:css
3.输入标签名自动补齐
1 2 <h1>HTML快捷输入练习h1> 3 4 <h2>填充文本h2>标签名自动补齐
4.随机文本的输入
1 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 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem. 5 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 2 <div id="main" class="content">div> 3 <div id="foot" class="foot" data="结束">div> 4 5 <div alt="到底了">结束div>"#"输入id，"."输入class，"[]"输入属性
6.使用">"输入嵌套标签，"+" 输入并列的兄弟标签，"^"上级元素
1 2 <div> 3 <div id="imgs">put some imgs herediv> 4 div> 5 6 7 <div id="left">I am leftdiv> 8 <div id="right">I am rightdiv> 9 10 11 12 <div id="div1"> 13 <p>p> 14 div> 15 <div id="div2">div> 16 17 <div> 18 <div id="div1"> 19 <p>p> 20 div> 21 <div id="div2">div> 22 div> 23 24 25 <div> 26 <p><img src="" alt="">p> 27 <div> 28 <ul> 29 <li>li> 30 ul> 31 div> 32 div> 33 34 <div> 35 <div> 36 <div>div> 37 div> 38 <div>div> 39 div> 40 41 <div> 42 <div>div> 43 div> 44 <div>div>使用">"输入嵌套标签，"+" 输入并列的兄弟标签，"^"上级元素
7.使用"{}"对标签分组及使用"*"生成多个相同的标签
1 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 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 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 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>自增符号$