如何观察 HTML 源代码

学习 HTML 除了要会撰写程序语法，也需要了解如何观察一份网页的 HTML 源代码，这篇教学会介绍使用浏览器观察 HTML 源代码的方法。

快速导览：

• 静态网页和动态网页
• 查看网页源代码
• 打开浏览器控制台，检查网页

静态网页和动态网页

如果要简单区分网页的类型，可以分成“静态网页”和“动态网页”两大类，虽然两者在“网页源代码”的表现不相同，但最后呈现的结果依然都会是 HTML，因此只要掌握两者区分原则，就能用特定的方法观察网页最终呈现的源代码。

• 静态网页：单纯撰写 HTML 实现，所编辑的 HTML 内容几乎和浏览器查看的源代码相同，网页加载完成后资源也就一并加载完成。
• 动态网页：透过后端或 JavaScript 框架“动态”产生 HTML，在不同的情况下会有不同的 HTML 表现 ( 例如不同网址、不同用户...等 )，浏览器查看的源代码和实际呈现的结果并不相同，动态网页的内容可能是“全部动态”( 基本网页加载后，全部的内容透过框架产生 ) 或是“部分动态”( 网页加载后，部分特定内容再过 JavaScript 或再由数据库产生 )。

查看网页源代码

查看网页源代码的方式很简单，使用 Chrome 浏览器打开网页，在网页上按下鼠标右键，选择“检视网页源代码”( Firefox 称作“检视源代码”，Safari 称作“显示网页源代码” )。

点选后就会打开一个新分页，分页里会呈现该网页的源代码，从中可以看到 HTML 的基本架构，以及各种标签组成的网页元素。

这部分的源代码属于“静态网页”源代码，如果网页里有动态内容，则不会透过这种方式显示。

打开浏览器控制台，检查网页

如果要查看目前网页“真正的源代码”( 最终呈现样貌的源代码 )，则需要使用“检查网页”的方式，使用 Chrome 浏览器打开网页，在网页上按下鼠标右键，选择“检查”( Firefox 称作“检测”，Safari 称作“检阅元件” )。

点选后会在浏览器的下方或右侧 ( 可以点击里面的图示切换位置 )，打开一个可以拖拉大小的显示区块，使用 Chrome 浏览器点击“element”页签，就能看到完整的 HTML 源代码，此时也可使用鼠标点击网页元素，就能看到该元素的样式。

使用 Firebox 浏览器点击“检测器”页签，就能看到完整的 HTML 源代码以及网页元素。

使用 Safari 浏览器点击“元件”页签，就能看到完整的 HTML 源代码以及网页元素。

小结

学会观察 HTML 源代码是一件很重要的事，未来不论是要设计动态网页、或是实作网页爬虫，都必须要知道 HTML 的网页结构以及用了哪些网页元素，甚至还可以从 HTML 源代码里，发现一些这个网站不为人知的小秘密，或是一些只能从源代码看到的小惊喜。

意见反馈