从零开始HTML＃029——5分钟-Skills＆Tools 工具和技巧

标签

#029_Pro_Skills&Tools

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

Zen-coding / 快速编写

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

如何安装

安装pcip

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

安装emmet

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

如何使用

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

Zen-coding示范

常用例子

使用>生成元素子节点

Sibling: +

使用+生成元素兄弟节点

Multiplication: *

使用*生成多个相同元素

Grouping: ()

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

示范一

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

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

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

现有的轮子

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

编写检查

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

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

meyerweb.com（不用翻墙）

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