# HTML 超文本標記語言
## 什麼是HTML
HTML（HyperText Markup Language 超文本標記語言）是一種用於建立和結構化網頁內容的標記語言。它由一系列標籤（tag）組成，每個標籤代表著不同的元素或內容，如文本、圖片、鏈接等。HTML是網頁的基本骨架，描述了網頁的結構和內容，並通過瀏覽器解釋和呈現成可視化的網頁。
## 如何創建HTML文件
鼠標右鍵 -> 新增文字文件 -> 更改檔案類型為.html
* 如果創建完HTML文件後依然是文字文件格式，需要將系統中隱藏已知文件類型取消勾選
* 可以用中文命名(不推薦)
* 不允許使用特殊符號
* HTML文件名字推薦使用小寫
* 如果是多個單字創建的文件名，每個單詞首字母大寫 ex:HelloWorld
## HTML標籤
標籤是HTML最基本的單位，也是重要的組成部分，通常用 **"<"** 和 **">"** 括起來
標籤有兩種形式:
1. 成對標籤
```html=
<p>內容</p>
```
2. 不成對標籤
```html=
<hr />
```
### HTML標籤大小寫問題
標籤大小寫無關，<body />和<BODY />視為同樣
注意:HTML標籤推薦使小寫
### HTML標籤屬性
1. HTML屬性一般都出現在HTML標籤中，是HTML標籤的一部分
2. 標籤可以有屬性，包含了額外訊息，屬性一定要在雙引號中，標籤可以有多個屬性
3. 常見屬性名和屬性值成對出現
`<標籤名 屬性名1="屬性值" 屬性名2="屬性值"></標籤名>`
### HTML注釋
* 格式 : `<!--我是HTML的注釋-->`
* 方便其他工程師了解此代碼，且以後對程式的更動修改較為輕鬆
* 注釋的內容不會被執行
## HTML的代碼格式
* 空白鍵和換行在執行時都不會起作用，所以在編寫HTML文件時，可以使用且必須遵守代碼排版和縮進，以便於閱覽修改
* 任何的空白鍵、換行、TAB都只會被視為一個空格
## HTML中的特殊符號
這些特殊符號無法直接輸入顯示在瀏覽器上，會被誤認為是代碼當中的一部分
```html=
空格
> >
< <
```
## HTML的主結構
```html=
<!DOCTYPE html><!--申明標籤-->
<html>
<!--頭部標籤-->
<head>
</head>
<!--主體標籤-->
<body>
</body>
</html>
```
1. 最上面聲明`<!DOCTYPE html>`
* 聲明是文件中的第一部分，位於文件最上面
* 該標籤是告訴瀏覽器所使用的HTML規範
2. 以<html>開始，以</html>結束，中間包含頭部標籤<head></head>及主體標籤<body></body>
### <head>標籤中常用的標籤
```html=
<head lang="en">
<!--
lang是language意思，搜尋引擎不會判斷語言，必須讓它告知
-->
<meta charset="UTF-8">
<!--設置頁面字符集-->
<title>我是標題</title>
<!--設置頁面標題-->
<meta http-equiv="refresh" content="3;url=https://google.com">
<!--
http-equiv告知瀏覽器行為
refresh刷新頁面
content設置內容
-->
<meta name="keywords" content="first web," />
<!--設置網站關鍵字-->
<meta name="description" content="my first web">
<!--設置網站描述-->
<!--
name告知瀏覽器內容
-->
<link rel="icon" type="" href="" />
<!--載入標題icon-->
<link rel="stylesheet" type="text/css" href="" />
<!--載入css樣式-->
<!--
rel表示文件與被連接文件的關係
type被連接文件的類型
href被連接文件的地址
-->
<style>
body{
background-color:tomato;
}
</style>
<!--載入css樣式-->
<script>
alert('提醒視窗')
</script>
<!--載入JS樣式-->
```
### <body>標籤中常用的標籤
```html=
<p></p>
<!--段落標籤，獨佔一行-->
<b></b>
<strong></strong>
<!--粗體標籤-->
<i></i>
<em></em>
<!--斜體標籤-->
<br/>
<!--換行標籤-->
<hr/>
<!--水平線標籤-->
<u></u>
<!--底線標籤-->
<del></del>
<!--刪除線標籤-->
<hx>
<!--標題標籤 x=1~6-->
<bdo></bdo>
<!--覆蓋默認的文件方向 dir="ltr" or "rtl"-->
<sup></sup>
<!--上標-->
<sub></sub>
<!--下標-->
<mark></mark>
<!--標記內容-->
<details>
<summary>電影院</summary>
<p>電影片</p>
<p>票價</p>
<p>150</p>
</details>
<!--
detail可以隱藏或是展示補充內容
summary可以為detail定義標題
-->
<dialog></dialog>
<!--定義對話視窗 open="true"-->
<pre></pre>
<!--原格式輸出-->
<figure>
<img src="xxx.gif" alt="figure標籤" title="figure標籤" />
<figcaption>figure的標題</figcaption>
</figure>
<!--figure用於對元素進行組合，多用於圖片描述-->
```
### 布局標籤
```html=
<header></header>
<!--頭部標籤-->
<footer></footer>
<!--底部標籤-->
<nav></nav>
<!--導航標籤-->
<aside></aside>
<!--側邊標籤-->
<span></span>
<!--行內標籤-->
<address></address>
<!--地址標籤-->
<article></article>
<!--文章標籤-->
<div></div>
<!--區塊標籤 HTML4-->
<section></section>
<!--區塊標籤 HTML5-->
```
### 列表標籤
```html=
<ul>
<li>我是無序列表</li>
<li>我是無序列表</li>
</ul>
<!--
。我是無序列表
。我是無序列表
-->
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
<!--
1.我是有序列表
2.我是有序列表
-->
<dl>
<dt>我是列表項目</dt>
<dd>我是項目的描述</dd>
</dl>
<!--
我是列表項目
我是項目的描述
-->
```
### 超連結標籤
```html=
<a href="https://www.google.com.tw/" target="_blank">google網站</a>
<!--
相對路徑:
相對路徑是相對於當前文件所在位置的一種指定方式
"./"：當前目錄
"../"：上一層目錄
"images/picture.jpg"：當前目錄下的 images 子目錄中的 picture.jpg
"www.google.com.tw":網址的相對路徑
絕對路徑:
絕對路徑是從文件系統的根目錄（或網站的根目錄）開始的完整路徑
"/home/user/images/picture.jpg"：文件系統的絕對路徑
"https://www.example.com/images/picture.jpg"：網站的絕對路徑
target = "":定義網頁打開的方式
_self(默認):當前視窗打開文件
_blank:在新視窗打開文件
-->
```
* 錨點
通常用於在同一頁面內部進行快速跳轉，使用戶可以直接跳轉到頁面中的特定位置
1. 使用 id 屬性為目標元素指定一個唯一名稱。
2. 並在 href 屬性中指定目標元素的 #id
```html=
<a href="#destination">點擊到達的地方</a>
<a id="destination">到達的地方</a>
```
### 多媒體標籤
```html=
<img />
<!--
src="要引入圖片的地址"
width="設置圖片的寬度"
height="設置圖片的高度"
alt="當圖片無法載入時的文字訊息"
title="設置標題"
-->
<audio controls>
<source src=""/>
</audio>
<!--
src="要引入音源的地址"
controls 為音頻元素提供一個默認的控制面板
-->
<video controls>
<source src=""/>
</video>
<!--
src="要引入音源的地址"
poster="影片在播放前用於顯示的圖片"
controls 為音頻元素提供一個默認的控制面板
-->
<embed />
<!--
src="要引入圖片的地址"
-->
```
### 表格標籤
```html=
<table>
<!--
<table>標籤常用屬性
width:表格寬度
height:表格高度
align:水平擺放位置(left, center, right)
background:背景圖片
bgcolor:背景顏色
border:表格邊框的寬度
bordercolor:邊框的顏色
cellspacing:表格內容與表格邊框之間的距離
cellpadding:相鄰表格之間的空白距離
-->
<caption>自我介紹</caption> <!--表格標題-->
<tr> <!--表格列-->
<!--
<tr>標籤常用屬性
height:表格高度
align:水平擺放位置(left, center, right)
valign:垂直擺放位置(top, middle, bottom)
bgcolor:背景顏色
-->
<td>姓名</td> <!--單元格-->
<!--
<td>標籤常用屬性
height:表格高度
align:水平擺放位置(left, center, right)
valign:垂直擺放位置(top, middle, bottom)
bgcolor:背景顏色
colspan:設置單元格跨列
rowspan:設置單元格跨行
-->
<td></td>
<td>性別</td>
<td></td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>出生地</td>
<td></td>
<td>興趣</td>
<td></td>
</tr>
<tr>
<td>自我介紹</td>
<td colspan="4"></td>
</tr>
<tr>
<td>文化程度</td>
<td colspan="4"></td>
</table>
```
<table>
<caption><h2>自我介紹</h2></caption>
<tr>
<td>姓名</td>
<td></td>
<td>性別</td>
<td></td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>出生地</td>
<td></td>
<td>興趣</td>
<td></td>
</tr>
<tr>
<td>自我介紹</td>
<td colspan="4"></td>
</tr>
<tr>
<td>文化程度</td>
<td colspan="4"></td>
</tr>
</table>
上述程式碼對照樣式
---
對表格標籤進行分組
```html=
<table>
<thead>
<!--表格頭部-->
<tr>
<th>編號</th> <!--表頭-->
<th>用戶名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--表格主體-->
<tr align="center">
<td>1</td>
<td>admin1</td>
<td>18</td>
<td>男</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>admin2</td>
<td>19</td>
<td>男</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>admin3</td>
<td>20</td>
<td>女</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
</tbody>
<tfoot>
<!--表格尾部-->
<tr>
<td colspan="5" align="right">
<a href="">首頁</a>
<a href="">下一頁</a>
<a href="">上一頁</a>
</td>
</tr>
</tfoot>
</table>
```
<table>
<thead>
<tr>
<th>編號</th>
<th>用戶名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>admin1</td>
<td>18</td>
<td>男</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>admin2</td>
<td>19</td>
<td>男</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>admin3</td>
<td>20</td>
<td>女</td>
<td>
<a href="">刪除</a>|
<a href="">修改</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
<a href="">首頁</a>
<a href="">下一頁</a>
<a href="">上一頁</a>
</td>
</tr>
</tfoot>
</table>
上述程式碼對照樣式
---
### 表單標籤
```html=
<form action="" method="post">
<!--
<form>標籤用於用戶輸入創建表單
action:輸入數據被傳送到的地方
method:數據傳送的方式
get:傳送數據量少，傳遞的資訊會顯示在網址上
post:傳送數據量多，不顯示在網址上，更適合用於傳遞敏感信息
-->
用戶名:<input type="text" name="username" value="" />
<!--text:形式為文本-->
<!--
<input>標籤定義需要使用的表單項
name:表單的名稱
value:表單的值
type:輸入的顯示方式(輸入型、點擊型、選擇型)
-->
<br>
密碼:<input type="password" name="pwd" value="" />
<!--password:形式為密碼-->
<br>
<input type="submit" value="登錄" />
<!--submit:提交按鈕-->
<br>
<input type="radio" name="sex" id="male" value="0" checked />
<!--
radio:形式為單選
name:名稱要保持一致，才能產生排斥
checked:默認選中
-->
<label for="male">男</label>
<!--
<label>標籤可以將其內容與表單元素進行關聯，
使得用戶點擊文本時即選中，提高了表單的可點擊區域
-->
<label>
<input type="radio" name="sex" value="1" />女
</label>
<br>
愛好:
<input type="checkbox" name="hobby[]" value="1" />吃
<!--
checkbox:複選
[]:代表一組數據
-->
<input type="checkbox" name="hobby[]" value="2" />喝
<input type="checkbox" name="hobby[]" value="3" />玩
<input type="checkbox" name="hobby[]" value="4" />樂
<br>
上傳頭貼<input type="file" name="pic" id="" />
<!--
file:上傳文件
如果表單出現file需要做兩件事
1.表單的傳輸方式必須是post
2.更改表單傳輸編碼方式，在form中增加屬性enctype="multipart/form-data"
-->
<input type="hidden" name="hello" value="world">
<!--hidden隱藏內容傳輸到server-->
<input type="reset" value="重置">
<!--reset重置輸入的內容-->
電子郵件:<input type="email" name="email" id=""><br>
<!--email電子郵件驗證-->
URL:<input type="url" name="url" id=""><br>
<!--url網址驗證-->
地址: <textarea name="address" cols="30" rows="10"></textarea>
<!--<textarea>可輸入多行文本-->
<select name="xueli" id="">
<option value="select">--請選擇--</option>
<option value="1">小學</option>
<option value="2">國中</option>
<option value="3">高中</option>
</select>
<!--
<select>下拉列表
selected:默認選中
-->
</form>
```
上述程式碼對照樣式
---
對表單標籤進行分組
```html=
<fieldset>
<!--<fieldset>將表單進行分組-->
<legend><b>personal info</b></legend>
<!--<legend>為fieldset定義標題-->
姓名
<input type="text" name="name" id="">
性別
<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
<br>
年齡
<input type="text" name="age" id="">
電話
<input type="text" name="tel" id="">
<select name="select" id="">
<option value="">--請選擇--</option>
<optgroup label="服裝">
<option value="">上衣</option>
<option value="">短褲</option>
<option value="">背心</option>
</optgroup>
<optgroup label="電子用品">
<option value="">電腦</option>
<option value="">處理器</option>
<option value="">顯示卡</option>
</optgroup>
</select>
</fieldset>
```
上述程式碼對照樣式
---
表單標籤中常用的屬性
```html=
readonly:唯讀
disable:無法輸入、點擊、選擇
selected:默認選中
autofocus:自動聚焦輸入表單
placeholder:提示輸入
required:必須填入資料
min:用於設定表單最小值(range, number)
max:用於設定表單最大值(range, number)
multiple:設定允許多個文件
pattern:用於自定義驗證規則(須配合正則語法)
step:設定兩個數值之間的間隔
novalidate:取消所有的驗證規則
formaction:修改當前的表單提交頁面
formmethod:修改當前的表單提交方式
formenctype:修改當前的表單提交編碼類型
tabindex:切換索引屬性
```
## HTML全局屬性
```html=
contentEditible:內容可編輯屬性
designMode:頁面可編輯屬性
```
# CSS 層疊樣式表
## 什麼是CSS
CSS(Cascading Style Sheets)是一種用於描述HTML外觀和格式的樣式表語言，義了文檔的呈現方式，包括元素的大小、顏色、字體、間距等屬性，以及如何將這些元素排列和定位
1. CSS的基本語法
* CSS定義:選擇符、屬性、屬性值
* 格式 `p:{color:yellow}`
* 推薦使用小寫
* 屬性和值之間用冒號(:)分開，多個屬性之間用分號(;)隔開
2. CSS中的注釋
`/*書寫注釋的內容*/`
## 放置CSS的方式
1. 內聯樣式表（Inline Styles）
* 在HTML元素的style屬性中直接嵌入CSS樣式
`<p style=""></p>`
2. 內部樣式表（Internal/Embedded Styles）
* 可以在標籤中加入ID屬性
```css=
<!DOCTYPE html>
<html>
<head>
<style>
#ID屬性名{
}
</style>
</head>
</html>
```
3. 外部樣式表（External Styles）
* 將CSS代碼保存在單獨的外部文件中，然後在HTML文檔中使用<link>標籤將其引入
* 也可以透過`<style>
@import "CSS文件地址"
</style>`
* W3C推薦使用此方法，一般瀏覽器有緩存功能所以用戶不用每次都下載CSS文件，並且此方法較節省頻寬
```css=
p {
color: red;
font-size: 20px;
}
```
```html=
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="文件地址">
</head>
</html>
```
4. 多重CSS疊加
依照後定義的優先，最高優先級的是內聯樣式表，內部樣式表、外部樣式表以最後定義的為準
## CSS選擇器
### HTML中的關係
### 基本選擇器
* **類選擇器(常用)**
* 在CSS中使用點(.)來查找，類選擇器可以有多個屬性值，使用空格分開
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.one{
background-color: bisque;
}
.two{
font-size: 300px;
}
</style>
</head>
<body>
<div class="one">test one</div>
<div class="one two">test two</div>
</body>
</html>
```
* ID選擇器
* 在CSS中用#來查找
```css=
<style>
#header {
font-size: 24px;
}
</style>
```
* 通用選擇器
* 在CSS中用*，所有標籤都會被選擇
```css=
<style>
* {
font-size: 24px;
}
</style>
```
* 元素選擇器
* 在CSS中用標籤來查找，所有該標籤都會被選擇
```css=
<style>
div {
font-size: 24px;
}
</style>
```
* 群組選擇器
* 將多個選擇器組合在一起，以同一樣式來應用，用逗號(,)分開
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.one, .two, div {
background-color: bisque;
}
</style>
</head>
<body>
<div class="one">test one</div>
<div class="two">test two</div>
<div >test div</div>
</body>
</html>
```
* 後代選擇器
* 選擇某元素的後代元素，以空格分開
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div p {
background-color: bisque;
}
</style>
</head>
<body>
<!--父子關係-->
<div>
<p>test one</p>
</div>
<!--子孫關係-->
<div>
<section>
<p>test two</p>
</section>
</div>
</body>
</html>
```
* 子代選擇器
* 選擇某元素的直接子元素，使用大於(>)符號
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div > p {
background-color: bisque;
}
</style>
</head>
<body>
<!--父子關係-->
<div>
<p>test one</p>
</div>
<!--子孫關係-->
<div>
<section>
<p>test two</p>
</section>
</div>
</body>
</html>
```
* 鄰接選擇器
* 選擇某元素的下一個兄弟元素，使用加號(+)
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div + p {
background-color: bisque;
}
</style>
</head>
<body>
<div>我是div標籤</div>
<p>我是div後面的p標籤</p>
</body>
</html>
```
* 兄弟選擇器
* 選擇指定元素之後的所有相同兄弟的元素，使用波浪符(~)
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div ~ p {
background-color: bisque;
}
</style>
</head>
<body>
<!--兄弟關係-->
<div>我是div標籤</div>
<p>我是div後面的p標籤</p>
<p>我是div後面的p標籤</p>
<!--父子關係-->
<div>
<p>我是p標籤</p>
</div>
</body>
</html>
```
### 屬性選擇器
* 根據屬姓名或者屬性值來查找某個標籤
* E element元素標籤 | ATT attribute屬性 | VAL value屬性值
* 標籤[屬性]
1. E[ATT]匹配所有具有ATT的屬性，不考慮屬性值
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div[class] {
background-color: bisque;
}
</style>
</head>
<body>
<div class="one">我是第一個div標籤</div>
<div class="two">我是第二個div標籤</div>
<div id="three">我是第三個div標籤</div>
<a href="" class="four">我是第四個a標籤</a>
</body>
</html>
```
2. E[ATT = VAL]匹配所有具有ATT=VAL的E元素
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div[class="two"] {
background-color: bisque;
}
</style>
</head>
<body>
<div class="one">我是第一個div標籤</div>
<div class="two">我是第二個div標籤</div>
<div id="three">我是第三個div標籤</div>
<a href="" class="four">我是第四個a標籤</a>
</body>
</html>
```
3. E[ATT ~= VAL]匹配所有具有ATT屬性有多個空格分隔的值，其中一個等於VAL的元素
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div[class~="is"] {
background-color: bisque;
}
</style>
</head>
<body>
<div class="this is one">我是第一個div標籤</div>
<div class="this is two">我是第二個div標籤</div>
<div id="this is three">我是第三個div標籤</div>
<a href="" class="four">我是第四個a標籤</a>
</body>
</html>
```
4. E[ATT |= VAL]匹配所有具有ATT屬性有多個分隔符的值，其中一個值以VAL-開頭的元素
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div[class|="is"] {
background-color: bisque;
}
</style>
</head>
<body>
<div class="is-one">我是第一個div標籤</div>
<div class="this-is-two">我是第二個div標籤</div>
<div id="this is three">我是第三個div標籤</div>
<a href="" class="four">我是第四個a標籤</a>
</body>
</html>
```
5. E[ATT ^= VAL]匹配所有具有ATT屬性以VAL開頭
6. E[ATT $= VAL]匹配所有具有ATT屬性以VAL結尾
7. E[ATT *= VAL]匹配所有具有ATT屬性有VAL存在
### 偽元素選擇器
****在CSS中，偽元素選擇器通常以雙冒號(::)開頭****
1. E:first-line E元素的第一行
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div::first-line {
background-color: bisque;
}
</style>
</head>
<body>
<div class="is-one">我是第一個div標籤<br>換行之後就不會變色了</div>
</body>
</html>
```
2. E:first-letter E元素的第一個字
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div::first-letter {
font-size: 50px;
}
</style>
</head>
<body>
<div class="is-one">我是第一個div標籤<br>換行之後就不會變色了</div>
</body>
</html>
```
3. E:before E元素的內容之前，需配合content來使用
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div::before {
content: '我是在div元素之前的字';
font-size: 50px;
}
</style>
</head>
<body>
<div>我是第一個div標籤</div>
</body>
</html>
```
4. E:after E元素的內容之後，需配合content來使用
```css=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div::after {
content: '我是在div元素之後的字';
font-size: 50px;
}
</style>
</head>
<body>
<div>我是第一個div標籤</div>
</body>
</html>
```
### 結構偽類選擇器
**在CSS中，偽類選擇器通常以冒號(:)開頭**
1. :root將樣式綁定到頁面根元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root{
/*聲明變量*/
--bgColor:tomato;
--fontColor:#000;
}
body{
/*var() 使用變量*/
background-color: var(--bgColor);
}
p{
color: var(--fontColor);
}
</style>
</head>
<body>
<div>我是第一個div標籤</div>
</body>
</html>
```
2. E:not() 對某個元素使用樣式，但是排除此元素下的某個結構元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:not(.no){
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li>我是無序列表</li>
<li class="no">我是無序列表</li>
<li>我是無序列表</li>
</ul>
</body>
</html>
```
3. E:empty 匹配所有為空的元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:empty{
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li>我是無序列表</li>
<li></li>
<li>我是無序列表</li>
<li></li>
<li>我是無序列表</li>
<li></li>
</ul>
</body>
</html>
```
4. :target 匹配到連結到的目標
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:target{
font-size: 30px;
font-weight: bold;
color: bisque;
}
</style>
</head>
<body>
<a href="#james">James</a>
<a href="#wendy">Wendy</a>
<br>
<a id="james">我是James</a>
<a id="wendy">我是Wendy</a>
</body>
</html>
```
5. E:first-child 找到父元素中的第一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:first-child{
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
6. E:last-child 找到父元素中的最後一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:last-child{
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
7. E:nth-child(n) 對指定子元素元素E設置樣式，E:nth-child(an+b)為循環樣式
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:nth-child(3){
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
8. E:nth-last-child(n) 對倒數的指定子元素元素E設置樣式，E:nth-last-child(an+b)為循環樣式
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:nth-last-child(3){
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
9. E:nth-of-type(n) 僅匹配元素E的指定子元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:nth-of-type(3){
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<p>我<b>不是</b>有序列表</p>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
10. E:nth-last-of-type(n) 僅匹配元素E的倒數指定子元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:nth-last-of-type(3){
background-color: bisque;
}
</style>
</head>
<body>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<p>我<b>不是</b>有序列表</p>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
</body>
</html>
```
11. E:only-child 僅匹配父元素下只有唯一一個的子元素，且子元素恰為E元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p:only-child{
background-color: bisque;
}
</style>
</head>
<body>
<div>
<!--只有這個會被選中-->
<p>我是div的第一個p元素</p>
</div>
<div>
<p>我是div的第一個p元素</p>
<p>我是div的第二個p元素</p>
</div>
<div>
<p>我是div的第一個p元素</p>
<b>我是div的第二個b元素</b>
</div>
</body>
</html>
```
12. E:only-of-type僅匹配父元素下使用同種標籤的唯一一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p:only-of-type{
background-color: bisque;
}
</style>
</head>
<body>
<div>
<!--只有這個會被選中-->
<p>我是div的第一個p元素</p>
</div>
<div>
<!--因為不是唯一一個p元素-->
<p>我是div的第一個p元素</p>
<p>我是div的第二個p元素</p>
</div>
<div>
<!--只有這個的p會被選中-->
<p>我是div的第一個p元素</p>
<b>我是div的第二個b元素</b>
</div>
</body>
</html>
```
13. E:enabled 匹配表單中激活的元素(沒有diasble就會被選中)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:enabled{
background-color: bisque;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="text" value="admin">
<br>
<input readonly type="text" value="admin2">
<br>
<input disabled type="text" value="admin3">
<br>
</form>
</body>
</html>
```
14. E:disabled 匹配表單中未激活的元素(有diasble就會被選中)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:disbled{
background-color: bisque;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="text" value="admin">
<br>
<input readonly type="text" value="admin2">
<br>
<input disabled type="text" value="admin3">
<br>
</form>
</body>
</html>
```
15. E:checked匹配表單中被選擇的radio或checkbox元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input[type=radio]:checked+label{
font-size: 30px;
}
input[type=checkbox]:checked+label{
font-size: 30px;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="radio" name="sex" value="0" id="male"><label for="male">男</label>
<input type="radio" name="sex" value="1" id="female"><label for="female">女</label>
<input type="radio" name="sex" value="2" id="secret"><label for="secret">祕密</label>
<hr>
<input type="checkbox" name="skill[]" id="java"><label for="java">java</label>
<input type="checkbox" name="skill[]" id="C#"><label for="C#">C#</label>
<input type="checkbox" name="skill[]" id="python"><label for="python">python</label>
</form>
</body>
</html>
```
16. E:forcus匹配表單中被滑鼠點擊的項目，只對輸入域有效
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:focus{
font-size: 30px;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="text" value="admin">
<br>
<input readonly type="text" value="admin2">
<br>
<input disabled type="text" value="admin3">
<br>
</form>
</body>
</html>
```
17. ::selection 滑鼠反白選取的效果
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
::selection{
background-color: bisque;
}
</style>
</head>
<body>
<div>我是div標籤</div>
</body>
</html>
```
### 狀態偽類選擇器
1. :link 設置超連結a在未被訪問前的樣式
2. :visited 設置超連結a已經被訪問的樣式
3. :hover 設置元素在滑鼠旋停的樣式
4. :active 設置元素在被用戶激活的樣式
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:link{
color: bisque;
}
:visited{
color:blue;
}
:hover{
color: green;
}
:active{
color: gray;
}
</head>
<body>
<a href="https://google.com">去google</a>
</body>
</html>
```
### 選擇器優先級
* !important為最高優先級(避免使用)
* 內聯樣式:優先級1000
* id選擇器:優先級100
* 類和偽類:優先級10
* 元素選擇器:優先級1
* 通配符選擇器:優先級0
當選擇器包含多種時，需要將多種選擇器優先級相加進行比較，若是一樣以放在最後面的為準
## CSS基本屬性
### color 字體顏色
* ColorName(顏色名稱)
* HEX(十六進制)
* rgb(紅, 綠, 藍)
* rgba(紅, 綠, 藍, 透明度)
* hsl(色相, 飽和度, 亮度)
* hsla(色相, 飽和度, 亮度, 透明度)
* transparent(透明色)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.one{
color:bisque;
}
.two{
color: #00ff00;
}
.three{
color: rgb(0, 255, 255)
}
.four{
color: rgba(255, 0, 0, 0.5);
}
.five{
color: hsl(180deg, 50%, 50%);
}
.six{
color: hsla(180deg, 50%, 50%, 0.5);
}
.seven{
color: transparent;
}
</style>
</head>
<body>
<p class="one">我是顏色名稱</p>
<p class="two">我是十六進制</p>
<p class="three">我是RGB模式</p>
<p class="four">我是RGBA模式</p>
<p class="five">我是CSS3中新增HSL模式</p>
<p class="six">我是CSS3中新增HSLA模式</p>
<p class="seven">我是CSS3中透明色</p>
</body>
</html>
```
### font-style 字體樣式
* normal 正常
* italic 斜體
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.font{
font-style: italic;
}
</style>
</head>
<body>
<p class="font">我是字體樣式</p>
</body>
</html>
```
### font-size 字體大小
PC端瀏覽器默認字體大小為16像素，最小支持12px
* 絕對單位
* px 像素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
x <style>
.one{
font-size: 14px;
}
</style>
</head>
<body>
<div class="one">我是div的標籤</div>
</body>
</html>
```
* 相對單位
* em 對於父類文本大小，如未設置就是相對於瀏覽器的大小
```html=
<!DOCTYPE html>
<html lang="en">
<head>
x <style>
.one{
font-size: 14px;
}
.em{
font-size: 3em;
}
</style>
</head>
<body>
<div class="one">
我是div標籤
<p class="em">我是測試em的p標籤</p>
</div>
</body>
</html>
```
* ex 相對於一個正常x字符的大小，2ex≒1em
```html=
<!DOCTYPE html>
<html lang="en">
<head>
x <style>
.one{
font-size: 16px;
}
.ex{
font-size: 3em;
}
</style>
</head>
<body>
<div class="one">
我是正常的x大小
<p class="ex">我是測試ex的p標籤</p>
</div>
</body>
</html>
```
* **rem 相對於根元素(重要)**
* 10px=0.625rem
* 12px=0.75rem
* 14px=0.875rem
* 16px=1rem(基準點)
* 18px=1.125rem
* 20px=1.25rem
* 24px=1.5rem
* 32px=2em
```html=
<!--常用佈局案例-->
html {font-size: 62.5%;}
body {font-size: 1.4rem;}
h1 {font-size: 2.4rem;}
```
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.rem{
font-size: 2rem;
}
</style>
</head>
<body>
<div class="one">
我是正常的p標籤
</div>
<div class="rem">
測試rem的div標籤
</div>
</body>
</html>
```
### font-fmaily 字型
字體名稱按優先順序排列，以逗號隔開(若包括空格及中文要用引號括起來)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.family{
font-family: "微軟正黑體", "楷體";
}
</style>
</head>
<body>
<div class="family">我是p標籤</div>
</body>
</html>
```
### font-weight 指定字體的粗細
* normal 正常字體，相當於數值400
* bold 粗體，相當於數值700
* lighter 細體
* 數值
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.bold{
font-weight: bold;
}
.lighter{
font-weight: lighter;
}
.number{
font-weight: 900;
}
</style>
</head>
<body>
<div class="bold">我是粗體</div>
<div class="lighter">我是細體</div>
<div class="number">我是數值</div>
</body>
</html>
```
### font-variant 設置小型的大小字母
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.abc{
font-variant: small-caps;
}
</style>
</head>
<body>
<div class="abc">this is a div element</div>
</body>
</html>
```
### letter-spacing 設置字體間距
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.font{
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="font">我是div標籤</div>
</body>
</html>
```
### word-spacing 設置單字間距(空格有效)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.font{
word-spacing: 10px;
}
</style>
</head>
<body>
<div class="font">It's the div element</div>
</body>
</html>
```
### opacity 設置顏色的透明度
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.font{
opacity: 0.5;
}
</style>
</head>
<body>
<div class="font">設置透明度</div>
</body>
</html>
```
## 文本屬性
### overflow|overflow-x|overflow-y 當內容溢出元素框時的行為
* visible 對溢出的內容不做處理，內容可能會超出容器
* hidden 隱藏溢出的內容且不出現滾動條
* scroll 隱藏溢出容器的內容，溢出的內容可以通過滾動呈現
* auto 當內容無溢出不會出現滾動條，反之則相反
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overflow{
width: 100px;
height: 100px;
border:1px solid blue;
margin-bottom: 50px;
overflow: visible;
}
.scroll{
width: 100px;
height: 100px;
border:1px solid blue;
margin-bottom: 50px;
overflow: scroll;
}
.auto{
width: 100px;
height: 100px;
border:1px solid blue;
margin-bottom: 50px;
overflow: auto;
}
.hidden{
width: 100px;
height: 100px;
border:1px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="overflow">
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
<div class="scroll">
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
<div class="auto">
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
<div class="hidden">
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
</body>
</html>
```
### text-overflow 讓溢出的文字以省略號顯示
**不能單獨使用需搭配其他屬性，中文會默認換行**
* clip 當內容溢出容器時，將溢出部分裁切掉
* ellipsis 當內容溢出容器時，將溢出部分替換為(...)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.clip{
width: 100px;
height: 100px;
border:1px solid blue;
margin-bottom: 50px;
text-overflow: clip;
overflow: hidden;
}
.ellipsis{
width: 100px;
height: 100px;
border:1px solid blue;
margin-bottom: 50px;
text-overflow: ellipsis;
overflow: hidden;
/*中文會自動換行，必須設置內容在同一行*/
white-space: nowrap;
}
</style>
</head>
<body>
<div class="clip">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
<div class="ellipsis">
我是div中間的內容，
我在測試這樣的程度會不會超出元素的大小，
若是超過他會出現滾輪嗎?
</div>
</body>
</html>
```
### white-space 設置文字是否在同一行顯示
* normal 默認處理方式，會將一連串的空格視為一個，內部是否換行由換行規則決定
* pre 原封不動保留你輸入時的狀態，空格、換行都會保留，並且當文字超出邊界時不換行。等同pre元素效果
* nowrap 與normal值一致，不同的是會強制所有文本在同一行內顯示
* pre-wrap 與pre值一致，不同的是文字超出邊界時將自動換行
* pre-line 與normal值一致，但是會保留文本輸入時的換行
Sign in with Wallet
Connect another wallet