資訊基礎應用/李彥廷

出自六年制學程
在2018年2月9日 (五) 15:58由李彥廷對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

已記住的單字

英文指令中文
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

  • 屬性:
    1. border 1px(邊框的屬性)
    2. style(樣式的屬性)
  • solid:實線
  • collapse:崩塌
  • style三層用:等號.空格.冒號。
  • 配色
    1. red:#f00
    2. green:#0f0
    3. blue:#00f
    4. white:#fff
    5. black:#000
    6. 淺灰色:#aaa
    7. 深灰色:#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:
    1. 分享式合作
    2. Wikipeida是Alexa流量統計前幾名唯一屬於公益性質的網站,其他皆是商業性的公司。
  • 語法口決一:井號、星號、等號、中括號;用空白行分段。
  • 語法口決二:用空白行分段
  • Gategory:分類
  • cc授權和傳統授權不一樣的地方:對不特定對象授權。
  • 格式:檔案:檔名|圖長|圖寬|…
  • px:pixel
  • cc授權:
    1. CC授權(Creative Commons,簡稱CC)
    2. 諸標章:CC授權、姓名標示、非商業性、禁止改作、相同方式分享。
    3. 限制者才有標章,不限制者沒有標章。
    4. 六種核心授權:1(必須姓名標示)×2(商業、非商業)×3(可改作、不可改作、相同方式分享)。
  • 點陣圖:放大會毛邊
    1. png:不失真公開格式
    2. jpg:jepg失真壓縮
    3. gif:可動畫256色
  • 「'…'」代表所夾的字要拉斜。
  • 「'…'」代表所夾的字要加粗

圖照的引用

Piranha face.jpg

分層列表

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

  1. XML標籤
    • markup
    • 提供指示
  2. XML.NS
    • name space
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />(HTML第四版之前)
  4. <meta charset='UTF-8'/>(HTML第五版)
  5. padding:內距
    • 控制區域如 DIV 、 span 、表格的內部距離
    • padding不可設定負值跟margin不同
    • 語法範例:padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値
    • padding:auto;:讓瀏覽器自己去設定
    • padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  6. margin:邊沿
    • 控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。
    • 可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。
    • 語法範例:margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
    • margin:auto;:讓瀏覽器自己去設定。
    • margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  7. border:邊框
    • 邊框粗細:用長度表達
    • 邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
  8. 表格榻陷
    • 如果表格整列都沒有內容,在 word 中會榻陷是極扁的列,此時在表格中加空白沒用,但加 即可避免表格榻陷。
    • 邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等
  9. 井號
    • 三個數字,紅&綠&藍
    • 六個數字,紅紅&綠綠&藍藍
  10. 將圖包在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」標籤開始與結束之間夾字,可用中英文。而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達。
  • 可用中文字形:
    1. 屬性 dx 和 dy 基於前一個字的位置去做變化:值可為'10,20,30,40',字的距離一個比一個更遠。
    2. 屬性 x 和 y 標示字的起點:值可為'10,20,30,40',表示每個字的 x 或 y 座標。
    3. 屬性 fill 控制填入字的顏色,預設黑色
    4. 屬性 stroke 控制字描框的顏色,預設 none
    5. 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
    6. 用 style 控制字體、字形、尺寸,但顏色是用 fill 不是用 color 。

2017.11.14

  • 今天學到線性漸層
    1. 漸層和濾鏡如果取中文名稱,瀏覽器還認得,但 Inkscape 和線上轉檔軟體就會不認得
    2. 在 defs 段落中定義漸層,並賦予 id
    3. 用 fill='url(#某id)' 屬性來引用既有的漸層定義
  • linearGradient 線性漸層定義語法說明:
    1. 漸層標籤中的 100%,指的是整個圖形
    2. 其中的 id 屬性定出漸層名稱
  • 放射漸層
  • radialGradient 放設漸層定義語法說明:
    1. 漸層範圍:由 cx,cy,r 三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓
    2. 設色中心:由 fx,fy 兩個屬性決定的位置,就是設色為 0% 的地方,兩個屬性都以百分比表示
    3. 設色標籤 stop,漸層標籤包住數個 stop 標籤,每種顏色通過一個 stop 標籤來規定
    4. 以 ball3.svg 為例:漸層範圍為整個圓,因為 cx,cy,r 都是 50% ,而設色中心在中間下方,因為 fx='50%' fy='100%' ,此處是 stop 設為 0% 的顏色(白色),而範圍圓週邊是 stop 設為 100% 的顏色(黑色)
  • 柔焦濾鏡
  • 濾鏡標籤 filter 語法說明:
    1. 其中的 id 屬性定出濾鏡名稱
    2. 也可以設 width,height,x,y 去定濾鏡範圍和起點,如沒設以整個圖形為範圍
    3. 高斯模糊濾鏡 feGaussianBlur :濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡
    4. 高斯模糊濾鏡主要只有一個參數:stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態

2017.11.21

  • 參數大寫代表絕對座標,小寫代表與前一個座標的相對座標
  • 點與點之間、同點的 x , y 座標之間,用空白間開或用,間開兩者是等價的。
  1. set(開關)
    • 只用attributeName,to,begin三屬性
  2. animate(屬性連續改變)
  3. animateTransform(平移,旋轉,縮放)
  4. 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專用) 圖形隨路徑曲度而轉折。

==2017.11.

==2017.11.27==
取自「http://nice-learning.tw/wiki1231/index.php?title=資訊基礎應用/李彥廷&oldid=38537