html css js（這一篇就夠了）

小程xy發表於2024-09-23

html

HTML（超文字標記語言，HyperText Markup Language）是構建網頁的基礎語言。它使用標籤（Tags）和屬性（Attributes）來定義網頁的結構和內容顯示。下面將從HTML的結構、標籤、屬性等方面進行詳細講解。

一、HTML的基本結構

一個標準的HTML文件有明確的結構，由文件宣告、頭部、主體等部分組成。它定義了網頁的骨架和各元素的佈局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>頁面標題</title>
</head>
<body>
    <!-- 頁面內容寫在這裡 -->
</body>
</html>

1.1 文件宣告 (`<!DOCTYPE html>`)

宣告文件型別，告訴瀏覽器該檔案是HTML5文件，這有助於瀏覽器解析和渲染網頁內容。

1.2 `<html>` 標籤

定義整個HTML文件的根元素，所有的HTML元素必須包含在 <html> 標籤內。
lang 屬性指定網頁的語言，便於搜尋引擎最佳化和輔助技術的使用，如 lang="en" 表示英語，lang="zh" 表示中文。

1.3 `<head>` 標籤

包含頁面的後設資料（metadata），不會顯示在網頁上，但對頁面的呈現和搜尋引擎最佳化至關重要。
常見的元素包括：
- <meta charset="UTF-8">：設定頁面字元編碼，UTF-8能覆蓋全球大部分語言字元。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：最佳化移動端瀏覽體驗。
- <title>：定義網頁的標題，會顯示在瀏覽器標籤上。

1.4 `<body>` 標籤

包含網頁的可見內容，所有的文字、圖片、影片、表格、表單等都在 <body> 中定義。

二、HTML標籤（Tags）

HTML標籤用來表示不同的元素，每個標籤通常成對出現，包含開始標籤和結束標籤，中間是元素內容。部分標籤是自閉合的，不需要結束標籤。

2.1 常見的HTML標籤

文字標籤：
- <h1> - <h6>：表示標題，<h1> 是最高階別標題，<h6> 是最低階別標題。
- <p>：表示段落。
- <br>：換行標籤，不需要結束標籤。
- <hr>：水平線，表示主題的分隔。
列表標籤：
- <ul>：無序列表，用於建立帶有圓點的列表項。
- <ol>：有序列表，用於建立帶編號的列表項。
- <li>：列表項，用於在無序或有序列表中定義每一項。
連結和媒體標籤：
- <a>：超連結標籤，用於在網頁中建立可點選的連結。常用的屬性有 href（連結的目標地址）。
- <img>：影像標籤，用於在網頁中嵌入圖片。常用屬性包括 src（圖片路徑）和 alt（圖片無法載入時顯示的替代文字）。
- <video> 和 <audio>：用於在網頁中嵌入影片和音訊。
表格標籤：
- <table>：定義一個表格。
- <tr>：定義表格中的一行。
- <td>：定義單元格（表格資料）。
- <th>：定義表格頭部單元格（表頭）。
表單標籤：
- <form>：定義表單，用於提交使用者輸入。
- <input>：定義各種型別的輸入欄位，比如文字框、單選按鈕、核取方塊等。
- <button>：定義可點選的按鈕。
- <select> 和 <option>：定義下拉選單。

三、HTML屬性（Attributes）

HTML屬性用於為HTML標籤提供額外的資訊。它們位於標籤的開始部分，通常是鍵值對形式，如：<tag attribute="value">。

3.1 通用屬性

這些屬性可以應用於大多數HTML元素：

id：定義元素的唯一識別符號。例如：
```
<div id="header">這是頭部</div>
```
class：為元素指定一個或多個類名，常用於CSS或JavaScript選擇器。例如：
```
<p class="text-bold">加粗文字</p>
```

style：定義元素的內聯樣式。例子：

<p style="color: red;">這是紅色的文字</p>

3.2 特定標籤屬性

<a> 標籤的屬性：
- href：指定連結的目標URL地址。
- target：指定連結如何在瀏覽器中開啟。值 _blank 會在新視窗或新標籤頁中開啟連結。
- rel：定義連結與當前文件的關係，常見的有 noopener、nofollow 等。
<img> 標籤的屬性：
- src：指定圖片的URL地址。
- alt：當圖片載入失敗時顯示的文字，有助於搜尋引擎最佳化和輔助技術（如螢幕閱讀器）。
- width 和 height：定義圖片的顯示寬度和高度，可以使用畫素或百分比。
<input> 標籤的屬性：
- type：指定輸入欄位的型別，比如文字（text）、密碼（password）、按鈕（button）等。
- placeholder：在輸入欄位為空時顯示的提示文字。
- value：定義預設值。
- name：表單提交時的欄位名稱。

四、HTML中的其他重要概念

4.1 HTML註釋

註釋不會在瀏覽器中顯示，主要用於給開發者新增說明或備註。HTML註釋使用以下格式：

<!-- 這是註釋 -->

4.2 HTML的語義化

語義化HTML意味著使用具有明確意義的標籤來描述內容，這有助於提高網頁的可訪問性和SEO效果。常見的語義化標籤包括：

<header>：定義頁面或區塊的頭部。
<nav>：定義導航連結的集合。
<main>：定義文件的主要內容區域。
<section>：定義一個獨立的內容區塊。
<article>：定義一個獨立的內容片段，比如一篇文章或部落格。
<footer>：定義頁面或區塊的底部。

4.3 塊級元素與行內元素

塊級元素：佔據一行的全部寬度，並會在前後產生換行。常見的塊級元素有 <div>、<p>、<h1> 等。
行內元素：僅佔據其內容的寬度，不會產生換行。常見的行內元素有 <span>、<a>、<img> 等。

五、HTML5的新特性

HTML5引入了許多新的標籤和API，提升了HTML的功能。

5.1 新的語義標籤

<article>：獨立的文章或內容塊。
<aside>：定義側邊欄內容，通常與頁面的主要內容相關聯。
<figure> 和 <figcaption>：用於包含影像、圖表或表格及其標題。

5.2 媒體標籤

HTML5支援直接嵌入多媒體內容，而無需依賴第三方外掛：

<audio>：用於嵌入音訊內容。
<video>：用於嵌入影片內容。

5.3 新的表單輸入型別

HTML5表單中新增了一些型別，如 email、url、number、date、range 等，簡化了表單的驗證和使用者輸入。

css

CSS（層疊樣式表，Cascading Style Sheets）是一種用於描述HTML或XML文件外觀的樣式表語言。它控制頁面的佈局、顏色、字型等，使網頁的內容和樣式分離，從而提高頁面的可維護性和靈活性。

一、CSS的基本概念

1.1 CSS語法結構

CSS規則由選擇器和宣告組成，宣告部分包含屬性和值。基礎語法格式如下：

選擇器 {
    屬性: 值;
    屬性: 值;
}

例如：

h1 {
    color: blue;
    font-size: 24px;
}

該CSS規則表示所有 <h1> 元素的文字顏色設定為藍色，字型大小設定為24畫素。

1.2 CSS的作用方式

CSS可以透過三種方式應用到HTML中：

內聯樣式：直接在HTML元素的 style 屬性中定義樣式。
```
<p style="color: red;">這是紅色的文字</p>
```
內部樣式表：在HTML的 <head> 標籤中透過 <style> 標籤定義樣式。
```
<head>
    <style>
        p { color: blue; }
    </style>
</head>
```
外部樣式表：透過外部的CSS檔案引入樣式，通常使用 <link> 標籤將CSS檔案連結到HTML文件中。
```
<head>
    <link rel="stylesheet" href="styles.css">
</head>
```

二、CSS選擇器

選擇器用於選擇HTML元素並應用相應的樣式。常見的CSS選擇器有以下幾種：

2.1 基礎選擇器

元素選擇器：選擇所有指定型別的HTML元素。例如，p 選擇所有段落：
```
p { color: black; }
```
類選擇器：選擇具有特定類名的元素，使用 . 表示。例如，選擇所有 class="intro" 的元素：
```
.intro { font-size: 20px; }
```
ID選擇器：選擇具有特定ID的元素，使用 # 表示。例如，選擇ID為 header 的元素：
```
#header { background-color: grey; }
```
萬用字元選擇器：選擇所有HTML元素，使用 * 表示。例如，設定所有元素的字型：
```
* { font-family: Arial, sans-serif; }
```

2.2 組合選擇器

後代選擇器：選擇某個元素內部的所有指定後代元素。例如，選擇所有位於 div 元素內部的 p 元素：
```
div p { color: green; }
```
子選擇器：選擇父元素的直接子元素，使用 > 表示。例如，選擇所有 div 的直接子元素 p：
```
div > p { color: blue; }
```
並集選擇器：選擇多個不同元素，使用逗號 , 分隔。例如，選擇所有 h1 和 p 元素：
```
h1, p { margin: 10px; }
```

2.3 偽類選擇器

偽類用於選擇元素的特定狀態，如滑鼠懸停、已訪問連結等。

:hover：滑鼠懸停時應用樣式。例如，將連結在懸停時變為紅色：
```
a:hover { color: red; }
```
:focus：選中獲得焦點的元素。
```
input:focus {
  border-color: blue;
}
```

:active：選中被點選的元素。

button:active {
  background-color: yellow;
}

:nth-child()：選擇元素的特定子元素。例如，選擇列表中的第二個 li 元素：
```
li:nth-child(2) { color: blue; }
```

2.4.屬性選擇器

[attribute]：選中具有指定屬性的元素。
```
[disabled] {
  opacity: 0.5;
}
```

[attribute=value]：選中具有指定屬性和值的元素。

[type="submit"] {
  background-color: blue;
  color: white;
}

[attribute^=value]：選中屬性值以指定值開頭的元素。
```
[href^="https"] {
  color: green;
}
```
[attribute$=value]：選中屬性值以指定值結尾的元素。
```
[src$=".jpg"] {
  border: 1px solid gray;
}
```
[attribute*=value]：選中屬性值包含指定值的元素。
```
[class*="button"] {
  padding: 10px;
}
```

三、CSS屬性

CSS屬性用於定義HTML元素的樣式，它們按照不同類別分為佈局、文字、顏色、背景等。

3.1 文字相關屬性

color：設定文字的顏色。可以使用顏色名稱、十六進位制、RGB或HSL值。
```
p { color: #ff0000; } /* 紅色文字 */
```
font-size：設定文字的大小，單位可以是 px、em、rem、百分比等。
```
p { font-size: 16px; }
```
font-family：設定字型族，通常會列出多個字型供瀏覽器選擇。
```
p { font-family: Arial, sans-serif; }
```
text-align：設定文字的對齊方式，可以是 left、right、center 或 justify。
```
p { text-align: center; }
```
line-height：設定文字的行高，常用於調整段落內文字的間距。
```
p { line-height: 1.5; }
```

3.2 顏色和背景屬性

background-color：設定元素的背景顏色。
```
div { background-color: lightblue; }
```
background-image：設定元素的背景圖片，圖片可以是本地路徑或網路地址。
```
div { background-image: url('background.jpg'); }
```
opacity：設定元素的不透明度，取值範圍是0到1。
```
div { opacity: 0.8; }
```

3.3 佈局相關屬性

width 和 height：定義元素的寬度和高度，單位可以是 px、百分比等。
```
div { width: 200px; height: 100px; }
```
margin：設定元素的外邊距，用來控制元素與周圍元素的距離。可以單獨設定四個方向的邊距。
```
p { margin: 20px; }
```
padding：設定元素的內邊距，用來控制元素內容與其邊框之間的距離。
```
div { padding: 15px; }
```
border：設定元素的邊框，可以設定邊框的寬度、樣式和顏色。
```
div { border: 1px solid black; }
```

3.4 定位屬性

CSS提供了幾種不同的定位方式來控制元素的位置。

position：常用的取值包括 static（預設）、relative（相對）、absolute（絕對）、fixed（固定）、sticky（粘性）。
```
div { position: absolute; top: 50px; left: 100px; }
```
z-index：控制元素的堆疊順序，數值越大，元素越靠前。（對 static 屬性的不起作用）
```
div { z-index: 10; }
```

3.5 顯示與隱藏屬性

display：控制元素的顯示方式，常見的取值有 block、inline、inline-block、none。
```
p { display: block; }
```
visibility：控制元素的可見性，取值包括 visible 和 hidden。隱藏元素後，它仍佔據空間。
```
div { visibility: hidden; }
```

四、CSS盒模型（Box Model）

盒模型是CSS佈局的基礎，它描述了一個HTML元素在頁面中佔據的空間，包括以下幾部分：

內容（content）：元素的實際內容區域。
內邊距（padding）：內容與邊框之間的距離。
邊框（border）：元素的邊界。
外邊距（margin）：元素與外部元素之間的距離。

盒模型的總寬度和高度計算公式：

元素的總寬度 = content width + padding + border + margin
元素的總高度 = content height + padding + border + margin

`box-sizing` 屬性

CSS 的 box-sizing 屬性允許你控制盒模型的計算方式，有兩種常用的值：

content-box（預設值）：
- 預設情況下，box-sizing 屬性的值為 content-box。在這種模式下，width 和 height 只應用於內容區域，內邊距、邊框和外邊距會額外增加到元素的總尺寸中。
- 計算公式：總寬度 = width + padding + border + margin。
border-box：
- 在這種模式下，width 和 height 包括內容區域、內邊距和邊框。因此，總寬度和總高度不會受到內邊距和邊框的影響。
- 計算公式：總寬度 = width（包含內容、內邊距和邊框） + margin。
- 使用 border-box 可以更容易地控制元素的實際尺寸，特別是在需要精確對齊和佈局時。

示例：

/* 預設 box-sizing: content-box; */
.box-content-box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

/* 使用 box-sizing: border-box; */
.box-border-box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

在 .box-border-box 類中，width 100px 包括了內容、內邊距和邊框的寬度，因此元素的實際內容區域可能小於 100px。對於 .box-content-box，width 100px 只是內容區域的寬度，內邊距和邊框會額外增加到總寬度中。

五、CSS佈局

5.1 浮動佈局（float）

float 用於將元素浮動到容器的左側或右側，並允許文字或其他元素圍繞它佈局。

img { float: left; margin-right: 10px; }

5.2 清除浮動（clear）

浮動元素可能會影響其父元素和相鄰元素的佈局。為了解決這種問題，使用 clear 屬性來取消浮動的影響。常見的取值為 left、right 或 both，分別清除左、右或兩側的浮動。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

這個 .clearfix 類通常用在浮動元素的父元素上，以確保容器能夠正確包裹浮動內容。

5.3 Flexbox佈局

Flexbox（彈性盒子模型）是CSS中用於建立複雜佈局的一種強大工具。它能輕鬆控制元素的對齊、排列和分配空白空間。

常見屬性：

display: flex;：將容器設為Flex容器。
flex-direction：定義主軸方向，可以設定為 row（水平）、column（垂直）。
flex-wrap：定義是否允許元素換行，取值有 nowrap、wrap、wrap-reverse。
flex-flow:: 是 flex-direction 和 flex-wrap 的簡寫。預設值為：row nowrap。

`justify-content`

作用：用於控制在主軸（通常是水平軸）上，Flex 容器內專案的對齊和分佈方式。
取值：
- flex-start：將專案對齊到主軸的起始位置（預設值）。
- flex-end：將專案對齊到主軸的結束位置。
- center：將專案在主軸上居中對齊。
- space-between：在專案之間平均分配空間，第一個專案在主軸起始位置，最後一個專案在主軸結束位置。
- space-around：在專案之間平均分配空間，但兩端的空間也會分配到專案兩側。
- space-evenly：在專案之間以及專案兩端分配相等的空間。

示例：

.container {
  display: flex;
  justify-content: center; /* 將專案在主軸上居中對齊 */
}

`align-items`

作用：用於控制在交叉軸（通常是垂直軸）上，Flex 容器內專案的對齊方式。
取值：
- stretch：預設值，使專案在交叉軸方向上拉伸以填充容器。
- flex-start：將專案對齊到交叉軸的起始位置。
- flex-end：將專案對齊到交叉軸的結束位置。
- center：將專案在交叉軸上居中對齊。
- baseline：將專案的基線對齊。

示例：

.container {
  display: flex;
  align-items: center; /* 將專案在交叉軸上居中對齊 */
}

`align-content`

作用：用於控制在交叉軸上，Flex 容器中所有行的對齊方式（適用於多行的 Flex 佈局）。
取值：
- flex-start：將所有行對齊到交叉軸的起始位置。
- flex-end：將所有行對齊到交叉軸的結束位置。
- center：將所有行在交叉軸上居中對齊。
- space-between：在行之間平均分配空間，第一個行在交叉軸起始位置，最後一個行在交叉軸結束位置。
- space-around：在行之間平均分配空間，但行兩端的空間也會分配到行的兩側。
- space-evenly：在所有行之間以及行兩端分配相等的空間。
- stretch：拉伸行以填充容器的交叉軸空間。

示例：

.container {
  display: flex;
  flex-wrap: wrap; /* 允許換行 */
  align-content: space-around; /* 在交叉軸上均勻分配行間的空間 */
}

詳細屬性參考文章

5.4 CSS Grid佈局

CSS Grid是另一個用於建立複雜佈局的強大工具，允許我們透過行和列來定義元素的佈局結構。

常見屬性：

display: grid;：將容器設為Grid容器。
grid-template-columns 和 grid-template-rows：定義網格的列和行。例如：
```
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100px 200px;
}
```
這表示建立兩列和兩行的網格，第一列的寬度是第二列的一半。
grid-column 和 grid-row：用於定義元素在網格中的位置。

例如：

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

這段CSS程式碼將一個元素跨越兩列並佔據第一行。

`justify-items`

作用：用於控制 Grid 容器內每個專案在其單元格內的對齊方式，沿著水平軸。
取值：
- start：將專案對齊到單元格的起始位置。
- end：將專案對齊到單元格的結束位置。
- center：將專案在單元格內居中對齊。
- stretch：使專案在單元格內拉伸以填充整個單元格（預設值）。

示例：

.grid-container {
  display: grid;
  justify-items: center; /* 將每個網格項在單元格內居中對齊 */
}

`align-items`

作用：用於控制 Grid 容器內每個專案在其單元格內的對齊方式，沿著垂直軸。
取值：
- start：將專案對齊到單元格的起始位置。
- end：將專案對齊到單元格的結束位置。
- center：將專案在單元格內垂直居中對齊。
- stretch：使專案在單元格內拉伸以填充整個單元格（預設值）。

示例：

.grid-container {
  display: grid;
  align-items: center; /* 將每個網格項在單元格內垂直居中對齊 */
}

`justify-content`（在 Grid 佈局中）

作用：用於控制 Grid 容器內所有行或列的對齊方式，沿著水平軸。
取值：
- start：將所有網格行或列對齊到容器的起始位置。
- end：將所有網格行或列對齊到容器的結束位置。
- center：將所有網格行或列在容器內居中對齊。
- stretch：使網格行或列拉伸以填充整個容器（預設值）。
- space-between：在網格行或列之間平均分配空間。
- space-around：在網格行或列之間平均分配空間，但容器兩端的空間也分配到行或列的兩側。
- space-evenly：在所有網格行或列之間以及容器兩端分配相等的空間。

示例：

.grid-container {
  display: grid;
  justify-content: space-between; /* 在網格行或列之間分配空間 */
}

`align-content`（在 Grid 佈局中）

作用：用於控制 Grid 容器內所有行的對齊方式，沿著垂直軸。
取值：
- start：將所有網格行對齊到容器的起始位置。
- end：將所有網格行對齊到容器的結束位置。
- center：將所有網格行在容器內垂直居中對齊。
- stretch：使網格行拉伸以填充整個容器（預設值）。
- space-between：在網格行之間平均分配空間。
- space-around：在網格行之間平均分配空間，但容器兩端的空間也分配到行的兩側。
- space-evenly：在所有網格行之間以及容器兩端分配相等的空間。

示例：

.grid-container {
  display: grid;
  align-content: space-around; /* 在網格行之間分配空間 */
}

5.5 響應式佈局與媒體查詢

響應式設計使網頁能夠適應不同裝置的螢幕尺寸和解析度。透過媒體查詢（@media）可以根據不同條件（如螢幕寬度）應用不同的CSS規則。

例如：

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

當螢幕寬度小於600畫素時，.container 的佈局將從水平排列改為垂直排列。

六、CSS中元素的展示

CSS 中的 display 屬性用於控制元素的顯示行為，它定義了元素在頁面中的佈局方式。最常用的值有 block、inline 和 inline-block，每種值都有其特定的特性和用途。下面詳細講解這三種常見的 display 值：

`display: block`

特性：
- 塊級元素：display: block 使元素成為塊級元素。塊級元素總是從新行開始，佔據整個可用的寬度。
- 寬高：塊級元素可以設定寬度（width）和高度（height），並且這些屬性會影響元素的實際顯示。
- 自動換行：塊級元素的前後會有換行，這意味著它會在新的一行開始，並在元素後面產生換行。
常見元素：<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li> 等。

示例：

<div style="display: block; width: 100px; height: 50px; background-color: lightblue;">
  我是塊級元素
</div>

在這個例子中，<div> 是塊級元素，佔據了整個寬度，並在前後有換行。

`display: inline`

特性：
- 行內元素：display: inline 使元素成為行內元素。行內元素不會開始新行，它們在頁面上按順序排列，並且只佔據其內容的空間。
- 寬高：行內元素不能設定寬度和高度，width 和 height 屬性對其不起作用。
- 邊距和填充：可以設定行內元素的 margin 和 padding，但這些不會影響元素的行高（即不會增加行高）。
常見元素：<span>、<a>、<strong>、<em>、<img> 等。
示例：
```
<span style="display: inline; background-color: lightcoral;">
  我是行內元素
</span>
```
在這個例子中，<span> 是行內元素，它不會導致換行，只佔據其內容的寬度。

`display: inline-block`

特性：
- 行內塊級元素：display: inline-block 結合了 block 和 inline 的特性。它使元素在頁面上像行內元素一樣排列，但允許設定寬度和高度。
- 寬高：可以設定元素的 width 和 height，這些屬性會影響元素的顯示。
- 邊距和填充：可以設定 margin 和 padding，這些設定會影響元素的佈局。

示例：

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">
  我是行內塊級元素
</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">
  我也是行內塊級元素
</div>

在這個例子中，兩個 inline-block 元素在同一行內顯示，且它們的寬度和高度都被設定。

在 CSS 中，white-space、text-overflow 和 overflow 屬性用於控制元素中內容的顯示方式，尤其是處理文字溢位和元素內容的佈局。下面是對這些屬性的詳細講解：

`white-space`

white-space 屬性用於控制元素中的空白字元（如空格和換行符）的處理方式。

white-space: normal（預設值）
- 空白字元會被合併為一個空格。
- 文字會自動換行以適應其容器的寬度。
```
.normal {
  white-space: normal;
}
```
white-space: nowrap
- 空白字元不會被合併，也不會自動換行。
- 文字會在一行中顯示，直到遇到 <br> 或文字溢位容器邊界。
```
.nowrap {
  white-space: nowrap;
}
```
white-space: pre
- 空白字元和換行符會被保留。
- 文字顯示方式類似於在 HTML 中的 <pre> 標籤，保持原始格式。
```
.pre {
  white-space: pre;
}
```
white-space: pre-wrap
- 空白字元和換行符會被保留，但文字會在需要時自動換行以適應容器寬度。
```
.pre-wrap {
  white-space: pre-wrap;
}
```

`text-overflow`

text-overflow 屬性用於處理溢位的文字內容的顯示方式，通常與 overflow 和 white-space 一起使用。

text-overflow: clip（預設值）
- 溢位的文字內容會被裁剪，不會顯示超出容器的部分。
```
.clip {
  text-overflow: clip;
}
```
text-overflow: ellipsis
- 溢位的文字內容會被用省略號 (…) 替代，通常用於顯示不完整的文字。
```
.ellipsis {
  text-overflow: ellipsis;
}
```
text-overflow: string
- 允許自定義溢位文字的替代內容，如 text-overflow: "..."。支援大多數現代瀏覽器，但不被所有瀏覽器廣泛支援。
```
.custom {
  text-overflow: "…";
}
```

`overflow`

overflow 屬性用於控制元素內容溢位其容器時的顯示方式。

overflow: visible（預設值）
- 內容溢位元素邊界時，會顯示在元素外部。
- 適用於內容可以自由超出容器邊界的情況。
```
.visible {
  overflow: visible;
}
```
overflow: hidden
- 內容溢位元素邊界時，會被裁剪，不顯示超出部分。
- 適用於不需要顯示超出內容的情況。
```
.hidden {
  overflow: hidden;
}
```
overflow: scroll
- 無論內容是否溢位，都始終顯示捲軸。
- 適用於內容可能溢位的情況，並希望始終提供捲軸進行檢視。
```
.scroll {
  overflow: scroll;
}
```
overflow: auto
- 如果內容溢位容器，則顯示捲軸。如果內容沒有溢位，則不顯示捲軸。
- 適用於需要動態決定是否顯示捲軸的情況。
```
.auto {
  overflow: auto;
}
```

結合使用

常見組合：

要實現文字溢位顯示省略號的效果，通常需要結合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  這是一個很長的文字，可能會溢位容器邊界，從而顯示省略號。
</div>

七、CSS中的繼承與優先順序

繼承

某些CSS屬性會自動繼承父元素的值，如 color、font-family 等。而 margin、padding 等屬性則不會自動繼承。

例如：

body {
    color: black;
}
p {
    font-size: 16px;
}

在這段程式碼中，所有段落的文字顏色將繼承自 body 元素的 color 屬性（黑色），而 font-size 則根據自身定義為16畫素。

層疊與優先順序

當多個CSS規則作用於同一個元素時，CSS會根據特定的優先順序規則決定應用哪一條樣式。優先順序的計算取決於選擇器的型別：

內聯樣式：最高優先順序，直接在元素中定義的樣式。
ID選擇器：次高優先順序。
類選擇器、偽類和屬性選擇器。
元素選擇器。
萬用字元：最低優先順序。

CSS中還可以使用 !important 來強制優先應用某條規則，覆蓋其他規則的影響。

例如：

p {
    color: red !important;
}

八、CSS動畫與過渡

CSS允許為元素新增動畫和過渡效果，使頁面更加生動和具有互動性。

過渡效果（transition）

transition 用於定義屬性在某個時間段內發生的變化，常用於滑鼠懸停等互動效果。

常見屬性：

transition-property：要發生變化的屬性（如 color、width）。
transition-duration：過渡持續時間。
transition-timing-function：過渡的速度曲線，如 linear（線性）或 ease（緩慢加速再減速）。

例如：

button {
    background-color: blue;
    transition: background-color 0.5s ease;
}
button:hover {
    background-color: green;
}

當使用者將滑鼠懸停在按鈕上時，按鈕的背景色將在0.5秒內平滑地從藍色過渡為綠色。

動畫（animation）

animation 屬性用於建立複雜的動畫效果。透過 @keyframes 定義動畫幀。

常見屬性：

@keyframes：定義動畫的關鍵幀。
animation-name：指定要應用的關鍵幀。
animation-duration：動畫持續時間。
animation-iteration-count：動畫迴圈次數，infinite 表示無限次。

例如：

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

div {
    animation: move 2s infinite;
}

這段程式碼讓 div 元素每2秒向右移動100畫素，並不斷迴圈。

九、CSS中的其他概念

CSS變數（自定義屬性）

CSS變數允許開發者定義可重複使用的值，簡化程式碼的管理和維護。CSS變數使用 -- 定義，並透過 var() 函式呼叫。

例如：

:root {
    --primary-color: #4CAF50;
}
button {
    background-color: var(--primary-color);
}

這樣，當我們需要修改主顏色時，只需要更改 --primary-color 的值，而不需要修改每個地方的樣式。

瀏覽器字首

一些新的CSS特性在不同瀏覽器中的支援可能不完全一致，因此需要使用瀏覽器字首。常見的字首有：

-webkit-：Chrome、Safari
-moz-：Firefox
-o-：Opera
-ms-：Internet Explorer

例如：

div {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

總結

CSS是用於控制網頁外觀和佈局的重要技術。它透過選擇器和屬性，允許開發者對HTML元素進行樣式定義和控制。掌握CSS的基本語法、佈局模式（如Flexbox和Grid）、動畫、媒體查詢等知識，能夠幫助開發者建立更加美觀、響應式且使用者友好的網頁設計。

js

JavaScript（簡稱JS）是一種輕量級、解釋型、物件導向的指令碼語言，主要用於為網頁新增動態功能、控制多媒體、處理事件以及構建複雜的Web應用程式。JS廣泛應用於前端開發，並且透過Node.js等技術擴充套件到了伺服器端。

基本語法參考這篇文章，本文主要講解 js 對dom 的操作。

一、DOM概念與基礎

1.1 什麼是 DOM

DOM 是 HTML 和 XML 文件的程式設計介面，它將整個頁面表示為一個層次結構的節點樹。每個節點表示頁面的一部分（如元素、屬性、文字等），JavaScript 透過 DOM 可以動態地訪問和修改這些節點。

節點型別：
- 元素節點：例如 HTML 標籤（如 <div>、<p>）。
- 屬性節點：元素的屬性（如 <a href="url"> 的 href 屬性）。
- 文字節點：元素或屬性中的文字內容。

HTML 示例：

<!DOCTYPE html>
<html>
  <body>
    <h1 id="header">Title</h1>
    <p class="text">This is a paragraph.</p>
  </body>
</html>

1.2 DOM 樹結構

DOM 樹表示頁面的結構，每個 HTML 標籤都是樹中的一個節點。上面的 HTML 程式碼會生成如下的 DOM 樹：

Document
 ├── html
      ├── head
      └── body
           ├── h1 (id="header")
           └── p (class="text")

透過 JavaScript，你可以獲取 DOM 樹中的任何節點，並對其進行操作。

1.3 DOM 事件傳播

JavaScript事件有三個傳播階段：捕獲、目標和冒泡。

捕獲階段：事件從最外層的祖先元素開始，向下傳播到目標元素。
目標階段：事件到達目標元素（觸發事件的元素）。
冒泡階段：事件從目標元素開始，向上冒泡到最外層的祖先元素。

二、獲取 DOM 元素

JavaScript 提供了多種方法來獲取 DOM 元素：

2.1 `getElementById()`

用於根據元素的 id 獲取唯一的元素，返回一個 DOM 元素。

語法：

document.getElementById(id);

例子：

let header = document.getElementById("header");
console.log(header.textContent);  // 輸出 "Title"

2.2 `getElementsByClassName()`

根據元素的 class 名稱獲取元素列表，返回一個類陣列物件（HTMLCollection）。

語法：

document.getElementsByClassName(className);

例子：

let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0].textContent);  // 輸出 "This is a paragraph."

2.3 `getElementsByTagName()`

根據標籤名稱獲取元素列表，返回 HTMLCollection 物件。

語法：

document.getElementsByTagName(tagName);

例子：

let allDivs = document.getElementsByTagName("div");
console.log(allDivs.length);  // 輸出頁面中所有 <div> 的數量

2.4 `querySelector()` 和 `querySelectorAll()`

querySelector() 返回與指定的 CSS 選擇器匹配的第一個元素。
querySelectorAll() 返回所有匹配選擇器的元素（返回 NodeList，可以使用 forEach() 方法遍歷）。

語法：

document.querySelector(cssSelector);
document.querySelectorAll(cssSelector);

例子：

let firstParagraph = document.querySelector("p.text");  // 匹配 class 為 "text" 的第一個 <p>
let allParagraphs = document.querySelectorAll("p");  // 匹配所有 <p> 元素

allParagraphs.forEach(p => console.log(p.textContent));  // 遍歷所有 <p> 元素

2.5 `parentNode` 和 `childNodes`

parentNode：返回當前元素的父節點。
childNodes：返回當前元素的所有子節點（包括文字節點、元素節點等）。

例子：

let header = document.getElementById("header");
console.log(header.parentNode);  // 輸出 <body> 元素
console.log(document.body.childNodes);  // 輸出 body 下的所有子節點

三、修改 DOM 元素

JavaScript 允許對 DOM 中的元素進行動態修改，例如更改內容、樣式、屬性等。

3.1 修改元素內容

textContent：用於修改元素的文字內容。它會替換元素中的所有文字，包括子元素中的文字。
innerHTML：用於設定或獲取元素的 HTML 內容，允許插入 HTML 標籤。

例子：

let header = document.getElementById("header");
header.textContent = "New Title";  // 修改文字內容
header.innerHTML = "<span>Updated Title</span>";  // 插入 HTML 內容

3.2 修改元素屬性

setAttribute() 和 getAttribute()：用於設定或獲取元素的屬性。
removeAttribute()：移除某個屬性。

例子：

let link = document.querySelector("a");
link.setAttribute("href", "https://new-url.com");  // 修改 href 屬性
let href = link.getAttribute("href");  // 獲取 href 屬性
link.removeAttribute("title");  // 移除 title 屬性

3.3 修改元素樣式

style 屬性：可以透過直接修改 style 物件來設定內聯樣式。
classList：透過 classList 可以新增、移除、切換元素的 CSS 類。

例子：

let header = document.getElementById("header");

// 修改內聯樣式
header.style.color = "blue";
header.style.fontSize = "24px";

// 操作 class
header.classList.add("highlight");
header.classList.remove("text-large");
header.classList.toggle("active");  // 切換 class，若存在則移除，若不存在則新增

3.4 建立與刪除元素

createElement()：用於建立新的元素節點。
appendChild()：將新元素新增為子節點。
removeChild()：刪除子節點。

例子：

// 建立新的 <p> 元素
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

// 將新元素新增到 <body>
document.body.appendChild(newParagraph);

// 移除元素
document.body.removeChild(newParagraph);

四、操作節點關係

透過 JavaScript 可以訪問 DOM 樹中的節點關係，例如父節點、子節點和兄弟節點。

4.1 父節點與子節點

parentNode：獲取當前節點的父節點。
children：獲取當前節點的所有子元素（不包括文字節點）。

例子：

let parent = document.getElementById("parent");
let firstChild = parent.firstChild;  // 獲取第一個子節點（可能是文字節點）
let firstElementChild = parent.firstElementChild;  // 獲取第一個子元素

4.2 兄弟節點

nextSibling：獲取下一個兄弟節點（可能是文字節點）。
previousSibling：獲取上一個兄弟節點。
nextElementSibling 和 previousElementSibling：獲取相鄰的元素兄弟節點。

例子：

let current = document.querySelector("p");
let nextElement = current.nextElementSibling;  // 獲取下一個兄弟元素
let previousElement = current.previousElementSibling;  // 獲取上一個兄弟元素

4.3 克隆節點

cloneNode()：用於克隆現有的節點。引數為 true 時，表示深度克隆，即克隆節點及其所有子節點。

例子：

let original = document.getElementById("header");
let clone = original.cloneNode(true);  // 深度克隆 header 及其子節點
document.body.appendChild(clone);  // 將克隆的節點新增到 body

五、DOM事件處理

DOM 事件處理允許我們響應使用者在網頁上的互動。前文已經提到的事件機制，如 addEventListener()，在實際開發中極其重要。

5.1 事件繫結與移除

addEventListener()：用於繫結事件監聽器。
removeEventListener()：移除事件監聽器。

例子：

let button = document.getElementById("myButton");

function handleClick() {
    console.log("Button clicked");
}

// 新增事件監聽
button.addEventListener("click", handleClick);

// 移除事件監聽
button.removeEventListener("click", handleClick);

5.2 事件型別

常見的 DOM 事件型別：

滑鼠事件：click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
鍵盤事件：keydown, keyup, keypress 用於處理鍵盤的輸入事件。
表單事件：submit, change, input 用於處理表單中的互動事件。
視窗事件：load, resize, scroll, unload 這些事件常用於處理頁面載入、視窗調整大小、頁面滾動等操作。

例子：

// 捕獲鍵盤按下的事件
document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);  // 輸出按下的鍵
});

// 捕獲視窗大小調整事件
window.addEventListener("resize", function() {
    console.log("Window resized to:", window.innerWidth, "x", window.innerHeight);
});

5.3 事件委託

事件委託是一種最佳化事件處理的技術。透過將事件繫結到祖先元素而不是每個子元素上，利用事件冒泡機制，可以減少事件處理程式的數量。

例子：

let parent = document.getElementById("parent");

parent.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        console.log("Button clicked:", event.target.textContent);
    }
});

在這個例子中，即使父元素 parent 內有多個按鈕，事件只會被委託到父元素上，而不是為每個按鈕分別新增事件監聽器。這樣提高了效能，尤其是在動態新增子元素的情況下。

5.4 事件處理中的預設行為與冒泡

在事件處理過程中，某些事件會觸發預設行為，例如點選連結會跳轉頁面，提交表單會重新整理頁面。可以透過 event.preventDefault() 來阻止這些預設行為。類似地，event.stopPropagation() 可以阻止事件的冒泡，防止事件傳播到父元素。

例子：

let link = document.querySelector("a");
link.addEventListener("click", function(event) {
    event.preventDefault();  // 阻止連結的跳轉行為
    console.log("Link clicked but default action prevented");
});

let button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
    event.stopPropagation();  // 阻止事件冒泡
    console.log("Button clicked without event bubbling");
});

六、文件與視窗物件的操作

除了直接操作 DOM 元素外，JavaScript 還提供了對整個文件 (document) 和視窗 (window) 物件的操作。這些物件是瀏覽器提供的全域性物件，用於控制和操作整個頁面和瀏覽器視窗。

6.1 `document` 物件

document 是整個網頁的入口，它代表整個 HTML 文件。你可以透過 document 物件訪問和操作 DOM 樹。

document.title：獲取或設定頁面標題。
document.URL：獲取當前頁面的 URL。
document.cookie：用於讀取或設定頁面的 cookie。

例子：

console.log(document.title);  // 輸出頁面標題
document.title = "New Page Title";  // 修改頁面標題
console.log(document.URL);  // 輸出當前頁面 URL

6.2 `window` 物件

window 物件代表整個瀏覽器視窗，提供了大量與瀏覽器和頁面互動的 API。

window.innerHeight 和 window.innerWidth：返回視窗的高度和寬度。
window.scrollTo()：滾動到指定的頁面位置。
window.open()：在新視窗中開啟一個 URL。

例子：

console.log(window.innerWidth, window.innerHeight);  // 輸出視窗寬度和高度

// 滾動到頁面頂部
window.scrollTo(0, 0);

// 開啟新頁面
window.open("https://www.example.com", "_blank");

6.3 定時器

透過 window 物件，JavaScript 提供了定時器功能，用於延時執行程式碼或以固定的時間間隔重複執行程式碼。

setTimeout()：在指定時間後執行一次程式碼。
setInterval()：以指定的時間間隔重複執行程式碼。
clearTimeout() 和 clearInterval()：停止定時器。

例子：

// 延時執行程式碼
let timeoutId = setTimeout(function() {
    console.log("This will run after 2 seconds");
}, 2000);

// 每隔1秒重複執行程式碼
let intervalId = setInterval(function() {
    console.log("This will run every 1 second");
}, 1000);

// 停止定時器
clearTimeout(timeoutId);
clearInterval(intervalId);

七、表單操作

JavaScript 對 HTML 表單有強大的操作能力，包括讀取和設定表單欄位的值、驗證使用者輸入以及響應表單的提交。

7.1 讀取和設定表單值

可以透過 value 屬性讀取和設定表單元素的值，例如輸入框、選擇框、單選按鈕等。

例子：

let input = document.getElementById("nameInput");

// 獲取輸入框的值
console.log(input.value);

// 設定輸入框的值
input.value = "John Doe";

7.2 表單提交與驗證

透過監聽表單的 submit 事件，可以對錶單提交進行驗證或控制，常用於阻止無效表單的提交。

例子：

let form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    let input = document.getElementById("nameInput");
    if (input.value === "") {
        event.preventDefault();  // 阻止表單提交
        alert("Name cannot be empty!");
    }
});

7.3 表單欄位驗證 API

HTML5 提供了一些內建的表單驗證屬性（如 required、pattern），同時可以透過 JavaScript 使用 checkValidity() 方法進行驗證。

例子：

let form = document.getElementById("myForm");
let emailInput = document.getElementById("email");

form.addEventListener("submit", function(event) {
    if (!emailInput.checkValidity()) {
        event.preventDefault();
        alert("Invalid email format!");
    }
});

八、JavaScript中的非同步程式設計

在瀏覽器環境中，很多操作是非同步的，例如網路請求、定時器、檔案讀取等。為了防止阻塞主執行緒（影響使用者體驗），JavaScript提供了多種方式處理非同步任務。

2.1 回撥函式（Callback）

回撥函式是最基本的非同步程式設計方法。它是指把函式作為引數傳遞給另一個函式，並在某些操作完成後呼叫這個函式。

例子：

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}

fetchData(function(result) {
    console.log(result);  // 輸出 "Data received"（1秒後）
});

在這段程式碼中，setTimeout 模擬一個耗時1秒的非同步操作，完成後呼叫傳入的回撥函式。

2.2 Promise

Promise 是ES6引入的一種非同步操作解決方案，提供了更加優雅的非同步程式設計方式。Promise 物件代表一個未來的值，可能是非同步操作成功的結果，也可能是失敗的原因。

基本語法：

let promise = new Promise((resolve, reject) => {
    // 非同步操作
    let success = true;
    if (success) {
        resolve("Success");
    } else {
        reject("Error");
    }
});

// 處理 Promise 結果
promise.then(result => {
    console.log(result);  // 成功時輸出 "Success"
}).catch(error => {
    console.error(error);  // 失敗時輸出 "Error"
});

2.3 async/await

async/await 是基於 Promise 的語法糖，提供了更加簡潔的方式來編寫非同步程式碼。透過 await，你可以暫停函式的執行，直到 Promise 完成，並獲得其返回的結果。

例子：

async function fetchData() {
    try {
        let result = await new Promise((resolve) => {
            setTimeout(() => resolve("Data received"), 1000);
        });
        console.log(result);  // 輸出 "Data received"
    } catch (error) {
        console.error("Error:", error);
    }
}

fetchData();

在這段程式碼中，await 使得程式碼看起來像同步程式碼，但它實際上是在等待非同步操作完成後繼續執行。

JS壓縮圖片?掌握這一篇就夠了
2020-09-07
JS
APP瘦身這一篇就夠了
2019-04-10
APP
深入Babel，這一篇就夠了
2018-12-25
Babel
學Nginx,這一篇就夠了
2020-09-25
Nginx
Git 看這一篇就夠了
2020-10-14
Git
HTML教程（看完這篇就夠了）
2021-02-17
HTML
學習HTML5 Canvas這一篇文章就夠了
2019-02-16
HTMLCanvas
Ubuntu搭建Pytorch，就這一篇就夠了
2022-07-18
UbuntuPyTorch
瞭解JS壓縮圖片，這一篇就夠了
2020-08-17
JS
[翻譯]瞭解NodeJS看這一篇就夠了
2018-02-09
NodeJS
Flutter DataTable 看這一篇就夠了
2020-03-04
Flutter
Git【入門】這一篇就夠了
2020-07-04
Git
學習JDBC這一篇就夠了
2020-07-31
JDBC
代理模式看這一篇就夠了
2018-11-13
模式
MySQL查詢這一篇就夠了
2020-11-09
MySql
學習MySQL這一篇就夠了
2020-09-02
MySql
Java 集合看這一篇就夠了
2020-10-15
Java
學習Jmeter，這一篇就夠了
2020-10-10
JMeter
學習git這一篇就夠了！！！
2020-10-07
Git
[譯] 理解CORS這一篇就夠了
2018-02-02
CORS
AJAX入門這一篇就夠了
2018-02-13
JS作用域和變數提升看這一篇就夠了
2020-05-16
JS變數
瞭解 MongoDB 看這一篇就夠了
2020-01-08
MongoDB
關於SwiftUI，看這一篇就夠了
2020-06-24
SwiftUI
瞭解HandlerThread這一篇就夠了
2019-02-26
thread
這一篇就夠了——APP瘦身總結
2019-04-11
APP
Spring入門這一篇就夠了
2019-06-23
Spring
入門Hbase，看這一篇就夠了
2019-02-15
jQuery入門看這一篇就夠了
2021-04-18
jQuery
Elasticsearch入門，看這一篇就夠了
2021-05-17
Elasticsearch
關於MyBatis框架這一篇就夠了
2021-05-21
MyBatis框架
ActiveMq 之JMS 看這一篇就夠了
2021-07-11
MQ
MySQL入門看這一篇就夠了
2020-12-09
MySql
flex佈局看這一篇就夠了
2020-11-15
Flex
MASA Blazor入門這一篇就夠了
2022-04-01
Blazor
Mybatis入門看這一篇就夠了
2018-03-12
MyBatis
Hibernate入門這一篇就夠了
2018-03-07
Rxjava這一篇就夠了，牆裂推薦
2019-03-02
RxJava

html css js（這一篇就夠了）

html

一、HTML的基本結構

1.1 文件宣告 (<!DOCTYPE html>)

1.2 <html> 標籤

1.3 <head> 標籤

1.4 <body> 標籤

二、HTML標籤（Tags）

2.1 常見的HTML標籤

三、HTML屬性（Attributes）

3.1 通用屬性

3.2 特定標籤屬性

四、HTML中的其他重要概念

4.1 HTML註釋

4.2 HTML的語義化

4.3 塊級元素與行內元素

五、HTML5的新特性

5.1 新的語義標籤

5.2 媒體標籤

5.3 新的表單輸入型別

css

一、CSS的基本概念

1.1 CSS語法結構

1.2 CSS的作用方式

二、CSS選擇器

2.1 基礎選擇器

2.2 組合選擇器

2.3 偽類選擇器

2.4.屬性選擇器

三、CSS屬性

3.1 文字相關屬性

3.2 顏色和背景屬性

3.3 佈局相關屬性

3.4 定位屬性

3.5 顯示與隱藏屬性

四、CSS盒模型（Box Model）

box-sizing 屬性

示例：

五、CSS佈局

5.1 浮動佈局（float）

5.2 清除浮動（clear）

5.3 Flexbox佈局

justify-content

align-items

align-content

5.4 CSS Grid佈局

justify-items

align-items

justify-content（在 Grid 佈局中）

align-content（在 Grid 佈局中）

5.5 響應式佈局與媒體查詢

六、CSS中元素的展示

display: block

display: inline

display: inline-block

white-space

text-overflow

overflow

結合使用

七、CSS中的繼承與優先順序

繼承

層疊與優先順序

八、CSS動畫與過渡

過渡效果（transition）

動畫（animation）

九、CSS中的其他概念

CSS變數（自定義屬性）

瀏覽器字首

總結

js

一、DOM概念與基礎

1.1 什麼是 DOM

1.2 DOM 樹結構

1.3 DOM 事件傳播

二、獲取 DOM 元素

2.1 getElementById()

2.2 getElementsByClassName()

2.3 getElementsByTagName()

2.4 querySelector() 和 querySelectorAll()

2.5 parentNode 和 childNodes

1.1 文件宣告 (`<!DOCTYPE html>`)

1.2 `<html>` 標籤

1.3 `<head>` 標籤

1.4 `<body>` 標籤

`box-sizing` 屬性

`justify-content`

`align-items`

`align-content`

`justify-items`

`align-items`

`justify-content`（在 Grid 佈局中）

`align-content`（在 Grid 佈局中）

`display: block`

`display: inline`

`display: inline-block`

`white-space`

`text-overflow`

`overflow`

2.1 `getElementById()`

2.2 `getElementsByClassName()`

2.3 `getElementsByTagName()`

2.4 `querySelector()` 和 `querySelectorAll()`

2.5 `parentNode` 和 `childNodes`

6.1 `document` 物件

6.2 `window` 物件