怎樣使用瀏覽器查看網頁HTML和CSS原始碼

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

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

工具/原料

IE9瀏覽器

Firefox火狐瀏覽器

谷歌Chrome瀏覽器

使用IE9瀏覽器查看網頁原始碼

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

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

IE瀏覽器會自動打開一個新的窗口來顯示網頁原始碼。

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

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

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

使用Firefox火狐瀏覽器查看網頁原始碼

Windows Vista/7用戶:點擊Firefox瀏覽器左上角的快捷菜單,在下拉菜單中點擊「Web開發者」→「查看頁面原始碼」。

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

鍵盤快捷鍵:Ctrl+U

Firfox瀏覽器會打開網頁原始碼窗口顯示網頁HTML原始碼。

如果想要查看其中外聯的CSS源文件,可以用滑鼠點擊原始碼中的CSS外聯文件連結網址。

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

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

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

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

這個工具相當強大哦~

使用谷歌Chrome瀏覽器查看網頁原始碼

點擊Chrome瀏覽器右上角的快捷菜單「工具」→「查看原始碼」。

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

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

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

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

注意事項

使用任何瀏覽器都能夠滿足網頁開發需要,你可以根據需要選用。

Firefox和Chrome瀏覽器為網頁開發者提供了更多的擴展插件供選擇。

相關文章

  1. 瀏覽器查看網頁源碼的幾種方法

    對於網站設計初學來說,查看一些好的網站的源碼是十分有必要的.在這個過程中沒學到不少東西.遇到忘記的東西,在也時常能網頁源碼中快速找到.下面我介紹幾種查看網頁源碼的方法: 工具/原料 IE瀏覽器 方法/ ...
  2. 手機瀏覽器查看網頁怎樣才能快速?

    經常上網的朋友都知道手機網絡慢,尤其是在行動網路下,使用手機瀏覽網頁看個新聞,手機卡頓圖片出不來無法往下看,讓網友們苦不堪言.其實設置一下某些選項,手機上網就會稍微快點,查看網頁的時候也不至於等得不耐 ...
  3. 怎樣用ie瀏覽器查看網頁原始碼?

    有時,我們在網頁上看到一個很酷的特效,我們不知道怎麼做的,這時我們可以通過原始碼找到,然後學習.下面教大家怎樣用ie瀏覽器查看網頁原始碼? 工具/原料 ie瀏覽器 方法/步驟 用ie瀏覽器打開要查看源 ...
  4. 如何使用chrome瀏覽器查看網頁布局

    看到好的網頁布局,有時候想知道這個網頁的css,以下小編就介紹如何使用chrome瀏覽器查看網頁的css,以網站為例 工具/原料 百度,chrome瀏覽器 方法/步驟 首先使用chrome瀏覽器打開網 ...
  5. 怎樣使用瀏覽器查看網頁原始碼?

    網頁都是很多的代碼編寫而成的,很多網頁設計的學習者都很喜歡將網上的頁面的代碼複製下來學習借鑑.那要怎麼查看呢? 查看網頁的HTML和CSS原始碼其實很簡單,本文分別講解使用最為常見的三種瀏覽器:IE9 ...
  6. 如何使用瀏覽器查看網頁的代碼。

    分析網站的代碼和結構.可以直接用 一些瀏覽器自帶的功能. 方法/步驟 對於ie瀏覽器. 點擊ie右上角的螺母圖標,選擇開發者選項. 在下面我們可以看到html 控制台 CSS 腳本. 對於谷歌瀏覽器, ...
  7. 網頁製作基礎知識:[1]瀏覽器查看網頁原始碼

    幾乎每個瀏覽器都可以查看打開網頁的原始碼如何,其中最常用與網頁開發的瀏覽器是 Firefox,谷歌的chrome也很受開發者青睞.以這兩個瀏覽器為例,說說查看網頁原始碼的方法. 工具/原料 Firef ...
  8. 如何用火狐瀏覽器查看網頁元素

    如何用瀏覽器查看網頁中的元素.查看網站結構布局. 方法/步驟 以火狐瀏覽器為例: 1.打開瀏覽器瀏覽網站. 2.火狐瀏覽器要下載firebug(ie.360瀏覽器不用.) 3.按F12即出現. 4.一 ...
  9. 怎麼利用瀏覽器查看網頁原始碼中連結地址

    在以前我們想要查看一個網站網頁原始碼中的圖片地址或下載地址,通過瀏覽器很難實現,現在卻可以使用的瀏覽器的開發人員工具能很方便的查看一些網站的網頁原始碼,當然除了一些加密的網站普通的方法還是不行的. 工 ...
  10. 怎樣通過fire bug查看網頁元素的css樣式

    作為一個前端開發人員,火狐瀏覽器的fire bug插件我已經能非常熟練的應用了,在調試頁面的時候,能熟練的使用fire bug查看網頁元素的css樣式對我們調整頁面格式是很有幫助的. 方法/步驟 首先 ...
  11. 微信聊天時,怎麼不影響用微信瀏覽器查看網頁

    微信聊天時,怎麼不影響用微信瀏覽器查看網頁?在微信瀏覽器中瀏覽網頁時,點擊新消息怎麼不退出網頁,不影響網頁瀏覽?如果我們正在用微信瀏覽器瀏覽網頁,這時突然有要緊的事要找人聊天,怎麼能保證返回後繼網頁的 ...
  12. 瀏覽器如何查看網頁原始碼

    好多初學程式設計師或者網頁設計員或者是站長等經常回模仿別人的網頁,看別人網頁是怎麼寫的,這裡呢就需要查看別人網頁的原始碼. 工具/原料 IE瀏覽器 谷歌瀏覽器 火狐瀏覽器 IE瀏覽器 打開一個網頁之後,右 ...
  13. 如何直接在瀏覽器上製作網頁和編輯css

    如何直接在瀏覽器上製作網頁和編輯css 工具/原料 百度瀏覽器 插件 方法/步驟 打開瀏覽器的插件中心 搜尋插件 輸入web並且安裝 打開web的控制面板 點擊css編輯 然後出現下圖,就可以在這裡在 ...
  14. 瀏覽器怎麼查看網頁原始碼?

    介紹查看網頁原始碼的方法. 工具/原料 世界之窗瀏覽器 方法/步驟 在百度中輸入"世界之窗". 選擇"普通下載". 安裝完成後,打開世界之窗. 打開一個網頁. ...
  15. 藍光瀏覽器查看歷史記錄恢復誤關網頁

    我們在使用藍光瀏覽器過程中,有時候會不小心把自己想要瀏覽或是重要的網頁關閉掉,那麼我們想要快捷的重新恢復誤關的網頁,有哪些方法呢?請看下面小編為大家提供的幾種方法. 方法說明 在藍光瀏覽器中,我們若是 ...
  16. 如何進行UC瀏覽器的網頁書籤使用和查看?

    在用慣了IE瀏覽器換其他瀏覽器進行網頁收藏時,總是怪怪的,沒有IE瀏覽器那麼上手,小編也是在UC瀏覽器中找了找,點了點,才算上手,下面分享給大家,希望對大家有幫助! 工具/原料 電腦 UC瀏覽器 方法 ...
  17. 使用Chrome開發者工具方便查看網頁層CSS代碼

    Chrome瀏覽器是目前非常流行的一款瀏覽器,今天在這裡分享使用Chrome開發者工具方便查看網頁層CSS代碼的經驗 工具/原料 Chrome 方法/步驟 打開要測試的網頁,點擊地址欄左側的" ...
  18. 瀏覽器如何查看網頁關鍵詞

    很多剛接觸到網站的站長需要查看競爭對手的網站都做了哪些關鍵詞,那麼如何才能知道對方的網站做的什麼關鍵詞呢?這裡呢就需要查看競爭對手的網站頁面的原始碼. 工具/原料 百度瀏覽器,谷歌瀏覽器 方法/步驟 ...
  19. 手機瀏覽器怎麼設置省流量查看網頁

    現在用手機看新聞,往往會消耗大量的流量.其實新聞里的字體占用的流量是很小的,絕大部分流量都耗費在圖片上面,我們為了省流量,可以關閉圖片顯示.本文以QQ瀏覽器為例介紹方法 工具/原料 智慧型手機 QQ瀏覽 ...
  20. 火狐瀏覽器Firefox查看網頁源碼

    現在每天都能接觸到很多網頁,相信一定有人對它是如何實現的一定很想了解,下面我就帶著大家用Firefox自帶的調試器講解給大家如何用Firefox調試網頁,會講下HTML,CSS,JS,網絡. 工具/原 ...