前言

前端从最早的美工附带解决的内容演变为了一个涉及网页，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>