如果在 Windows 系统上,在谷歌浏览器中打开目标网页,然后按 Ctrl + U 键盘快捷键,就会打开对应页面的源代码。如果在 Mac 电脑上,在谷歌浏览器中打开目标网页,然后按 Command + Option + U 快捷键。除了利用Google Chrome 浏览器查看页面源代码之外,我们还可以利用浏览器的开发人员工具。这个工具不仅能让我们看到网页的 HTML 代码,还能查看网页 HTML 中对应元素的 CSS 样式表规则。
要使用 Chrome 的开发人员工具:
第 1 步:打开谷歌浏览器。
第 2 步:导航到目标网页。
第 3 步:选择浏览器窗口右上角的三个点。
第 4 步:从菜单中,依次选择:更多工具 > 开发人员工具。
更多工具 > 开发人员工具
更多工具 > 开发人员工具
第 5 步:将打开一个开发者工具窗口。浏览器上方显示的网页内容,下方为开发者工具窗口。
第 6 步:或者,右键单击网页中的某个元素,然后从出现的菜单中选择“检查”,Chrome 的开发人员工具窗口将弹出,并突出显示点选的 HTML 页面元素,在右侧还显示对应原色的 CSS 样式规则。