HTML快速语法-emmet

title: ‘HTML快速语法: emmet’
toc: true
comments: true
tags: HTML
abbrlink: 6cb367e
date: 2021-05-27 21:15:45
categories:

这里记录的是常用的emmet语法.

        <!--1. 如果你需要写html初始结构-->

        !

        <!--2. 如果你需要通过类名或id名生成标签-->

        div.className

        div#idName

            <!--2.1. 如果你需要生成带有属性的标签-->

            div#idName[attriName]

            <!--2.2. 如果你需要生成带有文本的标签-->

            div#idName{yourText}

            <!--2.3. 如果你需要生成属性或文本有序自增的标签-->

            div#idName$@*3

                <!--2.3.1  如果你需要生成属性或文本有序自增的标签,且从指定数字开始自增-->

                div#idName$@3*3

        <!--3. 如果你需要生成多个同级标签-->

        div#idName*3

        <!--4. 如果你需要生成多层标签-->

        div#idName1>div#idName2     (idName1是idName2的父级)

        div#idName1+div#idName2     (idName2在idName1同级下一行)

        div#idName1^div#idName2     (idName1在idName2同级上一行)

        <!--5. 如果你需要生成属于不同标签组下的标签-->

        (div#idName1>div#idName2+div#idName3)+(div#idName4>div#idName5+div#idName6)

        这里idName1是idName2和idName3的爸爸,idName4是idName5和idName6的爸爸.

        <!--6. 其他-->
            <!--6.1 如果你需要通过类名生成标签-->

            .className  (默认只能生成div类型的标签)

            <!--6.2 如果你需要通过类名生成有序自增的标签-->

            ul>.className$*3    (用于表)

            ul>.className$*3    (从指定数字开始自增)

            select>.className$*3    (用于下拉框)

            select>.className$@3*3  (从指定数字开始自增)

            tr>.className$*3    (用于table,tbody,thead或tfoot中使用)

            tr>.className$@3*3  (从指定数字开始自增)

            td>.className$*3    (用于tr中使用)

            td>.className$@3*3  (从指定数字开始自增)