• 欢迎加“百元导航”为主页,windows8风格,0.3s极速加载
  • 王柏元的博客专用搜索引擎:极客人,就用“极客搜”!
  •    8个月前 (12-05)  技术应用 算法语言 软件开发 |   抢沙发  159 
    文章评分 1 次,平均分 5.0

    曾经看见一位学长在PHP-Storm上输入一段奇怪的代码,当他按下了Tab键后,神奇的事情就发生了。

    如果HTML也是一种编程语言的话,私以为Html会是我们接触到的最多的编程语言。可能有人并不知道什么是HTML(超文本标记语言),但是当他人生中第一次上网打开浏览器浏览网页的时候,他与HTML的邂逅就开始了……只是当初,他不知道纷繁绚丽的网页的背后,是HTML语言在默默支撑;

    HTML+JS+CSS是前端的三大语言。如果把网页比作人的话,HTML给了人以骨架,CSS未知赋予了血肉、发肤以至衣物、妆饰,而JS则给了他运动的灵魂。

    这边文章从HTML讲起,对于HTML的基本知识在此就不便赘述了,Google一下,你就知道。在此,我主要讲的是怎样快捷地搭建起HTML的骨架。

    把HTML比作骨架并非我心血来潮,我只是在告诉自己写HTML页面要有搭框架的意识。不瞒你说,我以前的HTML的代码都是拼凑而成的。哪里不对改哪里,效率很低。正向箭头 + 标签名+反响箭头这种重复的代码,写多了就觉得腻了。那么有没有什么快捷的方式让我们关注HTML的架构本身,而不是繁杂的html语言本身呢?

    用Emmet Tab一下

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度

    Emmet 的语法极客人目前还只是刚刚入门,这里主要是抛砖引玉一下,给大家几个例子,更专业的介绍与教程,给大家推荐下面文章:http://www.iteye.com/news/27580 ,在此我也就不大篇幅地复制粘贴了。

    • ** 输入“!”或“html:5”,然后按Tab键: **

    Emmet优雅地搭建起Html骨架
    * ** 连续输入元素名称和ID,比如输入p.foo: **

    Emmet优雅地搭建起Html骨架

    还有一些较复杂的用法大家自行研究,在此不做赘述,因为我的作用就是抛砖引玉,勾起大家的兴趣。

    ** 要见证奇迹的话建议自己亲手试一下!!**

    一个例子:实现列表

    我要实现的效果如下:
    Emmet优雅地搭建起Html骨架

    按照搭建骨架的意识,我们得弄清这个列表的结构是什么样子:
    ** 最外层一个无序列表,这个无序列表每个列表项都嵌套一个有序列表,这个有序列表有两个列表项,每个列表项含有个无序列表
    **

    Emmet语法如下:

     

    Tab一下:

    Emmet优雅地搭建起Html骨架

    然后把文字填进去

     

    效果预览

    >

    • Javascript
      1. 第一章
        • const
        • let
      2. 第二章
        • function
        • object
    • Java
      1. 第一章
        • class
        • package
      2. 第二章
        • private
        • public

    参考文章:
    * http://www.iteye.com/news/27580
    * http://www.powerxing.com/emmet-syntax-cheatsheet/

      
     

    本文已在版权印备案,受著作权法律保护,未经允许不得转载!如需转载请联系作者或访问版权印获取授权,如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!

    转载注明原文出处:王柏元的博客>>http://wangbaiyuan.cn/emmet-elegantly-set-up-html-skeleton.html

    关于
    记录生活,镌刻心路;泼洒文墨,分享技术!王柏元的博客致力于IT经验交流,并原创翻译引进外文文章,打开IT国际化视野

    发表评论

    格式

    暂无评论

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册