2018年1月25日 (四) 01:43的最新修訂版本

完整筆記html和CSS(GIS&SVG基本操作)

1 環境以工具

1.1 一、環境

各縮寫

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

1.2 二、工具與設定

firefox

firefox優點

1. 不容易中毒

2. 有精選網站功能

firefox缺點

1. 沒有自己的搜尋引擎

2. 歷史紀錄資料不好找

filezilla

FileZilla是一種快速、可信賴的FTP用戶端以及伺服器端開放原始碼程式，具有多種特色、直覺的介面。

FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案。

EmEditor

2 HTML與HTTP

HTML XML的區別而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標籤，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。

HTML XML的差別在於HTML無法自訂標籤，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標籤的方式，可以讓其他網頁自己去轉換分享者的標籤，並轉為自己的標籤，進而直接讀取跟引用。

標籤 html 超文件(HyperText Markup Language)

head 文件頭

title 標題

body 本文

a 超連結(anchor)

img 圖(image)

p 段(paragraph)

br 跳行(break space)

hr 水平線(Horizontal Rule)

table 表

tr 表內之列(table row)

td 表內之格(table diamond)

th 表內之格(table head diamond)

ol 有次序的列表(order list)

ul 沒有次序的列表(unorder list)

li 列表項目(list item)

style 宣告樣式(修飾一個超文件)

span 文字小片段

div 區塊(division)

pre 保留原有斷行及排列之式(preserve)

form 表單屬性(用=連等號兩邊)

src= 圖照來源(source)

href= 跳往那一個連結(hyper ref)(hyper reference)

target= 跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。

style= 樣式屬性(修飾一個標籤)

width= 寬度，可以用點(px,pt)或長度(cm)或百分比表示

height= 高度，可以用點(px,pt)或長度(cm)或百分比表示

border= 邊框。樣式(用:連冒號兩邊)

font-family: 字體

font-size: 字的大小

font-weight: 字有多粗

text-align: 字的對齊方式

color: 字的顏色

width: 寬度

height: 高度

border: 邊框

border-collapse:collapse 合併框線

HTML

HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及 HTTP

HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起

超文本傳輸協定（英文：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月公布的 REC 2616，定義了HTTP協議中現今廣泛使用的一個版本——HTTP 1.1。

2014年12月，網際網路工程任務組（IETF）的Hypertext Transfer Protocol Bis（httpbis）工作小組將HTTP/2標準提議遞交至IESG進行討論，於2015年2月17日被批准。

HTTP/2標準於2015年5月以 REC 7540 正式發表，取代HTTP 1.1成為HTTP的實現標準。

通訊錄

<link rel='stylesheet'type='text/css'href='./pa.css'   />
<html> 
<head>
      <title>鈞祺寶寶的頁面</title>
</head>
<body>
<table border=1>
<h1>
<b>
<link rel='stylesheet' type='text/css' href='./pa.css'  />
<style>
table,td {border:BLUE solid 1px;}
#xyz{border:#00EC00 dashed 5px;}

</style>
<table>
<tr><td  id='xyz'>張鈞祺</td><td class='nicetable'>alledu2@gmail.com</td><td class='nicetable'>0987466665</td></tr></b>
<tr><td  id='xyz'>張又懿</td><td class='nicetable'>yuyiolulu@gmaill.com</td><td class='nicetable'>0983329126</td></tr>
<tr><td  id='xyz'>丁志仁</td><td class='nicetable'>chucniolulu@gmail.com</td><td class='nicetable'>0970070126</td></tr>
<tr><td class='nicetable'>李彥廷</td><td class='nicetable'>leejerry0706@gmail.com</td><td class='nicetable'>0984201016</td></tr>
<tr><td class='nicetable'>蕭卉均</td><td id='xyz'>suzy92126@gmail.com</td><td class='nicetable'>0939912983</td></tr>
<tr><td class='nicetable'>盧星瑜</td><td class='nicetable'>thsrrabbit0803@gmail.com</td><td class='nicetable'>0930980803</td></tr>
<td colspan="2">使用了 colspan1的欄位</td>
</table>

<br/><br/>
<p class='nicetable'>這是我們的通訊錄。</p>
<br/><br/><br/>
<table class='nicetable'>
<tr><th class='nicetable'>2</th><td class='nicetable'>4</td></tr>
<tr><th class='nicetable'>6</th><td class='nicetable'>8</td></tr>
</table>

</table>
</body>
<</html>

3 wiki

語法	顯示	說明
#AAA #BBB #CCC	AAA BBB CCC	井號
AAA BBB *CCC	AAA BBB CCC	星號
AA #AA1 #AA2 BB #BB1 #BB2	AA AA1 AA2 BB BB1 BB2	先星後井
#AA #AA1 #AA2 #BB #BB1 #BB2	AA AA1 AA2 BB BB1 BB2	先井後星
==中標== ===小標=== ====小小標==== =====加粗標===== ======超小標======	中標小標小小標加粗標超小標	段落標題，等號多標題小
=大標=	大標	請不要用，這是留給議程題目用的。
[http://jendo.org 振鐸網站] 格式：[URL 連結說明]	振鐸網站	外部連結：一層中括號包著 URL，空白後放連結說明。
[[這是首頁]] 格式：[[頁面名稱\|連結說明]] 中括號內也可只寫頁面名稱	[[]]	內部連結：兩層中括號包著「頁名」，豎槓(\|)後放連結說明。
[[檔案:Go top.gif]] 格式：[[檔案:檔名\|圖長\|圖寬\|…]]		插入圖照也是內部連結。所以請先上傳圖照。請勿非法上傳圖照。

4 CSS

網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處：

檔案的可讀性加強

檔案的結構更加靈活

作者和讀者可以自己決定檔案的顯示

檔案的結構簡化了

另外，在HTML中：

一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方，要改變它們很方便

不同的讀者可以有不同的樣式，比如有的讀者需要字型比較大

HTML檔案本身的範圍變小了，它的結構簡單了，它不需要包含顯示的資訊

CSS還可以控制其他參數，例如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。

5 SVG

5.1 一、概述

SVG格式具有以下優點：

放大不會毛邊

圖檔可轉為程式碼，易於修改和編輯

SVG圖形格式可以方便的建立文字索引。

SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。

SVG格式具有以下缺點：

由於原始的SVG檔是遵從XML語法，導致資料採用未壓縮的方式存放，因此相較於其他的向量圖形格式，同樣的檔案內容會比其他的檔案格式稍大。

舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形。

1：開啟fielzilla，連線至自己的站台管理員

2：home>www>SVG，在這個資料夾中，建立新檔案。

3：命名，然後記得要加入副檔名.svg

4：寫入程式碼。

5.2 二、基本架構

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

練習畫圈

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='畫面寬度' height='畫面高度'>
  <circle cx='圓圈寬度位置' cy='圓圈高度位置' r='圓圈大小' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/>
</svg>

5.3 三、文字

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：微軟日文明朝體

svg文字範例

文字範例語法

<text x='40' y='50' style='font-family:kaiti;fill:#00ff00'>張</text>

<text x='文字位置' y='文字位置' style='font-family:kaiti;fill:顏色'>文字</text>

內碼

<?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:#00ff00'>張</text>
        <text x='55' y='50' style='font-family:kaiti;fill:#ff0000'>鈞</text>
        <text x='70' y='50' style='font-family:kaiti;fill:#0000ff'>祺</text>
</svg>

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

<?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:#000;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#0ff;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>

	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f0f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>

	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f0f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>

	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#ff0;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:#ff0;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:#ff0;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewY(30)'/>

<</svg>

5.5 五、群組

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

5.6 六、定義一次，引用多次

<?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='201' height='201'>
<defs>
	<polygon id='petal' points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:blue;'/>
</defs>
<g>
<use xlink:href='#petal'/>
<use xlink:href='#petal' transform='rotate(45 100 100)'/>
<use xlink:href='#petal' transform='rotate(90 100 100)'/>
<use xlink:href='#petal' transform='rotate(135 100 100)'/>
<use xlink:href='#petal' transform='rotate(180 100 100)'/>
<use xlink:href='#petal' transform='rotate(225 100 100)'/>
<use xlink:href='#petal' transform='rotate(270 100 100)'/>
<use xlink:href='#petal' transform='rotate(315 100 100)'/>
</g>
<</svg>

5.7 七、漸層

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

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

5.7.1 (一)線性漸層

線性漸層指令

	<linearGradient id='LG' x1='50%' y1='0%' x2='0%' y2='50%'>
		<stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
		<stop offset='100%' style='stop-color:#00FFFF;stop-opacity:1' />
	</linearGradient>
<

線性漸層範例

線性漸層範例內碼

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='500'>
<defs>
	<linearGradient id='LG' x1='50%' y1='0%' x2='0%' y2='50%'>
		<stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
		<stop offset='100%' style='stop-color:#00FFFF;stop-opacity:1' />
	</linearGradient>
</defs>
<rect width='500' height='500' x='0' y='0' stroke='red' fill='url(#LG)' />

<</svg>

5.7.2 (二)放射漸層

放射漸層指令

	<radialGradient id='r2' cx='50%' cy='50%' r='50%'>
		<stop offset='0%' stop-color='#99FFFF'></stop>
		<stop offset='30%' stop-color='#66FFFF'></stop>
		<stop offset='70%' stop-color=' #5599FF '></stop>
		<stop offset='100%' stop-color='#0000FF'></stop>
	</radialGradient>
<

放射漸層範例

放射漸層範例內碼

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='750' height='750'>
<defs>
	<radialGradient id='r2' cx='50%' cy='50%' r='50%'>
		<stop offset='0%' stop-color='#99FFFF'></stop>
		<stop offset='30%' stop-color='#66FFFF'></stop>
		<stop offset='70%' stop-color=' #5599FF '></stop>
		<stop offset='100%' stop-color='#0000FF'></stop>
	</radialGradient>
</defs>
<circle cx='200' cy='200' r='200' fill='url(#r2)'/>

<</svg>

5.8 八、柔焦濾鏡

<?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:#33CCFF ' offset='0%' />
		<stop style='stop-color:#00BBFF ;stop-opacity:.98' offset='50%' />
		<stop style='stop-color:#009FCC;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>

5.9 九、path

線性貝茲曲線 給定點P₀、P₁，線性貝茲曲線只是一條兩點之間的直線。這條線由下式給出：

<math>\mathbf{B}(t)=\mathbf{P}_0 + (\mathbf{P}_1-\mathbf{P}_0)t=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]</math>

且其等同於線性插值。

一次：

二次方貝茲曲線 二次方貝茲曲線的路徑由給定點P₀、P₁、P₂的函數B（t）追蹤：

<math>\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]</math>。

TrueType字型就運用了以貝茲樣條組成的二次貝茲曲線。

二次：

三次方貝茲曲線 P₀、P₁、P₂、P₃四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P₀走向P₁，並從P₂的方向來到P₃。一般不會經過P₁或P₂；這兩個點只是在那裡提供方向資訊。P₀和P₁之間的間距，決定了曲線在轉而趨進P₂之前，走向P₁方向的「長度有多長」。

三次：

四次方貝茲曲線

四次：

五次方貝茲曲線

五次：

5.10 十、動畫

範例動畫

範例動畫程式碼

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


  <path d="M10,50 q60,50 100,0 q60,-50 100,0"
    style="stroke: #000000; fill: none;"
          />
  <circle cx="0" cy="25" r="25" style="stroke: #ff0000; fill: #0000ff;">
      <animateMotion
          path="M10,50 q60,50 100,0 q60,-50 100,0"
          begin="0s" dur="10s" repeatCount="indefinite"
          />
  </circle>

</svg>

綜合作品

6 Inkscape

Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。

Inkscape介面

Inkscape功能表

1：物件選用(F1)

2：路徑/節點(F2)

3：拉近/拉遠(F3)

4：矩形和正方形(F4)

5：圓/弧(F5)

6：星型/多邊形

7：螺旋(F9)

8：自由行手繪線(F6)

9：貝茲線/直線

10：書法字畫線

11：文字(F8)

12：創建一個新的連接器

13：創建和編輯漸變

14：吸管(F7)

用Inkscape畫的恐龍

7 GIS

地理資訊系統是一套可以進行蒐集、儲存、管理，更新、轉換、分析以及展示地理現象與其相關的資訊整合系統，能幫助我們處理地理資料與空間決策，主要透過疊圖及空間分析等功能，將原始地理資料轉變為能支援空間決策的資訊。

GIS基本指令

<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({
		zoom:17,
		markers:[

		],
	}); 
});
</script>
<<div align=center id='map' style='height:550px; width:900px;'>239新北市鶯歌區永明街58號</div>

8 圖形計算機PHP

PHP是一種開源的通用電腦手稿語言，尤其適用於網路開發並可嵌入HTML中使用。PHP的語法借鑑吸收C語言、Java和Perl等流行電腦語言的特點，易於一般程式設計師學習。PHP的主要目標是允許網路開發人員快速編寫動態頁面，但PHP也被用於其他很多領域。 PHP最初是由勒多夫在1995年開始開發的；現在PHP的標準由the PHP Group維護。PHP以PHP License作為許可協議，不過因為這個協議限制了PHP名稱的使用，所以和開放原始碼許可協議GPL不相容

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