Ement 插件

定义：Ement 插件是用于快速生成 html 元素结构与内容

Ement 语法

快速生成 html 文档结构

Ement 快速生成 html 文档结构的方法有两种：分别是输入html:5或者输入!。在输入完之后按下键盘上的 Tab 键（测试按回车【ENTER】也可以）确认输入即可实现快速生成 html 文档结构。

<!-- Ement快速生成html文档结构的方法有两种：分别是输入`html:5`或者输入`!`。在输入完之后按下键盘上的Tab键（测试按回车【ENTER】也可以）确认输入即可实现快速生成html文档结构。 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

快速生成带属性的标签

#生成id属性

<!-- 代码:`p#id` -->
<p id="id"></p>

.生成class属性

<!-- 代码:`p.calss` -->
<p class="class"></p>

不给标签的话默认标签是 div，以下是.class和#id的演示

<!-- 不给标签的话默认标签是div，以下是`.class`和`#id`的演示 -->
<div class="class"></div>
<div id="Id"></div>

如果想要给标签内容写在{}大括号内，如div.title{内容放在这里}

<!-- 如果想要给标签内容写在`{}`大括号内，如`div.title{内容放在这里}` -->
<div class="tltle">内容放在这里</div>

层级关系 “父子”和“兄弟”

层级关系分为父子关系和兄弟关系> +

父子关系用 > 代码：div>p
含义：div 标签里包含着一个 p 标签

<!-- div>p 代码内不能有空格，否则不在Ement环境内-->
<div>
  <p></p>
</div>

兄弟关系用 + 代码：div+p
含义：添加一个 div 标签和一个 p 标签

<!-- div+p 代码内不能有空格，否则不在Ement环境内-->
<div></div>
<p></p>

扩展：向上一级平级关系-添加父关系 ^(用的不多)
向上一级平级关系用 ^ 代码：div>a^p
含义: div 标签内包含一个 a 标签，a 标签的上一级 div 标签添加一个父子关系的 p 标签

<!-- div>a^p 代码内不能有空格，否则不在Ement环境内-->
<div><a href=""></a></div>
<p></p>

重复标签 *
代码：ul>li*3>a{link}
含义：ul 标签下有三个 li 标签，三个 li 标签下都分别有三个 a 标签，a 标签的内容是 link

<!-- ul>li*3>a{link} -->
<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>

分组标签 ()
代码div.cart>h2{购物车}+ul>(li*3>a{goods})+p{总计：3 件}
含义：标签 div 的 calss 属性值为 cart，div 标签下有一个 h2 标签，h2 标签内容为购物车，和 h2 标签平级的有一个 ul 标签，ul 标签下有三个 li 标签，每个 li 标签下有一个内容为 goods 的 a 标签，和标签 h2 平级的有一个 p 标签，p 标签的内容为总计：3 件

<!-- div.cart>h2{购物车}+(ul>li*3>a{goods})+p{总计：3件} -->
<div class="cart">
  <h2>购物车</h2>
  <ul>
    <li><a href="">goods</a></li>
    <li><a href="">goods</a></li>
    <li><a href="">goods</a></li>
  </ul>
  <p>总计：3件</p>
</div>

属性用 []
代码：a[href="https://www.php.cn/"]{php 中文网}
含义: a 标签的 href 属性内容为https://www.php.cn/ a 标签的内容为 php 中文网

<a href="https://www.php.cn/">php中文网</a>

序号 \$
代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$}
含义：class 属性为 list 的标签 ul 下有 5 个 calss 属性为 item 的 li 标签，每个 li 标签下有一个 href 属性为https://www.php.cn/内容为item1-5的a标签

<!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$} -->
<ul class="list">
  <li class="item"><a href="https://www.php.cn/">item1</a></li>
  <li class="item"><a href="https://www.php.cn/">item2</a></li>
  <li class="item"><a href="https://www.php.cn/">item3</a></li>
  <li class="item"><a href="https://www.php.cn/">item4</a></li>
  <li class="item"><a href="https://www.php.cn/">item5</a></li>
</ul>

指定初始序号 \$@
从指定序号开始排序用@序号
代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@10}
含义：略

<!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@10} -->
<ul class="list">
  <li class="item"><a href="https://www.php.cn/">item10</a></li>
  <li class="item"><a href="https://www.php.cn/">item11</a></li>
  <li class="item"><a href="https://www.php.cn/">item12</a></li>
  <li class="item"><a href="https://www.php.cn/">item13</a></li>
  <li class="item"><a href="https://www.php.cn/">item14</a></li>
</ul>

倒序 \$@-1
倒序用@-1
代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@-1}
含义：略

<!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@-1} -->
<ul class="list">
  <li class="item"><a href="https://www.php.cn/">item5</a></li>
  <li class="item"><a href="https://www.php.cn/">item4</a></li>
  <li class="item"><a href="https://www.php.cn/">item3</a></li>
  <li class="item"><a href="https://www.php.cn/">item2</a></li>
  <li class="item"><a href="https://www.php.cn/">item1</a></li>
</ul>

html 元素四类属性

通用属性
三大通用属性
id用于选择该元素

<div id="id">id用于选择该元素</div>

class用于选择该元素

<div class="class">class用于选择该元素</div>

style描述当前元素的样式

<div style="color: red;">style用于描述当前元素的样式</div>

预置属性

<a href="https://www.php.cn/">php中文网</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />

事件属性

<button onclick="alert('sucess')">提交</button>

自定义属性

<div data-email="admin@php.cn">用户信息</div>

常用的布局标签

div+class VS html5-语义化布局标签

div+calss 布局标签

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

html5 语义化布局标签

<header>header</header>
<main>mian</main>
<footer>footer</footer>

二者对比好处与坏处总结
html5 语义化布局标签更简洁美观，对搜索引擎友好，但是标签数量有限
div+class 自由度高，可自定义，方便使用。但是对搜索引擎，seo 不友好

Ement常用语法、元素的四类属性、一些常用的布局标签

Ement 插件

Ement 语法

html 元素四类属性

常用的布局标签

更多相关文章

随机推荐