14-emment语法使用（拓展）

1. Emmet语法介绍

Emmet 是一种能显著提升 HTML 和 CSS 代码编写效率的工具，它允许你借助简短的缩写来快速生成大量代码。

2. Emmet作用

• 提高编码效率：通过输入简短的缩写，能迅速生成完整的 HTML 或 CSS 代码结构，节省大量时间。
• 减少错误：使用标准化的缩写，可避免手动输入时出现的拼写错误和语法错误。
• 保持代码一致性：Emmet 语法具有统一的规则，有助于保持代码风格的一致性。

3. Emmet语法使用

3.1 Emmet在html标签上的使用

1. 直接输入标签名按tab键即可生成标签。
2. 如果想生成多个相同标签，加上* 如td*5即生成5个td;
3. 如果有父子级关系的标签，可以用>，比如tr>td*3
4. 如果有兄弟关系的标签，用+就可以了，比如div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了。 也可以控制标签，如p.demo
6. 如果生成的div类名是有顺序的，可以用自增符号$
7. 如果想生成的标签里面默认显示几个文字，可以用{}, 如div{hahah}, div{$}*5

3.2 Emmet在css上的使用

1. 属性缩写：许多 CSS 属性都有对应的缩写形式。例：m10 → margin: 10px;
2. 值缩写：对于一些属性值，也可以使用缩写。例：c#f00 → color: #f00;
3. 连写属性：可以将多个属性连写在一起。bd1-s#000 → border: 1px solid #000;

4. Emmet使用案例

• 例1：如想生成七行五列表格，内容填充为表格1-5，可用以下语法： table>(tr>td{表格$}*5)*7
• 例2：如果想生成一个无序列表，有列表项3个，li标签里包含了p和div标签：ul>(li>p+div)*3
• 例3：假设你要创建一个简单的 HTML 结构，包含一个 header、一个 main 和一个 footer，并且 main 中有三个文章元素。你可以使用以下 Emmet 缩写：header+main>article*3+footer