---
# System prepended metadata

title: '[網站] 筆記'
tags: [web]

---

#    [網站] 筆記
###### tags: `web`
## 圖檔以及音檔
### GIF圖檔
* 透明圖
* 動畫圖
* 交錯圖
    * 粗略載入整張圖片，讓遊覽者先看到模糊的樣子再顯示完整的圖片

### PNG圖檔
* 非失真的壓縮
* 透明圖
* 交錯圖
* 無法製作動畫

### MIDI音檔
* 適合當網頁背景音樂
* 只記錄樂器資訊，不傳送聲音，檔案小

### MP3音檔
* 破壞性的壓縮，檔案小

## HTML5

### 撥放音檔
* 使用TAGS標記
    ```htmlmixed=
    <video>
    <audio>
    ```
* 與HTML4比較，無需外掛

---
### 繪出圖型
* < canvas >

---
### DOCTYPE標準宣告
* 不是一個 HTML 標籤
* 告訴瀏覽器 (browser) 此文件是屬於什麼文件類型 (Document Type Declaration, DTD)
* 現代網頁的 DOCTYPE 基本上都是用 <!DOCTYPE html> 來表示這是一份標準的 HTML5 文件。
```htmlmixed=
<!DOCTYPE html>
```
---
### < head > 頭標記
* 存放網頁相關資訊，通常不會呈現於網頁內
    ```htmlmixed=
    <title>
    <meta>
    ```
---
### < body >
* 存放網頁的內容
---
* 存放網頁相關資訊，通常不會呈現於網頁內
    ```htmlmixed=
    <title>
    <meta>
    ```
---
### tags內屬性
* 改變網頁呈現方式，屬性可是多個
    * <起始標記 屬性名稱1=設定值1 屬性名稱2=設定值2>
    ```htmlmixed=
    <html lang="zh-tw">
    設定中文
    ```
---
### 段落效果
* 換行並增加一行空白
    ```htmlmixed=
    <p></p> 
    ```
* 換行 
    ```htmlmixed=
    <br />  
    ```
* 顯示縮排等方式與程式碼相同
    ```htmlmixed=
    <pre></pre> 
    ```
* 標記引用文字，文字會換行並縮排 
    ```htmlmixed=
    <blockquote></blockquote>
    ```
* 分隔線效果 
    ```htmlmixed=
    <hr> 
    ```
* 段落標題h1字體最大;h6最小
    ```htmlmixed=
    <h1>~<h6> 
    ```
---
### 文字效果
* 粗體字
    ```htmlmixed=
    <b></b> 建議用CSS font-weight語法代替
    ```
* 斜體字
    ```htmlmixed=
    <i></i> 建議用CSS font-style語法代替
    ```
* 底線字
    ```htmlmixed=
    <u></u> 建議用CSS text-decoration語法代替
    ```
* 上下標
    ```htmlmixed=
    <sup></sup> 上標
    <sub></sub> 下標
    ```
    ![](https://i.imgur.com/0i84deS.png)

---
### 符號清單

* 清單
    ```htmlmixed=
    <ul>
        <li>清單1</li>
        <li>清單2</li>
        <li>清單3</li>    
    </ul>
    ```
    ![](https://i.imgur.com/GGSr4gw.png)

* 從type開始的清單(IE11不支援)
    * type = "1"
    * type = "A"
    * type = "a"
    * type = "I"
    * type = "i"
    ```htmlmixed=
    <ol type="1" start="1">
        <li>清單1</li>
        <li>清單2</li>
        <li>清單3</li>    
    </ol>
    ```
    ![](https://i.imgur.com/ia2f9tK.png)
    ![](https://i.imgur.com/cqkUjks.png)

* 定義清單
    ```htmlmixed=
    <dl>
        <dt>定義清單1</dt>
        <dd>很棒</dd>
        <dt>定義清單2</dt>
        <dd>很棒悠悠</dd>
    </dl>
    ```
    ![](https://i.imgur.com/AC9bGXO.png)

---
### 特殊符號顯示方式

* '<' : &it ;
* '>' : &gt ;
* " : &quot ;
* & : &amp ;
* 半形空白 : &nbsp ;


---
### 註解方式

```htmlmixed=
<!-- 這就是註解方式 -->
```

---
### 中繼標記 meta

* 必須放在head標記之間，不會直接顯示於網頁上
    * http-equiv 定義HTTP表頭資訊
        * 網頁編碼方式
        * 自動轉頁
    * name 描述網頁的資訊
        * 網頁關鍵字
        * 網頁作者
    ```htmlmixed=
    <head>    
    meta是蝦米?
    <meta http-equiv="content-type" content="text/html; charset=big5">
    <meta name="author" content="Tian">
    </head>    
    ```
    
    * text/html 表示使用任一種標準來編譯網頁
    * charset 表示指定網頁的編碼字集

* refresh 讓網頁重新整理
    * 等待十秒後跳轉往頁
    ```htmlmixed=
    <head>    
    <meta http-equiv="refresh" content="10; url=https://google.com">
    </head>    
    ```

* expires 設定網頁到期時間
    * 網頁變更不大，遊覽器會從暫存區讀取網頁，當過期時才會到伺服器重新讀取
    ```htmlmixed=
    <head>    
    <meta http-equiv="expires" content="sun,22 jun 2008 15:18:44 GMT">        
    </head>    
    ```

* Pragma 設定快取模式
    * no-cache表禁止離線瀏覽
    ```htmlmixed=
    <head>    
    <meta http-equiv="pragma" content="-cache">        
    </head>    
    ```
    
* set-cookie 設定cookie到期時間
    * 到期時cookie將被刪除
    ```htmlmixed=
    <head>    
    <meta http-equiv="set-cookie" content="sun,22 jun 2008 15:18:44 GMT">        
    </head>    
    ```
    
* windows-target 限制網頁顯示的目標視窗
    * _top可防止別人在框架裡顯示您的網頁
    ```htmlmixed=
    <head>    
    <meta http-equiv="windows-target" content="_top">        
    </head>    
    ```    
    
* keyword 填入關鍵字，更容易搜尋到網頁
    ```htmlmixed=
    <head>    
    <meta name="keywords" content="animal,dog,狗">        
    </head>    
    ```        
    
* description 說明網頁主要內容，更容易搜尋到網頁
    ```htmlmixed=
    <head>    
    <meta name="Description" content="網站">        
    </head>    
    ```   
    
    
* div 對齊功能(標記後換行)
    * align
        * center
        * left
        * right
    * style
    ```htmlmixed=
    <div align="center" style="font-size: 13pt;">你好這是div現在致中</div>
    <div align="right" style="font-size: 13pt;">你好這是div現在靠右</div>
    ```   
* span 與 div相似，只是不換行
---
### 圖片
* 格式
    * jpeg/gif為佳，檔案小;BMP檔案較大
* 解析度
    * dpi(dot per inch)像素
* 大小
    * 最好不超過30kb
    * 圖片切割法:可把圖片切割後再合併
* 嵌入圖片
```htmlembedded=
<img scr="圖片位址" alt="說明文字" width="圖片寬度" height="圖片高度">
```
* 相對路徑
    * 上一層資料夾 : ../
---
### 表格與表單
* 表格
    * ![](https://i.imgur.com/ZKoq3Wa.png)
        ```htmlembedded=
        <table border="1">
            <!-- border是邊界 -->        
            <tr>
                <!-- 這是列 -->
                <td>
                    <!-- 這是直行 -->        
                </td>        
            </tr>    
        </table>
        ```
    * 表格標題
    ![](https://i.imgur.com/yftgMI3.png)

        ```htmlembedded=
        <caption>季銷售量統計表</caption> <!-- 這是表格標題 -->
        <tr>
            <th>季別</th> <!-- 這是欄的標題 -->
            <th>產品名稱</th>
            <th>價格</th>
            <th>銷售量</th>

            <td>文字自動換行</td> <!-- 是否強制換行 -->
            <td nowrap>文字強制不換行</td>    
        </tr>
        ```

    * 合併儲存格    
    ![](https://i.imgur.com/yhxBFUE.png)
        ```htmlembedded=
            <td colspan="2">colspan="2"表示合併兩欄</td>
        ```
        ![](https://i.imgur.com/2c4i17s.png)
        ```htmlembedded=
            <td rowspan="3">rowspan="3"表示合併三列</td>
        ```
---
###    建立超連結
* 可連結網頁、BBS、FTP、檔案下載
* herf(圖片、文字都可使用)
    * 連結的網址或檔案路徑
    ```htmlembedded=
    <a herf="網址或檔案路徑"></a>
    <a herf="#"></a> <!-- #是空連結的意思，按下後保持原樣 -->
    ```
* target
    * 設定連結的網頁開啟的方式
        * _blank:新視窗開啟
        * _parent:目前視窗
        * _self:目前執行的視窗(預設值)
        * _top:瀏覽器視窗
        * 視窗名稱:指定名稱或框架
* E-MAIL
    ```htmlembedded=
    <a href="mailto:Email帳號?subject=主旨"></a>
    <!-- subject主旨 -->
    <a href="mailto:Email帳號?cc=副本Email帳號"></a>
    <!-- cc副本帳號 -->
    <a href="mailto:Email帳號?bcc=密件副本Email帳號"></a>
    <!-- bcc=密件副本帳號 -->
    <a href="mailto:Email帳號?body=文字內容"></a>
    <!-- body=文字內容 -->
    <a href="abc.zip">下載</a>
    <!-- 下載文件或檔案 -->    
    ```
    
* CSS
    * 串接樣式表(Cascading Style Sheet)
    * 負責網站的視覺效果，統一網站的風格
    * 由選擇器(selector)及樣式規格(rule)組成
    ```CSS=
    h1{color:red;}
    /* h1 選擇器 */
    /* color:red 樣式規格 */
    ```
    * 選擇器
        * 標記名稱:所有的div標記都套用{}內樣式
        ```CSS=
        div{...}
        ```    
        * 通用選擇器(*):所有的標記
        ```CSS=
        * {...}
        ```            
        * Class選擇器:Class名稱
            * 名稱可以重複
        ```html=
        <style type="text/css">
        .class名稱{
            樣式
        }
        <font class="class名稱"></font> <!-- html -->
        ```            
        * ID選擇器(不要把HTML標記當作ID名稱)
            * 名稱是唯一的
        ```html=
        <style type="text/css">
        #ID名稱{
            樣式
        }
        font#ID名稱{
            樣式
        }
        <font id="ID名稱"></font> <!-- html -->
        ```            
        
        * 屬性選擇器

        * 其他
        ```html=
        nav{
            樣式
        }
        nav ul{
            樣式
        }
        nav ul a:hover{
            樣式
        }
        <nav>
            <ul>
                <a herf=""></a>
            </ul>
        </nav> <!-- html -->
        ```            
        
    1. 行內宣告(Inline):Code少時使用
    ```html=
    <h1 style="background-color: #FFFFC;font-family:Broadwway BT;">
    ```    
    3. 內嵌宣告(Embedding)
    ```html=
    <style type="text/css">
    h1{
        color:Red;
        font-family:Broadway BT;
        ..
    }
    ```        
    5. 連結外部樣式檔(Linking)
    ```html=
    <link rel=stylesheet type="textt/css" href="test.css">
    ```    
    * rel="stylesheet" type="text/css"所代表的意思:
    就是告訴瀏覽器要導入一個在外部的 css 檔案，透過 href 導入名為 test.css 的樣式檔案
    
    
  
    