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

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

一、常用 Ement 语法

1. 常用 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>

还有其他可通过网页搜索

---

2.综合使用 Ement 语法

• 例 1：div>p{学习html}*3
  效果：

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

• 例 2：div>(ul>li{学科}*3)*2

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

二、Html 标签四类属性

1. 通用属性：class，id，style

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

2. 预置属性

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

3. 事件属性

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

4. 自定义属性

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

---

三、布局标签

1. 经典用法 div + class

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

2. Html5 语义化标签

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

3. div+class 与 Html5 语义化标签的优缺点

• 目前项目 90%以上是基于移动端, 不依赖或不在乎搜索引擎
• 语义化的标签数量是有限的,不如 class 的自定义字符串再精准