html css js（這一篇就夠了）_ZenDei技術網路在線

html HTML（超文本標記語言，HyperText Markup Language）是構建網頁的基礎語言。它使用標簽（Tags）和屬性（Attributes）來定義網頁的結構和內容顯示。下麵將從HTML的結構、標簽、屬性等方面進行詳細講解。一、HTML的基本結構一個標準的HTML文檔有明確的 ...

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 事件，可以對錶單提交進行驗證或控制，常用於阻止無效表單的提交。

例子：

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` 對象