「資訊基礎應用筆記/徐慕禾」修訂間的差異

於 2021年6月28日 (一) 11:39 的最新修訂

電腦與網路資源

知識：
標記應該用來描述類型或類型成員。使用將補充資訊加入至類型描述。使用 cref 屬性，讓 DocFX 和 Sandcastle 這類文件工具為程式碼項目建立文件頁面的內部超連結。

標記的文字

是 IntelliSense 中型別的唯一資訊來源，也會顯示在 [物件瀏覽器] 視窗中。

使用 DocumentationFile 進行編譯，以處理檔案的檔批註。若要根據編譯器產生的檔案來建立最終檔，您可以建立自訂工具，或使用 DocFX 或 >sandcastle之類的工具。

1. 什麼是 UTF-8？
2. 以前電腦剛開始發展時，每一個國家都各自發展自己的文字系統，所以就會有中文系統日文系等，可是大家在發展的過程中並沒有相互參考文字在電腦裡的編碼方式，所以同一個碼在不同的地區文字系統裡並不代表同一個字，所以當妳開起非中文的語文編集碼時，就會出現一堆亂碼。
3. 區分客戶端與伺服器端。
4. 客戶端的控制元件和伺服器端的是對應的，伺服器端的頁面傳送給客戶端後，就解析成了對應的html（就是客戶端）的控制元件。伺服器端控制元件是伺服器來解析的，客戶端控制元件是由瀏覽器解析的。伺服器控制元件就是必須通過“網路”來連結伺服器實現的，

客戶端控制元件就是在本地的網站就可以執行的。客戶端：向使用者服務。伺服器端：為客戶端服務。

1. 怎麼線上解壓縮 zip 檔？
2. 本文要推薦的「Archive Extractor」是一款免費、微型且簡易的線上工具，可用來解壓縮超過70 種以上壓縮檔格式，包括7z、zipx、rar、tar、exe、dmg 等等，只要把檔案上傳，或是透過Google Drive、Dropbox 等雲端硬碟匯入，輸入網址就能進行解壓縮，將你需要的檔案拆開分別下載。
3. 何謂 CC 授權？

為了讓大眾都可以自由使用，不受著作權法的限制，美國一個著名的法律學著在2001提出保留部分著作權利，其餘全都釋出給大眾使用。將作品釋出給大眾使用。透過這種自願分享的方式，大家可以群力建立內容豐富、權利清楚、且便於散布的各式內容資源，嘉惠自己與其它眾多的使用者

1. 何謂綠色軟體？
2. 定義起初人們把「綠色軟件」定義為「把很冗余的資訊軟體清除」，特別是在中国大量擁有大量的病毒軟見。只把好的系統流閜給使用著，所以冠上「綠色」之名。

1. 解釋十六進位與十進位的差別
2. 對於接觸過電腦的人來說應該都不陌生，我們常用的進位包括：二進位、八進位、十進位與十六進位，它們之間區別在於數運算時是逢幾進一位。比如二進位是逢2進一位，十進位也就是我們常用的0-9是逢10進一位。

十六進位:，是計算機中數據的一種表示方法。同我們日常生活中的表示法不一樣。它由0-9，A-F組成，字母不區分大小寫。與10進位的對應關係是：0-9對應0-9；A-F對應10-15；N進位的數可以用0~(N-1)的數表示，超過9的用字母A-F。 Style屬性是什麼?

1. 解釋「色碼」等雲端硬碟匯入，輸入網址就能進行解壓縮，將你需要的檔案拆開分別下載。
2. HEX 色碼是以十六進位值來代表不同色彩模式中的顏色的一種方式。十六進位色碼的格式為#RRGGBB，其中RR是紅色，GG是綠色，而BB則是藍色。這些十六進位整數可以落在00到FF的範圍內以指定顏色的強度。
3. 解釋 ASCII
4. 目前電腦中用得最廣泛的字元集及其編碼，是由美國國家標準局(ANSI)制定的ASCII碼，它已被國際標準化組織（ISO）定為國際標準，稱為ISO 646標準。適用於所有拉丁文字字母，ASCII碼有7位碼和8位碼兩種形式。

因為1位二進位數字可以表示（21=）2種狀態：0、1；而2位二進位數字可以表示（22）=4種狀態：00、01、10、11；

依次類推，7位二進位數字可以表示（27=）128種狀態，每種狀態都唯一地編為一個7位元的二進位碼，對應一個字元（或控制碼），

這些碼可以排列成一個十進位序號0～127。所以，7 位ASCII碼是用七位元二進位數字進行編碼的，可以表示128個字元。

技能：
1. 顯示或隱藏檔案副檔名

Windows 7為了系統的安全，預設會隱藏重要的系統檔案和資料夾，且不顯示已知檔案類型的副檔名，有時候為了要編輯隱藏檔，需要顯示隱藏檔和副檔名的方法敘述如下： 1.開啟檔案總管，如圖示，檔案沒有顯示副檔名且有些系統檔案和資料夾被隱藏 2.點選「組合管理\資料夾和搜尋選項」，準備更改設定以顯示隱藏檔和副檔名。 3.在「檢視」的索引標籤，預設勾選「隱藏已知檔案類型的副檔名」、「隱藏保護的作業系統檔案」，且選擇「不顯示隱藏的檔案、資料夾或磁碟機」。 4.取消勾選「隱藏已知檔案類型的副檔名」。 5.取消勾選「隱藏保護的作業系統檔案」。 6.出現警告視窗，點選「是」。 7.點選「顯示隱藏的檔案、資料夾及磁碟機」。 8.點選「確定」。 9.如圖示，已經顯示隱藏的檔案和資料夾，且檔案也顯示副檔名。 10.檔案修改完成之後，依上述相反的步驟，將檔案和資料夾隱藏，如下圖所示，以保護系統檔案。

1. 用 google 找圖照
2. 找圖的網址https://images.app.goo.gl/qfgSEuxYqT7FzxXE8(我頭皮好癢)
3. 怎麼複製出含中文的網址
4. 用chrome複製網址中文時,再把它貼上其它地方會出現這些看不懂的符號%A4%A4%A4%E5,有辨法貼上有中文網址列時,不要出現這些符號,直接用中文顯示,像firefox可以在網址列輸入about:config,那chrome可以嗎?

最簡單的方式就是少 copy 一個字元，就會保持原來的中文，如圖所示。然後自己補上 **http://** 跟少 copy 的那個字就行了。Firefox 跟 Chrome 都通用。

1. 找出綠色軟體市集
2. https://www.azofreeware.com/
範例：
英文：img srg=

維基共享資源

知識：
1. 維基共享資源的宗旨是提供一個，「使所有人都可以使用公共領域和自由許可的教育媒體內容，並作為維基媒體基金會各項目的公共存儲庫存在」的媒體文件存儲庫。

維基共享資源是一個多語言項目。其默認語言是英語，但是註冊用戶可以將自己的用戶界面定製成已翻譯的版本，許多頁面也存在多種語言版本。我們鼓勵用戶協助翻譯。詳情參見維基共享資源歡迎頁面以及社區門戶。歷史細節參見歷史項目計劃。

1. 維基共享資源大約有多少資源？
2. 維基共享資源有來自世界各地的資源。

维基共享资源，是一个多媒体资料库。维基共享资源从2004年9月开始启动，它的目的是作为一个自由的图像、音乐以及可能还包括文献和演讲等的资源中心，并提供给所有的维基媒体计划使用。这个项目中的资源可以在所有的计划中调用。是指存放自由开放的图片、声音、及其他多媒体档案的地方，是维基媒体基金会的计划。上载的档案可在其他维基计划中使用，包括维基百科、维基教科书、维基新闻以及wiki.yeefe.com等。

技能：
1. 可存放自由開放的圖片、聲音及其他多媒體檔案的地方，是維基媒體基金會的計劃。上載維基共享資源的檔案可在其他維基計劃中使用，包括維基百科、維基教科書、維基新聞等。截至2018年，維基共享資源擁有超過4400萬個多媒體檔案。
2. 註解
3. 丁丁

[[ ]] [ ]

1. 找圖照
2. https://commons.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5#/media/File:2017.08.29.-02-Anglersee_Huettenfeld-Lampertheim--Grosse_Sumpfschwebfliege-Weibchen.jpg
3. 找縮圖網址
4. https://upload.wikimedia.org/wikipedia/commons/5/5c/M%C3%BCnchen_1_Milliarde_1923.jpg
5. 縮圖網址的格式
6. https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/M%C3%BCnchen_1_Milliarde_1923.jpg/195px-M%C3%BCnchen_1_Milliarde_1923.jpg
7. 找某張圖被哪些 wiki 頁使用
8. https://commons.wikimedia.org/wiki/File:ROCA_Special_Assault_Vehicle_Rear_View.jpg
9. https://commons.wikimedia.org/wiki/File:VAO-ARA.jpg
10. 到共享資源最上面搜尋妳要的圖片，然後點選全浴檔案即可找到妳要的資料。

1. 找某人上傳的縮圖
2. https://commons.wikimedia.org/wiki/File:Pomn%C3%ADk_padl%C3%BDm_ve_Hvozdci_(Q66565878)_02.jpg
3. 用分類找圖
範例：https://commons.wikimedia.org/wiki/File:Rue_Albert_Camus_(Amiens)_01.jpg
英文：COMMONS、jpg

wiki

知識：
1. 有史以來規模最大、閱讀量最多的參考工具書──維基百科（Wikipedia），即將於1月15日迎來上線20周年。作為任何人都可以編輯的免費網路百科全書，維基百科包含志願者以300多種語言編寫的條目數量達到5500萬。網絡分析公司Alexa指出，維基百科是全球最受歡迎網站第13位，領先Reddit、Netflix和Instagram。

維基百科是全球前50熱門網站排行裡，唯一的非營利機構網站，它無視矽谷巨擘靠經營網站成功的秘訣，沒有股東、沒有廣告、沒有讓創辦人成為億萬富翁，僅靠非營利慈善機構「維基媒體基金會」（Wikimedia Foundation）維持運作，並吸引越來越多的普通民眾志願貢獻，使維基百科自然地茁壯發展

1. 什麼是 wiki ？
技能：
1. wiki泛指可快速尋找到可用確實的資料。Wiki 是一種支援社群共同創作的網頁系統，在Web 的基礎上可以對Wiki 進行新增、修改、瀏覽、版本比較…等功能。
2. 怎麼打出角括號：< >
3. 原為數學用的符號，有括線、括弧兩種。括線用於數字之上，形為－；括弧用於數字之外，如（）、〔〕。今亦普遍被用於文章書寫上。
4. 註解
5. 角括號

這是一個臨時條目列出關於角括號的相關資訊，因為字典百科目前沒有這個字詞的條目。登入或創建一個新帳號以開始編輯角括號條目。

1. 下段標
2. 是二進位制其應該這樣寫才規範1100（2）二進位制是：從右往左起第n個數分別對應2的n-1次方 0則跳過去各個位數對應值相加，所以1100（2）這個二進位制數=2的3次方+2的2次方+2的0次方+2的0次方=12這個十進位制數
3. 有序列點
4. 在數學上, 若一個拓撲空間裏，每個無窮序列都有收斂子序列，則稱該拓撲空間序列緊（英語：sequentially compact）。雖然對於度量空間，緊等價於序列緊，但是對於一般的拓撲空間來說，緊（英語：compact）和序列緊是兩個不等價的性質。
5. 無序列點
6. 无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记
7. 外部連結
8. 外部連結是超連結，來源非自身網址之外的任何網址。

外部連結是指向外部網址的連結。頂級SEO專家們認為外部連結是排名權重最重要的來源。外部連結通過“連結權重”（排名權力）不同於內部連結，因為搜尋引擎認為他們是第三方投票。頂級SEO專家們不認為“標題”連結屬性會是於排名因素之一。

1. 內部連結
2. 內部連結是指向（目標）與連結所在的網址（來源）皆是相同網址，簡單的說，內部連結就是同一網站的另一個網頁。

1. 連續文字分段
2. 頁面上文字的外觀是由一個複雜的互動程序來決定的，稱為排版。InCopy 會使用選取的單字間距、字母間距、字符縮放比例以及連字選項，以最能支援指定參數的方式來編排文字。

InCopy 提供兩種排版方法: 「Adobe 段落視覺調整」(預設值) 和「Adobe 單行視覺調整」(兩者皆顯示在「控制」面板選單中)。您可以在「段落」面板選單、「齊行」對話框或是「控制」面板選單中，選取要使用的排版方法。

1. 嵌入圖照
2. (br)問：Illustrator(Ai)或ＰＤＦ檔，為何要圖片嵌入，不嵌入會怎麼樣嗎？

答：若檔案內有圖片的話，必須記得＂嵌入圖片＂，不嵌入的話，檔案寄過來會導致圖片遺失、掉圖，我們用ＡＩ開啟檔案（.ai 及.pdf 都會有此問題）時會看不到圖片。

步驟1：檢查及辨別圖片是否嵌入

未嵌入，滑鼠游標移至圖片上時，會出現藍色交叉的線。

已嵌入，滑鼠游標移至圖片上時，藍色交叉的線會消失。

1. 嵌入 youtube 影片

https://www.youtube.com/watch?v=sFolv_or9s8&t=163s

1. 嵌入非 youtube 影片

https://www.gimyvod.cc/vod-play-id-24155-sid-1-pid-1.html

1. 嵌入 wiki 頁
範例：https://commons.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5

CSS

1. 什麼是css?
  cSS的中文名稱也有許多種如:串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表。是用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準，優點為:網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來
2. style屬性是什麼?
  style 屬性規定元素的行內樣式（inline style）。
  style 屬性將覆蓋任何全局的樣式設定，例如在
```
   
```
```
 
```
  - 1. 說明 SVG 的三個特性
  SVG從1999年由一組加入W3C的公司啟動開發，與之前1998年提交給W3C的標準（PGML、VML）構成競爭。SVG從這兩個格式吸取了經驗。[4]
  SVG允許3種圖形物件類型：向量圖形、點陣圖像以及文字。圖形物件——包括PNG、JPEG這些點陣圖像——能夠被編組、設計、轉換及整合進先前的彩現物件中。文字可以在任何適用於應用程式的XML命名空間之內，從而提高SVG圖形的搜尋能力和無障礙性。SVG提供的功能集涵蓋了巢狀轉換、裁剪路徑、Alpha通道、濾鏡效果、模板物件以及可延伸性。
  SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述圖像內容，因此是一種和圖像解析度無關的向量圖形格式。
  SVG格式具有以下優點：圖檔可讀，易於修改和編輯（理論上如此，但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）。與現有技術可以互動融合。例如，SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準。另外，SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件。 SVG圖形格式可以方便的建立文字索引，從而實現基於內容的圖像搜尋。 SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。[5] SVG圖形格式可以用來動態生成圖形。例如，可用SVG動態生成具有互動功能的地圖，嵌入網頁中，並顯示給終端使用者。
  - 1. 寫出直線、多點成線、多邊形、圓、矩形在 SVG 中的標籤名稱
```
 
 
```
```
 
 
```
```
 
 
```
```
 
```
```
 
```
  - 1. 找一張能用在教學上，維基共享資源的 SVG 圖，說明可以用來教什麼主題。
  https://commons.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5 認識其他國家的地理特色、地形與風景，了解當地的人文特色等等的。
  - 1. Windows 上 SVG 楷書的名稱，或蘋果
  - 技能：按兩下 Finder 裡的字體，然後在隨後開啟的字體預覽視窗裡，按一下「安裝字體」。當 Mac 驗證完字體並開啟「字體簿」app 之後，即表示該字體已安裝完畢可供使用。
    1. 用 SVG 畫一個圓。
  html { font-size: 16px;} body { font-family: sans-serif; }
  .contain {
```
 display: flex;
 justify-content: center;
 padding: .65rem;
 box-sizing: border-box;
```
  }
```
 
```
  - 1. 用 SVG 畫一個熊臉
```
 
 
 
 
 
 
 
```
  - 1. 用 SVG 畫出「羅馬」兩個字
  在開始繪圖前，我們必須先了解畫布 (canvas) 網格，或著是說座標空間。在前一頁教學中的 HTML 範本有一個寬150 pixels (像素)、高150 pixels 的畫布。如右圖，你在畫布預設網格上繪圖，網格上 1 單位相當於畫布上 1 pixel，網格的原點 (座標 (0, 0) ) 坐落於左上角，所有元素定位皆相對於此左上角原點，所以藍色方塊的位置為從左往右推 x pixels、從上往下推 y pixels (亦即座標 (x, y) )。現在我們先專注在預設設定上，之後我們會看到如何轉換原點位置、旋轉網格以及縮放網格。
  - 1. 用 SVG 畫出「羅馬不是一天造成的」九個字，並用旋轉拉斜
  1 2 3 4 5
```
   
   
   
```
  - 1. transform 屬性可以有四種操作：位移、旋轉、大小縮放、拉斜，寫出前三種操作(位移、旋轉、大小)的語法
  說明：運用 CSS level 3 (CSS 3) 的 transform 特性 (CSS properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。適合：有 HTML 及 CSS 語法基礎概念者。共有 2 個特性值，每個值之間以至少一個半形空格間隔。 2 個值可以是尺寸值 (length) 或 % (百分比) 或方位關鍵字 (keywords) ； % 以元素本身的 box 尺寸為百分比計算基準。使用尺寸值或 % ，依序表示參考點橫座標 (x) 、縱座標 (y) 。 padding-box 的左上角座標為 (0,0) 。預設值為 50% 50% ；就是在 box 中心點。使用方位關鍵字 (center, top, right, bottom, left) ，依據字意即可表示方向和位置，所以 2 個值沒有順序問題。如果省略第 2 個值，會視為 center (50%) 。適用元素：transformable element。適用媒體： visual
  - 1. 在 SVG 原始碼中怎麼把一堆東西打包成群？
  iconfont解決了我們以前大量使用小圖示帶來的種種問題，但是也有自身的各種缺陷。比如不支援多色，不同瀏覽器下的表現不同，需要做各種相容等。
  不久的將來iconfont應該會被svg symbol技術替換。本文就是介紹如何在網頁中使用SVG圖示。順帶一提螞蟻金服的Ant.Design已經把方案從原來的字型圖示轉到SVG圖示。
  - 1. 用 SVG 畫出一朵花，有三個花瓣一個花梗
    2. 用 SVG 畫出三朵花，每朵花都有三個花瓣一個花梗
    3. 用 SVG 畫出一個帶漸層色的方塊
    4. 用 SVG 畫一個用放射漸層表示的太陽
    5. 怎麼將紙上的手繪圖拍下來，並展開為平整的電子檔？
    6. 怎麼使用 inkscape 將電子圖檔轉 SVG 向量圖？
    7. 怎麼使用 inkscape 將 SVG 圖多餘的邊切除？
    8. 怎麼對一張點陣圖進行「去背」？(png 檔可去背，jpg 檔無法去背)
    9. 怎麼找一張適合的 ICON ，並且是 SVG 格式的圖？
    10. 怎麼縮小一張 SVG 圖的大小？
    11. 怎麼改變一張 SVG ICON 圖的顏色？
    12. 怎麼將自己修改的 SVG ICON 圖，可以有網址，能讓 HTML 與 Wiki 頁引用？
  - 範例：
  - 英文：

@@ 行 1： / 行 1： @@
 <mwdetails><summary>電腦與網路資源</summary>
-*知識：
+*知識：<summary>標記應該用來描述類型或類型成員。 使用將 <remarks> 補充資訊加入至類型描述。 使用 cref 屬性，讓 DocFX 和 Sandcastle 這類文件工具為程式碼項目建立文件頁面的內部超連結。
+標記的文字 <summary> 是 IntelliSense 中型別的唯一資訊來源，也會顯示在 [物件瀏覽器] 視窗中。
+使用 DocumentationFile 進行編譯，以處理檔案的檔批註。 若要根據編譯器產生的檔案來建立最終檔，您可以建立自訂工具，或使用 DocFX 或 >sandcastle之類的工具。
 *#什麼是 UTF-8？
 *#<br>以前電腦剛開始發展時，每一個國家都各自發展自己的文字系統，所以就會有中文系統日文系等，可是大家在發展的過程中並沒有相互參考文字在電腦裡的編碼方式，所以同一個碼在不同的地區文字系統裡並不代表同一個字，所以當妳開起非中文的語文編集碼時，就會出現一堆亂碼。
@@ 行 156： / 行 160： @@
 GIS可分為地理跟資訊系統來解釋，地理是現相跟事件、資訊、知識查詢和分析的資訊系統。
 兩個加起來就是結合地理跟地形學，然後應用查詢跟資料分析。
+</mwdetails>
+<mwdetails><summary>HTML</summary>
+*知識：
+*#<br>在HTML中，summary標籤是HTML5中新增標籤，是使用來為details元素定義一個可見的標題， 當用戶點擊該標題的時候，將顯示出詳細信息。 summary標籤必須和details標籤配合使用，單獨使用沒有任何意義。 說明：當點擊summary標籤中的標題時，將顯示詳細信息。
+details</summary>是什麼?
+<details> 規定了用戶可見的或者隱藏的需求的補充細節。
+<details> 標籤用來供用戶開啓關閉的交互式控件，任何形式的內容都能被放在 <details> 標籤裏邊。
+<details> 元素的內容對用戶是不可見的，除非設置了 open 屬性。
+*#什麼是 HTML ？
+HTML是一種網頁使用的語言，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。
+*#什麼是 http ？
+當我們上網時，常會輸入http://www.ithome.com.tw 那 HTTP是指什麼，在網路上所有的資料的傳遞都要遵循著不同的通訊協定(Protocol)，而在網路上以瀏覽器方式瀏覽資料，要遵循的就是 HTTP 通訊協定。
+當我們上網時，在輸入網址時，會輸入 http://www.ithome.com.tw 那 HTTP是指什麼，在網路上所有的資料的傳遞都要遵循著不同的通訊協定(Protocol)，而在網路上以瀏覽器方式瀏覽資料，要遵循的就是 HTTP 通訊協定。
+當一個使用者在他的瀏覽器中輸入http://www.pchome.com.tw 時，www.pchome.com.tw 這台主機會將資料傳給讀者，而在網路上資料傳遞的過程中，會遵守著HTTP通訊協定，這個通訊協定的全名為Hyper Text Transmission Protocal ( 超文件傳輸通訊協定)，而在網路上所傳輸的檔案也為HTML格式。
+*#http 和 https 的差別？
+你知道"http" 與"https"有何不同嗎? http://跟https://之間的差異在於網路文字傳送協定標準不同。 http://是網頁伺服器與你的電腦瀏覽器，以一般(非安全)模式在進行互動交談，所以內容有可能遭攔截竊聽；換句話說，你在此類網頁上填寫傳送的資料有可能被有心人士看到。
+*#分辨顯示與原始碼
+在行動裝置的瀏覽器的網址欄上，輸入javascript指令，即可顯示該網頁的原始碼。
+*技能：
+「系統原始碼」這些都是由程式設計人員所自行開發的原始碼，它的作用主要是能把這些由英文數字所組成的程式碼變成一支可以讓人使用的「程式系統」
+「 網頁程式設計師 」或「系統程式設計師」他們必需透過自已撰寫成數行甚至成千上萬行的程式碼後才產生一支「系統功能」(例如會員系統、商品管理系統…)
+而許多的系統組合即成為了一套「軟體」或是一個「網站」
+*#看原始碼
+HTML Viewer檢視原始檔，HTML Page Source Viewer網頁原始碼檢視器，線上查看網頁源碼。
+解脫網站使用JavaScript禁止訪問者使用右鍵選單檢視網頁原始檔、查看源碼、源文件。
+支持 Chrome、Opera or Firefox 瀏覽器。
+Win快捷鍵：查看網頁原始碼（Ctrl+U）
+*#註解
+註解的用意：給「人」看的，瀏覽器遇到註解符號，會直接跳過，並不會顯示於網頁上，但會顯示於「頁面原始碼」中。
+*#使用 html,head,body 三標籤
+一個html程式碼的基本架構會長這樣，會有基本的宣告還有頭 <head> 與身體 <body>
+起頭命令句，告訴瀏覽器這個檔案是一個 html檔。
+HTML 網頁中一定有一個 (也只會有一個) <head> 標籤 (tag)，<head> 是接在 <html> 下面的第一個標籤，而在 <body> 起始標籤前面結束。
+<head> 標籤作用上是當作一個容器，裡面包含著不同用途的 HTML tags，而這些 tag 的內容通常不會被顯示在頁面上，僅用來說明關於該網頁的元資訊 (metadata)，像是指定網頁的標題，或像是指定該網頁所使用的編碼等。
+*#用 titl 標籤，改變頁籤文字
+網頁標題通常會在：
+顯示在瀏覽器的書籤 (favorites, bookmarks)
+顯示在瀏覽器的頁籤上 (tab, toolbar)
+顯示在搜尋引擎的網頁搜尋結果中
+*#指定 HTML 為 UTF-8 編碼
+由於網頁普遍編碼皆為UTF-8
+若未設定編碼會導致瀏覽器看不懂網頁裡的文字
+進而導致產生亂碼情況
+因此需在HTML文件或程式中加上UTF-8編碼設定
+*#p 標籤，font-size,font-family,text-align 三樣式
+屬性	說明
+font-size	設定文字大小，屬性值採用 "數字 + 單位" 呈現，數字越大通常表示字體越大。
+font-weight	設定文字粗細，屬性值設為 bold 即為粗體字，取代傳統 HTML <b> tag 或 <strong> tag。
+font-style	設定文字樣式，有兩種斜體字屬性值可用，分別為 italic 及 oblique，取代傳統 HTML <i> tag。
+font-family	設定文字字型，可設定多個不同字型依序排列，取代傳統 HTML face tag。
+*#有序列點
+順序點
+維基百科，自由的百科全書
+跳至導覽跳至搜尋
+順序點，也稱作序列點，是電腦程式中一些執行點，在該點處之前的求值的所有的副作用已經發生，在它之後的求值的所有副作用仍未開始。在C與C++程式設計語言中，表達式的值依賴於它的子表達式的求值順序。增加更多的順序點限制了可能的求值順序，能保證有一個一致結果。
+C++11中，順序點概念已經被sequenced before這種方法取代：直接指出一個求值是在另一個求值之前，或者兩個求值是無順序的。[1][2]無順序的求值可以重疊進行。
+*#無序列點
+我经常使用像a[++i] = i;这样有趣而复杂的表达方式a[++i] = i; ，让自己感觉更好。我为什么要停止使用它们？
+如果您已阅读此内容，请务必访问后续问题重新加载未定义的行为和序列点 。
+*#span 標籤
+<span> 標籤(tag) 是用來當作容器(container)，用來包裹文字(text) 或其他行內(inline) 的HTML，用途是方便給CSS 做樣式排版或方便給JavaScript 做互動操作，至於<span> 本身沒任何特殊意義也不帶任何標籤語意。
+*#做表格
+表格：由數個直行(欄)和橫列組合而成。一個完整的表格比單純的文字敘述更能清楚表現出資料間的相互關係，例如在日常生活中，我們可以看到很多的表格例如功課表，出勤統計表、日誌表、學生資料表……等等。
+. 建立一個空白表格，方法有拖曳法及指定法兩種：
+拖曳法：按工具列的「插入表格」工具鈕，出現數個小方格，將指標指向左上角方格，按住滑鼠向右下拖曳到所需表格大小後放開，隨即拉出一個3I4的表格。
+指定法：按「表格/插入/表格」，或按表格工具列的「插入表格」鈕，在插入表格視窗內設定如下：建立一個4(列)I5(欄)的表格。
+*##border-collapse 樣式
+*##表格調中
+*#超連結
+*#連續文字分段
+*#嵌入圖照
+*#嵌入影片
+*#水平線
+*#標題一級到六級
+*#區塊
+*範例：
+*英文：
+</mwdetails>
+</mwdetails>
+<mwdetails><summary>SVG</summary>
+*知識：<summary>標記應該用來描述類型或類型成員。 使用將 <remarks> 補充資訊加入至類型描述。 使用 cref 屬性，讓 DocFX 和 Sandcastle 這類文件工具為程式碼項目建立文件頁面的內部超連結。
+標記的文字 <summary> 是 IntelliSense 中型別的唯一資訊來源，也會顯示在 [物件瀏覽器] 視窗中。
+使用 DocumentationFile 進行編譯，以處理檔案的檔批註。 若要根據編譯器產生的檔案來建立最終檔，您可以建立自訂工具，或使用 DocFX 或 >sandcastle之類的工具。
+*#什麼是 SVG ？
+SVG是一種圖形格式。
+SVG是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
+SVG特色是不被限制於某種解析度。
+SVG 以向量圖形組成，而不是像素。
+SVG格式是XML的一種，SVG檔案其實只是普通的文字檔案，用一般的文字編輯器便可檢視或修改。
+*#什麼是 XML ？
+可延伸標記式語言（英語：Extensible Markup Language，簡稱：XML）是一種標記式語言。標記指電腦所能理解的資訊符號，通過此種標記，電腦之間可以處理包含各種資訊的文章等。如何定義這些標記，既可以選擇國際通用的標記式語言，比如HTML，也可以使用像XML這樣由相關人士自由決定的標記式語言，這就是語言的可延伸性。XML是從標準通用標記式語言（SGML）中簡化修改出來的。它主要用到的有可延伸標記式語言、可延伸樣式語言（XSL）、XBRL和XPath等。
+*#做一個 XML、HTML、SVG 三者的關係簡圖。
+DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>SVG Demo 1</title>
+</head>
+<body>
+  <style>
+    svg:hover path {
+      stroke: #444;
+      stroke-width: 2px;
+      fill: #ccc;
+    }
+  </style>
+  <script src="/img/loading.svg" data-src="https://code.jquery.com/jquery-3.1.0.js"></script>
+  <button id="sc">Scale Up</button>
+  <div style="padding: 3px;">
+    <svg id="s"></svg>
+  </div>
+  <script>
+    var s = $("#s");
+    //使用JavaScript產生SVG
+    s.attr("viewBox", "0 0 20 20");
+    s.attr("width", 20);
+    s.html('<path stroke="red" fill="yellow"></path>');
+    s.find("path").attr("d", "M2 2 L18 10 L2 18 Z");
+    $("#sc").click(function() { s.attr("width", 100); });
+  </script>
+</body>
+</html>
+*#說明 SVG 的三個特性
+SVG從1999年由一組加入W3C的公司啟動開發，與之前1998年提交給W3C的標準（PGML、VML）構成競爭。SVG從這兩個格式吸取了經驗。[4]
+SVG允許3種圖形物件類型：向量圖形、點陣圖像以及文字。圖形物件——包括PNG、JPEG這些點陣圖像——能夠被編組、設計、轉換及整合進先前的彩現物件中。文字可以在任何適用於應用程式的XML命名空間之內，從而提高SVG圖形的搜尋能力和無障礙性。SVG提供的功能集涵蓋了巢狀轉換、裁剪路徑、Alpha通道、濾鏡效果、模板物件以及可延伸性。
+SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述圖像內容，因此是一種和圖像解析度無關的向量圖形格式。
+SVG格式具有以下優點：
+圖檔可讀，易於修改和編輯（理論上如此，但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）。
+與現有技術可以互動融合。例如，SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準。另外，SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件。
+SVG圖形格式可以方便的建立文字索引，從而實現基於內容的圖像搜尋。
+SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。[5]
+SVG圖形格式可以用來動態生成圖形。例如，可用SVG動態生成具有互動功能的地圖，嵌入網頁中，並顯示給終端使用者。
+*#寫出 直線、多點成線、多邊形、圓、矩形 在 SVG 中的標籤名稱
+<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+*#找一張能用在教學上，維基共享資源的 SVG 圖，說明可以用來教什麼主題。
+https://commons.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5
+認識其他國家的地理特色、地形與風景，了解當地的人文特色等等的。
+*#Windows 上 SVG 楷書的名稱，或蘋果
+*技能：按兩下 Finder 裡的字體，然後在隨後開啟的字體預覽視窗裡，按一下「安裝字體」。當 Mac 驗證完字體並開啟「字體簿」app 之後，即表示該字體已安裝完畢可供使用。
+*#用 SVG 畫一個圓。
+html { font-size: 16px;}
+body { font-family: sans-serif; }
+.contain {
+  display: flex;
+  justify-content: center;
+  padding: .65rem;
+  box-sizing: border-box;
+}
+<div class="contain">
+  <svg width="200px" height="200px" viewBox="0 0 200 200">
+    <circle class="path"
+            stroke="hotpink"
+            fill="none"
+            stroke-width="5"
+            cx="100" cy="100" r="80" />
+  </svg>
+</div>
+*#用 SVG 畫一個熊臉
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'>
+  <circle cx='120' cy='120' r='40' style='fill:#CD853F;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='280' cy='120' r='40' style='fill:#CD853F;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='200' cy='200' r='100' style='fill:#CD853F;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='150' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='200' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/>
+  <circle cx='200' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
+</svg>
+*#用 SVG 畫出「羅馬」兩個字
+在開始繪圖前，我們必須先了解畫布 (canvas) 網格，或著是說座標空間。在前一頁教學中的 HTML 範本有一個寬150 pixels (像素)、高150 pixels 的畫布。如右圖，你在畫布預設網格上繪圖，網格上 1 單位相當於畫布上 1 pixel，網格的原點 (座標 (0, 0) ) 坐落於左上角，所有元素定位皆相對於此左上角原點，所以藍色方塊的位置為從左往右推 x pixels、從上往下推 y pixels (亦即座標 (x, y) )。現在我們先專注在預設設定上，之後我們會看到如何轉換原點位置、旋轉網格以及縮放網格。
+*#用 SVG 畫出「羅馬不是一天造成的」九個字，並用旋轉拉斜
+<svg width="100%" height="100">
+    <polygon points="40,0 60,60 0,60" style=" stroke:red; stroke-width:2"/>
+    <polygon points="140,0 160,60 100,60" style="fill:none; stroke:red; stroke-width:2"/>
+    <polygon points="240,0 260,60 200,60 240,0" style="fill:none; stroke:red; stroke-width:2"/>
+</svg>
+*#transform 屬性可以有四種操作：位移、旋轉、大小縮放、拉斜，寫出前三種操作(位移、旋轉、大小)的語法
+說明：運用 CSS level 3 (CSS 3) 的 transform 特性 (CSS properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。
+適合：有 HTML 及 CSS 語法基礎概念者。
+共有 2 個特性值，每個值之間以至少一個半形空格間隔。
+個值可以是尺寸值 (length) 或 % (百分比) 或方位關鍵字 (keywords) ； % 以元素本身的 box 尺寸為百分比計算基準。
+使用尺寸值或 % ，依序表示參考點橫座標 (x) 、縱座標 (y) 。 padding-box 的左上角座標為 (0,0) 。
+預設值為 50% 50% ；就是在 box 中心點。
+使用方位關鍵字 (center, top, right, bottom, left) ，依據字意即可表示方向和位置，所以 2 個值沒有順序問題。
+如果省略第 2 個值，會視為 center (50%) 。
+適用元素：transformable element。
+適用媒體： visual
+*#在 SVG 原始碼中怎麼把一堆東西打包成群？
+iconfont解決了我們以前大量使用小圖示帶來的種種問題，但是也有自身的各種缺陷。比如不支援多色，不同瀏覽器下的表現不同，需要做各種相容等。
+不久的將來iconfont應該會被svg symbol技術替換。本文就是介紹如何在網頁中使用SVG圖示。順帶一提螞蟻金服的Ant.Design已經把方案從原來的字型圖示轉到SVG圖示。
+*#用 SVG 畫出一朵花，有三個花瓣一個花梗
+*#用 SVG 畫出三朵花，每朵花都有三個花瓣一個花梗
+*#用 SVG 畫出一個帶漸層色的方塊
+*#用 SVG 畫一個用放射漸層表示的太陽
+*#怎麼將紙上的手繪圖拍下來，並展開為平整的電子檔？
+*#怎麼使用 inkscape 將電子圖檔轉 SVG 向量圖？
+*#怎麼使用 inkscape 將 SVG 圖多餘的邊切除？
+*#怎麼對一張點陣圖進行「去背」？(png 檔可去背，jpg 檔無法去背)
+*#怎麼找一張適合的 ICON ，並且是 SVG 格式的圖？
+*#怎麼縮小一張 SVG 圖的大小？
+*#怎麼改變一張 SVG ICON 圖的顏色？
+*#怎麼將自己修改的 SVG ICON 圖，可以有網址，能讓 HTML 與 Wiki 頁引用？
+*範例：
+*英文：
 </mwdetails>

「資訊基礎應用筆記/徐慕禾」修訂間的差異

於 2021年6月28日 (一) 11:39 的最新修訂

導覽選單

搜尋