前言： 常常新手学习前端中会学习大量的语法，学习各个标签页面的作用，其实前端并不是一项繁琐而又枯燥的学科。当你前端学的越深入，你越能发现，写前端页面的人就像是一个导演，编写着剧本。 HTML是演员，而CSS则是化妆师，为演员赋予视觉效果。
让我们以一段简单的HTML页面步入今天的讲解。我们先来看下文的页面效果。
上文是一个简单的键盘敲击乐，也就是当点击键盘后会出现声音，让我们以导演的视角来导演这场戏。
页面的基础设计
导演一场戏一定得先将演员给请出
这场戏的演员很简单首先可以观察到页面上有8个按键，每个按键中分别有着一个大写字母和三个小写字母，于是我们清晰明了，本场戏的演员就是他们。再来观察一下他们的关系：大写字母和小写字母都在按键中，因此我们能够用Emmet表达式快速生成框架：.keys>（.key>div+span.sound)*8。这是emmet表达式，在下文有介绍。
演员已经就绪，则该给他们化妆了
要使用css进行页面的样式设计，而css的引入方式有三种，常常使用第三种方法进行设计，能很好的进行页面的职责分离
行内样式：写在标签的styel属性中
<body>
<p style="color: brown">
hello world
</p>
</body>
内部样式表，通过 style 标签来写 CSS(可以写在文件的任何位置，通常写在head标签中)
<head>
<style>
p {
color: red;
}
</style>
</head>
外联样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<p>
hello world
</p>
</body>
上文在编写html页面的时候我们使用了emmet
Emmet的详细使用：加速HTML与CSS编写的利器
1. 什么是Emmet
Emmet是一个极为强大的工具，能够极大地提高开发者在编写HTML和CSS时的效率。它通过缩写语法（类似快捷方式）来生成大量的HTML结构或CSS规则，使得开发者能够用最简洁的方式实现最复杂的布局和设计。
2. Emmet基本语法
Emmet语法非常简洁，通过简单的缩写来生成代码结构。常见的缩写规则包括：
-
元素标签：
div→<div></div>ul>li*3→<ul><li></li><li></li><li></li></ul>div#id→<div id="id"></div>div.class→<div class="class"></div>
-
嵌套结构：
div>ul>li*3→<div><ul><li></li><li></li><li></li></ul></div>header>nav>ul>li*2>a→<header><nav><ul><li><a></a></li><li><a></a></li></ul></nav></header>
-
乘法符号
*：表示生成多个元素。li*5→<li></li><li></li><li></li><li></li><li></li>div#id>ul>li*4→<div id="id"><ul><li></li><li></li><li></li><li></li></ul></div>
-
ID和类名：
section#main→<section id="main"></section>section.main→<section class="main"></section>div#header.main→<div id="header" class="main"></div>
-
组合多个标签：
header>nav>ul>li*3>a[href="#"]→<header><nav><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></nav></header>
-
属性设置：
input[type="text"]→<input type="text">a[href="#"].btn→<a href="#" class="btn"></a>
学会上面的技能已经能够极大的提升开发效率，但想当一个合格的切图崽还是不够，跟着我继续学习吧！下一篇：
