Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Emmet 速学 #1

Open
JasonWu73 opened this issue Jan 29, 2020 · 0 comments
Open

Emmet 速学 #1

JasonWu73 opened this issue Jan 29, 2020 · 0 comments
Labels
手册 备忘速查
Projects
HTML & CSS

Comments

@JasonWu73
Copy link
Owner

HTML 标签属性

生成 HTML 5 样板文档

! + Tab：

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

</body>
</html>

自动开闭 HTML 标签

link + Tab：

<link rel="stylesheet" href="">

属性与属性值

class

div.top + Tab 或 .top + Tab：

<div class="top"></div>

id

div#top + Tab 或 #top + Tab：

<div id="top"></div>

自定义属性

span[data-no="1"] + Tab：

<span data-no="1"></span>

内置属性

form:post + Tab：

<form action="" method="post"></form>

层级结构

子节点

header>nav + Tab：

<header>
    <nav></nav>
</header>

兄弟节点

main+footer + Tab：

<main></main>
<footer></footer>

标签文本内容

button{提交} + Tab：

<button>提交</button>

批量生成节点

ul>li*3 + Tab：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自动分配序列

ul>li{列表项 $}*3 + Tab：

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

自动填充序列

ul>li.class-$${列表项 $}*3 + Tab：

<ul>
    <li class="class-01">列表项 1</li>
    <li class="class-02">列表项 2</li>
    <li class="class-03">列表项 3</li>
</ul>

分组

(header>nav)+main+footer + Tab：

<header>
    <nav></nav>
</header>
<main></main>
<footer></footer>

CSS 样式

属性

bxzb + Tab：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

数值

w10 + Tab：

width: 10px;

w10em + Tab：

width: 10em;

w10% + Tab：

width: 10%;

参考链接
@JasonWu73 JasonWu73 added 教程 基础入门 手册 备忘速查 and removed 教程 基础入门 labels Jan 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
手册 备忘速查
Projects
HTML & CSS
Awaiting triage
Milestone
No milestone
Development

No branches or pull requests
1 participant
@JasonWu73