常用 Ement 语法、Html 标签属性和布局标签总结

一、常用 Ement 语法

基本操作：输入相应的语法，按 Tab 键，不能有空格。

例	Ement 语法	含义	效果
p	标签名	生成相应的标签语句	`<p></p>`
.top	.英文字符	默认生成 div 标签，并设置相应样式	`<div class="top"></div>`
p.top	标签名.英文字符	生成标签并设置样式	`<p class="test"></p>`
#top	#英文字符	默认生成 div 标签，并设置 ID 属性	`<div id="test"></div>`
p#top	标签名#英文字符	生成标签并设置 ID 属性	`<p id="top"></p>`
div>p	标签名 1>标签名 2	生成标签名 1 和下级标签名 2	`<div><p></p></div>`
div+p	标签名 1+标签名 2	生成标签名 1 和同级标签名 2	`<div></div><p></p>`
p*3	标签名*数字	重复指定数量的同级标签	`<p></p><p></p><p></p>`
p{学习 html}	标签名{字符}	生成标签并设置标签文本内容	`<p>学习 html</p>`
见后面综合用法	()	分组：类似数学公式括号作用，先分别生成括号内语法，再进行组合	见后面综合用法
a[href=”https://www.baidu.com“]	标签名[属性]	生成带属性的标签	`<a href="https://www.baidu.com"></a>`
p{课程$}*3	$	自动生成序号，从1开始	`<p>课程1</p><p>课程2</p><p>课程3</p>`
p{课程$@5}	$@数字	序号，从指定数字开始	`<p>课程5</p><p>课程6</p><p>课程7</p>`
p{课程$@-3}*3	$@-数字	序号，倒序到指定数字	`<p>课程7</p><p>课程6</p><p>课程5</p>`

还有其他可通过网页搜索

<div>
  <p>学习html</p>
  <p>学习html</p>
  <p>学习html</p>
</div>

<div>
  <ul>
    <li>学科</li>
    <li>学科</li>
    <li>学科</li>
  </ul>
  <ul>
    <li>学科</li>
    <li>学科</li>
    <li>学科</li>
  </ul>
</div>

<div class="top"></div>
<p id="header"></p>
<a href="" style="color: red"></a>

<a href="http://php.com">PHP</a> <img src="http://pp.com/logo.png" alt="logo" />

<a href="#" onclick="open()"></a>

<p email="aa@123.com"></p>

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

<section></section>
<article></article>
<header></header>
<footer></footer>