查看任何网页的HTML和CSS
该网站是用代码行构建的，但结果是具有图像，视频，字体等的特定页面。 要更改这些元素之一或查看它包含的内容，您必须找到控制它的特定代码行。 你可以用元素检查工具来做到这一点。
大多数Web浏览器不会让您下载检测工具或安装附加组件。 相反，它们让您右键单击页面元素并选择“ 检查或检查元素” 。 但是，这个过程在你的浏览器中可能有点不同。
在Chrome中检查元素
使用最新版本的Google Chrome浏览器，您可以通过几种方式查看网页，所有这些方式都使用其内置的Chrome DevTools：
- 右键单击页面上的某个内容（或空白区域），然后选择“ 检查”
- 输入Ctrl + Shift + I键盘快捷键
- 使用Chrome菜单访问更多工具>开发人员工具选项
Chrome DevTools可让您轻松复制或编辑HTML行，或者完全隐藏或删除元素（直到页面重新加载）。
一旦DevTools在页面上打开，您可以更改其定位位置，将其从页面中弹出，搜索所有页面的文件，从页面中选择用于特定检查的元素，复制文件和URL，甚至可以自定义一堆的设置。
检查Firefox中的元素
像Chrome一样，Firefox有几种不同的方式可以打开名为Inspector的工具：
- 右键单击页面上的空白区域或选择一个元素，然后选择检查元素
- 用键盘输入Ctrl + Shift + T或Ctrl + Shift + I
- 从Firefox菜单中，单击开发人员 > 检查器
- 从工具菜单中，单击Web开发人员>检查器
当您将鼠标移到Firefox中的各种元素上时，Inspector工具会自动查找元素的源代码信息。 单击一个元素，“停止搜索”将停止，您可以从巡视窗口中检查元素。
右键单击一个元素以查找所有支持的控件。 您可以执行诸如将页面编辑为HTML，复制或粘贴内部或外部HTML代码，显示DOM属性，截图或删除节点，轻松应用新属性，查看页面的所有CSS等等。
检查Opera中的元素
Opera也可以检查元素，它的DOM Inspector工具与Chrome相同。 以下是如何做到这一点：
- 使用键盘快捷键Ctrl + Shift + I
- 导航到菜单>更多工具>显示开发人员菜单 ，然后通过菜单>开发人员>开发人员工具打开菜单
- 从页面上任何元素的右键单击菜单中，选择检查元素
检查Internet Explorer中的元素
Internet Explorer中提供了一个名为Developer Tools的类似检查元素工具：
- 按下键盘上的F12
- 使用工具> F12开发人员菜单选项（如果没有看到工具菜单，请点击Alt + X ）
- 在页面上单击鼠标右键，然后单击检查元素
IE在这个新菜单中有一个Select元素工具，可以让你点击任何页面元素来查看它的HTML和CSS细节。 在浏览DOM Explorer选项卡时，您还可以轻松禁用/启用元素高亮显示。
与上述浏览器中的其他元素检查器工具一样，Internet Explorer允许您剪切，复制和粘贴元素，以及编辑HTML，添加属性，复制附带样式的元素等。