通過查看源代碼了解網站的構建方式
當我第一次開始作為一名網頁設計師的職業生涯時，我通過回顧我所崇拜的其他網頁設計師的工作而學到了很多東西。 我並不孤單。 無論您是網絡行業的新手還是經驗豐富的老手， 查看不同網頁的HTML源代碼都是您在職業生涯中可能要做很多次的事情。
對於那些對網頁設計不熟悉的人來說，查看網站的源代碼是查看某些事情是如何完成的最簡單方法之一，以便您可以從該工作中學習並開始在自己的工作中使用某些代碼或技術。 正如今天任何一個網頁設計師，尤其是那些自業界初期就已經出現的網頁設計師那樣，他們告訴你，他們只是通過查看他們看到的網頁來源並且很感興趣通過。 除了閱讀網頁設計書籍或參加專業會議外 ，查看網站的源代碼是初學者學習HTML的好方法。
不僅僅是HTML
有一點需要記住的是， 源文件可能非常複雜（您正在查看的網站越複雜，網站代碼可能越複雜）。 除了構成您正在查看的頁面的HTML結構之外 ，還會有CSS（級聯樣式表）來指定該網站的外觀。 此外，今天的許多網站將包括隨HTML一起提供的腳本文件。
可能會包含多個腳本文件，實際上，每個腳本文件都可以為網站的各個方面提供支持。 坦率地說，一個網站的源代碼可能看起來很壓倒，尤其是如果你是新手的話。 如果您無法立即了解該網站的情況，請不要感到沮喪。 查看HTML源代碼只是此過程的第一步。 借助一點經驗，您將開始更好地理解所有這些部分如何組合在一起來創建您在瀏覽器中看到的網站。 隨著你對代碼更加熟悉，你將能夠從中學到更多東西，這對你來說似乎並不令人望而生畏。
那麼您如何查看網站的源代碼？ 以下是使用Google Chrome瀏覽器執行操作的分步說明。
逐步指導
- 打開Google Chrome網絡瀏覽器 （如果您沒有安裝Google Chrome瀏覽器，可以免費下載）。
- 導航到您想要查看的網頁 。
- 右鍵單擊該頁面，然後查看出現的菜單。 在該菜單中，點擊查看頁面源 。
- 該頁面的源代碼現在將在瀏覽器中顯示為一個新選項卡。
- 或者，您也可以在個人電腦上使用CTRL + U的鍵盤快捷鍵打開一個顯示網站源代碼的窗口。 在Mac上，此快捷鍵是Command + Alt + U。
開發者工具
除了Google Chrome提供的簡單的查看網頁源代碼功能外，您還可以利用其出色的開發人員工具更深入地挖掘網站。 這些工具不僅可以查看HTML，還可以查看用於查看HTML文檔中元素的CSS。
要使用Chrome的開發者工具：
- 打開Google Chrome 。
- 導航到您想要查看的網頁 。
- 點擊瀏覽器窗口右上角有三行的圖標 。
- 從菜單中，將鼠標懸停在“ 更多”工具上 ，然後在出現的菜單中單擊開發人員工具 。
- 這將打開一個窗口，顯示窗格左側的HTML源代碼和右側相關的CSS。
- 或者，如果您右鍵單擊網頁中的某個元素，然後從出現的菜單中選擇“ 檢查 ”，則Chrome的開發人員工具將彈出，您選擇的確切元素將在HTML中突出顯示，並顯示相應的CSS。 如果您想詳細了解某個網站的某個特定部分是如何製作的，這非常有用。
查看源代碼是否合法？
多年來，我有許多新的網頁設計師質疑是否可以接受查看網站的源代碼並將其用於他們的教育並最終用於他們所做的工作。 雖然複製網站的代碼批發並將其作為您自己的網站傳遞給用戶當然是不可接受的，但使用該代碼作為學習的跳板實際上是在該行業中取得了多少進展。
正如我在本文開頭提到的那樣，您今天很難找到一位正在工作的網絡專業人士，他沒有通過查看網站的來源獲知有關信息！ 是的，查看網站的源代碼是合法的。 使用該代碼作為資源來構建類似的東西也很好。 按原樣進行編碼並將其傳遞出去，因為你的工作就是你開始遇到問題的地方。
最終，網絡專業人士彼此學習，並經常改進他們所看到並受其啟發的工作，因此不要猶豫，查看網站的源代碼並將其用作學習工具。