Emmet学习笔记

来源：互联网发布：网络id是什么编辑：程序博客网时间：2024/06/03 17:42

摘要:

参考文章：前端开发必备！Emmet使用手册

记录Emmet的一些语法

语法

注意:

Emmet符号前后不要有空格

兄弟

+ 类似于css中的兄弟

上级

^ 设置上一级的节点,^^连着向上返回两级

div+div>p>span+em^bq-------------------<div></div><div>    <p><span></span><em></em></p>    <blockquote></blockquote></div>

可以理解是一层一层地进入>，然后在这层建立兄弟+，或者返回上级^

分组

()将括号内的元素变成一个代码块

乘法

*将某个元素重复几次

自增符号

$，一个$代表一位数字，@可以设置倒序和起始数字

ul>li.item$$$*5---------------<ul>    <li class="item001"></li>    <li class="item002"></li>    <li class="item003"></li>    <li class="item004"></li>    <li class="item005"></li></ul>

h$[title=item$]{Header $}*3---------------------------<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>

ul>li.item$@-3*5----------------<ul>    <li class="item7"></li>    <li class="item6"></li>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li></ul><!-- @后的-代表是倒序，3表示从3开始，顺序不可颠倒。 -->

文本

p>{Click }+a{here}+{ to continue}---------------------------------<p>click<a href="">here</a>to continue</p>

生成隐式标签

不用强记，系统会自动判断生成，准确率却不知道啦。

table>.row>.col---------------<table>    <tr class="row">        <td class="col"></td>    </tr></table>

缩写

h5的首部

!--------<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title></head><body></body></html>

CSS链接

link:css--------<link rel="stylesheet" href="style.css">

favicon的链接

link:favicon------------<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

设置字符编码

meta:utf--------<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

表单

form:get--------<form action="" method="get"></form>

input

<!-- text,search,radio等type都可以通过类似的方法 -->input:hidden------------<input type="hidden" name="">

参考资料

前端开发必备！Emmet使用手册
Emmet官方文档

阅读全文

0 0