HTML
===
### 放css、和icon

| 標籤總類 | 說明 |
| -------- | -------- |
|< link rel="stylesheet" href="/CSS/01.css" > | 放入css |
|< link rel="icon" href="/PIC/1631864440.ico" > | 放入icon |
****

### 基本標籤
| 標籤總類 | 說明 | 範例 |
| -------- | -------- | -------- |
|< h1 > ~ < h6 >| 標題大小 | < h1 >我是誰< /h1 >|
|< a > | 可直接連網址 | < a href="網址">顯示可按名稱< /a > <br>text-decoration:none;(隱藏超連結底線範例)<br>a標籤要置中 css用display: block;、text-align: center;<br>
|
|< a > | 可另開頁面連網址 | < a href="網址" targrt=_blank>顯示可按名稱< /a > |
|< p >|段落(文字) | 可用假文字:Lorem*3(出現三個段落)Lorem3(出現三個字)<br>不能去包div會有問題;< a >可以|
< ul >、< li >| 無序標籤 | ●我是誰<br>●我是誰<br>●我是誰<br>|
|< ol >| 有序標籤 | 1.我是誰<br>2.我是誰<br>3.我是誰<br>|
|< img >|放入圖片 | < img src="圖片連結或檔案位子" alt="圖片名稱(檔案遺失會顯示"<br>●相對路徑(同層可直接打圖片名稱)<br>●絕對路徑 pic/pic.jpg 資料夾名稱/圖名<br>●兩個資料夾圖片互連 < img src="..(離開此資料夾/pic(另資料夾)/圖名>" alt="檔案遺失會顯示"|
|< br > | 斷行 | < br >我是誰(沒有< /br >|
|< hr/ > | 分隔內容(建水平線) | < p >我是誰< /p ><br>< hr/ ><br>< p >我是誰< /p >|
****

### 基本標籤
| 標籤總類 | 說明 | 範例 |
| -------- | -------- | -------- |
|< small > | 文字縮小 | 你好啊請問<small>"你是誰"</small>阿!|
|< big > | 文字放大 | 你好啊請問<big>"你是誰"</big>阿!|
|< em > | 文字斜體 | 你好啊請問<em>"你是誰"</em>阿!|
|< i > | 文字斜體 | 你好啊請問<i>"你是誰"</i>阿!|
|< strong > | 文字粗體 | 你好啊請問<strong>"你是誰"</strong>阿!|
|< b > | 文字粗體 | 你好啊請問<b>"你是誰"</b>阿!|

### 表格table標籤
| 標籤總類 | 說明 | 範例 |
| -------- | -------- | -------- |
|< table > | 建立表格 | 最外面層|
|< caption >| 表格的標題 | 顯示表格標題|
|< tr > | 橫列| td上層|
|< th > | 標題| 標題< tr > 裡面有 < th > |
|< td > | 直行| 內容< tr > 裡面有 < td > |
|< thead > | 表格區塊標題 |< thead >裡面有< tr > 裡面有 < th >|
|< tbody > | 表格區塊內容 |< tbody >裡面有< tr > 裡面有 < td >|
|< tfoot> | 表格區塊頁腳 |< tfoot >裡面有< tr > 裡面有 < td >|
|border-collapse: collapse; | css |合併表格|
|border-collapse: separate;| css |分離表格|
|border-spacing: 0;| css |boder間距0|

* https://www.fooish.com/html/table.html --表格介紹
* https://codepen.io/sz594380/pen/KKXvELB --表格導圓角範例

:::danger
:::spoiler 表格css (thead導圓角)範例：

.alert_box table{ 
  width: 1700px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.alert_box table thead{
  /* background-color:rgb(255, 129, 39) ; */
  text-align: center;
  /* border-left: 2px solid #F6871D; */

}

.alert_box  th{
  font-family: Arial, Helvetica, sans-serif;
  color:#fff ;
  padding: 10px;
  font-size: 18px;
  /* border-radius: 30px; */
  border-top: 2px solid #F6871D;     /* 繪製上面線段 */
  border-bottom: 2px solid #F6871D;/* 繪製下面線段 */
}

.alert_box thead th:first-child{ 
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 2px solid #F6871D;/* 只繪製第一格的左邊線段 */
}

.alert_box thead th:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 2px solid #F6871D;/* 只繪製最後格的又邊線段 */
}

:::danger
:::spoiler 表格css th固定td滾動：

 .alert_box table tr {
  width: 100%;
  display: table;
} 
/* 要先在上面 */

 .alert_box tbody {
  display: block;
  height: 600px;
  overflow-y: scroll;
  color:#fff
    }