Chrome DevTools for Beginners:開始使用HTML和DOM

這是一系列教程中的第一篇,它們將教您Web開發的基礎知識。您還將了解一組名為Chrome DevTools的Web開發人員工具,可以提高您的工作效率。

在這個特定的教程中,您將了解HTML和DOM。HTML是Web開發的核心技術之一。它是控制網頁結構和內容的語言。DOM也與網頁的結構和內容有關,但您稍后會對此有所了解。

目標

您將通過實際構建自己的網站來學習Web開發。當您完成DevTools for Beginners系列中的所有教程時,您完成的站點將如圖1所示。

完成的網站。
圖1。完成的網站

在本教程結束時,您將了解:

  • HTML和DOM如何創建您在網頁上看到的內容。
  • Chrome DevTools如何幫助您嘗試HTML和DOM更改。
  • HTML和DOM之間的區別。

你還有一個真正的網站!您可以使用此站點來托管您的簡歷或博客。

先決條件

在嘗試本教程之前,請完成以下先決條件:

  • 如果您不熟悉HTML,請閱讀HTML?入門。
  • 下載Google Chrome網絡瀏覽器。本教程使用一組內置于Google Chrome中的Web開發工具,稱為Chrome DevTools。

設置你的代碼

您將在名為Glitch的在線代碼編輯器中構建您的站點。

  1. 打開源代碼。在本教程中,此選項卡將被稱為編輯器選項卡。
    編輯器選項卡。
    圖2。編輯器選項卡
  2. 單擊dfb1?!绊椖窟x項”菜單將在左上角打開。
    “項目選項”菜單。
    圖3?!绊椖窟x項”菜單
  3. 單擊“重新混音”。Glitch會創建項目的副本,您可以編輯該項目并隨機為項目生成新名稱。內容與以前相同。
    重新混合的項目。
    圖4。重新混合的項目
  4. 如果您打算完成本系列的下一個教程,請單擊“?登錄”并使用您的GitHub或Facebook帳戶登錄Glitch。如果您未登錄,則在關閉編輯選項卡后,您將無法編輯此項目。
  5. 點擊查看直播。將打開一個新選項卡,顯示實時頁面。在本教程中,此選項卡將被稱為實時選項卡。
    實時標簽。
    圖5。實時標簽

添加內容

你的網站很空。請按照以下步驟添加一些內容!

  1. 編輯器選項卡中,替換<!-- You're "About Me" will go here. -->?為<h1>About Me</h1>。
    ... 
    <body> <p> 您的網站!</ p> <main> <h1> 關于我</ h1> </ main> ? ...
    ? 
    ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖6。新代碼在編輯器選項卡中突出顯示
  2. 實時標簽中查看您的更改。文本About Me在頁面上可見。它比文本的其余部分大,因為<h1>元素代表一個部分標題。您的Web瀏覽器會自動為較大字體的標題設置樣式。
    新標題在實時標簽中可見。
    圖7。新標題在實時標簽中可見
  3. 返回編輯器選項卡,<p>I am learning HTML. Recent accomplishments:</p>在下面的行中插入<h1>About Me</h1>。
    ... 
    <body> <p> 您的網站!</ p> <main> <h1> 關于我</ h1> <p> 我正在學習網頁開發。最近的成就:</ p> </ main> ? ...
    ? 
    ? 
    ? ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖8。新代碼在編輯器選項卡中突出顯示
  4. 實時標簽中查看您的更改。
  5. 返回編輯器選項卡,添加您的成就列表:
    ... 
    ? <p> 我正在學習網絡開發。最近的成就:</ p> <ul> <li> 了解如何在Glitch中設置我的代碼。</ li> <li> 向我的HTML添加了內容。</ li> <li> TODO:了解如何使用Chrome DevTools試驗內容更改。</ li> <li> TODO:了解HTML和DOM之間的區別。</ li> </ ul> ......
    ? 
    ? ? 
    ? ? 
    ? ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖4。新代碼在編輯器選項卡中突出顯示
  6. 再次,返回實時選項卡以確保新內容正確顯示。
    新列表在實時選項卡中可見。
    圖4。新列表在實時選項卡中可見

嘗試Chrome DevTools中的內容更改

如果您正在開發包含大量HTML的大頁面,您可以想象在編輯器選項卡和實時選項卡之間來回數百次以查看更改可能有點單調乏味,特別是如果您不知道究竟要放在頁面上的是什么。Chrome DevTools可以幫助您體驗內容更改,而無需離開實時標簽。

了解HTML和DOM之間的區別

在您開始從Chrome DevTools編輯內容之前,了解HTML和DOM之間的區別很有幫助。學習的最佳方式是通過示例:

  1. 轉到實時選項卡。在頁面底部,您會看到文字A new element!?!。
    在頁面底部的文字'一個新的元素???!' 看得見。
    圖9。在頁面底部A new element!?!可以看到?文本
  2. 返回編輯器選項卡,嘗試查找此文本index.html。它不存在!
    在index.html中找不到神秘文本。
    圖10。神秘的文字A new element!?!無處可尋index.html
  3. 返回實時選項卡,單擊鼠標右鍵A new element!?!,然后選擇“?檢查”。
    檢查一些文字。
    圖11。檢查一些文字

    DevTools會在您的頁面旁邊打開。<div>A new element!?!</div>突出顯示為藍色。雖然DevTools中的這個結構看起來像你的HTML,但實際上它是DOM樹。

    DevTools在頁面旁邊打開。
    圖12。DevTools在頁面旁邊打開

當您的頁面加載時,瀏覽器會使用您的HTML來創建頁面的初始內容。DOM表示頁面的當前內容,可以隨時間變化。<div>A new element!?!</div由于<script src="new.js"></script>HTML底部的標記,神秘內容會添加到您的網頁中?。此標記會導致某些JavaScript代碼運行。您將在以后的教程中了解有關JavaScript的更多信息,但現在將其視為可以更改頁面內容的編程語言。在這種特殊情況下,JavaScript代碼會添加<div>A new element!?!</div>到您的頁面中。這就是為什么這個神秘文本在您的實際頁面上可見,而不是在您的HTML中。

編輯DOM

如果您想在不離開實時標簽的情況下快速嘗試內容更改,請嘗試使用DevTools。

  1. 在DevTools中,右鍵單擊Your site!并選擇“?編輯為HTML”。
    將節點編輯為HTML。
    圖13。將節點編輯為HTML
  2. 替換<p>Your site!</p>為下面的代碼。
    <header> <p> <b> 歡迎來到我的網站!</ b> </ p> <button> 下載我的簡歷</ button> </ header>
    ? 
    ? 
    
    將節點編輯為HTML。
    圖14。將節點編輯為HTML
  3. Command+?Enter(Mac)或Control+?Enter?(Windows,Linux,Chrome OS)保存更改,或單擊框外部。您的更改會自動顯示在您網頁的實時視圖中。該文本Your site!?已被新內容替換。
    新內容會立即顯示在頁面上。
    圖15。新內容會立即顯示在頁面上

此工作流程僅適用于試驗內容更改。如果您重新加載頁面或關閉選項卡,您的更改將永遠消失。如果您正在使用此工作流程并且想要保存更改,則需要手動將這些更改復制到HTML。

接下來的幾節將向您展示更多可以從DOM樹更改內容的方法。

重新排序節點

您還可以更改DOM節點的順序。例如,在您的網頁上,導航菜單位于底部附近。將其移至頂部:

  1. <nav>在DevTools?的DOM樹中查找節點。
    nav節點在DevTools中以藍色突出顯示。
    圖16。nav節點在DevTools中以藍色突出顯示
  2. <nav>節點拖到頂部,這樣它就是<body>節點下面的第一個子節點。
    將導航節點拖到頂部。
    圖17。將導航節點拖到頂部

    <nav>節點現在顯示在頁面頂部。

    導航節點位于頁面頂部。
    圖18。導航節點位于頁面頂部

刪除節點

您還可以從DOM樹中刪除節點。

  1. DOM樹中,單擊<div>A new element!?!</div>。DevTools突出顯示藍色節點。
    選擇要刪除的節點。
    圖19。選擇要刪除的節點
  2. Delete鍵盤上的鍵。該<div>A new element!?!</div>節點將從DOM樹中刪除。
    該節點已被刪除。
    圖20。該節點已被刪除

復制您的更改

你幾乎完成。您已在DevTools中對頁面進行了一些更改,但它們尚未保存到您的源代碼中。

  1. 重新加載您的實時標簽。您在DOM樹中所做的更改將消失。特別是,文本Your site!返回頁面頂部,文本A new element!?!返回到底部。
    你所做的改變已經消失了。
    圖21。你所做的改變已經消失了