html標記與文件結構

我是這海底的鹹魚發表於2018-11-14
HTML

第一章：html標記與文件結構

一、文字閉合標籤與引用內容的自閉合標籤的區別：
複製程式碼
  1. 非文字內容是通過自閉合標籤顯示的，文字內容是通過閉合標籤顯示的。
  2. 閉合標籤與自閉合標籤的區別在於：閉合標籤包含的是會顯示的實際內容，而自閉合標籤只是給瀏覽器提供一個要 顯示的內容的引用。瀏覽器會在頁面載入的時候，額外向伺服器傳送請求，以取得自閉合標籤的引用。
二、關於title標籤：
複製程式碼

搜尋引擎會給與title標籤很高的權重，而且這些文字也會作為網頁標題出現在搜尋結果列表中，為此千萬不要讓那些‘歡迎光臨我的網頁’ 之類的文字出現在title中。一定要讓這些文字簡潔明瞭，而且包含目標讀者在搜尋你的網頁中的關鍵字。

三、塊級元素和行內元素：
複製程式碼
  1. 塊級元素會相互堆疊在一起，上下排列，每個元素分別佔一行。
  2. 行內元素會相互並列在一行顯示，只有在空間不足的情況下才會換行在下一行顯示。
  3. 提示：無論我們想了解那個html元素，我們首先都要知道它是塊級元素還是行內元素，知道了這一點我們 就會在編寫標記的時候，預想到元素在初始時是如何定位的，這樣才能進一步想好如何用css來重新定位它。
四、塊級元素為什麼會獨佔一行？
複製程式碼
  1. 塊級元素會擴充套件到和父元素同寬。
  2. 在一般的頁面中，所有的父元素都是body，而他的寬度預設和瀏覽器寬度一樣，因此多所有的塊級元素都和 瀏覽器視窗一樣寬了，所以塊級元素會獨佔一行。
五、行內元素為什麼會並排排列？
複製程式碼
  1. 行內元素盒子會“收縮包裹”其內容，並且會盡可能包緊。
六、文件物件模型(DOM)：
複製程式碼
   <body>
        <section>
            <h1>The Document Object Model</h1>
            <p>The page's HTML markup structure defines the DOM.</p>
        </section>
   </body>
複製程式碼

對於上面的程式碼中的DOM層次我們可以做出以下表述：

  1. section是p和h1的父元素，也是直接祖先元素。
  2. h1和p是section的子元素，也是直接子元素。
  3. h1和p是同胞元素，他們有共同的父元素section。
  4. section、h1、p是body的後代元素。
  5. section和body是h1和p的祖先元素。
  6. 我們一定要特別注意直接祖先元素和祖先元素，直接子元素和子元素的區別。

相關文章