討論:資訊基礎應用/張又懿：修訂版本之間的差異

2018年1月20日 (六) 16:09的修訂版本

環境與工具

一、環境

• 伺服器與域名
  • 65536 物聯網 一切人造物接上網路，得失相兼 福禍相依 連結夠大，連結夠大就有智慧 域名伺服器 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 。這種位址表示方式是利用有意義的英文縮寫來表示，所以比較清楚，也容易記憶。

• 各縮寫

• 網站空間
  • 在 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組織的主要宗旨是使得著作物能更廣為流通與改作，作為其他人據以創作及共享，並以所提供的授權方式確保上述理念。

• 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>
     <tr><th class='nicetable'>紀詠恩</th><td class='nicetable'>s950285en@gmail.com</td><td>0963617815</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結束
• 點陣圖與向量圖的比較(含附檔名)
  • 失真壓縮可以減少儲存圖片所需要的空間大小，在螢幕上觀看圖片時，其實這影響不大，因為，人的眼睛對光線比較敏感，光線對景物的作用比顏色的作用更為重要，這就是失真壓縮技術的基本依據，失真壓縮的特點是保持顏色的逐漸變化，刪除圖片中顏色的突然變化，生物學中的大量實驗證明，人類大腦會利用與附近最接近的顏色來填補所丟失的顏色，例如:對於藍色天空背景上的一朵白雲
  • 失真壓縮的方法就是刪除圖片中景物邊緣的某些顏色部分，當在螢幕上看這幅圖時，大腦會利用在景物上看到的顏色填補所丟失的顏色部分，利用有損壓縮技術，某些數據被有意地刪除了，而被取消的數據也不再恢復
  • 利用有損壓縮技術可以大大地壓縮檔案的數據，但是，會影響圖片的品質，如果使用了有損壓縮的圖片僅在螢幕上顯示，可能對圖片質量影響不太大，至少對於人類眼睛的識別程度來說區別不大，可是，如果要把一幅經過有損壓縮技術處理的圖片用高分辨率印表機列印出來，那麼圖片質量就會有明顯的受損痕跡。
• 非失真壓縮
  • 非失真壓縮的基本原理是相同的顏色訊息只需儲存一次，壓縮圖片的軟體首先會確定圖片中哪些區域是相同的，哪些是不同的，包括了重複數據的圖片(如藍天)就可以被壓縮，只有藍天的起始點和終結點需要被記錄下來，但是藍色可能還會有不同的深淺，天空有時也可能被樹木、山峰或其他的對象掩蓋，這些就需要另外記錄，從本質上看，非失真壓縮的方法可以刪除一些重複數據，大大減少要在磁片上儲存的圖片尺寸，但是，無損壓縮的方法並不能減少圖片的影別空間佔用量。
  • 這是因為，當從磁片上讀取圖片時，軟體又會把丟失的像素用適當的顏色訊息填充進來，如果要減少圖片佔用內存的容量，就必須使用失真壓縮方法，非失真壓縮方法的優點是能夠比較好地儲存圖片的品質，但是，相對來說這種方法的壓縮率比較低，不過，如果需要把圖片用高分辨率的印表機列印出來，最好還是使用非失真壓縮，幾乎所有的圖片檔案都採用各自簡化的格式名作為檔案副檔名，從副檔名就可知道這幅圖片是按什麼格式存儲的，應該用什麼樣的軟體去讀／寫等等。
• 點陣圖檔案格式
  • pug
  • 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」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
• 可用中文字形：

• 屬性 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 。

其他進階屬性：

<?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>

<?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>

<?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>

<?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>