資訊基礎應用/李彥廷：修訂版本之間的差異
出自六年制學程
（→2017.09.19） |
（→整張圖的性質） |
||
| （未顯示同用戶所作出之51次版本） | |||
| 第 30 行： | 第 30 行： | ||
**行內:td style=' | **行內:td style=' | ||
**通篇:把所有樣式寫在<style>.....</style>裡面，在引用。 | **通篇:把所有樣式寫在<style>.....</style>裡面，在引用。 | ||
| − | **跨多篇: | + | **跨多篇:把所有的寫在css裡面，再引用那個css， |
*Html:段標是h1~h6.wiki是==到====== | *Html:段標是h1~h6.wiki是==到====== | ||
*stylesheet:樣式表 | *stylesheet:樣式表 | ||
| 第 38 行： | 第 38 行： | ||
*名稱前加#號:指定的專一標籤 | *名稱前加#號:指定的專一標籤 | ||
*id:指針對特定的單一標籤，只能給一個標籤 | *id:指針對特定的單一標籤，只能給一個標籤 | ||
| + | *樣式定義可以很多層(之下的)，沒有逗點。 | ||
| + | *table,td{}table和td兩者都要這樣做 | ||
| + | *css:層疊樣式表（Cascading Style Sheets, CSS）， 是用來描述HTML 或XML（包含SVG 或 XHTML 等各種XML 變形）文件外觀的樣式表語言。 | ||
| + | *dashed:虛線 | ||
| + | ==2017.09.26== | ||
| + | *wiki: | ||
| + | *#分享式合作 | ||
| + | *#Wikipeida是Alexa流量統計前幾名唯一屬於公益性質的網站，其他皆是商業性的公司。 | ||
| + | *語法口決一:井號、星號、等號、中括號；用空白行分段。 | ||
| + | *語法口決二:用空白行分段 | ||
| + | *Gategory:分類 | ||
| + | *cc授權和傳統授權不一樣的地方:對不特定對象授權。 | ||
| + | *格式：檔案:檔名|圖長|圖寬|… | ||
| + | *px:pixel | ||
| + | *cc授權: | ||
| + | *#CC授權(Creative Commons，簡稱CC) | ||
| + | *#諸標章：CC授權、姓名標示、非商業性、禁止改作、相同方式分享。 | ||
| + | *#限制者才有標章，不限制者沒有標章。 | ||
| + | *#六種核心授權：1(必須姓名標示)×2(商業、非商業)×3(可改作、不可改作、相同方式分享)。 | ||
| + | *點陣圖:放大會毛邊 | ||
| + | *#png:不失真公開格式 | ||
| + | *#jpg:jepg失真壓縮 | ||
| + | *#gif:可動畫256色 | ||
| + | *「'…'」代表所夾的字要拉斜。 | ||
| + | *「'…'」代表所夾的字要加粗 | ||
| + | |||
| + | ==圖照的引用== | ||
| + | [[File:Piranha face.jpg|203px]] | ||
| + | ==分層列表== | ||
| + | ;AA(整段的抬頭) | ||
| + | :AA1(小點) | ||
| + | :AA2(小點) | ||
| + | ==2017.10.3== | ||
| + | *@page a4{}:我只真對page這個標籤裡面的a4這個樣式。 | ||
| + | *<div style='page:a4;'>指定這個區塊的style是這個page:a4樣式。 | ||
| + | *div:區塊 | ||
| + | *可用的定義 | ||
| + | **size:寬 長; | ||
| + | **margin:天 右 地 左 | ||
| + | **mso-page-orientation:landscape 橫放 | ||
| + | **mso-header-margin:頁首大小 | ||
| + | **mso-footer-margin:頁尾大小 | ||
| + | **<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/ >指定編碼是UTF-8 | ||
| + | *style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字 | ||
| + | *表格高度在 tr寫法 | ||
| + | **<tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。 | ||
| + | **<tr height=數字/>只對無單位數字有效。 | ||
| + | *圖的寬度： | ||
| + | **style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效 | ||
| + | **width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。 | ||
| + | **height | ||
| + | ==2017.10.17== | ||
| + | #XML標籤 | ||
| + | #*markup | ||
| + | #*提供指示 | ||
| + | #XML.NS | ||
| + | #*name space | ||
| + | #<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />(HTML第四版之前) | ||
| + | #<meta charset='UTF-8'/>(HTML第五版) | ||
| + | #padding:內距 | ||
| + | #*控制區域如 DIV 、 span 、表格的內部距離 | ||
| + | #*padding不可設定負值跟margin不同 | ||
| + | #*語法範例:padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値 | ||
| + | #*padding:auto;：讓瀏覽器自己去設定 | ||
| + | #*padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。 | ||
| + | #margin:邊沿 | ||
| + | #*控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。 | ||
| + | #*可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。 | ||
| + | #*語法範例:margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値; | ||
| + | #*margin:auto;：讓瀏覽器自己去設定。 | ||
| + | #*margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。 | ||
| + | #border:邊框 | ||
| + | #*邊框粗細：用長度表達 | ||
| + | #*邊框顏色：可以使用色標準色碼或顏色的英文名稱表達 | ||
| + | #表格榻陷 | ||
| + | #*如果表格整列都沒有內容，在 word 中會榻陷是極扁的列，此時在表格中加空白沒用，但加 即可避免表格榻陷。 | ||
| + | #*邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等 | ||
| + | #井號 | ||
| + | #*三個數字，紅&綠&藍 | ||
| + | #*六個數字，紅紅&綠綠&藍藍 | ||
| + | #將圖包在P標籤中 | ||
| + | #*在表格中，P不要帶任何字，直接設P為「style='text-align:center;'」這時圖在會表格中水平置中。 | ||
| + | #*設P為「style='vertical-align:top;'」讓圖的上緣與字的上緣對齊。 | ||
| + | #*設P為「style='vertical-align:vertical-align:middle;'」讓字對圖垂直置中。 | ||
| + | ==2017.10.24== | ||
| + | *Scalable Vector Graphics:可縮放向量圖形 | ||
| + | *SVG特性: | ||
| + | **XML語法。 | ||
| + | **二維向量圖形格式。 | ||
| + | **由W3C制定，是開放標準。 | ||
| + | ==2017.11.7== | ||
| + | *text.svg | ||
| + | *在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。 | ||
| + | *可用中文字形： | ||
| + | *#屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。 | ||
| + | *#屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。 | ||
| + | *#屬性 fill 控制填入字的顏色，預設黑色 | ||
| + | *#屬性 stroke 控制字描框的顏色，預設 none | ||
| + | *#屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。 | ||
| + | *#用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。 | ||
| + | |||
| + | ==2017.11.14== | ||
| + | *今天學到線性漸層 | ||
| + | *#漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得 | ||
| + | *#在 defs 段落中定義漸層，並賦予 id | ||
| + | *#用 fill='url(#某id)' 屬性來引用既有的漸層定義 | ||
| + | *linearGradient 線性漸層定義語法說明: | ||
| + | *#漸層標籤中的 100%，指的是整個圖形 | ||
| + | *#其中的 id 屬性定出漸層名稱 | ||
| + | *放射漸層 | ||
| + | *radialGradient 放設漸層定義語法說明: | ||
| + | *#漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓 | ||
| + | *#設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示 | ||
| + | *#設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定 | ||
| + | *#以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色) | ||
| + | *柔焦濾鏡 | ||
| + | *濾鏡標籤 filter 語法說明: | ||
| + | *#其中的 id 屬性定出濾鏡名稱 | ||
| + | *#也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍 | ||
| + | *#高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡 | ||
| + | *#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態 | ||
| + | ==2017.11.21== | ||
| + | *參數大寫代表絕對座標，小寫代表與前一個座標的相對座標 | ||
| + | *點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。 | ||
| + | #set(開關) | ||
| + | #*只用attributeName,to,begin三屬性 | ||
| + | #animate(屬性連續改變) | ||
| + | #animateTransform(平移,旋轉,縮放) | ||
| + | #animateMotion(循跡運動) | ||
| + | *共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。 | ||
| + | *共通屬性： | ||
| + | #attributeName： | ||
| + | #*set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。 | ||
| + | #*animateTransform為'transform'另搭配 type 屬性 | ||
| + | #*animateMotion免設此屬性 | ||
| + | #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='結束歪斜角度' | ||
| + | #begin='幾s'：幾秒開始跑，通常設為 0s 。 | ||
| + | #dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。 | ||
| + | #repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。 | ||
| + | #from 開始狀態(animate,animateTransform有)。 | ||
| + | #to 結束狀態(set,animate,animateTransform有)。 | ||
| + | #path(animateMotion專用) 屬性為移動路徑：由 m 開始 | ||
| + | #rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。 | ||
| + | ==2017.11.28== | ||
| + | *.org，公共利益用 | ||
| + | *.com﹐為工商適用 | ||
| + | |||
| + | ==2017.12.12== | ||
| + | *使用地圖庫： | ||
| + | **google map：google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容。 | ||
| + | **OpenStreetMap：(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。 | ||
| + | *GIS 相關單字。 | ||
| + | *zoom:放大或縮小畫面 | ||
| + | *overlay:覆蓋物，GIS中用複數overlays | ||
| + | *marker:標記，GIS中代表地點標示，用複數markers | ||
| + | *address:地址 | ||
| + | *latitude:緯度 | ||
| + | *longitude:經度 | ||
| + | *coord:經緯度座標，GIS中代表地點標示，用複數coords | ||
| + | *map:地圖 | ||
| + | *type:類別 | ||
| + | *road:道路 | ||
| + | *color:顏色 | ||
| + | *fill:填滿 | ||
| + | *radius:半徑 | ||
| + | *html:超文件 | ||
| + | *content:內容 | ||
| + | *popup:跳出 | ||
| + | *false:假的，不成立 | ||
| + | *true:真的，成立 | ||
| + | *polyline:多點成線 | ||
| + | *polygon:多邊形 | ||
| + | *circle:圓形 | ||
| + | *rectangle：方形(矩形) | ||
| + | *ROADMAP：道路地圖 | ||
| + | *SATELLITE：衛星空照圖 | ||
| + | *HYBRID：道路與空照圖相疊加。 | ||
| + | *TERRAIN：地形圖 | ||
| + | *初階應用，大槪分為 markers (標點)， overlays (標區域)，使用的語法是 javascript 。 | ||
| + | ===括號、引號必須成對=== | ||
| + | *所有字和符號都用「英數」、「半形」符號，不可以用全形符號。 | ||
| + | *所有的小括號、中括號、大括號、單引號、雙引號都要成對。 | ||
| + | *每一對大括號代表<u>一個東西</u>(物件)，東西裡面可以包進去更小的東西，東西不一定要取名字。例如： | ||
| + | *#一張地圖。 | ||
| + | *#一個覆蓋物。 | ||
| + | *#一個經緯度座標點。 | ||
| + | *#一個地點標示。 | ||
| + | *#一個html指示。 | ||
| + | *每一對中括號裡面包<u>一群相同的東西</u>。例如： | ||
| + | *#一群 marker 包成一組，名字叫 markers ； | ||
| + | *#一群 overlay 包成一組，名字叫 overlays ； | ||
| + | *#一群 coord(經緯度座標)包成一組，名字叫 coords 。 | ||
| + | *每一對小括號中代表「函式」要作用的對象。 | ||
| + | ===整張圖的性質=== | ||
| + | #調整比例尺的性質：zoom:1~20。1比例尺最大，20比例尺最小。 | ||
| + | #標定整張地圖中心點位置的性質： | ||
| + | #*latitude:緯度，十進位。 | ||
| + | #*longitude:經度，十進位。 | ||
| + | #*address:地址。如：以色列。 | ||
| + | #地圖種類：maptype:值加引號有四種選擇： | ||
| + | #*ROADMAP：道路地圖 | ||
| + | #*SATELLITE：衛星空照圖 | ||
| + | #*HYBRID：道路與空照圖相疊加。 | ||
| + | #*TERRAIN：地形圖 | ||
| + | #markers：各個地點標示 | ||
| + | #overlays：各個覆蓋物 | ||
| + | |||
| + | ===找經緯度=== | ||
| + | #android 上面必須使用 chrome 瀏覽器，不能使用預設瀏覽器。也不能使用地圖 app 。 | ||
| + | #*地圖上某一點按久一點，模擬滑鼠右鍵，出現下拉式選單，按下「這裡有什麼？」 | ||
| + | #網址使用 maps.google.com.tw?ui=maps 得到 ms 介面。 | ||
| + | #*ms介面可以到「地圖研究室」啟動「經緯標記」。 | ||
| + | #*長按地圖上一點，會跳出選單。選「標記經緯度」，可以標示經緯度。但標示點會偏，需要修正。 | ||
| + | #PC板只要使用滑鼠，而且不限瀏覽器。 | ||
| + | #*在要找的點，點擊滑鼠左鍵。就會出現該點的地址及經緯度。 | ||
| + | #*或打網址，可以指示圖中心點的經緯度及zoom的等級。 | ||
| + | ==2017.12.19== | ||
| + | *整個markers:後面用一個中括號把所有的點包起來。中括號裡面，每一組大括號是一個點。 | ||
| + | *第一個 marker 為整張圖的中心點，優先於整張圖的中心點。 | ||
| + | *每一個點內，諸參數如下： | ||
| + | *#address:值為字串，故加引號，可用國名如「台灣」或地址如「台灣新北市三峽區三樹路2號」 | ||
| + | *#longitude:經度，十進位。如：121.459502 | ||
| + | *#latitude:緯度，十進位。如：25.025448 | ||
| + | *#html:放物件，內含： | ||
| + | *#*content:HTML碼 | ||
| + | *#*popup:false不主動彈出；true主動彈出。 | ||
| + | *#title:游標停住會顯示。 | ||
| + | *#draggable:true代表可拖動。 | ||
| + | *#icon:字串，代表圖檔。 | ||
| + | *每一個覆蓋物用大括號包起來，所有的覆蓋物用中括號包起來。 | ||
| + | *每一個覆蓋物共有的性質有：type、color、fillColor。 | ||
| + | *四種覆蓋物各自的參數： | ||
| + | *#circle 圓：latitude、longitude、radius | ||
| + | *#polyline 線：coords | ||
| + | *#polygon 多邊形：coords | ||
| + | *#rectangle 方形(矩形)：ne、sw | ||
| + | ==2017.12.26== | ||
| + | #msa=0：處理我的地圖。msa配合「/ms」，兩者缺一就什麼都不做。msa=0配合msid=用以秀出一個特定的地圖。msa=1直接顯示我的地圖側#邊欄。msa=2直接跳到創建我的地圖。 | ||
| + | #msid=216006515222070930637.0004ccf5b0fba2ca5b9e6：登山 - 台北郊山景點地圖。 | ||
| + | #hl=zh-TW：主機語言。 | ||
| + | #ie=UTF8：指定輸入的字符編碼。 | ||
| + | #oe=UTF8：指定輸出的字符編碼。 | ||
| + | #t=h：地圖類型。m為常規地圖，k為衛星地圖，h為混合地圖，p為地域地圖。 | ||
| + | #ll=24.945655,121.454673：地圖中心點經緯度。 | ||
| + | #spn=0.00681,0.00912：大致的區域。如果沒有指縮放參數z=，那麼將調整縮放水平到一個合理的數值。 | ||
| + | #z=16：放大縮小。值範圍1~20。1比例尺最大，20比例尺最小。 | ||
| + | #source=embed：原始碼嵌入。 | ||
| + | #dg=feature：自動產生，不必下命令。 | ||
| + | ==2018.1.2== | ||
| + | *基本圖紙 | ||
| + | *#圖寬：$draw->W，預設601。 | ||
| + | *#圖高：$draw->H，預設401。 | ||
| + | *#原點距左上角：$draw->x0,$draw->y0，預設(200,200)。 | ||
| + | *#x每單位幾點：$draw->xu，預設15。 | ||
| + | *#y每單位幾點：$draw->yu，預設15。 | ||
| + | *#x每幾單位畫一個刻度：$draw->xGraduate，預設1。 | ||
| + | *#y每幾單位畫一個刻度：$draw->yGraduate，預設1。 | ||
| + | *#x每幾刻度標示一數字：$draw->xScale，預設1。 | ||
| + | *#y每幾刻度標示一數字：$draw->yScale，預設1。 | ||
| + | *#秀出直角座標系：$draw->coordinate，預設1。 | ||
| + | *#函式描點密度：$draw->pointDensity，預設20。 | ||
| + | *#函式取樣點：$draw->xs，預設'-1;0;1'; | ||
| + | *基本圖:$draw->圖形[]=array(array(…),其他屬性); | ||
| + | *#多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬'); | ||
| + | *#線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5'); | ||
| + | *#字：$draw->alnums[]=array(array(×,×),'word'=>'字'); | ||
| + | *#圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。 | ||
| + | *#楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色'); | ||
| + | *#弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1); | ||
| + | ==2018.1.9== | ||
| + | #$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, | ||
| + | |||
| + | ==2017.11.27== | ||
2018年2月9日 (五) 17:01的最新修訂版本
目錄
已記住的單字
| 英文 | 指令 | 中文 |
|---|---|---|
| hyper | html | 超 |
| text | html | 文字，文件 |
| markup | html | 標記 |
| language | html | 語言 |
| head | head | 頭 |
| title | title | 標題 |
| body | body | 身體 |
| anchor | a | 錨，超連結 |
| image | img | 圖 |
| paragraph | p | 段 |
| break | br | 斷 |
| space | space | 空間，空格 |
| horizontal | hr | 水平 |
| rule | hr | 線 |
| table | table | 表 |
| row | tr | 列 |
| diamond | td | 格 |
| order | ol | 有次序的 |
| unorder | ul | 沒有次序的 |
| list | ol;ul;li | 列表 |
| item | li | 項目 |
| style | style | 樣式(修飾一個超文件) |
| span | span | 文字小片段 |
| division | div | 區塊 |
| preserve | pre | 保留原有斷行及排列之式 |
| form | form | 表單 |
| source | src | 來源 |
| reference | href | 參考 |
| target | target | 目標 |
| blank | _blank | 空白 |
| width | width | 寬度 |
| height | height | 高度 |
| border | border | 邊界，邊框。 |
| font | font | 字體 |
| family | family | 字族，系 |
| size | size | 大小 |
| weight | weight | 輕重 |
| align | align | 對齊 |
| color | color | 顏色 |
| collapse | collapse | 崩塌 |
| html | html | 超文件 |
| content | content | 內容 |
| meta | meta | 對自身的描述 |
| http | http-equiv | 超文件傳輸協定 |
| equiv | http-equiv | 約當 |
| Character | charset | 字元 |
| set | charset | 集合 |
| alternative | alt | 替代的 |
| identy | id | 惟一的身份表示法 |
| background | background | 背景 |
| back | background | 背 |
| ground | background | 地面、引申為基礎的 |
| none | none | 沒有 |
| margin | margin | 邊 |
| padding | padding | 填充，框到框內圖文的距離 |
| pad | pad | 墊、便箋本 |
| clear | clear | 清乾淨 |
| position | position | 位置 |
| absolute | absolute | 絕對 |
| relative | relative | 相對的 |
| index | index | 指標 |
| left | left | 左 |
| center | center | 中 |
| right | right | 右 |
| top | top | 上 |
| middle | middle | 中 |
| bottom | bottom | 下(底) |
| button | button | 按鈕、按鍵 |
| class | class | 類別 |
| URL | URL | 網路資源的位置 |
| script | script | 腳本 |
2017.09.12
- 屬性:
- border 1px(邊框的屬性)
- style(樣式的屬性)
- solid:實線
- collapse:崩塌
- style三層用:等號.空格.冒號。
- 配色
- red:#f00
- green:#0f0
- blue:#00f
- white:#fff
- black:#000
- 淺灰色:#aaa
- 深灰色:#444
- 16進為法:,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
- border = " "px
- style(樣式) = " "(屬性名 = 屬性值)
2017.09.19
- td:標籤
- style和class:屬性
- style:樣式
- 交代樣式外觀的三種方式
- 行內:td style='
- 通篇:把所有樣式寫在<style>.....</style>裡面，在引用。
- 跨多篇:把所有的寫在css裡面，再引用那個css，
- Html:段標是h1~h6.wiki是==到======
- stylesheet:樣式表
- type='text/css'類型是文字/css
- href='/.pa.css'連結到pa.css
- .名稱代表類別
- 名稱前加#號:指定的專一標籤
- id:指針對特定的單一標籤，只能給一個標籤
- 樣式定義可以很多層(之下的)，沒有逗點。
- table,td{}table和td兩者都要這樣做
- css:層疊樣式表（Cascading Style Sheets, CSS）， 是用來描述HTML 或XML（包含SVG 或 XHTML 等各種XML 變形）文件外觀的樣式表語言。
- dashed:虛線
2017.09.26
- wiki:
- 分享式合作
- Wikipeida是Alexa流量統計前幾名唯一屬於公益性質的網站，其他皆是商業性的公司。
- 語法口決一:井號、星號、等號、中括號；用空白行分段。
- 語法口決二:用空白行分段
- Gategory:分類
- cc授權和傳統授權不一樣的地方:對不特定對象授權。
- 格式：檔案:檔名|圖長|圖寬|…
- px:pixel
- cc授權:
- CC授權(Creative Commons，簡稱CC)
- 諸標章：CC授權、姓名標示、非商業性、禁止改作、相同方式分享。
- 限制者才有標章，不限制者沒有標章。
- 六種核心授權：1(必須姓名標示)×2(商業、非商業)×3(可改作、不可改作、相同方式分享)。
- 點陣圖:放大會毛邊
- png:不失真公開格式
- jpg:jepg失真壓縮
- gif:可動畫256色
- 「'…'」代表所夾的字要拉斜。
- 「'…'」代表所夾的字要加粗
圖照的引用
分層列表
- AA(整段的抬頭)
- AA1(小點)
- AA2(小點)
2017.10.3
- @page a4{}:我只真對page這個標籤裡面的a4這個樣式。
- 指定這個區塊的style是這個page:a4樣式。
- div:區塊
- 可用的定義
- size:寬 長;
- margin:天 右 地 左
- mso-page-orientation:landscape 橫放
- mso-header-margin:頁首大小
- mso-footer-margin:頁尾大小
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/ >指定編碼是UTF-8
- style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字
- 表格高度在 tr寫法
- <tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。
- <tr height=數字/>只對無單位數字有效。
- 圖的寬度：
- style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
- width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。
- height
2017.10.17
- XML標籤
- markup
- 提供指示
- XML.NS
- name space
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />(HTML第四版之前)
- <meta charset='UTF-8'/>(HTML第五版)
- padding:內距
- 控制區域如 DIV 、 span 、表格的內部距離
- padding不可設定負值跟margin不同
- 語法範例:padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値
- padding:auto;：讓瀏覽器自己去設定
- padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- margin:邊沿
- 控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
- 可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
- 語法範例:margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
- margin:auto;：讓瀏覽器自己去設定。
- margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- border:邊框
- 邊框粗細：用長度表達
- 邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
- 表格榻陷
- 如果表格整列都沒有內容，在 word 中會榻陷是極扁的列，此時在表格中加空白沒用，但加 即可避免表格榻陷。
- 邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等
- 井號
- 三個數字，紅&綠&藍
- 六個數字，紅紅&綠綠&藍藍
- 將圖包在P標籤中
- 在表格中，P不要帶任何字，直接設P為「style='text-align:center;'」這時圖在會表格中水平置中。
- 設P為「style='vertical-align:top;'」讓圖的上緣與字的上緣對齊。
- 設P為「style='vertical-align:vertical-align:middle;'」讓字對圖垂直置中。
2017.10.24
- Scalable Vector Graphics:可縮放向量圖形
- SVG特性:
- XML語法。
- 二維向量圖形格式。
- 由W3C制定，是開放標準。
2017.11.7
- text.svg
- 在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
- 可用中文字形：
- 屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
- 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
- 屬性 fill 控制填入字的顏色，預設黑色
- 屬性 stroke 控制字描框的顏色，預設 none
- 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
- 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。
2017.11.14
- 今天學到線性漸層
- 漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得
- 在 defs 段落中定義漸層，並賦予 id
- 用 fill='url(#某id)' 屬性來引用既有的漸層定義
- linearGradient 線性漸層定義語法說明:
- 漸層標籤中的 100%，指的是整個圖形
- 其中的 id 屬性定出漸層名稱
- 放射漸層
- radialGradient 放設漸層定義語法說明:
- 漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓
- 設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示
- 設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定
- 以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色)
- 柔焦濾鏡
- 濾鏡標籤 filter 語法說明:
- 其中的 id 屬性定出濾鏡名稱
- 也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍
- 高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡
- 高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態
2017.11.21
- 參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
- 點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
- set(開關)
- 只用attributeName,to,begin三屬性
- animate(屬性連續改變)
- animateTransform(平移,旋轉,縮放)
- animateMotion(循跡運動)
- 共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。
- 共通屬性：
- attributeName：
- set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
- animateTransform為'transform'另搭配 type 屬性
- animateMotion免設此屬性
- 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='結束歪斜角度'
- begin='幾s'：幾秒開始跑，通常設為 0s 。
- dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
- repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
- from 開始狀態(animate,animateTransform有)。
- to 結束狀態(set,animate,animateTransform有)。
- path(animateMotion專用) 屬性為移動路徑：由 m 開始
- rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。
2017.11.28
- .org，公共利益用
- .com﹐為工商適用
2017.12.12
- 使用地圖庫：
- google map：google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容。
- OpenStreetMap：(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。
- GIS 相關單字。
- zoom:放大或縮小畫面
- overlay:覆蓋物，GIS中用複數overlays
- marker:標記，GIS中代表地點標示，用複數markers
- address:地址
- latitude:緯度
- longitude:經度
- coord:經緯度座標，GIS中代表地點標示，用複數coords
- map:地圖
- type:類別
- road:道路
- color:顏色
- fill:填滿
- radius:半徑
- html:超文件
- content:內容
- popup:跳出
- false:假的，不成立
- true:真的，成立
- polyline:多點成線
- polygon:多邊形
- circle:圓形
- rectangle：方形(矩形)
- ROADMAP：道路地圖
- SATELLITE：衛星空照圖
- HYBRID：道路與空照圖相疊加。
- TERRAIN：地形圖
- 初階應用，大槪分為 markers (標點)， overlays (標區域)，使用的語法是 javascript 。
括號、引號必須成對
- 所有字和符號都用「英數」、「半形」符號，不可以用全形符號。
- 所有的小括號、中括號、大括號、單引號、雙引號都要成對。
- 每一對大括號代表一個東西(物件)，東西裡面可以包進去更小的東西，東西不一定要取名字。例如：
- 一張地圖。
- 一個覆蓋物。
- 一個經緯度座標點。
- 一個地點標示。
- 一個html指示。
- 每一對中括號裡面包一群相同的東西。例如：
- 一群 marker 包成一組，名字叫 markers ；
- 一群 overlay 包成一組，名字叫 overlays ；
- 一群 coord(經緯度座標)包成一組，名字叫 coords 。
- 每一對小括號中代表「函式」要作用的對象。
整張圖的性質
- 調整比例尺的性質：zoom:1~20。1比例尺最大，20比例尺最小。
- 標定整張地圖中心點位置的性質：
- latitude:緯度，十進位。
- longitude:經度，十進位。
- address:地址。如：以色列。
- 地圖種類：maptype:值加引號有四種選擇：
- ROADMAP：道路地圖
- SATELLITE：衛星空照圖
- HYBRID：道路與空照圖相疊加。
- TERRAIN：地形圖
- markers：各個地點標示
- overlays：各個覆蓋物
找經緯度
- android 上面必須使用 chrome 瀏覽器，不能使用預設瀏覽器。也不能使用地圖 app 。
- 地圖上某一點按久一點，模擬滑鼠右鍵，出現下拉式選單，按下「這裡有什麼？」
- 網址使用 maps.google.com.tw?ui=maps 得到 ms 介面。
- ms介面可以到「地圖研究室」啟動「經緯標記」。
- 長按地圖上一點，會跳出選單。選「標記經緯度」，可以標示經緯度。但標示點會偏，需要修正。
- PC板只要使用滑鼠，而且不限瀏覽器。
- 在要找的點，點擊滑鼠左鍵。就會出現該點的地址及經緯度。
- 或打網址，可以指示圖中心點的經緯度及zoom的等級。
2017.12.19
- 整個markers:後面用一個中括號把所有的點包起來。中括號裡面，每一組大括號是一個點。
- 第一個 marker 為整張圖的中心點，優先於整張圖的中心點。
- 每一個點內，諸參數如下：
- address:值為字串，故加引號，可用國名如「台灣」或地址如「台灣新北市三峽區三樹路2號」
- longitude:經度，十進位。如：121.459502
- latitude:緯度，十進位。如：25.025448
- html:放物件，內含：
- content:HTML碼
- popup:false不主動彈出；true主動彈出。
- title:游標停住會顯示。
- draggable:true代表可拖動。
- icon:字串，代表圖檔。
- 每一個覆蓋物用大括號包起來，所有的覆蓋物用中括號包起來。
- 每一個覆蓋物共有的性質有：type、color、fillColor。
- 四種覆蓋物各自的參數：
- circle 圓：latitude、longitude、radius
- polyline 線：coords
- polygon 多邊形：coords
- rectangle 方形(矩形)：ne、sw
2017.12.26
- msa=0：處理我的地圖。msa配合「/ms」，兩者缺一就什麼都不做。msa=0配合msid=用以秀出一個特定的地圖。msa=1直接顯示我的地圖側#邊欄。msa=2直接跳到創建我的地圖。
- msid=216006515222070930637.0004ccf5b0fba2ca5b9e6：登山 - 台北郊山景點地圖。
- hl=zh-TW：主機語言。
- ie=UTF8：指定輸入的字符編碼。
- oe=UTF8：指定輸出的字符編碼。
- t=h：地圖類型。m為常規地圖，k為衛星地圖，h為混合地圖，p為地域地圖。
- ll=24.945655,121.454673：地圖中心點經緯度。
- spn=0.00681,0.00912：大致的區域。如果沒有指縮放參數z=，那麼將調整縮放水平到一個合理的數值。
- z=16：放大縮小。值範圍1~20。1比例尺最大，20比例尺最小。
- source=embed：原始碼嵌入。
- dg=feature：自動產生，不必下命令。
2018.1.2
- 基本圖紙
- 圖寬：$draw->W，預設601。
- 圖高：$draw->H，預設401。
- 原點距左上角：$draw->x0,$draw->y0，預設(200,200)。
- x每單位幾點：$draw->xu，預設15。
- y每單位幾點：$draw->yu，預設15。
- x每幾單位畫一個刻度：$draw->xGraduate，預設1。
- y每幾單位畫一個刻度：$draw->yGraduate，預設1。
- x每幾刻度標示一數字：$draw->xScale，預設1。
- y每幾刻度標示一數字：$draw->yScale，預設1。
- 秀出直角座標系：$draw->coordinate，預設1。
- 函式描點密度：$draw->pointDensity，預設20。
- 函式取樣點：$draw->xs，預設'-1;0;1';
- 基本圖:$draw->圖形[]=array(array(…),其他屬性);
- 多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
- 線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
- 字：$draw->alnums[]=array(array(×,×),'word'=>'字');
- 圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
- 楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
- 弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);
2018.1.9
- $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,
