前端开发必备!Emmet常用语法

1.后代:nav>ul>li

<div class="nav">
    <ul>
        <li>li>
    ul>
div>

2.兄弟:div+p+bq

<div>div>
<p>p>
<blockquote>blockquote>

3.上级:div+div>p>span+em^bq

<div>div>
<div>
    <p><span>span><em>em>p>
    <blockquote>blockquote>
div>

4.分组:div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href="">a>li>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>

5.乘法:ul>li*5

<ul>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>

6.自增符号:ul>li.item$*5

<ul>
    <li class="item1">li>
    <li class="item2">li>
    <li class="item3">li>
    <li class="item4">li>
    <li class="item5">li>
ul>

7.id和class:ul#id233>span.span233

<ul id="id233"><span class="span233">span>ul>

8.自定义属性:p[title=”Hello world”]

<p title="Hello world">p>

9.文本内容:a{Click me}

<a href="">Click mea>

10.html模板:!


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

body>
html>

你可能感兴趣的:(/root/WEB前端)