Blogger Information
Blog 29
fans 0
comment 0
visits 14875
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用 Ement 语法、Html 标签属性和布局标签总结
cool442
Original
659 people have browsed it

常用 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
    效果:
  1. <div>
  2. <p>学习html</p>
  3. <p>学习html</p>
  4. <p>学习html</p>
  5. </div>
  • 例 2:div>(ul>li{学科}*3)*2
  1. <div>
  2. <ul>
  3. <li>学科</li>
  4. <li>学科</li>
  5. <li>学科</li>
  6. </ul>
  7. <ul>
  8. <li>学科</li>
  9. <li>学科</li>
  10. <li>学科</li>
  11. </ul>
  12. </div>

二、Html 标签四类属性

1. 通用属性:class,id,style

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

2. 预置属性

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

3. 事件属性

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

4. 自定义属性

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

三、布局标签

1. 经典用法 div + class

  1. <div class="header"></div>
  2. <div class="main"></div>
  3. <div class="footer"></div>
  4. <div class="article"></div>

2. Html5 语义化标签

  1. <section></section>
  2. <article></article>
  3. <header></header>
  4. <footer></footer>

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

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

Correction status:qualified

Teacher's comments:<p email="aa@123.com"></p> 这里直接用emali不是很合适,加上前缀data-
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post