首页 > 博客列表 > 初识 Emmet 语法

博主信息

博文 48

粉丝 0

访问量 55027

专题推荐

更多>

初识 Emmet 语法

emmet 使用 tab 键生成 html 文档，比如要生成
<div></div>
使用“div+tab 键”
在后边的描述中我们不再提及”tab 键”，直接表述为：div

生成 html5 文档结构：

html:5
简化为 !

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

id,class

<!-- id,class -->
<!-- div#box  或者  #box -->
<div id="box"></div>
<!-- div.active 或者 active -->
<div class="active"></div>

<!-- p{Hello world} -->
<p>Hello world</p>

包含关系

<!-- div>p>a -->
<div>
  <p><a href=""></a></p>
</div>

兄弟结构


<!-- 兄弟级关系 -->
<!-- div+p+a -->
<div></div>
<p></p>
<a href=""></a>
<!-- div>p^a -->
<div>
  <p></p>
</div>
<a href=""></a>

重复

<!-- 重复 *n -->
<!-- a{link}*5 -->
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<!-- ul>li*5>a{link} -->
<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>

属性

<!-- 属性操作 ,使用[]-->
<!-- a[href="http://baidu.com"]{百度} -->
<a href="http://baidu.com">百度</a>

序号

<!-- 序号  $ -->
<!-- ul>li{item$}*5 -->
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>
<!-- ul>li*15>a{link$} -->
<ul>
  <li><a href="">link1</a></li>
  <li><a href="">link2</a></li>
  <li><a href="">link3</a></li>
  <li><a href="">link4</a></li>
  <li><a href="">link5</a></li>
  <li><a href="">link6</a></li>
  <li><a href="">link7</a></li>
  <li><a href="">link8</a></li>
  <li><a href="">link9</a></li>
  <li><a href="">link10</a></li>
  <li><a href="">link11</a></li>
  <li><a href="">link12</a></li>
  <li><a href="">link13</a></li>
  <li><a href="">link14</a></li>
  <li><a href="">link15</a></li>
</ul>

前导0

<!-- 前导0 -->
<!-- ul>li*5>a{link$$} -->
<ul>
  <li><a href="">link01</a></li>
  <li><a href="">link02</a></li>
  <li><a href="">link03</a></li>
  <li><a href="">link04</a></li>
  <li><a href="">link05</a></li>
</ul>

从固定数开始

<!-- ul>li*5>a{link$@5} -->
<ul>
  <li><a href="">link5</a></li>
  <li><a href="">link6</a></li>
  <li><a href="">link7</a></li>
  <li><a href="">link8</a></li>
  <li><a href="">link9</a></li>
</ul>

倒序

<!-- ul>li*5>a{link$@-5} -->
<ul>
  <li><a href="">link9</a></li>
  <li><a href="">link8</a></li>
  <li><a href="">link7</a></li>
  <li><a href="">link6</a></li>
  <li><a href="">link5</a></li>
</ul>

CSS

 <style>
      .box {
        /* w200 */
        width: 200px;
        /* bgc */
        background-color: red;
      }
    </style>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

常用Vscode 插件

2021-09-18 19:52:08

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

初识 Emmet 语法

生成 html5 文档结构：

id,class

包含关系

兄弟结构

重复

属性

序号

前导0

从固定数开始

倒序

CSS