2.7 开发者工具查看元素结构
原创声明。未经许可，不得转载，作者：小步教程。
DebugError000：碰到错误不能使用开发者工具调试。这是严重级别最高的错误之一。
没有掌握开发者工具基本等于没有掌握CSS。编码因为各种原因可能出错，编码偶尔出错是正常现象；如果不能快速排错，则不是正常现象。Chrome开发者工具是检查代码错误与调试的强大工具，基本所有错误都能直接或间接通过它检查，并且使用它能理解更多的CSS原理。后续几乎每项学习内容都使用它检查与调试。
正确代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
</head>
<body>
Hello，HTML。www.xiaobuteach.com
</body>
</html>
2.7.1 打开开发者工具
开发者工具的两种打开方式：快捷键 “F12”；网页“右键”—“检查”。使用“检查”方式时，会自动定位到右键所在元素。
开发者工具查看元素结构，与编写的源代码完全一致。说明编码完全正确与规范。
图示元素左侧箭头提供节点的展开与收缩操作，便于切换查看整体结构或详情。
DOM树。元素面板显示的元素结构树也称DOM树，DOM树更多用于JS操作时的叫法。
2.7.2 DevError004 标签名拼写错误
DevError004错误原因：手误把标签名title拼写错误，多加一个空格。
<ti tle>小步教程</title>
问题现象：页面的标题变成页面地址，想要的标题显示在页面主体。
问题分析：假装使用其它方法都未发现问题。编码与运行结果不符，title里的内容到了body里，大胆推测：代码语法出现问题，浏览器拿到错误的源代码，解析得到莫名其妙的结果。
开发者工具查看元素结构
发现title从head移到body内，成功定位到title标签（或者附近标签）出现问题。
2.7.3 浏览器工作原理之解析HTML
HTML代码编写错误时，浏览器不会像其它语言一样报错，会按自己的规则解析显示页面，但解析结果可能与期望不一致。上述示例能够观察出解析规则：源代码的<ti title>被解析成<ti>，并且源代码没有找到对应的结束标签</ti>，自动补齐它在body内部结束位置。
w3c定义HTML代码完整的解析规范，以及对于不标准写法的解析处理。因为具体解析过程是大量词法分析的晦涩内容，这里不具体讲解。
开发者工具通过元素面板查看解析结果，这是调试元素的重要方法。更多内容见“3.2 标签语法”与“3.3 开发者工具调试元素”。
2.7.4 设置开发者工具停靠位置
单击开发者工具右上角的“自定义和控制”按钮，弹出菜单选择“停靠侧”。
第1个表示显示在独立新窗口，后续3个分别表示左、下、右。独立窗口显示如下。
