資訊基礎應用筆記頁-html和CSS(GIS&SVG基本操作)

環境與工具

一、環境

伺服器與域名
- 物聯網：物聯網就是將一切人造物接上網路，縱使很方便，但是得失相兼，福禍相依。
- AI人工智慧：連結夠大，連結夠大就有智慧
- 域名伺服器 hosts ds216區網的位置
- 伺服器（Server）指：
  - 一個管理資源並為用戶提供服務的電腦軟體，通常分為檔案伺服器（能使用戶在其它電腦存取檔案），資料庫伺服器和應用程式伺服器。
  - 執行以上軟體的電腦，或稱為網路主機（Host）。

一般來說，伺服器通過網路對外提供服務。可以通過Internet對內網提供服務，也可以通過Internet對外提供服務。伺服器的最大特點，就是運算能力須非常強大，在短時間內就要完成所有運算工作，即使是一部簡單的伺服器系統，至少就要有兩顆中央處理器同時工作。

是一個「伺候、服務」的東西。例如：你用電腦架設了網站、提供服務(讓訪客蒞臨瀏覽網頁)、這一台電腦就稱之為伺服器。不論什麼電腦都可以安裝系統來提供服務，但必須全天候開機，提供服務。家用/辦公室電腦也許不到一個星期就當機了。伺服器電腦：必須要具備有足夠的耐用度和穩定度。

wifi
- 並不是每樣符合IEEE 802.11的產品都申請Wi-Fi聯盟的認證，相對地缺少Wi-Fi認證的產品並不一定意味著不相容Wi-Fi裝置。IEEE 802.11的裝置已安裝在市面上的許多產品，如：個人電腦、遊戲機、MP3播放器、智慧型手機、平板電腦、印表機、筆記型電腦以及其他週邊裝置。Wi-Fi聯盟成立於1999年，當時的名稱叫做Wireless Ethernet Compatibility Alliance（WECA）。在2002年10月，正式改名為Wi-Fi Alliance。
- Wi-Fi這個術語被人們普遍誤以為是指無線傳真（Wireless Fidelity），類似歷史悠久的音響裝置分類：高傳真（1930年開始採用）或Hi-Fi（1950年開始採用）。即使Wi-Fi聯盟本身也經常在新聞稿和檔案中使用「Wireless Fidelity」這個詞，Wi-Fi還是出現在ITAA的一個論文中。事實上，Wi-Fi一詞是沒有任何意義，也沒有全寫的。
- IEEE 802.11第一個版本發表於1997年，其中定義了媒體存取控制和實體層。實體層定義了在2.4GHz的ISM頻段上的兩種無線調頻方式和一種紅外線傳輸的方式，總資料傳輸速率設計為2Mbit/s。兩個裝置之間的通訊可以自由直接（ad hoc）的方式進行，也可以在基站（Base Station，BS）或者存取點（Access Point，AP）的協調下進行。1999年加上了兩個補充版本：802.11a定義了一個在5GHz ISM頻段上的資料傳輸速率可達54Mbit/s的實體層，802.11b定義了一個在2.4GHz的ISM頻段上但資料傳輸速率高達11Mbit/s的實體層。
- 2.4GHz的ISM頻段為世界上絕大多數國家通用，因此802.11b得到了最為廣泛的應用。蘋果公司把自己開發的802.11標準起名叫AirPort。1999年工業界成立了Wi-Fi聯盟，致力解決符合802.11標準的產品的生產和裝置相容性問題。Wi-Fi為制定802.11無線網路的組織，並非代表無線網路。
- 區域網路
  - 所謂「區域網路」即在一有限的地區內將數部PC或其他週邊設備以某種網路架構連接起來，以達到彼此連通、互相傳遞資料或共用資源等目的，故我們又稱區域網路」為PC LAN。通常我們說區域性網路大多指在一辦公室或一棟建築物內的短距離網路連線而言，例如在一棟辦公大樓內架設一套網路將各部門的PC連接起來即屬之，另像校園內將各科系辦公室、圖書館等數十部或百部以上的PC連接在一網路上以達資源共享的目的都是典型區域網路的例子。
- 廣域網路
  - 「廣域網路」是「區域網路」的延伸，其範圍已不再挶限於某一區域了，它可能跨越了數百里或數千里的距離，通常需利用公共的通訊設施（如電信局的交換機與數據線路）或衛星通訊來當作通訊的媒體。例如一企業有台北、高雄兩家分公司，兩地均建立有區域網路，該公司為了能即時掌握兩分公司的業務，遂租用電信局的數據線路及網路連接設備將台北、高雄兩地之區域網路連接起來，這樣的網路我們即可稱之為「廣域網路」。

在一「區域網路」中所連接的電腦系統架構多為相似（如PC LAN與PC LAN的連接）；而「廣域網路」中則往往連接不同架構的電腦系統（如PC LAN與電腦主機的連接），故後者較前者在網路的通訊上更為複雜。

電腦網址
- 連上網路後，你有許多機會尋找其他電腦。可是全世界的電腦這麼多，要上那兒去找呢？和找人一樣，每個人都有一個地址，我們便可以依據這個地址去找人。網路上的每一台電腦也需要地址，如此我們才能依地址連上所要的電腦。通常電腦的地址我們會把它叫做『位址』或是『網址』。電腦的地址有兩種寫法，一個是『 IP位址』，另一個是『領域名稱』。
1. IP位址:這是電腦地址的最原始寫法，是用四個數字表示，而每個數字都不可以超過256 。例如『192.83.187.1』。
2. 領域名稱:可是IP 位址的表示方式並不是很好記，都是一堆數字，所以電腦的地址有了另外一種的表示方式：領域名稱系統（Domain Name System），簡稱DNS 。這種位址表示方式是利用有意義的英文縮寫來表示，所以比較清楚，也容易記憶。

各縮寫

區域名稱	代表意義
Gov	官方政府單位
Org	財團法人等非官方機構
Edu	教育機構
Mili	國防軍事機構
Com	商業機構
Net	網路機構
Int	國際性機構
國家代碼	如tw：台灣，cn:中國，jp:日本等

網站空間
- 在 C:\Windows\System32\drivers\etc中打開hosts的檔案。可以修改在哪些區域能上線使用伺服器。加上一行「192.168.4.26 years.jendo.org」
- 要在http://6years.jendo.org有網路空間，才能架設網頁(可使用filezilla連上)
wiki上的個人頁
- 建立"筆記頁"，要注意有沒有登入自己的帳號才能建立。
- Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統，由沃德·坎寧安於1995年首先開發。沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」。
- 有些人認為，Wiki系統屬於一種人類知識的網路系統，我們可以在web的基礎上對Wiki文字進行瀏覽、創建和更改，而且這種創建、更改及發布的代價遠比HTML文字小；與此同時，Wiki系統還支援那些面向社群的協作式寫作，為協作式寫作提供了必要的幫助；最後Wiki的寫作者自然構成了一個社群，Wiki系統為這個社群提供了簡單的交流工具。與其它超文字系統相比，Wiki有使用簡便且開放的特點，可以幫助我們在一個社群內共享某個領域的知識。
- wiki有點像一個大型的Google雲端硬碟，每一個文件都開啟了，知道網址就可以檢視的權限，登錄帳號等於Google的特定權限者，就可以編輯資料了。

二、工具與設定

Mozilla Firefox或Google Chrome
- 這兩個瀏覽器，主要的功能都用於，預視結果或查詢資料。
- 但是兩者還是略有不同，Mozilla Firefox比Google Chrome安全性還要高，用Mozilla Firefox來瀏覽網頁比較不容易中毒。相對Internet Explorer的安全性就沒有那麼高，所以最好避免使用Internet Explorer。
- Firefox最初是Mozilla Application Suite的一個實驗性分支，由戴夫·海厄特、喬·休伊特及布雷克·羅斯建立。他們認為原贊助者網景公司的商業要求及其開發者導向的特徵蔓延特色會降低瀏覽器的可用性，為了解決這個問題，他們開始以Mozilla Suite為基礎，建立了一個獨立的瀏覽器，目的是取代功能複雜的Mozilla Suite。2003年4月3日，Mozilla宣布他們將把開發目標由Mozilla Suite轉移到Firefox和Thunderbird上。之後形成了由社群開發維護的SeaMonkey，並最終於2005年取代了Mozilla Application Suite。
filezilla
- 在https://filezilla-project.org/點選Download，下載「filezilla」
- 檔案(F) ＞站台管理員(S) ＞連線(C)　連接上自己的站台
- 右鍵＞檢視/編輯(V)　開啟檔案進行編輯
- 注意：在檢視/編輯之前，需要先在編輯(E) ＞設定(S) ＞檔案編輯＞使用自訂編輯器選取慣用編輯器
- FileZilla是一種快速、可信賴的FTP用戶端以及伺服器端開放原始碼程式，具有多種特色、直覺的介面。FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案。
- FileZilla的功能
  - 可以斷點續傳進行上傳、下載（需要伺服器支援）
  - 自訂命令
  - 可進行站點管理
  - 防發呆功能（有的FTP伺服器會將發呆過久的用戶趕出，這樣發呆的用戶就得重複登入）
  - 超時偵測
  - 支援防火牆
  - 支援SOCKS4/5、HTTP1.1代理
  - 可進行SSL加密連線
  - 支援SFTP（Secure FTP）
  - 可以排隊進行上傳、下載
  - 支援拖放
  - 多國語言支援，包括簡體、繁體中文（Linux平台需額外安裝「filezilla-locales」套件）
  - 可通過Kerberos進行GSS驗證與加密
EmEditor
- EmEditor是江村軟體公司（Emurasoft，坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式。EmEditor以運作輕巧、敏捷而又功能強大、豐富著稱而得到許多用戶的好評。Windows內建的記事本程式由於功能太過單薄，所以有不少高階用戶直接以EmEditor等第三方文字編輯程式取代。
- EmEditor的發行最早始於1997年，迄今仍在持續發展中。自16.6版起，大幅提高了「移除新行」，「全部取代」，「合併 CSV」，「移除換行符號」以及「插入換行符號」等功能操作的速度。
- 如果要在EmEditor當中更改編碼就得另存新檔，在編碼中把預設的big5，改為utf-8才能支援萬國碼
- EmEditor功能
  - 支援超大檔案
  - 支援外掛程式
  - 支援正規表示式
  - 支援書籤功能
  - 支援篩選功能
  - 索引標籤式設計
  - 可編輯的巨集
  - 大綱顯示功能
  - 支援萬國碼
  - 支援CSV,TSV格式編輯
  - 自動標記功能
  - 批次取代功能
  - 多檔搜尋與取代功能
  - 檔案比較與同步捲動功能
  - 亮顯語法包含20多種程式語言
  - 有提供功能精簡的免費版
  - 有提供可攜式版本

- 編碼
  - Unicode(這是萬國碼，每一國的文字都可以使用，我們基本要用這個編碼)
    - Unicode
    - UTF-7
    - UTF-8
    - UTF-16
    - UTF-32
  - 在Firefox的選單 > 更多 > 文字編碼 >點選Unicode
  - Chrome則需要新增擴充功能Set Character Encoding，然後按右鍵出現選單以後才能更改
- 其它免費編譯器
  - Notepad++
  - PSPad

HTML與HTTP

發有者及發明年代
- 1980年，物理學家提姆·柏內茲-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用並共享文件，他提出並建立原型系統ENQUIRE。1989年，柏內茲-李在一份備忘錄中提出一個基於網際網路的超文字系統。
- HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超連結標籤外，其他設計都深受CERN內部一個以標準通用標示語言（SGML）為基礎的檔案格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
- 在IETF的主持下，HTML標準的進一步發展因競爭利益而遭受停滯。自1996年起，HTML規範一直由全球資訊網協會（W3C）維護，並由商業軟體廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01於1999年末發布，進一步的勘誤版本於2001年發布。2004年，網頁超文字應用技術工作小組（WHATWG）開始開發HTML5，並在2008年與W3C共同交付，2014年10月28日完成標準化。
HTML
- HTML是一種網頁使用的語言，文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。(維基)
- 是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。
- 無論架設部落格，想學習網頁程式設計，學會使用HTML才能真正了解網頁的運作，進而做到更精細的設定，使網頁更加完美。
- 動態網頁
  - 網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部都尚未決定。只有在使用者向網頁伺服器要求網頁時，網頁的最後內容才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都不同，所以這種網頁便稱為動態網頁。
  - 建立網路應用程式時，必須考慮到各種需要和問題。
- 靜態網頁
  - 靜態的網站是由一組相關的 HTML 網頁和檔案 (存放在執行網頁伺服器的電腦上) 所組成。
  - 網頁伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。當使用者在網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入 URL 時，便會產生網頁要求。
  - 靜態網頁的最後內容是由網頁設計師決定，不會在要求網頁時變更。以下是一個範例：

   <!DOCTYPE html>
   <meta charset = utf-8>
   <html> 
       <head> 
           <title>分頁標題</title> 
       </head> 
       <body>   
       </body> 
   </html>

- - 這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫，然後才被放到伺服器上。因為 HTML 一旦放到伺服器上後就不會變更，所以這類網頁又稱為靜態網頁。
  - 註解：
    - 嚴格說來，「靜態」網頁並不是靜態。例如，滑鼠變換影像或 Flash 內容 (SWF 檔案) 都會使靜態網頁變得活靈活現。不過，只要是在傳送到瀏覽器時沒有經過修改的網頁，這本手冊便將它稱為靜態網頁。
  - 當網頁伺服器接到靜態網頁的要求時，伺服器會讀取要求、找到網頁，然後將它傳送到要求的瀏覽器。
HTTP
- 超文本傳輸協定（英文：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分佈式、協作式和超媒體資訊系統的應用層協議。HTTP是全球資訊網的資料通訊的基礎。
- 設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。通過HTTP或者HTTPS協定請求的資源由統一資源識別元（Uniform Resource Identifiers，URI）來標識。
- HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起。HTTP的標準制定由全球資訊網協會（World Wide Web Consortium，W3C）和網際網路工程任務組（Internet Engineering Task Force，IETF）進行協調，最終發布了一系列的RFC，其中最著名的是1999年6月公布的 RFC 2616，定義了HTTP協議中現今廣泛使用的一個版本——HTTP 1.1。
xml
- 而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標籤，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。
- 所以HTML與XML的差別在於HTML無法自訂標籤，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標籤的方式，可以讓其他網頁自己去轉換分享者的標籤，並轉為自己的標籤，進而直接讀取跟引用。

wiki

何謂 wiki
- wiki（IPA：[ˈwɪ.kiː] <WICK-ee> 或 [ˈwiː.kiː] <WEE-kee>）源自夏威夷語的「WikiWiki」，本是「快點快點」之意。wiki的中文翻譯有維客、圍紀、快紀、共筆或維基等等，其中「維基」一詞是中文維基百科人特別為維基百科而創，屬於維基媒體的專用術語。隨著「維基」一詞能見度增加，常被泛用為wiki的主要音譯名，然而事實上「共筆」這個意譯更貼近其特性：較能反映多人可藉以共同協作的意義。
CC 授權
- 創用CC（英語：Creative Commons）是一個非營利組織，該組織提供同名的一系列著作的授權方式。創用CC組織的主要宗旨是使得著作物能更廣為流通與改作，作為其他人據以創作及共享，並以所提供的授權方式確保上述理念。

英文	縮寫	全稱	說明
Attribution	BY	姓名標示	您（使用者）可以複製、發行、展覽、表演、放映、廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示。
NonCommercial	NC	非商業性使用	您可以自由複製、散布、展示及演出本作品；您不得為商業目的而使用本作品。
NoDerivs	ND	禁止改作	您可以自由複製、散布、展示及演出本作品；您不得改變、轉變或更改本作品。
ShareAlike	SA	相同方式分享	您可以自由複製、散布、展示及演出本作品；若您改變、轉變或更改本作品，僅在遵守與本作品相同的授權條款下，您才能散布由本作品產生的衍生作品。

wiki 語法
雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
老師的口訣：井號、星號、等號、中括號；用空白行分段

數列	#
不排序數列	*
標題	==
描述定義	:;

「…」兩個單引號代表拉斜
「…」三個單引號代表要加粗
格的屬性在該格內容之前且與內容以「|」隔開。
四種常用元素
1. 文字
2. 圖照
3. 聲音
4. 影片
wiki 的 word 適應
- 如何決定頁面大小
- 因為我們要使用HTML做出下載後就能直接用word開啟的文件，所以需要抓好size。
- 製作順序
  1. 開啟word
  2. 開啟尺規
  3. 算好表格的長寬
  - 使用程式碼

    @page a4{
    size:21cm 29.7cm;
    margin:3cm 2cm 3cm 2cm;
    }

- 寫HTML>用WORD讀>存DOCX或PDF>去7-11列印
- markup
- 提供指示
- XML想要標籤的人自己發明標籤
- 二十個就夠了
- 微軟的規格
- 不會重複
- <>是標籤
- HTML4之前不行
- HTML5才可以
- 帶META指令
  - body與head的差異
  - head裡做定義
  - 像是CSS樣式，title等...部分
  - BODY中做顯示部份，這裡就是網站主要的內容，
- 黑盒子
- margin(邊沿)：
  - margin:上右下左;　margin:上下左右;　margin:上左右下;　margin:四個邊同樣値;
- padding(內距)：
  - padding:auto;：讓瀏覽器自己去設定
  - padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。
  - padding:上右下左;　padding:上下左右;　padding:上左右下;　padding:四個邊同樣値;
- border(邊框)：
- HTML對比WORD講義
表格樣式
- 1. 實線border-style:solid;
  2. 點線border-style:dotted;
  3. 虛線border-style:dashed;
  4. 框線border-style:double;
  5. 外凸線border-style:outset;
  6. 內凸線border-style:inset;
  7. 溝線border-style:groove;
  8. 立體線border-style:ridge;
  9. 沒線border-style:ridge;
- 合併表格的框線border-collapse:collapse
- PT是長度(每英吋72)2.542分
- font-family字形
- font-size字的尺寸
- font字
- padding：與邊框距離
- 螢幕解析100% 96/吋
- 螢幕解析125% 120/吋
- 表格把圖片放在P標籤中。WORD就接受了。
- 空白
HTML與wiki中的特殊符號
- 在HTML中，〈、〉、＆、〝等符號被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記。
- 假如要在瀏覽器中顯示這些符號，就必須用：
  - 「＆ｌｔ；<」來顯示小於符號
  - 「＆ｇｔ；>」來顯示大於符號
  - 「＆ａｍｐ；&」來顯示＆符號
  - 「＆ｑｕｏｔ；"」來顯示雙引號
  - 更多特殊符號
  - 特殊符號代碼
  - 附錄
- 強制HTML印出時換頁。
- 網路上查到的程式碼

   br style='page-break-before:always' />

- 這是一個style所以要先在head裡頭定義

   {page-break-before: always /*在標籤前換頁*/}
   {page-break-after: always /*在標籤後換頁*/}

- 範例：履歷表
前端與後端
- 因為網頁分成前端與後端，所以有可以拆開的特性。如果一開始先接觸前端，也可以接一般網站的案子過生活，或者做做產品的 UI，跟後端工程師作銜接即可。如果單獨學後端，也可以找到不錯的工作，或者開發產品功能面。有時間再接觸另一端的技術，讓自己成為全端的時候，幾乎什麼事都能做了。
  - 前端工程師：
    1. HTML
    2. CSS
    3. Javascript
  - 前端進階一點：
    1. CSS Framework （Bootstrap）
    2. JavaScript framework （如Angularjs、Reactjs、Vuejs）
    3. CSS processor（sass，less，stylus）
    4. RWD Design
    5. Grunt、Gulp（自動化工具）
  - 後端工程師：
    1. 主要開發語言（PHP、Ruby、C#）
    2. 資料庫語法（MySQL、SQL Server）
    3. 伺服器設定（apache、nginx）
    4. 基本的資安防範（xss、sql injection）
  - 很多求職網站都會簡易的要會LAMP架構，意思是：
    - (L)inux、(A)pache、(M)ysql、(P)HP
  - 後端進階一點：
    1. Framework（框架）
    2. PHP：Laravel、Codeigniter、yii …
    3. Ruby：Lotus …
    4. C#.NET：MVC5 …
    5. 串第三方API（金流、簡訊寄送服務 ..）
    6. API設計（以目前形態來說，多數公司會讓後端工程師從資料庫取出資料撰寫成json格式提供給前台去呈現資料）
    7. Cloud(雲端操作) （Google Cloud、Microsoft Azure、Amazon Web Services (AWS)）
  - 另外還有兩者皆必備的：
    1. MVC架構 – MVC架構則是因為對於一個團隊而言，每個人負責的區塊被切割好才是最理想的情況。
    2. Git（版本控制例如GitHub）- 新手了解Git – 猴子都能懂的Git
wiki匯入圖片
1. 開啟維基共享資源，不需登入即可使用圖照，但要上傳就必須登入。
2. 在搜尋引擎中尋找自己中意的圖片
3. 使用[[File:Piranha face.jpg|300px]]
4. 成品

CSS

何謂 CSS
- CSS（Cascading style Sheets）是「層疊樣式表單」的意思，也可以叫作「層疊樣式表」，實際上CSS語言是一組樣式，是一個用於網頁排版的標記性語言。它是由W3C協會制定並發布的一個網頁排版式標準，是對HTML語言功能的補充。
CSS有什麼用？
- CSS主要的用途是對網頁中字體、顏色、背景、圖像及其他各種元素的控制，使網頁能夠完全按照設計者的要求來顯示。
- 可能對CSS這個名詞比較陌生，實際上無論用Internet Explorer還是 Netscape Navigator在網上衝浪，幾乎隨時都在與CSS打交道，在網上沒有使用過CSS的網頁可能不好找。不管用什麼工具軟體製作網頁，都有在有意無意地使用CSS。
- 用好CSS能使你的網頁更加簡煉，為什麼同樣內容的網頁，有的人做出來有幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。
- 一般來說，學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。那麼，我們就從這三門技術的不同功能上來看看他們之間有什麼關係。
  1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
  2. CSS樣式是表現（外觀控制），就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
  3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。
用法
- linl rel：呼叫
- styleshee：它是這個頁面的樣式表
- type：這個用於哪裡(我們在這裡使用text，也就是普通文字)
- href：它在哪裡
- .：在....
- /：資料夾中的哪裡？
- 學會第三種多篇是，設定一個程式，所有的其他HTML就可以拉出使用

   <link rel='stylesheet' type='text/css' href='./pa.css'  />
   白話為：<link rel='stylesheet' type(它是我的樣式表)='text/css' href(它在哪裡)='.(此地)/pac.ss'  />

- 在設定樣式主程式的時候在前面加上table代表只能使用於table，加上texT代表只能使用於text。
- O名稱標籤
- .名稱凡
  1. 名稱指定的專一標籤
- 屬性值與屬性名使用=
- collapse(崩塌)
- solid(實線)
- 光三原色調出顏色red green blue

- 紅 # foo
- 綠 # ofo
- 藍 # oof
- 白 # fff
- 黑 # ooo
樣式優先順序:link導入<.nicetable(舉例而已，只要加上.就可以定義自己的style)<行內的指令
CSS層疊樣式表（英語：Cascading Style Sheets)
CSS的用途是什麼？
- CSS是一種樣式表語言，用於為HTML的樣式。可設定字體、顏色、邊距、高度、寬度等屬性。
CSS跟HTML的區別在哪裡？
- HTML用於結構化內容；CSS用於格式化結構化的內容。
採用CSS有哪些好處？
1. 通過單個樣式表控制多個文檔
2. 更精確的佈局控制
3. 為不同的媒體類型（螢幕、列印等）採取不同的佈局

程式碼

    <link rel='stylesheet' type='text/css' href='./pac.ss'>
    <style>
     table {border:yellow dashed 3px}
     td    {border:#200 dashed 1px}
     tr    {border:yellow solid 1px}
     #xyz  {border:purple dashed 1px}
     </style>
     <table>
     <b>
     <tr><th class='nicetable' style= "border:yellow solid 1px;">張又懿</th><th style='border:1px solid red;border-
     collapse:collapse;'>yuyiolulu@gmail.com</th><th style='border:1px solid red;border-collapse:collapse;'>0983329126</th></tr>
     <tr><td>張鈞祺</td><td class='nicetable'>chunchiolulu@gmail.com</td><td class='nicetable'>0966070126</td></tr>
     <tr><th class='nicetable'>蕭卉均</th><td class='nicetable'>suzy92126@gmail.com</td><td class='nicetable'>0939912983</td></tr>
     <tr><th class='nicetable'>李彥廷</th><td class='nicetable'>leejerry0706@gmail.com</td><td class='nicetable'>0984201016</td></tr>
     <tr><th class='nicetable'>丁志仁</th><td id ='xyz'>alledu2@gmail.com</td><td class='nicetable'>0987466665</td></tr>
     <tr><th class='nicetable'>盧星瑜</th><td class='nicetable'>thsrrabbit0803@gmail.com</td><td class='nicetable'>0930980803</td></tr>
     </b>
     </table>
     <p class = "nicetable">以上是本班的通訊錄</p>
     <br><br><br>

- 樣式用於
  - 標籤
  - class，也就是類別，這次我們使用的是：nicetable
  - ID，也就是某東西專屬的身份辨識，就像有些通訊軟體中的ID一樣
- 第三種樣式的寫法，總體來說，有三層。
  - 第一層HTML會優先聽它的，但寫法很麻煩要一個一個td加上style。
  - 第二層HTML其次才會聽它的，在每一個新網頁要寫一排主控程式，比第一層方便，但如果我想要連結多個網站，就得乖乖的一個一個下主程式。
  - 第三曾HTML最後才會選擇採用它的樣式，這個方法是建立一個CSS要使用時只需要導入就行了。
- 上禮拜作業
CSS如何呼叫?
- CSS屬於樣式，但是要先定義好才能使用，用link的功能來呼叫出CSS
重要語法
- 網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:
  - inline style
  - embedded stylesheet
  - included stylesheet
- 修飾設定
  - 這些 CSS 設定的基礎是修飾設定: 一個 CSS 屬性和它的設定值, 中間以冒號 : 接連起來, 例如:font-size: 1.2em.這三者之間可以任意加入空白, 以提高可讀性. 但是屬性的名稱和每一種屬性的可以接受的設定值只能依照 CSS 的標準文件來 (或者更嚴格的說只能依照 CSS 的標準文件和各家 browser 實作的交集部份來設定.)
- inline style
  - inline style 是三種 CSS 設定中最基本的, 它要把上述的修飾設定寫在 HTML tag 的 style 屬性的設定質中, 用單引號或雙引號括住, 例如: <p style="color:red">.... 如果修飾設定有多於一組的時候, 在兩組修飾設定的中間要用分號 (;) 將兩者隔開, 而最後一組修飾設定後面可以加分號也可以不加, 例如: "color:red;font-weight: bold;font-size: 18px". 因為它是寫在 HTML tag 的 style 屬性中, 因此可以想見的修飾的效果也只針對該 HTML Tag 作用.
  - 由於 inline style 的作用範圍只有單一個 HTML tag, 其他 tag 也需要有一樣的效果的時候唯一的方法就是照抄一次. 如果只有少數幾個那倒也還好, 反正只是 copy paste. 但是用多了檔案就變大了, 更大的麻煩是: 當需要修改的時候, 問題就來了! 你應該沒辦法記住到底 copy paste 了幾次吧? 所以接下來也就有了 embedded stylesheet.
- embedded stylesheet
  - embedded stylesheet 是把原本散在這個 HTML 檔案中的各個 inline style 都集中起來, 改寫在 <style></style> tag 中. 不過, 你的 HTML 檔案中的 inline style 一定不只一組, 所以需要標明這組 style 是要給誰用的, 而那一組又是給誰用的. 所以 embedded stylesheet 就在把每一組 inline style 用一對大括號 {} 括住, 並在它的前面加一個 selector 來標明作用範圍。
- 注意事項
  - 這些修飾設定不需要全都擠進同一行裡, 只要在左大括號和右大括號當中就行了.
  - 需要的時候, 還可以用 /* 及 */ 將任何一段文字括住作為註解.
  - 不支援巢狀註解.
  - 擺放位置: HTML4 是規定要放在 <head> 段落內, 而 HTML5 則放在 <body> 段落內也是可以的.
  - 支援多個 <style> 段落: style 不用全都放在同一個 <style> 段落內, 可以依據實際需要擺放多個 <style> 段落.

SVG

一、概述

何謂 SVG
- 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
  - svg放大不毛邊
  - 用程式碼構成一張圖
  - 步驟
    1. 宣告格式(版本字格式是否獨立存在)
    2. SVG開始(格式、長寬)
    3. SVG結束
點陣圖與向量圖的比較(含附檔名)
- 失真壓縮可以減少儲存圖片所需要的空間大小，在螢幕上觀看圖片時，其實這影響不大，因為，人的眼睛對光線比較敏感，光線對景物的作用比顏色的作用更為重要，這就是失真壓縮技術的基本依據，失真壓縮的特點是保持顏色的逐漸變化，刪除圖片中顏色的突然變化，生物學中的大量實驗證明，人類大腦會利用與附近最接近的顏色來填補所丟失的顏色，例如:對於藍色天空背景上的一朵白雲
- 失真壓縮的方法就是刪除圖片中景物邊緣的某些顏色部分，當在螢幕上看這幅圖時，大腦會利用在景物上看到的顏色填補所丟失的顏色部分，利用有損壓縮技術，某些數據被有意地刪除了，而被取消的數據也不再恢復
- 利用有損壓縮技術可以大大地壓縮檔案的數據，但是，會影響圖片的品質，如果使用了有損壓縮的圖片僅在螢幕上顯示，可能對圖片質量影響不太大，至少對於人類眼睛的識別程度來說區別不大，可是，如果要把一幅經過有損壓縮技術處理的圖片用高分辨率印表機列印出來，那麼圖片質量就會有明顯的受損痕跡。
非失真壓縮
- 非失真壓縮的基本原理是相同的顏色訊息只需儲存一次，壓縮圖片的軟體首先會確定圖片中哪些區域是相同的，哪些是不同的，包括了重複數據的圖片(如藍天)就可以被壓縮，只有藍天的起始點和終結點需要被記錄下來，但是藍色可能還會有不同的深淺，天空有時也可能被樹木、山峰或其他的對象掩蓋，這些就需要另外記錄，從本質上看，非失真壓縮的方法可以刪除一些重複數據，大大減少要在磁片上儲存的圖片尺寸，但是，無損壓縮的方法並不能減少圖片的影別空間佔用量。
- 這是因為，當從磁片上讀取圖片時，軟體又會把丟失的像素用適當的顏色訊息填充進來，如果要減少圖片佔用內存的容量，就必須使用失真壓縮方法，非失真壓縮方法的優點是能夠比較好地儲存圖片的品質，但是，相對來說這種方法的壓縮率比較低，不過，如果需要把圖片用高分辨率的印表機列印出來，最好還是使用非失真壓縮，幾乎所有的圖片檔案都採用各自簡化的格式名作為檔案副檔名，從副檔名就可知道這幅圖片是按什麼格式存儲的，應該用什麼樣的軟體去讀／寫等等。
點陣圖檔案格式
- png
- jpg
- gif
- BMP
- PCX
- EPS
- UFO
- DXF
- TIFF
- TGA
- EXIF
- FPX
- SVG
BMP：是一種與硬體設備無關的圖片檔案格式，使用非常廣，它採用位映射存儲格式，除了圖片深度可選以外，不採用其他任何壓縮，因此，"BMP"檔案所佔用的空間很大，"BMP"檔案的圖片深度可選，l bit、4 bit、8 bit 及 24 bit，"BMP"檔案存儲數據時，圖片的掃描模式是按從左到右、從下到上的順序，由於 BMP 檔案格式是 Windows 環境中交換與圖有關的數據的一種標準，因此在 Windows 環境中營運的圖形圖片軟體都支援 BMP 圖片格式，典型的 BMP 圖片檔案由三部分組成︰位圖檔案頭數據架構　－　包含 BMP 圖片檔案的類型、顯示內容等訊息，位圖訊息數據架構　－　包含 BMP 圖片的寬、高、壓縮方法定義顏色。
GIF:GIF（Graphics Interchange Format）的原義是〝圖片互換格式〞，是 CompuServe 公司在 1987 年開發的圖片檔案格式，GIF 檔案的數據，是一種基於，"LZW"算法的連續色調的無損壓縮格式，其壓縮率一般在 50％左右，它不屬於任何應用程式，目前幾乎所有相關軟體都支援它，有大量的軟體在使用GIF圖片檔案，GIF 圖片檔案的數據是經過壓縮的，而且是採用了可變長度等壓縮算法，所以 GIF 的圖片深度從 l bit 到 8 bit，也即 GIF 最多支援256種色彩的圖片，GIF 格式的另一個特點是其在一個，GIF 檔案中可以存多幅彩色圖片，如果把存於一個檔案中的多幅圖片數據逐幅讀出並顯示到螢幕上，就可構成一種最簡單的動畫，GIF 解碼較快，因為採用隔行存放的 GIF 圖片，在邊解碼邊顯示的時候可分成四遍掃描，第一遍掃描雖然只顯示了整個圖片的八分之一，第二遍的掃描後也只顯示了1／4，但這已經把整幅圖片的概貌顯示出來，所以在顯示GIF圖像時，隔行存放的圖像會給您感覺到它的顯示速度似乎要比其他圖像快一些，這是隔行存放的優點。可動畫，256色，也不是公開格式。
JPG：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利。JPEG 是 Joint Photographic Experts Group（聯合圖片專家組）的縮寫，檔案副檔名為〝.jpg〞或〝.jpeg〞，是最常用的圖片檔案格式，由一個軟體開發聯合會組織製定，是一種失真壓縮格式，能夠將圖片壓縮在很小的儲存空間，圖片中重複或不重要的資料會被丟失，因此容易造成圖片數據的損傷，尤其是使用過高的壓縮比例，將使最終解壓縮後恢復的圖片質量明顯降低，如果追求高品性圖片，不宜採用過高壓縮比例，但是JPEG壓縮技術十分先進，它用有損壓縮模式去除冗餘的圖片數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖片，換句話說，就是可以用最少的磁片空間得到較好的圖片品質，而且 JPEG是一種很靈活的格式，具有調節圖片質量的功能，允許用不同的壓縮比例對檔案進行壓縮，支援多種壓縮級別，壓縮比率通常在 10︰1 到 40︰1 之間，壓縮比越大，品質就越低，相反地，壓縮比越小，品質就越好，比如可以把 1.37 Mb 的 BMP 位圖檔案壓縮至 20.3 KB，當然也可以在圖片質量和檔案尺寸之間找到平衡點。JPEG 格式壓縮的主要是高頻訊息，對色彩的訊息保留較好，適合應用於網路，可減少圖片的傳輸時間，可以支援24 bit 真彩色，也普遍應用於需要連續色調的圖片，JPEG 格式是目前網路上最流行的圖片格式，可以把檔案壓縮到最小的格式，在 Photoshop 軟體中以，JPEG 格式儲存時，提供11級壓縮級別，以 0─10 級表示，其中 0 級壓縮比最高，圖片品質最差，即使採用細節幾乎無損的10 級質量儲存時，壓縮比也可達 5︰1，以BMP格式儲存時得到 4.28MB 圖片檔案，在採用 JPG 格式儲存時，其檔案僅為 178 KB　壓縮比達到24︰1，經過多次比較，採用第 8 級壓縮為存儲空間與圖片質量兼得的最佳比例，JPEG 格式的應用非常廣泛，特別是在網路和光碟讀物上，都能找到它的身影，目前各類瀏覽器均支援。
PCX:最先的PCX 雛形是出現在由ZSOFT 公司推出的名叫 PC PAINBRUSH 的用於繪畫的商業套裝軟件中，以後，微軟公司將其移植到 Windows 環境中，成為 Windows 系統中一個次功能，先在微軟的 Windows 3.1 中廣泛應用，隨著 Windows 的流行、升級　加之其強大的圖片處理能力，使 PCX 同 GIF、TIFF、BMP 圖片檔案格式一起，被越來越多的圖形圖片軟體工具所支援，也越來越得到人們的重視。PCX 是最早支援彩色圖片的一種檔案格式，現下最高可以支援 256 種彩色，PCX 設計者很有眼光地超前引入了彩色圖片檔案格式，使之成為現下非常流行的圖片檔案格式，PCX 圖片檔案由檔案頭和實際圖片數據構成，檔案頭由 128 位元組組成，描述版本訊息和圖片顯示設備的橫向、縱向分辨率，以及調色板等訊息，在實際圖片數據中，表示圖片數據類型和彩色類型，PCX 圖片檔案中的數據都是用，PCXREL技術壓縮後的圖片數據，PCX 是 PC 畫筆的圖片檔案格式，PCX 的圖片深度可選為 l、4、8 bit，由於這種檔案格式出現較早，它不支援真彩色，PCX 檔案採用 RLE 行程編碼，檔案體中存放的是壓縮後的圖片數據，因此，將采集到的圖片數據寫成 PCX 檔案格式時，要對其進行 RLE 編碼，　而讀取一個 PCX 檔案時首先要對其進行 RLE 解碼，才能進一步顯示和處理。
TIFF:TIFF（TaglmageFileFormat）圖片檔案是由 Aldus 和 Microsoft 公司，為桌上系統研製開發的一種較為通用的圖片檔案格式，TIFF格式靈活易變，它定義了四類不同的格式。
- TIFF-B 適用於二值圖片
- TIFF-G 適用於黑白灰度圖片
- TIFF-P 適用於帶調色板的彩色圖片
- TIFF-R 適用於 RGB 真彩圖片
TIFF 支援多種編碼方法　其中包括 RGB 無壓縮　RLE 壓縮及 JPEG 壓縮等，TIFF 是現存圖片檔案格式中最複雜的一種，它具有擴展性、方便性、可改性，可以提供給 IBMPC 等環境中營運、圖片編輯程式，TIFF 圖片檔案由三個數據架構組成，分別為檔案頭，一個或多個稱為 IFD 的包含標記指標的目錄以及數據本身，TIFF 圖片檔案中的第一個數據架構稱為圖片檔案頭或 IFH，這個架構是一個TIFF檔案中唯一的、有固定位置的部分，IFD 圖片檔案目錄是一個位元組長度可變的訊息塊，Tag標記是TIFF檔案的核心部分，在圖片檔案目錄中定義了要用的所有圖片參數，目錄中的每一目錄條目就包含圖片的一個參數。
TGA:TGA 格式是由美國 Truevision 公司為其顯示卡開發的一種圖片檔案格式，檔案後綴為〝.tga〞，已被國際上的圖形、圖片工業所接受，TGA 的架構比較簡單，屬於一種圖形、圖片數據的通用格式，在多媒體領域有很大影響　是電腦生成圖片向電視轉換的一種首選格式，TGA 圖片格式最大的特點是可以做出不規則形狀的圖形、圖片檔案，一般圖形、圖片檔案都為四方形，若需要有圓形、菱形甚至是縷空的圖片檔案時，TGA 可就派上用場了，TGA 格式支援壓縮，使用不失真的壓縮算法。
EXIF:EXIF 的格式是 1994 年富士公司提倡的數位相機圖片檔案格式，其實與 JPEG 格式相同　區別是除儲存圖片數據外，還能夠存儲攝影日期、使用光圈、快門、閃光燈數據等曝光資料，和附帶訊息以及小尺寸圖片。
FPX:FPX 圖片檔案格是由柯達、微軟、HP 及 Live PictureInc 聯合研製，並於1996年6月正式發表，FPX 是一個擁有多重分辯率的影像格式，即影像被儲存成一系列高低不同的分辨率，這種格式的好處是當影像被放大時仍可維持影像的質素，另外　當修飾 FPX 影像時，只會處理被修飾的部分，不會把整幅影像一並處理，而減少 CPU 及記憶體的負擔，降低影像處理時間。
PSD:這是 Photoshop 圖片處理軟體的專用檔案格式，副檔名是〝.psd〞　可以支援圖層、通道和不同色彩模式的各種圖片特徵，是一種非壓縮的原始檔案儲存格式，掃描器不能直接生成該種格式的檔案，PSD 檔案有時容量會很大，但，由於可以保留所有原始訊息，在圖片處理中對於尚未製作完成的圖片，選用 PSD 格式儲存是最佳的選擇。
CDR:CDR 格式是著名繪圖軟體 CorelDRAW 的專用圖形檔案格式，由於 CorelDRAW 是向量圖形繪製軟體，所以 CDR 可以記錄檔案的屬性、位置和分頁等，但它在兼容度上比較差，所有CorelDraw應用程式中均能夠使用，但其他圖片編輯軟體打不開此類檔案。
PCD:PCD 是 Kodak PhotoCD 的縮寫　副檔名是〝.pod〞，是 Kodak 開發的一種 Photo CD 檔案格式，其他軟體系統只能對其進行讀取，該格式使用 YCC 色彩模式定義圖片中的色彩

，YCC 和 CIE 色彩空間包含比顯示器和列印設備的 RGB 色和 CMYK 色多得多的色彩，PhotoCD 圖片大多具有非常高的質量。

DXF:DXF 是 Drawing Exchange Format 的縮寫，副檔名是〝.dxf〞，是AutoCAD中的圖形檔案格式，它以ASCII模式儲存圖形，在表現圖形的大小方面十分精確，可被 CorelDraw 和 3DS 等大型軟體調用編輯。
UFO:這是著名圖片編輯軟體 Ulead Photolmapct 的專用圖片格式，能夠完整地記錄所有 Photolmapct處理過的圖片屬性，值得一提的是，UFO檔案以對象來代替圖層記錄圖片訊息。
EPS:EPS 是 Encapsulated Postscript 的縮寫　是跨平台的標準格式，副檔名在 PC上是〝.eps〞　在 Macintosh 是〝.epsf〞，主要用於向量圖片和光閘極圖片的存儲，EPS 格式採用 Postscript 語言進行描述，並且可以儲存其他一些類型訊息。例如：多色調曲線、Alpha通道、分色、剪輯路徑、掛網訊息和色調曲線等。因此　EPS 格式常用於印刷或列印輸出，Photoshop 中的多個EPS格式選項可以實現印刷列印的綜合控制，在某些情況下甚至優於TIFF格式。
PNG:每個點都是原色，不失真公開格式，PNG（Portable Networf Graphics）的原名稱為〝可移性網路圖片〞，是網上接受的最新圖片檔案格式，PNG 能夠提供長度比 GIF 小 30％的無損壓縮圖片檔案，它同時提供 24 位和 48 位真彩色圖片支援以及其他諸多技術性支援，由於 PNG 非常新，所以，目前並不是所有的程式都可以用它來存儲圖片檔案，但 Photoshop 可以處理 PNG 圖片檔案，也可以用 PNG 圖片檔案格式存儲。

二、基本架構

基本架構
- 步驟一：開啟fielzilla，連線至站台
- 步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
- 步驟三：命名為：flower(記得要加入副檔名.svg)
- 步驟四：寫入程式碼。

   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>

   </svg>

基本樣式
- line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
- polyline(多點成線)，諸屬性如下：
  - points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
  - points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- circle(圓)，諸屬性如下：
  - cx(圓心x座標)，cy(圓心y座標)，r(半徑)
- rect(矩形)，諸屬性如下：
  - width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
- ellipse(楕圓)，諸屬性如下：
  - cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
基本圖形
- stroke (線條顏色)，
- stroke-width (線條寬度)，
- stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
- stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
- stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
- stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
- stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
顏色部分：
- fill (填充顏色)，
- fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
- fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)

三、文字

範例一(text.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text>
</svg>

在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
可用中文字形：

1. Monospace：等寬字型(非調和字)
2. Sans：無襯線體(黑體，哥德體)
3. Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
4. KaiTi：楷體
5. MingLiU：明體
6. PMingLiU：明體
7. MingLiU_HKSCS：明體
8. FangSong：仿宋
9. NSimSun：新宋
10. SimHei：新黑
11. Microsoft YaHei：微軟雅黑體
12. Microsoft JhengHei：微軟正黑體
13. Arial Unicode MS：微軟 Arial 體
14. DFBiaoKaiShu-B5：華康楷書體
15. DFHKStdKai-B5：華康標楷體
16. DFHKStdSong-B5：華康標宋體
17. DFBiaoSong-B5：華康宋體
18. DFHeiUBlod-B5：華康特粗黑體
19. DFHeiBlod-B5：華康粗黑體
20. DFHeiMedium-B5：華康中黑體
21. DFHeiLight-B5：華康細黑體
22. DFBiaoKaiShu-B5：華康楷書體
23. …：華康眾字體，族繁不及備載
24. Segoe UI：微軟 Segoe UI 字形
25. Tahoma：微軟 Tahoma 字形
26. Meiruo：日文明瞭體
27. Meiruo UI：日文明瞭體
28. MS Gothic：微軟日文哥德體
29. MS Mincho：微軟日文明朝體
30. MS PGothic：微軟日文哥德體
31. MS PMincho：微軟日文明朝體
32. MS UI Gothic：微軟日文哥德體
33. MS Mincho：微軟日文明朝體

屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
屬性 fill 控制填入字的顏色，預設黑色
屬性 stroke 控制字描框的顏色，預設 none
屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

其他進階屬性：

text-decoration 屬性，有以下諸值：
1. underline：底線
2. overline：頂線
3. line-through：刪除線
4. blink：閃爍
5. none：無，預設值
6. inherit：繼承
textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值：
1. lengthAdjust='spacing' 靠調整字距來湊足字串的長度。
2. lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。
子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。
子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。
屬性 style 控制諸樣式：
1. font-size:
2. writing-mode:tb;直寫，預設橫寫。

四、位移、旋轉、縮放、歪斜

範例二(transform.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'>
	<line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(125,50) rotate(180) scale(0.8) skewX(30)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewY(30)'/>
</svg>

注意：
1. 四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。
2. 如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。
相關屬性說明：
1. 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
2. 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
3. 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
4. 歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)'，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
作圖練習二(3petal0.svg)(三花瓣)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

綁成群組(3petal1.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<g transform='translate(300,48) rotate(30) scale(1.7)'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

墊一張圖(3petal2.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/
</g>
</svg>

- 花瓣

五、群組

上面的文字與方塊已經算是一個群組了，接下來可以在<g>這個元素，使用變形(transform)來一起改變外觀
就算有設定<g>的x,y值，但就是完全沒有反應，如果要控制<g>的位置，就要用transform了。
利用transform=”translate(40 20)”，就可以位移了，這用法和CSS3 transform相當接近，雖然類似x,y但本質上還是有所不同。

   <svg width="100%" height="150">
       <g transform="rotate(-10)">
           <rect y="10" width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/>
           <text x="0" y="130" style="stroke: pink; fill: white"> SVG</text>
       </g>
   </svg>

像以上這樣，<g>群組就會被旋轉(-10 deg)。
在G裡面的元素，都會被外層<g>所設定的樣式影響，像以下內部的元素沒有設定外框，但卻可以繼承其父層的<g>樣式。
也就像CSS一樣，如果子元素有設定，則子元素優先。

   <svg width="100%" height="150">
       <g style="stroke: pink; stroke-width: 5px">
           <circle cx="40" cy="35" r="30" style="fill: white;"/>
           <circle cx="120" cy="35" r="30" style="fill: white;"/>
           <rect x="160" y="5" width="40" height="40" style="fill: white;"/>
           <rect x="220" y="5" width="40" height="40" style="fill: red;"/>
       </g>
   </svg>

不過我沒想到的是，svg還可以這樣用，在<g>裡面再放一個<svg>，這樣就可以設定他的x,y，這招太絕了，這樣就可以避免使用translate，使用x,y來設定位置。

   <svg width="100%" height="150">
       <g>
           <svg x="40" y="20">
               <rect y="10" width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/>
               <text x="0" y="130" style="stroke: pink; fill: white"> SVG</text>
           </svg>
       </g>
   </svg>

六、定義一次，引用多次

defs 顧名思義就是「definitions」：定義，我們可以把許多重複性質高的元素，放入 defs 元素內，讓它變成一個可以重複利用的物件，原理就有點類似當年 flash 裏頭把一些動畫或是圖案轉換成物件一樣；首先我們來看到最常見的 defs 例子：「重複的圖形」，下面利用 defs 定義了一個矩形的長寬顏色，再使用 use 元素把矩形表現在畫面上，而 use 元素具有 x 與 y 的座標屬性，就可以輕鬆的做出許多不同位置的矩形。

   <defs>
     <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
   </defs>
   <use xlink:href="#rect1"/>
   <use xlink:href="#rect1" x="110"/>

也可以將 g 元素 ( 群組 ) 放在 defs 元素裏頭：

   <defs>
       <g id="g1">
             <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
             <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
       </g>
   </defs>
   <use xlink:href="#g1"/>
   <use xlink:href="#rect1" x="110"/>
   <use xlink:href="#circle1" x="210"/>

定義漸層色

   <defs>
      <linearGradient id="a1">
        <stop offset="5%" stop-color="#F00" />
        <stop offset="95%" stop-color="#ff0" />
      </linearGradient>
   </defs>
   <rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
   <circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
   <rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

文字路徑(先把貝茲曲線定義好，再把文字套入)

   <defs>
     <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
   </defs>
   <text>
      <textPath xlink:href="#a1">這是隨著路徑跑的文字
   </textPath>
   </text>

使用 defs 定義 filter(把漸層或濾鏡變為ID就能放進矩形、圓形等等圖形中)

   <defs>
   <filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
     <feGaussianBlur stdDeviation="5" />
   </filter>
   </defs>
   <rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

七、漸層

漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 <linearGradient> 元素，就創建了一個線形漸層。漸變必須有一個id屬性，否則它不能被其他元素引用，等於白做了。

漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。

(一)線性漸層

在上面的例子裡，一個線形漸層被用在<rect>元素上，線形漸層內部有若干 <stop> 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的offset屬性和定義顏色的stop-color屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種stop-color，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個stop-opacity屬性表示透明度。

   <?xml version="1.0" standalone="no"?>
   <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="Gradient1">
           <stop class="stop1" offset="0%"/>
           <stop class="stop2" offset="50%"/>
           <stop class="stop3" offset="100%"/>
         </linearGradient>
         <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
           <stop offset="0%" stop-color="red"/>
           <stop offset="50%" stop-color="black" stop-opacity="0"/>
           <stop offset="100%" stop-color="blue"/>
         </linearGradient>
         <style type="text/css"><![CDATA[
           #rect1 { fill: url(#Gradient1); }
           .stop1 { stop-color: red; }
           .stop2 { stop-color: black; stop-opacity: 0; }
           .stop3 { stop-color: blue; }
         ]]></style>
     </defs>

     <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
     <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
 
   </svg>

在上面的例子裡，一個線形漸層被用在<rect>元素上，線形漸層內部有若干 <stop> 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的offset屬性和定義顏色的stop-color屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種stop-color，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個stop-opacity屬性表示透明度。
使用漸變時，我們需要在對象的fill或stroke屬性裡引用它。就像在CSS里通過url來引用其他元素一樣，在這裡，url引用的是我們給漸變設置的id，所以只需要將fill屬性設置成url(#Gradient) ，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給stroke進行同樣的設置。
<linearGradient>元素還可以設置其他一些屬性，用來定義尺寸和样式。比如漸變的方向是由兩個點控制的，它們用x1， x2，y1，y2四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的Gradient2就是一個垂直的漸變。

(二)放射漸層

放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 <radialGradient> 元素，就可以創建放射形漸層。

   <?xml version="1.0" standalone="no"?>
   
   <svg width="120" height="240" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
     <defs>
         <radialGradient id="Gradient1">
           <stop offset="0%" stop-color="red"/>
           <stop offset="100%" stop-color="blue"/>
         </radialGradient>
         <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25">
           <stop offset="0%" stop-color="red"/>
           <stop offset="100%" stop-color="blue"/>
         </radialGradient>
     </defs>
    
     <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
     <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
     
   </svg>

這個例子的裡，放射形漸層中的stop節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層<radialGradient>也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性cx和cy，以及半徑屬性r。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。
第二個點被稱為焦點，通過坐標屬性fx和fy來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。

   <?xml version="1.0" standalone="no"?>
   
   <svg width="120" height="120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
     <defs>
         <radialGradient id="Gradient"
               cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
           <stop offset="0%" stop-color="red"/>
           <stop offset="100%" stop-color="blue"/>
         </radialGradient>
     </defs>
    
     <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
           fill="url(#Gradient)" stroke="black" stroke-width="2"/>

     <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
     <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
     <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
     <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
     <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
 
   </svg>

如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。

兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：spreadMethod屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從100%處的顏色漸變會0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。
柔焦濾鏡與放射漸層的練習

八、柔焦濾鏡

feGaussianBlur(柔焦濾鏡)應該算是 SVG filter 裏頭最簡單的濾鏡，因為它只有一個參數需要注意：stdDeviation，這也是控制模糊程度的參數，數字越大越模糊，數字為零則是圖片原本的狀態，在這邊有一個比較需要注意的地方，就是要記得設定 filter 的filterUnits為 userSpaceOnUse ，因為預設值是會讓 filter 跟隨著套用該 filter 的物件跑，所以要記得設定成跟隨整個 SVG space。

   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='160' height='160'>
   <defs>
 	    <radialGradient id='r4' cx='50%' cy='50%' r='50%' >
               <stop style='stop-color:#fff100' offset='0%' />
               <stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' />
               <stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' />
           </radialGradient>
           <filter id='f1' >
           <feGaussianBlur stdDeviation='3' />
           </filter>
   </defs>
   <circle cx='79' cy='79' r='75' style="fill:url(#r4);filter:url(#f1);" />
   </svg>

feGaussianBlur後面的stdDeviation='3'用來設定模糊的程度，0就是完全沒有改變。

九、path

用參數(0~1)和控制點作圖：

一次：
二次：　
三次：　
四次：　
五次：

path示範

標籤：

set(開關)
- 只用attributeName,to,begin三屬性
animate(屬性連續改變)
animateTransform(平移,旋轉,縮放)
animateMotion(循跡運動)

共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。
共通屬性：
1. attributeName：
  - set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
  - animateTransform為'transform'另搭配 type 屬性
  - animateMotion免設此屬性
2. type屬性之值(animateTransform專用)：
  - rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。
  - scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。
  - translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。
  - skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
  - skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
3. begin='幾s'：幾秒開始跑，通常設為 0s 。
4. dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
5. repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
6. from 開始狀態(animate,animateTransform有)。
7. to 結束狀態(set,animate,animateTransform有)。
8. path(animateMotion專用) 屬性為移動路徑：由 m 開始
9. rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。

貝茲曲線

在數學的數值分析領域中，貝茲曲線（英語：Bézier curve，亦作「貝塞爾」）是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面，其中貝茲三角是一種特殊的實例。貝茲曲線於1962年，由法國工程師皮埃爾·貝茲（Pierre Bézier）所廣泛發表，他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。

二次貝茲曲線

貝茲曲線的程式碼

   <path id='a1' d='M0,50 C150,130 100,0 300,40' style='stroke:#000;fill:none;' />

用貝茲曲線設定文字要先在<def></def>寫好，再使用id匯入。
所以只需要設定一次，就可以使用設好的ID使用多次。
我可以在每一個<textPath></textPath>中放上不一樣的文字，就會有一樣的角度，不同的樣貌

程式碼如下(此為文字)

  <textPath startOffset='4%' xlink:href='#a1' style='font-family:KaiTi;fill:pink;font-size:40px'></textPath>

純貝茲曲線指令碼

  <path d='M0,0 Q50,50 20,0 T40,0 60,0 80,0 100,0 120,0 140,0 160,0 180,0 200,0' style='stroke:black;fill:none;' transform='translate(0,50)'/>

三次貝茲曲線

三次的程式碼

   <path d='M0,50 C50,100 80,0 200 50' style='stroke:blue;fill:none;' />

三次與兩次相比更加細緻。

三次與數次貝茲曲線的差異

以此類推，雖然曲線細緻度不同，但底層的原理一樣。

十、動畫

共通屬性：
1. attributeName：
  - set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
  - animateTransform為'transform'另搭配 type 屬性
  - animateMotion免設此屬性
2. type屬性之值(animateTransform專用)：
  - rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。
  - scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。
  - translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。
  - skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
  - skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
3. begin='幾s'：幾秒開始跑，通常設為 0s 。
4. dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
5. repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
6. from 開始狀態(animate,animateTransform有)。
7. to 結束狀態(set,animate,animateTransform有)。
8. path(animateMotion專用) 屬性為移動路徑：由 m 開始
9. rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。

向前移動並消失的程式碼

   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400' width ='1000'>
   <defs>
       <linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'>
           <stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' />
           <stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' />
       </linearGradient>
   </defs>    
   <circle cx="30" cy="30" r="25" style="stroke: none; fill:url(#LG);">
   <animate attributeName="cx" attributeType="XML"
       from="30"  to="1020"
       begin="0s" dur="3s"
       fill="remove" repeatCount="indefinite"/>
   <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
   </circle>	
   </svg>

圖形範例

綜合應用：

三角形：

直角三角形：

動畫：

旋轉：

三個方塊的舞蹈：

互動：

Inkscape

免費的SVG建構軟體，有點像Adobe的AI繪圖軟體。
Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。
inkscape存檔後會轉成SVG，所以，我們可以用它來製作svg。
inkscape轉出後的程式碼幾乎都會變成貝茲曲線或是多邊形。
但是inkscape最大的壞處就是不能畫動畫。

發展過程

Inkscape始於2003年，最初是Sodipodi的一個分支、分線發展（fork），Sodipodi自身則是在1999年以Raph Levien的Gill為基礎開始。

此一分線發展的主導來自一個四人團隊，這四人之前為Sodipodi的開發人員，他們分別是Ted Gould、Bryce Harrington、Nathan Hurst、以及MenTaLguY，他們對原有專案目標有不同的見解體認，並未公開地進行協力貢獻，且技巧性的否認他們的動機用意是為了分線發展。此外，他們聲明Inkscape的發展是嘗試與專注在完整實現SVG的標準上，相對的Sodipodi的發展強調是在於建立一套一般性用途的向量圖形編輯器，因此可能難以兼顧SVG方面的發展與支援性。

分線發展後，Inkscape也變更了幾項事物，例如開發所用的程式語言從C換成C++；而函式庫方面也換成GTK+工具套件的C++綁定（gtkmm）、重新設計使用者介面並加入多項的新功能特點;事實上的圖像使用的語言主要是python外掛程式也是一樣的。雖然Inkscape對SVG標準的支援實現是採階段性的精進強化路線，不過至今仍未完整。

再者，Inkscape聲明在專案的開發執行上將不採行「由上到下的治理」（top-down governance）架構，而是提倡平等式文化，權柄作法或個別開發者的獨特才幹與作為，對Inkscape的發展而言都會造成拖累影響。因此，此專案特別強調其原始程式碼是放在任何參與專案活動的開發者都可以存取的位置，並在更大的開放原碼社群中進行參與及分享（這經常會形成跨專案的推動以及專案的分立，例如：Open Clip Art Library）。

雖然專案發起人依舊在決策程式上有高度代表性，不過許多新近參與者也扮演著關鍵的角色任務，例如Bulia Byak就為Inkscape的使用者介面帶來根基性的新架構，新架構為今日的Inkscape帶來新的呈現畫面。

此後，由於英國Xara公司宣布計畫將其所屬的繪圖應用程式：Xara Xtreme以開放原碼方式接續發展，這讓Inkscape的開發團隊深感興趣，並期望兩套軟體在後續發展上能緊密合作，嘗試找尋一種方式讓兩個軟體專案能共享原始程式碼、共享開發協調的心力成效等，並且使開放原碼在圖形方面的卓越表現，也能用在專屬軟體世界的各層面與環節。

版本

0.92版（2016年1月4日，最新版）新特性包括網格漸變、更好的SVG2與CSS3支援、新路徑效果、鉛筆工具的互動平滑、管理所有繪圖元素的對話方塊等[2]
0.91版（2015年1月30日）改用一個新的內部彩現引擎Cairo，有更好的效能。新增了測量工具，可以量測物件之間的距離或交叉的角度。貼齊物件功能獲得了改善。此外也增加、改善了對多種圖片格式的支援，例如支援輸出FXG、SIF和HTML5格式，改善對PDF、EPS、PS+LaTeX的支援。
0.48版（2010年8月23日）加入新的噴塗工具、多徑編輯、文字上標/下標等功能
0.47版（2009年11月24日）加入了定時自動儲存，螺旋曲線，自動平滑節點，超過200個偏好設定過濾器等
0.46版（2008年3月24日）加入新的SVG濾鏡、支援開啟PDF檔案、修正OpenType/PostScript和Type1字型支援等。
0.45版（2007年1月15日）加入高斯模糊（Gaussian Blur）
0.44版（2006年6月24日）加入階層對話方塊，支援剪裁與遮罩，強化PDF的透明性匯出，及效能強化等。
0.43版（2005年11月19日）加入了連接器工具、協同編輯、手寫板壓力／角度感應能力、以及強化節點工具。
0.42版（2005年7月26日）加入文字直書功能、風格走文功能、強化效果支援、以及新的漸層工具。
0.41版（2005年2月10日）加入翻製疊磚工具及顏色追蹤，並修補許多軟體錯誤（臭蟲）。
0.40版，加入了圖層、點陣圖追蹤，以及在路徑上使用文字。
0.39版，首次用Pango函式庫發布，如此可支援更多的語系，如支援標示器、翻製、以及花紋填色。
0.38版，發布此版主要在修補錯誤，不過也增加了文字的突端、間隔、多態漸層等功能特點，以及許多使用性的強化。
0.37版，布林路徑操作以及路徑內插、外貼。
0.36版，首次以改編過的新使用者介面來發布，介面上使用了功能選單，以及在檔案視窗中加入了脈絡感應工具列。
0.35版（2003年10月14日）是Inkscape發布的首版，與0.32版的Sodipodi非常相似。

基本建立物件

繪圖

鉛筆工具（徒手描繪，且可在路徑內進行填色）。
筆式工具（運用直線與貝茲曲線與來建立路徑）。
筆畫工具（運用電子手寫板（tablet）可用筆畫的壓力、角度來進行描繪與填色）。

樣式工具

矩形（可選擇使用圓角化）。
圓形、橢圓形或弧形（可選擇圈、弧、段）。
星形／多邊形（可選擇尖角數、輪廓比例、圓角化、隨機等）。
螺旋形

其他工具

文字工具（橫書、多列或直書）
連結性的點陣圖圖形，無論是匯入或是光柵化的選取物件（針對嵌入的連結圖形，Inkscape另有一個個別獨立的公用程式可以運用）
翻製（以「活性」方式連結物件的複製）。相近的功效在其他程式上稱為「symbols」。

GIS

何謂 GIS ？
- 地理資訊系統（英語：Geographic Information System，縮寫：GIS）是一門綜合性學科，結合地理學與地圖學，已經廣泛的應用在不同的領域，是用於輸入、儲存、查詢、分析和顯示地理資料的電腦系統，可以分為以下五部分：

人員，是GIS中最重要的組成部分。開發人員必須定義GIS中被執行的各種任務，開發處理程式。熟練的操作人員通常可以克服GIS軟體功能的不足，但是相反的情況就不成立。最好的軟體也無法彌補操作人員對GIS的一無所知所帶來的負作用。
資料，精確可用的資料可以影響到查詢和分析的結果。
硬體，硬體的效能影響到處理速度，使用是否方便及可能的輸出方式。
軟體，不僅包含GIS軟體，還包括各種資料庫，繪圖、統計、影像處理及其它程式。
過程，GIS要求明確定義，一致的方法來生成正確的可驗證的結果。

GIS屬於資訊系統的一類，不同在於它能運作和處理地理參照資料。地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性，在GIS中的兩種地理資料成分：空間資料，與空間要素幾何特性有關；屬性資料，提供空間要素的資訊。

兩種主要的 GIS
使用地圖庫：
1. google map：google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容。
2. OpenStreetMap：(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。
GIS 相關單字。
1. zoom:放大或縮小畫面
2. overlay:覆蓋物，GIS中用複數overlays
3. marker:標記，GIS中代表地點標示，用複數markers
4. address:地址
5. latitude:緯度
6. longitude:經度
7. coord:經緯度座標，GIS中代表地點標示，用複數coords
8. map:地圖
9. type:類別
10. road:道路
11. color:顏色
12. fill:填滿
13. radius:半徑
14. html:超文件
15. content:內容
16. popup:跳出
17. false:假的，不成立
18. true:真的，成立
19. polyline:多點成線
20. polygon:多邊形
21. circle:圓形
22. rectangle：方形(矩形)
23. ROADMAP：道路地圖
24. SATELLITE：衛星空照圖
25. HYBRID：道路與空照圖相疊加。
26. TERRAIN：地形圖
基本框架
基本 DIV

<meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script>
<script>
$(function(){
	$('#map').goMap({
………
	}); 
});
</script>
<div align=center id='map' style='height:550px; width:900px;'>六年制學程</div>

marks
- - 整個markers:後面用一個中括號把所有的點包起來。中括號裡面，每一組大括號是一個點。
第一個 marker 為整張圖的中心點，優先於整張圖的中心點。
每一個點內，諸參數如下：

address:值為字串，故加引號，可用國名如「台灣」或地址如「台灣新北市三峽區三樹路2號」
longitude:經度，十進位。如：121.459502
latitude:緯度，十進位。如：25.025448
html:放物件，內含：
- content:HTML碼
- popup:false不主動彈出；true主動彈出。
title:游標停住會顯示。
draggable:true代表可拖動。
icon:字串，代表圖檔。

overlays

每一個覆蓋物用大括號包起來，所有的覆蓋物用中括號包起來。

每一個覆蓋物共有的性質有：type、color、fillColor。

四種覆蓋物各自的參數：

1. circle 圓：latitude、longitude、radius
2. polyline 線：coords
3. polygon 多邊形：coords
4. rectangle 方形(矩形)：ne、sw

google 我的地圖

Google 我的地圖是一個2007年4月推出的服務，使用戶可以創建自定義地圖用於個人使用或分享。用戶可以使用所見即所得編輯器，在Google地圖上添加點、線、圖形。 2014年11月，Google發布新版我的地圖，舊版地圖被自動升級至新版，並支援Google雲端硬碟。可下載至自己的電腦，但必須下載副檔名為：" kml "

結合我的地圖與 GIS
- GIS←kml←google 我的地圖
- 什麼是 kml？
  - KML全稱：Keyhole Markup Language，是基於XML（eXtensible Markup Language,可擴展標記語言）語法標準的一種標記語言（markup language），採用標記結構，含有嵌套的元素和屬性。由Google（谷歌）旗下的Keyhole公司發展並維護，用來表達地理標記。根據KML語言編寫的文件則為KML文件，格式同樣採用的XML文件格式，應用於Google地球相關軟體中（Google Earth，Google Map, Google Maps for mobile...），用於顯示地理數據（包括點、線、面、多邊形，多面體以及模型...）。而現在很多GIS相關企業也追隨Google開始採用此種格式進行地理數據的交換。
  - 由KML文件是種多功能的地理數據格式，在Google發展下，它可以將（link）網頁、圖片、模型..等各種媒體檔案在Google Earth作完整的呈現。
  - KML本身的檔案通常不會很大，但在於呈現3維模型或是在於補充其他相關輔助資訊時，KML仍有其侷限性，故除透過網路提供KML資訊外，尚可透過KMZ將其相關檔案包裝成一單檔進行交換，此外可透過ZIP解壓縮去檢視其檔案內容結構，且與原KML有10：1之壓縮比，故有人視為其為KML壓縮檔，但根據其資料含意與結構比較類似於KML資料包裝檔。
  - KML在2008年4月14日被OGC（Open Geospatial Consortium, Inc.開放地理信息系統協會，或譯成開放式地理空間協會）宣布為開放地理資訊編碼標準（OGC KML, OpenGIS® KML Encoding Standard）[1]，而Google同時也在網站Blog上宣布不再控制KML標準，而移交給OGC去維護發展[2]，而被採用的開放地理資訊編碼標準（OpenGIS KML 2.2 Encoding Standard）可以在這個網頁見到完整的手冊內容：http://www.opengeospatial.org/standards/kml/.
- 將 kml 中的經緯度，換成 GIS
- 將經緯度段落複製到一個新檔。
- 將經緯度前的空白換成四個 tab
- 將「,0\n」置換成「}\n」
- 將「\t\t\t\t」置換成「\t\t\t\t{longitude:」
- 將「,」置換成「,latitude:」
- 將「}」置換成「},」
- 置換後的經緯度座標，嵌入 GIS 的 polyline 裡的 coords:[]性質中。
GIS應用國家公園
google地圖也能嵌入wiki

圖形計算機

取得 svgdraw.php
- 在這裡複製原始碼
- 用

   <?php
   require_once("./svgdraw.php");
   $draw = new svgdraw;
   …
   $drawResult=$draw->draw();
   echo $drawResult['svg'];
   ?>

這批原始碼將剛剛的svgdraw的XY線拉過來。(呼叫原始碼為：svgdraw.php)

基本框架
1. 圖寬：$draw->W，預設601。
2. 圖高：$draw->H，預設401。
3. 原點距左上角：$draw->x0,$draw->y0，預設(200,200)。
4. x每單位幾點：$draw->xu，預設15。
5. y每單位幾點：$draw->yu，預設15。
6. x每幾單位畫一個刻度：$draw->xGraduate，預設1。
7. y每幾單位畫一個刻度：$draw->yGraduate，預設1。
8. x每幾刻度標示一數字：$draw->xScale，預設1。
9. y每幾刻度標示一數字：$draw->yScale，預設1。
10. 秀出直角座標系：$draw->coordinate，預設1。
11. 函式描點密度：$draw->pointDensity，預設20。
12. 函式取樣點：$draw->xs，預設'-1;0;1';
繪製基本圖形
1. 多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
2. 線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
3. 字：$draw->alnums[]=array(array(×,×),'word'=>'字');
4. 圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
5. 楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
6. 弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);
- 圖形計算機應用：學校

- 應用：直角

函式繪圖
我們常常會在程式開發的時候，聽到Function，不過在中文上也常聽到有人說函數或是函式，這幾個詞都是指同一件事情嗎？
在電腦科學中，子程式（英語：Subroutine, procedure, function, routine, method, subprogram, callable unit），是一個大型程式中的某部份程式碼，由一個或多個語句塊組成。它負責完成某項特定工作，而且相較於其他程式碼，具備相對的獨立性。
一般會有輸入參數並有傳回值，提供對過程的封裝和細節的隱藏。這些代碼通常被整合為軟體庫。
函式在程序導向的語言中已經出現。是結構（Struct）和類別（Class）的前身。本身就是對具有相關性語句的歸類和對某過程的抽象。

基本：

$draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');
$draw->xs='×;×;×;…';：各點 x 值。
標y值：在functions[]中加'xToy'=>$draw->xs,
標點：在functions[]中加'x2y'=>$draw->xs,
斜率：在functions[]中加'tangentPoint'=>$draw->xs,
面積：在functions[]中加'area'=>$draw->xs,
google 圖形計算機
- 繪圖計算機通常指一種能夠繪畫圖象、解方程組以及執行其它各種操作的手持計算機，大多數繪圖計算機還能編寫程式。由於它們的螢幕較一般計算機大，因此能夠同時顯示多行文字。一些繪圖計算機甚至有彩色顯示或三維作圖功能。
- 由於繪圖計算機可以編寫程式，所以它也廣泛被用於電子遊戲上。
- 一些電腦軟體也可以完成繪圖計算機的功能。
- 在GOOGLE搜尋引擎寫入算式也能直接算出

討論:資訊基礎應用/張又懿

目錄