不得不说的Firebug（三）：Firebug——HTML

      本篇博文打算总结一下Firebug中的HTML这一个Tab，HTML是Firebug的第二个面板，我们可以在这个Tab查看HTML DOM。点击HTML这个Tab，我们可以看到右边还有五个子面板，它们分别是“样式”，“计算出的样式”，“布局”，“DOM”，“事件”。在HTML这个面板，我们可以任意编辑HTML的元素或者在“样式”子标签中修改CSS样式，这些修改都会动态地展现在网页中。下面逐个进行介绍一下，希望对大家有所帮助，有错误之处也希望大家能指出来。

一、审查HTML中的元素

1、点击HTML这个Tab，在Firebug窗口里将网页的DOM呈树状显示，我们可以点击小图标展开这个DOM节点。

2、点击Firebug窗口上方的还可以具体地定位审查这个页面的每个元素。

示例：点击审查元素的小图标后，将鼠标移到你想查看的的元素的位置（整个DOM元素的边框会显示高亮状态，在Firebug窗口中该部分的HTML代码段也会显示高亮）

这个Firebug的功能对于我们去学习一个网页的布局时相当有用。

二、编辑HTML中的元素和属性

1、编辑现有的HTML元素的属性

点击你所要修改的HTML元素的属性，输入你想要修改的属性，按“回车键”，它就会自动完成输入并跳到下一个属性，使其处于编辑状态，而且，我们所修改的内容的效果将会及时反馈到页面中。

2、在HTML元素里面创建新的属性

将鼠标移到在我们所选择的HTML元素的在HTML这个Tab中，点击右键，我们可以看到一个菜单栏，选择“新增属性”，它就会自动在这个HTML元素的末尾添加一个处于编辑状态的空白输入框，我们可以在里面输入新的属性。

3、创建新的HTML元素

实际上，对于1、2点，我们还有一种方法去直接去编辑HTML元素的属性和创建新的属性。我们只要选中了这个HTML元素后，点击Firebug窗口的右上角的“编辑”按钮，便可进入编辑该元素。同时，我们可以在里面创建新的HTML元素。同样，修改后的效果也会立即反馈到页面会上。

4、删除HTML元素

同样是将鼠标移到在我们所选择的HTML元素的在HTML这个Tab中，点击右键，我们可以看到一个菜单栏，选择“删除元素”，这个元素就会被删除，同样，修改后的效果也会立即反馈到页面会上。

三、子面板“样式”，“计算出的样式”，“布

局”，“DOM”，“事件”的作用

实际上，子面板的所有内容都是随着主面板选择的DOM节点的变化而变化的。

1、样式

在样式这个面板中，它会呈现我们在HTML主面板中选中的DOM节点的所有CSS样式以及来自哪个文件。如下图：

实际上，我们也可以像在主面板一样，对改元素的CSS样式进行修改。同样，修改后的效果也会立即反馈到页面会上。

如果我们不想直接删除该元素的某些属性，我们还可以对改元素的某些属性进行隐藏，我们点击该属性的左边的小图标即可。同样，修改后的效果也会立即反馈到页面会上。

2、计算出的样式

它会对选中的元素根据属性进行分类。实际上它跟“样式”标签差不多。只是CSS样式的呈现方式不一样。

3、布局

点击“布局”，我们会看到该元素的相关布局。鼠标移到布局上，在页面的元素上还会出现一个标尺来。我们可以很清楚地看到它的边的长度和宽度。

我们也可以随意地在上面修改它的输值。同样，修改后的效果也会立即反馈到页面会上。

4、DOM

它会显示被选中的HTML元素的所有DOM属性

5、事件

它会显示被选中的HTML元素的所有事件的函数

四、总结

本博文简单地总结了Firebug中HTML这个Tab的一些基本用法和其子面板的基本作用，事实上，我们平时比较多用的还是“审查元素”这个主要的功能。无论是在学习还是实际开发中都非常有用。好了，本篇博文就写到这里，希望对大家有所帮助，如果有什么错误之处希望大家能指出来，大家可以相互学习学习。感谢您的阅读！

《不得不说的Firebug》系列

1、不得不说的Firebug（一）：Firebug——总览

2、不得不说的Firebug（二）：Firebug——控制（Console）

3、不得不说的Firebug（三）：Firebug——HTML

4、不得不说的Firebug（四）：Firebug——脚本（Script）