前言：
现时小伙伴们对“html输出html标签”大体比较讲究，你们都想要知道一些“html输出html标签”的相关内容。那么小编也在网上汇集了一些有关“html输出html标签””的相关知识，希望我们能喜欢，咱们快快来学习一下吧！之前已经讲完了CSS的引入方式，今天开始说下Emmet的语法，生成HTML标签。Emmet的语法前身是Zen coding, 使用缩写来提高html/css的编写速度，VS code已经集成该语法。
快速生成HTML结构语法1.1 生成标签，直接输入标签名，按下tab键即可，比如div标签，点击tab键，就生成了<div></div>1.2 如果想要生成多个相同标签，加上 "*"就可以了，比如div*3, 就可以快速生成3个div
1.3 如果有父子级关系的标签，可以用 > 如ui > li 就可以了 这里如果你写的时候失败了，应该是带空格了，一定不要带空格。 div里包含span标签 1.4 如果有兄弟关系的标签，用 + 就可以了，比如 div + p 1.5 如果生成带有类名或者id名字的，直接写 .demo或者 #two 摁下tab键就可以了。
1.6 如果生成的div类名是带有顺序的，可以用自增符号。快速生成CSS样式语法
对于第一种情况对应的代码，显示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<ui>
<li></li>
</ui>
<div><span></span></div>
<div></div>
<p></p>
<div class="demo"></div>
<div id="two"></div>
<div1></div1>
</body>
</html>
添加上注释后，可以看的更清楚:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 生成多个相同的标签 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- 生成父子级关系的标签 -->
<ui>
<li></li>
<li></li>
<li></li>
</ui>
<ui>
<li></li>
</ui>
<ui>
<li></li>
</ui>
<ui>
<li></li>
</ui>
<!-- 兄弟间的同级使用+号 -->
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
带有类名
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
带有id名
<div id="two"></div>
<div id="two"></div>
<div id="two"></div>
<div id="two"></div>
</body>
</html>
好的，今天就先这样，明天再来
标签： #html输出html标签
