網頁的組成
網頁可以分爲三大部分：HTML、CSS 和 JavaScript
- HTML 相當於骨架
- JavaScript 相當於肌肉
- CSS 相當於皮膚
HTML
HTML 是用來描述網頁的一種語言，全稱爲 Hyper Text Markup Language 超文本標記語言
不同類型的元素通過不同類型的標籤來表示：
- 圖片用
img標籤表示 - 視頻用
video標籤表示 - 段落用
p標籤表示 - 它們之間的佈局又常通過佈局標籤
div嵌套組合而成
CSS
CSS 全稱叫作 Cascading Style Sheets，即層疊樣式表
- “層疊” 指當在 HTML 中引用了數個樣式文件，並且樣式發生衝突時，瀏覽器能依據層疊順序處理。
- “樣式”指網頁中文字大小、顏色、元素間距、排列等格式。
CSS是目前唯一的網頁頁面排版樣式標準
- 在網頁中，一般會統一定義整個網頁的樣式規則，並寫入CSS文件中（其後綴爲css）。
- 在 HTML 中，只需要用 link 標籤即可引入寫好的 CSS文件。
JavaScript
JavaScript 簡稱JS，是一種腳本語言
在網頁裏看到的一些交互和動畫效果
如下載進度條、提示框、輪播圖等，通常就是利用 JavaScript
JavaScript 使得用戶與信息之間不只是一種瀏覽與顯示的關係，而是實現了一種實時、動態、交互的頁面功能。
JavaScript 通常是以單獨的文件形式加載的，後綴爲 js，在 HTML 中通過 script 標籤即可引入。
- HTML 定義網頁的內容和結構
- CSS 描述網頁的佈局
- JavaScript 定義網頁的行爲
網頁的結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h2 class="title">Hello World</h2>
<p class="text">Hello, this is a paragraph.</p>
</div>
</div>
</body>
</html>
- head 標籤內定義一些頁面的配置和引用。
- title 標籤則定義網頁的標題，會顯示在網頁的選項卡中，不會顯示在正文中。
- body 標籤內是在網頁正文中顯示的內容。
- div 標籤定義網頁中的區塊。
- h2 標籤代表一個二級標題。
代碼保存後，在瀏覽器中打開該文件：
一個網頁的標準形式：
- html 標籤內嵌套 head 和 body 標籤
- head 內定義網頁的配置和引用
- body 內定義網頁的正文
節點樹及節點間的關係
在 HTML 中，所有標籤定義的內容都是節點，它們構成了一個 HTML DOM 樹
DOM 是 W3C（萬維網聯盟）的標準，其英文全稱Document Object Model，即文檔對象模型。
訪問 HTML 和 XML 文檔的標準：
W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
W3C DOM 標準被分爲 3 個不同的部分:
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
根據W3C的HTML DOM標準，HTML文檔中的所有內容都是節點：
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱爲節點樹。
通過 HTML DOM，樹中的所有節點均可通過 JavaScript 訪問所有 HTML 節點元素均可被修改也可以被創建或刪除。
節點樹中的節點彼此擁有層級關係
常用父（parent） 、子（child）和兄弟（sibling）等術語描述這些關係。
父節點擁有子節點，同級的子節點被稱爲兄弟節點。
頂端節點稱爲根（root）。
除根節點外，每個節點都有父節點，同時可擁有任意數量的子節點或兄弟節點。
選擇器
在 CSS 中，我們使用 CSS 選擇器來定位節點。
<div id="container">
表示爲 #container
其中 # 開頭代表選擇 id，其後緊跟 id 的名稱。
可使用 wrapper 以點 “.”，開頭代表選擇 class，其後緊跟 class 的名稱。
另外還可使用根據標籤名篩選：
例如想選擇二級標題，直接用 h2 即可。
最常用的3種表示：
根據 id、class、標籤名篩選
CSS選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開可以代表嵌套關係。
如 #container.wrapper p
- 代表先選擇 id 爲 container 的節點
- 然後選中其內部的 class爲wrapper 的節點
- 然後再進一步選中其內部的 p 節點
不加空格，則代表並列關係
如 div#container.wrapper p.text
- 代表先選擇 id 爲 container 的 div 節點
- 然後選中其內部的 class 爲 wrapper 的節點
- 再進一步選中其內部的 class 爲 text 的 p 節點
Reference：https://kaiwu.lagou.com/course/courseInfo.htm?courseId=46#/detail/pc?id=1663