如何提高web效率

//html的注释为的形式 此处使用"//"只是为了更加快捷 语法上说是错误的
//后代（一层套一层时使用）：>
缩写：nav>ul>li
代码：
nav>
    ul>
        li>li>
    ul>
nav>

//兄弟（相邻同胞元素的时候使用）：+
缩写：div+p
代码：
div>div>
p>p>

//父级：^（可以使用多个^^.... 表示的父父....级）
//Class/ID名
缩写：div>p^div.hello+div#world
代码：
div>
    p>p>
div>
div class="hello">div>
div id="world">div>

//分组（当某标签和父元素为兄弟元素的时候使用）：（）
缩写：div>(ul>li>a)+p>span
代码：
div>
    ul>
        li>a href="">a>li>
    ul>
    p>span>span>p>
div>

//乘法有很多使用方法
//单纯的乘法（用来创建多个相同的标签）：*
缩写：ul>li*2
代码：
ul>
    li>li>
    li>li>
ul>

//和自增号连用（用来创建多个相同却带序号的文本）：$
//用在Class/ID上
缩写：ul>li.item$*2+li#hello$*2
代码：
ul>
    li class="item1">li>
    li class="item2">li>
    li id="hello1">li>
    li id="hello2">li>
ul>

//同时自增多个元素
缩写：h$[title=item$]{hello $}*2
代码：
h1 title="item1">hello 1h1>
h2 title="item2">hello 2h2>

//规定自增的起始数字
缩写：ul>li.item$@3*2
代码：
ul>
    li class="item3">li>
    li class="item4">li>
ul>

//自减
缩写：ul>li.item$@-*2
代码：
ul>
    li class="item2">li>
    li class="item1">li>
ul>

//多个数字
缩写：ul>li.item$$*2
代码：
ul>
    li class="item01">li>
    li class="item02">li>
ul>

//ID和类属性
//ID和类（不多说了"#"和"."）

//ID和类同时设置
缩写：div.hello#world
代码：
div class="hello" id="world">div>

//多类名
缩写：div.hello.world
代码：
div class="hello world">div>

//自定义属性（属性选择器可能更好记）：[ ]
缩写：[a="value1" b=‘value2‘ c=value3 d]（双引号、单引号、没引号都没区别）
代码：
 div a="value1" b="value2" c="value3" d="">div>

//文本（用来编辑标签内的文本）：{}
//缩写：p>{hello}+a{world}+{!} || p{hello}>a{world}+{!} 
//此处的后代选择器是一定要有的 不然p和a就为兄弟元素了
//代码：
p>helloa href="">worlda>!p>

//文档重复结构：！
缩写：！
代码：
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>Documenttitle>
head>
body>
    
body>
html>

//主要是这些 还有其他的自行链接