[網站] 筆記

# [網站] 筆記 ###### 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">  <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>  <a href="mailto:Email帳號?cc=副本Email帳號"></a>  <a href="mailto:Email帳號?bcc=密件副本Email帳號"></a>  <a href="mailto:Email帳號?body=文字內容"></a>  <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>  ``` * ID選擇器(不要把HTML標記當作ID名稱) * 名稱是唯一的 ```html= <style type="text/css"> #ID名稱{ 樣式 } font#ID名稱{ 樣式 } <font id="ID名稱"></font>  ``` * 屬性選擇器 * 其他 ```html= nav{ 樣式 } nav ul{ 樣式 } nav ul a:hover{ 樣式 } <nav> <ul> <a herf=""></a> </ul> </nav>  ``` 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 的樣式檔案