---
title: 前端筆記本
tag: html
---
# 前端筆記本
非本科系學程式找工作
https://www.youtube.com/@pygit-docker/playlists
GitHub參考程式碼
https://github.com/NaxChang/HTML/tree/master/HTML
- [文字格式](#2025/02/04)
- [文字排版](#2025/01/23)
- [清單屬性](#2025/01/22)
- [合併儲存格](#2025/01/21)
- [form表單 <optgroup>元素>] (#2025/01/21)
# 文字格式
## 項目符號與編號:ul,ol,li元素
當閱讀書籍或整理資料時,可能會希望將相關資料條列式的編排出來
這個時候可以使用ul元素,為資料加上項目符號,或是ol元素為資料加上編號,然後使用li元素設定個別的項目資料
設定值 | 說明 |
|------------|-----------------------------|
| `1` | 從1開始的阿拉伯數字|
| `A` | 大寫的英文字母 |
| `a` | 小寫的英文字母 |
| `I` | 大寫的羅馬字母 |
| `i` | 小寫的羅馬字母 |
start="n":設定編號的起始值,省略不寫,表示從1,A,a,I,i開始
reversed:以顛倒的編號順序顯示清單:例如: 5 4 3 2 1
value="n":設定一個整數給項目資料,表示該項目資料的序數
```html=
<body>
<ul>
<li>Django</li>
<li>SQL</li>
<li>Docker</li>
<li>Git</li>
<li>python</li>
</ul>
<ol type="a" start="5">
<li>Django</li>
<li>SQL</li>
<li>Docker</li>
<li>Git</li>
<li>python</li>
</ol>
</body>
```
顯示結果如下:
# 文字排版
## text-indent(首行縮排)
我們可以使用**text-indent**屬性設定HTML元素的首行縮排語法如下
```html=
text-indent: 長度 | 百分比
```
長度:使用px,pt,mm,cm,in...等設定首行縮排的長度,屬於固定長度
```html=
<p style="text-indent: 50px">
```
百分比:使用百分比設定首行縮排佔容器寬度的比例,例如:
```html=
<p style="text-indent: 10%">
```
<details><summary>程式碼參考</summary>
```html=
<body>
<p style="text-indent: 1cm">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
<p style="text-indent: 20%">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
</body>
```
</details>
結果如下:
## text-align(文字對齊方式)
我們可以使用text-align屬性設定HTML的對齊方式
```html=
text-align: start | end | left | right | center |
```
```html=
<p style="text-align: start"> 對齊開頭
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p> |
```
start:對齊開頭
end:對齊結尾
left:靠左
right:靠右
center置中
justify:左右對齊的方式
match-parent:繼承父元素的對齊方式
**以下示範開頭,結尾,置中,左右對齊**
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="text-align: start;">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
<p style="text-align: end;">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
<p style="text-align: center;">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
<p style="text-align: justify;">
The sun sets over the tranquil lake, casting golden reflections on the
water. Trees sway gently in the breeze, their leaves rustling softly. The
peaceful sound of birds singing fills the crisp evening air.
</p>
</body>
```
</details>
**結果如下:**
## letter-spacing(字母間距)
```html=
letter-spacing: normal | 長度
```
範例如下:
```html=
<p style="letter-spacing: normal;"> 文字 <p>
```
文字之間的間距如果要調整,我們可以使用(字母間距)
也就是字母與字母之間的長度,它的語法如下:
letter-spacing: normal | 長度
可以設定為正常或長度有多少px,多少公分等等...
這裡做個示範,第一個正常,第二個3個px,第三個0.2cm
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="letter-spacing: normal">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="letter-spacing: 3px">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="letter-spacing: 0.25cm">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
</body>
```
</details>
製作結果如下:
## word-spacing(文字間距)
如果我要調整單字與單字之間的距離,我們可以使用文字間距)
它的語法如下:
word-spacing: normal | 長度
可以設定為正常或長度有多少px,多少公分等等...
這裡做個示範,第一個正常,第二個3個px,第三個0.2cm
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="word-spacing: normal">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="word-spacing: 3px">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="word-spacing: 0.2cm">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
</body>
```
</details>
結果如下:
## text-transform(大小寫轉換方式)
各位如果要進行大小寫轉換,我們可以用text-transform(大小寫轉換),屬性設定HTML元素大小
它的語法如下:
```html=
text-transform: none | capitalize | uppercase | lowercase
```
屬性 | 說明 |
|------------|-----------------------------|
| `none` | 無（預設值） |
| `capitalize` | 單字的第一個字母大寫 |
| `uppercase` | 全部大寫 |
| `lowercase` | 全部小寫 |
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="text-transform: none">
The sun sets over the tranquil lake, casting golden reflections on the water.
</p>
<p style="text-transform: capitalize">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="text-transform: uppercase">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
<p style="text-transform: lowercase">
The sun sets over the tranquil lake, casting golden reflections on the
water.
</p>
</body>
```
</details>
結果如下:
## 文字樣式
我們可以使用white-space屬性設定HTML元素的換行,定位點,空白
自動換行的顯示方式,語法如下
```html=
white-space: normal | pre | nowrap | pre-wrap | pre-line
```
| | 換行 | 定位點/空白 | 自動換行 |
|---------|---------|---------|---------|
| normal | No | No | Yes |
| pre | Yes | Yes | No |
| nowrap | No | No | No |
| pre-wrap | Yes | Yes |Yes |
| pre-line | Yes | No | Yes |
normal:
**換行**：No（不會保留換行符，會自動合併空格）
**定位點/空白**：No（空格會被合併為一個空格）
**自動換行**：Yes（當文本超過容器寬度時，會自動換行）
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="white-space: normal">這是第一行 這是第二行 這是第三行</p>
</body>
```
</details>
結果如下:
pre:
**換行**：保留換行符，換行會顯示為新的一行。
**定位點/空白**：保留所有空格，包括多餘的空格。
**自動換行**：不會自動換行，超出容器寬度的文本會溢出。
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<p style="white-space: pre">這是第一行 這是第二行 這是第三行</p>
</body>
```
</details>
## 文字陰影(text-shadow)
我們可以使用text-shadow屬性設定HTML元素的文字陰影
它的語法如下:預設值為none(無),若要設定多重陰影,以逗號隔開設定即可
```html=
text-shadow: none | [[長度1 長度2 長度3[色彩]][,...]]
```
**長度1:** 陰影的水平位移,正值表示在右側,負值表示在左側
**長度2:** 陰影的垂直位移,正值表示在下方,負值表示在上方
**長度3:** 陰影的模糊半徑,預設值為0,不能為負值
**色彩:** 陰影的色彩,預設值為前景色彩
<span style="font-size: 25px;">
以下範例第一段做正值,第二段作負值,第三段製作兩組陰影:</span>
<details>
<summary>點此展開程式碼</summary>
```html=
<body>
<h1 style="text-shadow: 12px 8px 5px yellow">Nameless</h1>
<h1 style="text-shadow: -12px -8px 5px orange">Nameless</h1>
<h1 style="text-shadow: -10px -10px 2px cyan, 20px 20px 2px silver" ;>
Nameless
</h1>
</body>
```
</details>
<span style="font-size: 36px;">結果如下:</span>
## 光暈,立體,浮雕,描邊(text-shadow)
接下來的例子我來示範製作光陰,立體,浮雕,描邊
一. 光暈(水平與垂直位移均為0的灰色模糊陰影)
```html=
<h1 style="text-shadow: 0 0 7px #333333">Nameless</h1>
```
二. 立體(左上和右下各加上灰色與白色無模糊陰影)
```html=
<h1 style="text-shadow: -1px -1px 0, 1px 1px 0">Nameless</h1>
```
三. 浮雕(左上和右下各加上白色與灰色無模糊陰影)
```html=
<h1 style="text-shadow: -1px -1px 0 #222222, 1px 1px 0 white">Nameless</h1>
```
四.描邊(左上,左下,右上,右下,各加上灰色無模糊陰影)
```html=
<h1 style="text-shadow: -1px -1px 0 #333333, -1px 1px 0 #333333, 1px -1px 0 #333333,
1px 1px 0 #333333;">Nameless</h1>
```
長度1: 陰影的水平位移,正值表示在右側,負值表示在左側
長度2: 陰影的垂直位移,正值表示在下方,負值表示在上方
長度3: 陰影的模糊半徑,預設值為0,不能為負值
色彩: 陰影的色彩,預設值為前景色彩
<details>
<summary>點此展開程式碼</summary>
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: lightblue;
color: white;
}
h1 {
font-family: Arial Black;
font-size: 45px;
}
</style>
</head>
<body>
<h1 style="text-shadow: 0 0 7px #333333">Nameless</h1>
<h1 style="text-shadow: -1px -1px 0, 1px 1px 0">Nameless</h1>
<h1 style="text-shadow: -1px -1px 0 #222222, 1px 1px 0 white">Nameless</h1>
<h1
style="
text-shadow: -1px -1px 0 #333333, -1px 1px 0 #333333, 1px -1px 0 #333333,
1px 1px 0 #333333;
"
>
Nameless
</h1>
</body>
</html>
```
</details>
<span style="font-size: 36px;">結果如下:</span>
------------------------------------
# 清單屬性
## 項目符號
使用list-style-type屬性設定清單的項目符號與編號類型
如下圖,預設值為disc
**項目符號:**:這是使用無順序的圖案做為項目符號,設定如下
| 設定值 | 說明 | 設定值 | 說明 |
|--------|--------|--------|--------|
| disc(預設) | 實心圓點 | square |實心方塊|
| circle | 中心圓點 | none | 不顯示項目符號 |
<details>
<summary>點此展開程式碼</summary>
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<ul>ㄋ
<li>python</li>
<li>Linux</li>
<li>Django</li>
<li>Js</li>
<li>Git</li>
</ul>
</body>
</html>
```
</details>
**製作結果如下:**
## 編列型號
將項目編號改為英文大寫
需有序清單ol(Ordered List)
``` html=
<style>
ul {
list-style-type: upper-alpha;
}
```
<details>
<summary>點此展開程式碼</summary>
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ol {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>python</li>
<li>Linux</li>
<li>Django</li>
<li>Js</li>
<li>Git</li>
</ol>
</body>
</html>
```
</details>
--------------------------------------
## 圖片項目符號
```
除了先前所介紹的項目符號與編號
我們也可以使用list-style-image
屬性設定圖片項目符號的圖檔名稱,預設值為none(無)
```
```html=
list-style-image: url(圖檔名稱);
```
<details>
<summary>點此展開程式碼</summary>
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style-image: url(ht.png);
}
</style>
</head>
<body>
<ul>
<li>python</li>
<li>Linux</li>
<li>Django</li>
<li>Js</li>
<li>Git</li>
</ul>
</body>
</html>
```
</details>
製作結果如下:
## 項目符號與編號位置
在預設的情況下,項目符號與編號都位於項目文字區塊的外部
但有時候我們可能希望項目符號與編號納入項目文字區塊
這時候可以使用list-style-position屬性設定項目符號與編號位置
**outside**: 項目符號與編號位於項目文字區塊外部(預設)
**inside**: 項目符號與編號位於項目文字區塊內部
```html=
list-style-position: ouside | inside
```
<details>
<summary>點此展開程式碼</summary>
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style-position: outside;
}
ul.sight {
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>風景</li>
</ul>
<ul class="sight">
<li>
The towering peaks of the mountains rise majestically, their snowy caps
sparkling under the sun. The valleys below are lush and green, offering
a stunning contrast to the rugged terrain above.
</li>
<li>
The fresh, cool air fills your lungs, and the silence is only broken by
the occasional call of a bird soaring through the sky.
</li>
</ul>
</body>
</html>
```
</details>
**結果如下:**
--------------------------------------------
# 合併儲存格
## 跨列合併儲存格
```
需要將某幾列的儲存格合併成一格儲存格
如下圖片,要達到跨列的效果
可以使用<td>或<th>元素的rowspan="n"的屬性
其中n為合併列數
下面例子,它在第二列的儲存格加上一個rowspan="2"屬性
表示該儲存格是由兩個儲存格跨列合併而成
<tr> 用來定義一個表格行（row）。它是整個表格中的一行
<th> 是表格中用來定義「表頭儲存格」的標籤。
<td> 用來定義表格中的資料儲存格。
每個 <td> 標籤表示表格的一個單元格
```
<details>
<summary>點此展開程式碼</summary>
```html=
<table border="1">
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td rowspan="2">python</td>
<td>Linux</td>
<td>html</td>
</tr>
<tr>
<td>Django</td>
<td>Git</td>
</tr>
</table>
```
</details>
製作結果如下:
## 跨行合併儲存格
```
需要將某幾行的儲存格合併成一格儲存格
如下圖片,要達到跨行的效果
可以使用<td>或<th>元素的colspan="n"的屬性
其中n為合併行數
下面例子,它在第三列的儲存格加上一個colspan="2"屬性
表示該儲存格是由兩個儲存格跨行合併而成
```
<details>
<summary>點此展開程式碼</summary>
```html=
<table border="1">
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>python</td>
<td>Linux</td>
<td>Docker</td>
</tr>
<tr>
<td>Django</td>
<td colspan="2">Powerbi</td>
</tr>
</table>
```
</details>
製作結果如下:
## HTML 開啟,切換,以及上GitHub
```bash=
$ ls
# HTML/ README.md
```
```bash=
$ cd HTML(這是資料夾名稱)
$ cd ls
2024_0927/ 2025_0119/ 2025_0124/ 250115.html 25_0226.html hello.html l_241021.html
2024_1022/ 2025_0122/ 240927.html 250121_table_1.html README.md html_explain.html
2024_1030/ 2025_0123/ 250114.html 250121_table_2.html del_ins.html html_sample.html
```
### 2025/02/28 嵌入聲音
資料夾不會附任何副檔名
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-3 嵌入聲音</title>
</head>
<body>
<footer>
<audio src="main-version.mp3" controls></audio>
</footer>
</body>
</html>
main-version.mp3
結果如下:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-3 嵌入聲音</title>
<style>
/* 固定音訊播放器在視窗底部 */
.audio-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f8f8f8;
padding: 10px;
text-align: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個網頁內容示例。</p>
<!-- 固定播放器 -->
<div class="audio-container">
<audio src="main-version.mp3" controls></audio>
</div>
</body>
</html>
```
結果如下:
### 6-6 選項群組<optgroup>
```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>
<form action="">
<label for="TVBS">請選擇觀賞的節目:</label>
<select name="" id="TVBS">
<optgroup label="國內新聞頻道">
<option>晚間新聞</option>
<option>即時新聞</option>
</optgroup>
<optgroup label="國外新聞頻道">
<option>CNN</option>
<option>NHK</option>
</optgroup>
</select>
</form>
</body>
</html>
```
# form表單 <optgroup>元素
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<label for="news">選擇要觀賞的節目</label>
<select name="" id="news">
<optgroup label="國內新聞頻道">
<option value="">晚間頻道</option>
<option value="">即時新聞</option>
</optgroup>
<optgroup label="國外新聞頻道">
<option value="">CNN</option>
<option value="">NHK</option>
</optgroup>
</select>
</form>
</body>
</html>
```
Sign in with Wallet
Connect another wallet