Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧

标签

#029_Pro_Skills&Tools

    那么今天来介绍一些 HTML 中经常会用到的工具和经验,能稍微提高一点前端开发的效率和质量。


Zen-coding  / 快速编写  

    一种快速编码的插件,在我们这里选用的 sublime text 对应的 Zen-coding 插件是 Emmet 。这是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能,极大的提高前端开发效率。

如何安装    

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第1张图片
安装pcip

    首先在 sublime text 的 Tools 里面有一个 Command Palette ,或者直接快捷键 Ctrl+Shift+P ,就会出现一个命令行输入框,在里面输入【Package Control:install Package】当然不需要完全输入就会关联出这个,点击它,会出现另一个输入框。

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第2张图片
安装emmet

    这时候输入【Emmet】,点击安装之后,就可以使用了。

如何使用

        先根据 zen-coding 规则输入好,然后按下 Tab 键,编辑器就会自动帮你帮内容补全。

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第3张图片
Zen-coding示范

常用例子

child:>

使用 > 生成元素子节点

Sibling: +

使用 生成元素兄弟节点

Multiplication: *

使用 * 生成多个相同元素

Grouping: ()

和普通的括号差不多表达,优先级的概念。

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第4张图片
示范一

    header>ul>li*2>a 是 元素子节点 其中 li*2 用了*生成多个相同元素。

    +footer>p 则是 元素兄弟节点

zen-coding 不需要太复杂,太复杂不能响应,而且也过犹不及,没必要这么做。


现有的轮子

    我们现在有相当多的工具可以直接使用——

编写检查

   你可以在这个网页检查你 HTML 文件 

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第5张图片
Validate.w3.org(不用翻墙)

你可以在这个网页参考他们的 CSS

Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧_第6张图片
meyerweb.com(不用翻墙)

    当然,还有许许多多的工具和技巧,这需要大家充分发挥自己的能力和思考,活用搜素引擎,找到自己合适的信息获取方式。

你可能感兴趣的:(Pro029-从零开始HTML[#029]——5分钟- Skills&Tools 工具和技巧)