emmet常用语法

emmet常用语法

快速生成html结构

!+tab 或者 !+enter

生成带class或者id的div

div.title或者.title     单个class
.title.name.tag         多个class
div#title 或者 #title   单个id

为元素添加属性

div[name="属性值"]
eg:
    div[title="标题"]
        <div title="标题"></div>
    a[href='www.baidu.com'][name='百度']
        <a href="www.baidu.com" name="百度"></a>

生成结构性节点

元素/class/id>元素/class/id{内容}
eg: 
    .title>#name{你好呀}+enter
        <div class="title">
            <div id="name">你好呀</div>
        </div>

生成有序元素节点

元素/class/id>{$} 
注意:
    .title$             .title5
    $@number    $@5     从5开始计数
                $@-1    倒数计数
eg:
    ul>li{$}*5  +   enter
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    ul>li{$}*5  +   enter
    <ul>
        <li>5</li>
        <li>4</li>
        <li>3</li>
        <li>2</li>
        <li>1</li>
    </ul>

元素四类属性

1、通用属性 title,name
2、预置属性(私有属性)
    img --> src
    a   --> href
3、事件属性 on+事件（onclick/ondblclick/onmouseover）
4、自定义属性   data-自定义属性名（data-email）

div+class与html5语义化标签的优缺点

html5语义化优点:
    HTML结构清晰
    代码可度性好
    无障碍阅读
    搜索引擎可根据标签的语言确定上下文和权重问题
    移动设备能更完美的展示页面
    便于团队维护开发
div+class优点
    方便好记，不用记太多的标签
    目前跨端语言较多，div+class更方便编译成各种小程序/app语言，降低学习成本