html文件結構簡單介紹

antzone發表於2017-04-05
HTML

本章節簡單介紹一下html文件結構，此結構與css控制頁面樣式和javascript操控頁面結構都有著直接的關係。

html文件結構可以看做為一個層級樹，此樹有一個唯一的祖先元素，那就是HTML根元素，然後各元素依次向下排列。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<h1>css教程<em>html結構</em></h1>
<p><acronym title="Cascading Style Sheets，層疊樣式表">CSS</acronym>是一種標記性語言。</p>
<ol>
  <li>CSS的<em>優缺點</em></li>
  <li>CSS的使用方法
    <ul>
      <li>內聯式樣式</li>
      <li>嵌入式樣式表</li>
      <li>外部樣式表</li>
    </ul>
  </li>
  <li><strong>基本</strong>樣式規則</li>
</ol>
<p>CSS通過與HTML的文件結構相對應的<a href="#">選擇器（<em>selector</em>）</a>達到控制頁面表現。</p>
</body>
</html>

上面的程式碼的文件結構圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/05/110042bxuiik6i0tyqoitt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

進一步說明:

css選擇器進行匹配的時候，大多數都是基於元素之間的包含關係，也可以說是"父子"關係。如果A元素包含B元素，那麼A元素就是B元素的父元素，自然，B元素就是A元素的子元素。HTML結構樹中的每一個元素都處於這種父子關係之中。

由"父子"關係我們也可以擴充套件到"祖輩"和"後代"的關係，比如li雖然不是body的直接子元素，但是li元素是body的後代元素。

具有同一個父元素的元素是兄弟關係，比如上圖中的meta和title。

相關文章