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 不友好
