# HTML
## 常用標籤

粗體 <b></b> 
斜體 <i></i>
標題(由大至小) <h1></h1>、<h2></h2>、<h3></h3>...以此類推
內文 <p></p>
換行 <br>
圖像 <img src="">
連結 <a href=""></a>

快捷鍵:選取標籤字按tab鍵出現<>節省時間與麻煩

其餘標籤、屬性可查詢「[html tag](https://www.w3schools.com/tags/tag_html.asp)」

## 結構與層級
- 群組化：使呈現的東西好移動或修改
- 自動排列清單
- 語法

  <ol>
      <li>項目</li>
      <li>項目</li>
      <li>項目</li>
  </ol>

- 導覽列應用範例 (division分割)

    <div>
        <ul>
          <li>首頁</li>
          <li>簡介</li>
          <li>作品</li>
          <li>聯絡方式</li> 
        </ul>
    </div>

補充：
ol = orderlist，有編號的排序清單
ul = unorderlist，不加編號的排序清單
div為不具備任何屬性的分隔標籤，塞任何東西都是預設的
## 調整外觀、顏色與框線
- 更改字體顏色
- 語法

    <h1>標題字</h1>
    <h1 style="color: red;">紅標題字</h1>

- 呈現
- 調整間距
- 語法

    <h1 style="color: red;">紅標題字</h1>
    <h1 style="color: red;letter-spacing: 10px">10px間隔的紅標題字</h1>

- 呈現
- 添加框線、背景顏色
- 語法

    <h1 style="border:solid 2px black; width:400px;height:300px;background-color:#ccc">標題字</h1>

- 呈現
- div標籤
- 語法

    <div style="font-size: 28px;font-weight: bold;">hello world!</div>

- 呈現
# CSS
## 分開撰寫概念
由於在HTML中添加style會顯得較為混亂與不易管理，且若要用同個CSS，必須打兩次，因此在網頁作業中偏好將style分開來寫。
## class
- 調整對應元素之顏色
- 語法
- HTML

        <h1 class="redtext">標題</h1>
        <h1 class="redtext">標題</h1>
        <h1>標題</h1>
        <h1>標題</h1>

- CSS

        h1{
          color:blue;
        }
        .redtext{
          color:red;
          font-size:12px;
        }

- 呈現
- 利用div標籤--->按鈕
- 語法
- HTML

    <div class="button">第一個按鈕</div>
    <div class="button">第二個按鈕</div>
    <div class="button black_button">第三個按鈕</div>

- CSS

    .button{
      display: inline-block;
      border: solid 1px black;
      border-radius: 5px;
  
      padding: 10px;
      padding-left: 20px;
      padding-right: 20px;
  
      font-family: 微軟正黑體;
    }
    .black_button{
      background-color: black;
      color: white;
    }

- 呈現

特殊性質補充：在疊加樣式的情況下，若後面class內的樣式和前者重複，則後者將蓋掉前者。
## id
- 特色
用來標示網頁獨一無二的元素，只能有一個，
因為之後的id將全被忽略，透過JS操作某組樣式，只有第一組會被更改。
- 調整對應元素之顏色
- 語法
- HTML

     <div id="sp_text">id存取</div>

- CSS

     #sp_text{
       color: blue;
     }

- 呈現
## 顯示方式
- display
- 預設為block
特性:連續給時會換行
- none
全消失
- inline/inline-block差異(margin)
- inline
只能調整左右距
- inline-block
可調整元素與外面距離(上下左右皆可，ex:margin-top: 10px)
- inline、inline-block與block差異(border)
- inline、inline-block
與字緊貼
- block
整個撐滿
- 仿hahow導覽列練習
補充：挑選配色可查詢「[color picker](https://www.webfx.com/web-design/color-picker/)」
- 程式碼
- HTML

    <ul class="nav_area">
    <li class="button">課程簡介</li>
    <li class="button">預計單元</li>
    <li class="button">常見問題</li>
    <li class="button">留言發問</li>
    </ul>

- CSS

    .button{
      display: inline-block;
      
      padding: 10px;
      padding-left: 30px;
      padding-right: 30px;
      background-color: #33bbae;
      
      border-bottom: solid 7px #53e5d6;
      
      font-family: 微軟正黑體;
      font-weight: bold;
      letter-spacing: 1px;
      color: white;
    }
    .nav_area{
      background-color: #33bbae;
    }

- 呈現
## 元素位置
- 定位方式
改變top(上距)、bottom(下距)、left(左距)、right(右距)
預設為static
- 相對定位
- static(預設排列位置)
自動排列下來，無法調整位置
- relative(相對預設排列位置)
自動排列下來，且可調整偏移
- 絕對定位
- absolute(絕對上層位置)
可絕對定位
- fixed(絕對視窗位置)
固定在視窗特定位置，無論如何捲動都不會動
- 實作練習
- 程式碼
- HTML

    <h3>CSS定位方式</h3>
    <div class="static">static自動排列下來，無法調整位置</div>
    <div class="relative">relative自動排列下來，且可調整偏移(左距30px)</div>
    <div class="absolute">absolute可絕對定位(上距50px、右距50px)</div>
    <div class="fixed">fixed固定在視窗特定位置，無論如何捲動都不會動(上距200px、右距50px)</div>

- CSS

    body{
      height: 2000px;
    }
    .static{
      position: static;
    }
    .relative{
      position: relative;
      left: 30px;
    }
    .absolute{
      position: absolute;
      right: 50px;
      top: 50px;
    }
    .fixed{
      position: fixed;
      right: 50px;
      top: 200px;
    }

快捷鍵：div.class名稱--->按tab鍵
- 呈現
1. 移動前
2. 移動後
- 將absolute在特定元素中定位(放到另一個div內)
absolute特性：只針對可定位的上層元素做調整---relative、absolute、fixed，static則無法
## 內外間隔
- 概念
- padding內距
用來調整內部東西與框線距離
- margin外距
用來調整整個元素與外部所有元素(ex:子元素與父元素、相鄰子元素間...)的距離
- 實作練習
1. 利用div標籤觀察內外距
- 程式碼
- HTML

      <div class="outer">
        <div class="inner">
          一些文字
        </div>
        <div class="inner">
          一些文字
        </div>
      </div>

- CSS

      .outer{
        display: inline-block;
        border: solid 2px black;
        width: 400px;
        height: 300px;
      }
      .inner{
        display: inline-block;
        border: solid 2px black;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        
        margin-left: 40px;
        margin-top: 20px;
      }

- 呈現

2. 導覽列製作
- 程式碼
- HTML

      <ul class="outer">
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
      </ul>

- CSS

      .outer{
        display: inline-block;
        border: solid 2px black;
        width: 400px;
        height: 300px;
      }
      .inner{
        display: block;
        border: solid 2px black;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        
        margin-top: 10px;
        margin-right: 50px;
      }

- 呈現
## 字體變化&span
- 字體性質
1. 種類 font-family
2. 大小 font-size
3. 顏色 color
4. 粗細 font-weight
5. 間距 letter-spacing
6. 行距 line-height
- 實作練習觀察字體變化
- 程式碼
- HTML

    <div class="fdemo_1">font-family字體種類</div>
    <div class="fdemo_2">font-size字體大小</div>
    <div class="fdemo_3">color字體顏色</div>
    <div class="fdemo_4">font-weight字體粗細</div>
    <div class="fdemo_5">letter-spacing字體間距</div>
    <div class="fdemo_6">line-height字體行距 <br>line-height字體行距 <br>line-height字體行距</div>

- CSS

    .fdemo_1{
      font-family: 微軟正黑體;
    }
    .fdemo_2{
      font-size: 30px;
    }
    .fdemo_3{
      color: blue;
    }
    .fdemo_4{
      font-weight: 900;
    }
    .fdemo_5{
      letter-spacing: 10px;
    }
    .fdemo_6{
      line-height: 40px;
    }

- 呈現
- span
- 與div差異
div顯示預設為block(同行);span預設則為inline(同排)
- 實作練習
- HTML

    <p>文章練習文章練習文章練習，<span class="title">文章練習</span>文章練習文章練習文章練習文章練習文章練習。</p>

- CSS

    .title{
      font-size: 30px;
      color: red;
      font-family: 微軟正黑體;
      letter-spacing: 10px;
      line-height: 50px;
      font-weight: 900;
    }

- 呈現

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::