对一个现有的网页进行mtml结构、布局分析，css的引用、跟踪是件繁琐头疼的事，即使是功能全面、笨重的dw也是力不从心，即使是网页作者也会晕头转向。今天我们用ie8自带的一项功能“开发人员工具”来分析一个现有网页，它非常符合人类认识解决复杂问题的思维方式：自上而下、划分模块、层层分解。
Ie的开发人员工具是什么？网上已把它炒得火热了：他的前身是IE WebDeveloper，现在已经集成到ie8了，它允许直接地在浏览器窗口中浏览、传输和更新HTML DOM，可以实时分析网页并且显示为一种允许你察看表格风格、Javascript脚本，表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素，因此你可以在实际网页中定位其代码。 查看style元素，定位div等等。
现在我们选择蜡笔同步网站的主页作为分析对象，选择它只是因为它大小合适以及布局元素较多。
打开蜡笔同步网站的主页，按F12即可调出“开发人员工具”，HTML是默认的选项卡，每当新打开一个网页，网页的源代码就以DOM树的形式在其中展示。点击最左边的+号，可以展开/收缩该DOM元素
以下仅从网页结构、布局角度分析html元素，至于元素对应的css暂不涉及，因为我们从html元素的外观即可大致了解其css规则。
1、网页分为两大部分
和
