你的位置:首页 > 软件开发 > 网页设计 > 【02】emmet系列之HTML语法

【02】emmet系列之HTML语法

发布时间:2015-11-05 18:01:56
【01】emmet系列之基础介绍   【02】emmet系列之HTML语法   【03】emmet系列之CSS语法   【04】emmet系列之编辑器   【05】emmet系列之各种缩写 初始化 :快速编写HTML代码 HTML文档需要包含一些固定的 ...

 

  【01】emmet系列之基础介绍

 

  【02】emmet系列之HTML语法

 

  【03】emmet系列之CSS语法

 

  【04】emmet系列之编辑器

 

  【05】emmet系列之各种缩写

 

初始化 :快速编写HTML代码 

【02】emmet系列之HTML语法
  1. <div>
  2. <ul>
  3. <li></li>
  4. </ul>
  5. </div>

兄弟元素 “+”

  1. div+p+bq
输出:
  1. <div></div>
  2. <p></p>
  3. <blockquote></blockquote>

向上一级:“^”

 
  1. <div></div>
  2. <div>
  3. <p><span></span><em></em></p>
  4. <blockquote></blockquote>
  5. </div>
多用几个"^"
  1. <div></div>
  2. <div>
  3. <p><span></span><em></em></p>
  4. </div>
  5. <blockquote></blockquote>
 

分组:“()”

 
  1. <div>
  2. <header>
  3. <ul>
  4. <li><a href=""></a></li>
  5. <li><a href=""></a></li>
  6. </ul>
  7. </header>
  8. <footer>
  9. <p></p>
  10. </footer>
  11. </div>
或是
  1. <div>
  2. <dl>
  3. <dt></dt>
  4. <dd></dd>
  5. <dt></dt>
  6. <dd></dd>
  7. <dt></dt>
  8. <dd></dd>
  9. </dl>
  10. </div>
  11. <footer>
  12. <p></p>
  13. </footer>

 

结合CSS的HTML

ID和Class

 
  1. <div id="header"></div>
  2. <div class="page"></div>
  3. <div id="footer"class="class1 class2 class3"></div>
 在过去版本中,可以省略掉div,即输入.item即可生成<div ></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li ></li>。 下面是所有的隐式标签名称: 
  • li:用于ul和ol中
  • tr:用于table、tbody、thead和tfoot中
  • td:用于tr中
  • option:用于select和optgroup中
  1. <td title="Hello world!" colspan="3"></td>

项目编号$

 
  1. ul>li.item$$$*5
  1. <ul>
  2. <li class="item001"></li>
  3. <li class="item002"></li>
  4. <li class="item003"></li>
  5. <li class="item004"></li>
  6. <li class="item005"></li>
  7. </ul>
 
  1. ul>li.item$@3*5
item7到item3 

文本:“{}”

 
  1. <a href="">Click me</a>
  1. <!-- a{click}+b{here}-->
  2. <a href="">click</a><b>here</b>
  3. <!-- a>{click}+b{here}-->
  4. <a href="">click<b>here</b></a>
更加复杂的 
  1. <p>Click</p>
  2. <a href="">here</a> to continue

无效的写法:

当你熟悉了emmet的缩写语法,你可能需要使用一些格式(比如加空格),使您的缩写更具可读性。 例如:     2、把文本转换成HTML标签

 


原标题:【02】emmet系列之HTML语法

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。