前言
前端从最早的美工附带解决的内容演变为了一个涉及网页，app，小程序的多方面的行业，编辑器也从最早的dreamwaver演变到后来的支持多种ide语法的编辑器，大大节省了工作中的许多时间，推荐使用微软推出的studio code或webstorm。
快速生成h5模板
<!-- ! 配合tab或者enter-->
<!-- html:5配合tab或者enter -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
类名拼接
常见的如p，div等大多属性标签加上class名符号.或者id符号#，配合+拼接或者>子内可以快速生成（可以配合*）。
<!-- div.nav -->
<div class="nav"></div>
<!-- div#nav -->
<div id="nav"></div>
<!-- div.nav+div#nav -->
<div class="nav"></div>
<div id="nav"></div>
<!-- div.nav>div#nav -->
<div class="nav">
<div id="nav"></div>
</div>
<!-- div.nav*3 -->
<div class="nav"></div>
<div class="nav"></div>
<div class="nav"></div>
属性名和内容填充
ide语法中填写内容用{}，如p写文字需要用p{xx}；
属性用[],而属性名如img设置路径可以用img[src=xx alt=xx title=xx]
<!-- p{这里是文字} -->
<p>这里是文字</p>
<!-- img[src=xx title=xa title=xc] -->
<img src="xx" alt="" title="xc">
注意如果涉及并列容器涉及到多个img只有一个可以设置详细属性,如
<!-- img+div>img[src=xx] -->
<img src="" alt="">
<div><img src="xx" alt=""></div>
<!-- 不可识别 -->
<!-- img[src=xx]+div>img[src=xa] -->
复合dom元素的用法
配合（），*，+等可以方便搭建页面结构，$代表依次增大的数字。
<!-- header+(main>ul>li>a{导航$}*5)+footer -->
<header></header>
<main>
<ul>
<li>
<a href="">导航1</a>
<a href="">导航2</a>
<a href="">导航3</a>
<a href="">导航4</a>
<a href="">导航5</a>
</li>
</ul>
</main>
<footer></footer>
