工具层

Emmet

安装

现代IDE如webstorm、vscode等，通常支持emmet语法

生成HTML

根据id或类名生成标签

1
#page>div.logo+ul#navigation>li*5>a{item $}

最后敲一下tab，webstorm中的生成结果

1
2
3
4
5
6
7
8
9
10
<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
    <li><a href="">item 4</a></li>
    <li><a href="">item 5</a></li>
  </ul>
</div>

emmet默认生成的标签为div，生成id为page的div标签

1
div#page

或者

1
#page

编写class为content的p标签

1
p.content

同时指定id为navigation和class为nav的ul标签

1
ul#navigation.nav

兄弟标签：+

1
div+ul+bq

结果：

1
2
3
<div></div>
<ul></ul>
<blockquote></blockquote>

后代标签：>

1
div.nav>ul>li

结果：

1
2
3
4
5
<div class="nav">
  <ul>
    <li></li>
  </ul>
</div>

上级元素：^

上级元素（climb-up）是什么意思呢？

在上例中，如果继续写下去，后续内容都是在li标签下的，如果想和ul平级，需要使用^提升一个层次

1
div.nav>ul>li^span

结果：

1
2
3
4
5
6
<div class="nav">
  <ul>
    <li></li>
  </ul>
  <span></span>
</div>

注意：层级提升支持多次

重复多份：*

特别是无序列表，ul下肯定不止一个li

1
ul>li*5

结果

1
2
3
4
5
6
7
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

分组：()

用括号进行分组，表示一个代码块，分组内部的嵌套和层级关系，与分组外部无关

1
div>(header>ul>li*2>a)+footer>p

结果：

1
2
3
4
5
6
7
8
9
10
11
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

如果不加分组：

1
div>header>ul>li*2>a+footer>p

结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
  <header>
    <ul>
      <li><a href=""></a>
        <footer>
          <p></p>
        </footer>
      </li>
      <li><a href=""></a>
        <footer>
          <p></p>
        </footer>
      </li>
    </ul>
  </header>
</div>

属性：[]

1
a[href='https://mindcons.cn' title="sai's blog"]

结果：

1
<a href="https://mindcons.cn" title="sai's blog"></a>

也可以生成一些自定义属性：

1
div[data-title='title' data-content='content']

结果：

1
<div data-title="title" data-content="content"></div>

编号：$

$表示一位数字，只出现一个的话，就从1开始，如果出现多个，就从0开始

1
ul>li.item$*5

结果：

1
2
3
4
5
6
7
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

如果想生成三位数，就要写三次$

1
ul>li.item$$$*5

结果：

1
2
3
4
5
6
7
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

可以在$后增加@-实现倒序

1
ul>li.item$@-*5

结果：

1
2
3
4
5
6
7
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

在$后增加@N指定开始的序号

1
ul>li.item$@3*5

结果：

1
2
3
4
5
6
7
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

文本内容：{}

生成超链接一般要加上可点击的文本内容

1
a[href='https://mindcons.cn' title="sai's blog"]{点击这里}

结果：

1
<a href="https://mindcons.cn" title="sai's blog">点击这里</a>

隐式标签

隐式标签表示emmet可以省略某些标签名

例如：声明一个带类的div，只需要输入.item

另外，emmet还会根据父标签进行判定，例如ul>.item$*5一样可以生成正确的结构

列出所有隐式标签名称：

1
2
3
4
5
li: 用于ul和ol中
tr: 用于table、tbody、thead和tfoot中
td: 用于tr中
option: 用于select和optgroup中

所有的书写，不要有空格

生成CSS

参考链接：https://wenku.baidu.com/view/3902e24f26c52cc58bd63186bceb19e8b8f6ecf7.html

生成长文本

html中输入lorem或者lipsum，即可生成长文本

还可以指定文字的个数：lorem10

常用HTML结构指令

  • html:5或!，快速生成HTML5骨架结构（最后敲一下tab键）

代码层

HTML 的语义化

如果很强烈考虑兼容 IE 的话，那么本章节不太适合学习🐶。

参考链接：

资源层

  • 使用图片精灵（精灵图）
    • 一张图上有多个小图（为什么叫图片精灵呢？那些小图片都是精灵，一个一个蹦出来的，所以叫图片精灵）
    • 这样就只会加载一张图片了。因为减少请求次数，页面加载会快一些