怎樣使用瀏覽器查看網頁HTML和CSS源代...

學習網頁製作，目前一定要學習XHTML1.0+DIV+CSS的網頁布局方式，而學習的最佳方式之一就是通過查看別人製作的網站來學習其中的實踐技巧。

查看網頁的HTML和CSS源代碼其實很簡單，本文分別講解使用最為常見的三種瀏覽器：IE9瀏覽器、Firefox火狐瀏覽器和谷歌Chrome瀏覽器來查看網頁的HTML和CSS源代碼的方法。

工具/原料

使用IE9瀏覽器查看網頁源代碼

1. IE9瀏覽器默認情況下隱藏了瀏覽器菜單欄，因此在打開IE9瀏覽器以後，需要按鍵盤上的ALT鍵來顯示瀏覽器工具欄。

   

2. 在顯示出來的IE菜單欄上點擊菜單「查看」→「源文件」。

   

3. IE瀏覽器會自動打開一個新的窗口來顯示網頁源代碼。

   

4. 哦~這份緣文件實在太難看懂了~別著急，其實IE9提供了一個更為強大的網頁源代碼查看工具——開發者工具。

   點擊IE9瀏覽器右上角的齒輪圖標，在下拉菜單中點擊「F12開發者工具」，或者直接按鍵盤上的快捷鍵F12也可以打開開發者工具。

   

5. IE9的開發者工具提供更為強大的網頁開發查看代碼和調試功能，你可以使用開發者工具更方便地查看網頁HTML代碼，CSS樣式代碼和腳本等信息。

   

   

使用Firefox火狐瀏覽器查看網頁源代碼

1. Windows Vista/7用戶：點擊Firefox瀏覽器左上角的快捷菜單，在下拉菜單中點擊「Web開發者」→「查看頁面源代碼」。

   Windows XP/Linux用戶：點擊Firefox瀏覽器的菜單「工具」→「Web開發者」→「查看頁面源代碼」。

   鍵盤快捷鍵：Ctrl+U

   

   

2. Firfox瀏覽器會打開網頁源代碼窗口顯示網頁HTML源代碼。

   

3. 如果想要查看其中外聯的CSS源文件，可以用滑鼠點擊源代碼中的CSS外聯文件鏈接網址。

   

4. 不過自帶的之中網頁源文件查看器並不好用，你可以嘗試使用插件Firebug來獲取更好用的網頁開發功能。

   點擊「Web開發者」→「獲取更多工具」。

   

5. 在彈出的Firefox新標籤頁中安裝插件「Firebug」。

   

   

6. 安裝完成以後會在Firefox瀏覽器的右上角工具欄中添加Firebug的圖標，點擊它就可以使用Firebug網頁調試工具了。

   這個工具相當強大哦~

   

使用谷歌Chrome瀏覽器查看網頁源代碼

1. 點擊Chrome瀏覽器右上角的快捷菜單「工具」→「查看源代碼」。

   

2. Chrome瀏覽器會打開一個網頁源代碼顯示窗口，這個源代碼顯示窗口好像也是不那麼友好，一大堆網頁代碼實在不知道如何下手呀。

   

3. 如果你想要更好的網頁源代碼顯示和開發工具，那就點擊Chrome瀏覽器右上角的快捷菜單「工具」→「開發者工具」。

   

4. 看看，不需要下載任何插件，Chrome瀏覽器就已經為你提供了一個相當強大的網頁開發者工具了。

   

5. 使用Chrome瀏覽器開發者工具來查看和調試CSS也相當好用。

   

注意事項

經驗內容僅供參考，如果您需要解決具體問題（尤其在法律、醫學等領域），建議您詳細諮詢相關領域專業人士。舉報作者聲明：本篇經驗系本人依照真實經歷原創，未經許可，謝絕轉載。相關經驗更多

推薦閱讀：