Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20141101簡報(HTML/CSS) day 01
Search
Sammy Lin
November 01, 2014
1
150
20141101簡報(HTML/CSS) day 01
Sammy Lin
November 01, 2014
Tweet
Share
More Decks by Sammy Lin
See All by Sammy Lin
How to become a T-shaped talent as software developer
sammylin
0
120
2020-09-26_Kubernetes_Summit_帶你從無到有打造_Kubernetes_的環境_.pdf
sammylin
0
210
2020-01-08 Thinking after that disaster in cloud
sammylin
0
64
2019-10-17 17Media SRE Journey
sammylin
0
88
2017-06-23 How to design a automatic deployment system?
sammylin
0
150
2016-09-21 Rancher 傻瓜也會用的容器集群管理
sammylin
1
380
2016-07-06 跨牆工程師的中國 infra 小指南 @ DevOps Summit 2016
sammylin
19
2k
20141101簡報(HTML/CSS) day 03
sammylin
0
140
20141101簡報(HTML/CSS) day 02
sammylin
1
140
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Building Adaptive Systems
keathley
38
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Why Our Code Smells
bkeepers
PRO
335
57k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
傓䶺┮䷐崎峩⻇甒 5COO[.KP
5COO[.KP 㢦⼦⛑甚䥥涹榥↛ ⛑䍄䧢⠧礱㧤羝峫テ粕ㄌ4CKNU9GD&GXGNQRGT #95 #OC\QP9GD5GTXKEG 7UGT)TQWRKP6CKYCP⛭╖抇↛ ! ! 6YKVVGT獌"5COO[.KP6Y 'OCKN獌UCOO[NKPVY"IOCKNEQO
#DQWV/G獌JVVRCDQWVOGUCOO[NKP $.1)獌JVVRDNQIUCOO[NKPVY
┮䷐テ粕ㄌ ō ⻌*6/.%55,CXC5ETKRV ō テ∽⇺∕獌砒䷐屷岛崎峩2/ ō 䋰缧⥉䥥痙㧬⚬
None
痞㩽┮䷐珮砒䷐揞哋ヒ≧
瓴䷐テ粕ㄌ
痞∶䠀⃡⋬傓䶺 ō 䅾聆 ō 槡㼣 7UGT5VQT[ ō 9KTGHTCOG ō
桬䥝 ō ⓨ䔩 ō ┮䷐珮▶傻 ō 砒䷐羝㡺ㆌℓ碉 ō ∩紶 ō 㪗祚⥉ ō 洸㠗 ō ⃫傻 圖片來源:http://goo.gl/FUY0Y3
⃡⋬傓䶺㋯熝聴∽䥥 資料庫 後端程式語⾔言 HTML CSS JavaScript 瀏覽器 砒䷐ ┮䷐
⃡⋬傓䶺㋯熝聴∽䥥 資料庫 後端程式語⾔言 HTML CSS JavaScript 瀏覽器 砒䷐ ┮䷐ ⨉祚硦悲䥥粕ㇰ
⨉≠䠉勦䥥㔬祚㓷槜呇悲䥥粕ㇰ
羝㡺ㆌ㧪⟋ⅼ
羝㡺ㆌ
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT ō /[5SN
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT ō /[5SN ō
2QUVITG53.
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT ō /[5SN ō
2QUVITG53. ō 0Q53.
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT ō /[5SN ō
2QUVITG53. ō 0Q53. ō /QPIQ&$
羝㡺ㆌ ō 梽綁ㇰ羝㡺ㆌ 4GNCVKQPCNFCVCDCUG ō /553. /KETQUQHV53.5GTXGT ō /[5SN ō
2QUVITG53. ō 0Q53. ō /QPIQ&$ ō 4GFKU
砒䷐粕ㇰ嵿峡
砒䷐粕ㇰ嵿峡
砒䷐粕ㇰ嵿峡 ō #520'6
砒䷐粕ㇰ嵿峡 ō #520'6 ō 4WD[
砒䷐粕ㇰ嵿峡 ō #520'6 ō 4WD[ ō 2*2
砒䷐粕ㇰ嵿峡 ō #520'6 ō 4WD[ ō 2*2 ō 2[VJQP
砒䷐粕ㇰ嵿峡 ō #520'6 ō 4WD[ ō 2*2 ō 2[VJQP ō
,CXC
9GD(TCOGYQTM
9GD(TCOGYQTM
9GD(TCOGYQTM ō #520'6/8%(TCOGYQTM #520'6
9GD(TCOGYQTM ō #520'6/8%(TCOGYQTM #520'6 ō %CMG2*2 2*2
9GD(TCOGYQTM ō #520'6/8%(TCOGYQTM #520'6 ō %CMG2*2 2*2 ō &LCPIQ 2[VJQP
9GD(TCOGYQTM ō #520'6/8%(TCOGYQTM #520'6 ō %CMG2*2 2*2 ō &LCPIQ 2[VJQP
ō 4WD[QP4CKNU 4WD[
桬瘟巼*6/.
*6/.㤐↡熝
*6/.㤐↡熝獑
*6/.㤐↡熝獑 ō 恦㡨⸸㳺峹嵿峡 *[RGT6GZV/CTMWR.CPIWCIG
*6/.㤐↡熝獑 ō 恦㡨⸸㳺峹嵿峡 *[RGT6GZV/CTMWR.CPIWCIG ō 俵㡨⸸㵵
*6/.㤐↡熝獑 ō 恦㡨⸸㳺峹嵿峡 *[RGT6GZV/CTMWR.CPIWCIG ō 俵㡨⸸㵵 ō 㔡㧪倁揞㤐䠉㳺佅倥⛩㓱䥥
*6/.㤐↡熝獑 ō 恦㡨⸸㳺峹嵿峡 *[RGT6GZV/CTMWR.CPIWCIG ō 俵㡨⸸㵵 ō 㔡㧪倁揞㤐䠉㳺佅倥⛩㓱䥥 ō 㤐䋰缧⥉䧬䥥㒣䥥嵿峡
*6/.㤐↡熝獑 ō 恦㡨⸸㳺峹嵿峡 *[RGT6GZV/CTMWR.CPIWCIG ō 俵㡨⸸㵵 ō 㔡㧪倁揞㤐䠉㳺佅倥⛩㓱䥥 ō 㤐䋰缧⥉䧬䥥㒣䥥嵿峡
ō ═㵵⛮ JVON㓷JVON
*6/.䥥䇵幫 1993 1993`
*6/.䥥䇵幫 1993 1993`
㋯熝⌻ⓛ⃡⋬傓櫢
㕮晚⢵彂IUUQHPPHM$U;RG
圖片來源:http://goo.gl/CtZqf5
None
None
None
㓲缙䡗涹㔬
テ㸓畏Ⅼ㊦┊⥉
None
None
None
None
ō ㋌聋㇛䶬傓䶺⚀⩬ 2TQVQV[RKPI
ō ㋌聋㇛䶬傓䶺⚀⩬ 2TQVQV[RKPI ō 䃼⻲≠䠉撮综䥥倁
ō ㋌聋㇛䶬傓䶺⚀⩬ 2TQVQV[RKPI ō 䃼⻲≠䠉撮综䥥倁 ō 㚱≼⌨㡨⸸ⰸ䔩
ō ㋌聋㇛䶬傓䶺⚀⩬ 2TQVQV[RKPI ō 䃼⻲≠䠉撮综䥥倁 ō 㚱≼⌨㡨⸸ⰸ䔩 ō ⑈㇛5CUU珮%QORCUU珮%QHHGG5ETKRV
ō ㋌聋㇛䶬傓䶺⚀⩬ 2TQVQV[RKPI ō 䃼⻲≠䠉撮综䥥倁 ō 㚱≼⌨㡨⸸ⰸ䔩 ō ⑈㇛5CUU珮%QORCUU珮%QHHGG5ETKRV ō
㠐㛕.KXG4QNQCF
桬瘟瞗宾
傓櫢㪗㲬
None
⚺垦겗
ⶰ垦겗
Ⰹ俒
㼭垦
䒸鶤
9QTF㴄ㇰ崎
None
None
<html> </html> <head> </head> <title> XXX </title> <body> </body> <h1>
ooo </h1> <p> ooo </p> 㳺峹䥥▀䠉⼒瓞⥉苌㚰耡Ⅷ↬㢝桬瘟㳺峹❭倱㩀㳺峹ℬ┮䥥羝峫
*6/.倁 GNGOGPV <h1>這是標題</h1>
*6/.倁 GNGOGPV <h1>這是標題</h1> 桬瘟㳺佅 倱㩀㳺佅 ⑈
*6/.倁 GNGOGPV Tags 㤐䠉≧㚰耡⑈ <h1>這是標題</h1> 桬瘟㳺佅 倱㩀㳺佅 ⑈
ō *6/.'NGOGPV䴒ׅ倁׆◦✌Ⅷ ō 6CIUⰈ⻰⻌䥧⛐苌∧㇛幑㤐⇆⻰⻌䎛ℜ ō 缙㧪倱㩀䥥㳺峹
Attribute 㤐䠉≧㇛䶬6CI⑈䥥羝㡺 <a herf=“http://www.google.com.tw”>Google</a>
Attribute 㤐䠉≧㇛䶬6CI⑈䥥羝㡺 <a herf=“http://www.google.com.tw”>Google</a> 桬瘟㳺佅 倱㩀㳺佅 ⑈ ⽍㌈⌝ ⽍㌈⛮䴒
ō ⽍㌈⛮䴒⚫⽍㌈⌝⅀㤐⇆⻰⻌䎛ℜ珯 ō 㿉㏰⽍㌈䥥屰┨MG[ňXCNWGUʼn ō ⽍㌈⌝⯷橃缙◦圸ňʼn 榺ㇶ纝
FQEV[RG㡨⇗⺄✫
FQEV[RG㡨⇗⺄✫ <!DOCTYPE html>
JGCF ŎJGCF ō ⃮㧤歐䰛⨉ℜ缙䋰缧ℜ屷苬⑈ ō 嵓櫢橃䥥䧙梽羝峫
DQF[ ŎDQF[ ō 㔡㧪㠟⨉聅肰䥥6CIU揞㧤ⓛ䛟⨉DQF[寂
J ŎJ 㳺欭 ō *6/.䥥㳺欭㧪楯 ō J䎛磷Ⰸ獍J䎛磷⻰
R ŎR 㺖圞 ō 㡨⸸㺖圞⛐⇆≠䠉R R ⻨㡨⸸◦⨉寂橃
DKUVTQPIGO佸臶珮擥臶 ō D D UVTQPI UVTQPI 佸臶 ō K K
GO GO 擥臶
UWRUWD⃫㳺珮⃬㳺 ō UWR UWR ⃫㳺 ō UWD UWD ⃬㳺B
䵛䥞 ō 䵛䥞疹儏 ō PDUR
㢘嬭❭㼕ㅔ傻 ō 䵛倁
哋嬭僕劳 ō ㇛䶬⃡⋬㵵⛮䎛KPFGZJVON ō ◦✌GNGOGPV獌 ō J 珮J ō
R 珮DT ō D 珮K ō UWR 珮UWD ō JT ō ⌨㡨䠃䠀⥉獌JVVROQTGJCPFNKPQEQO
哋嬭僕劳 ō ↷䥥GNGOGPV ō DNQEMSWQVG ō S ō
KPU ō FGN ō U
紉纝䃦⢏ ō 櫱崎⌝磷┮橃㤐⇆椠㖪∐磕⸸㙳ㅰ
櫦䧏䃦⢏ ō 櫱崎⌝磷┮橃㤐熲啓⻇㊤⧴⧩
哋嬭僕劳 ō 僕劳≠䠉QN WN FN
哋嬭僕劳 ō ッ䖡䃦⢏ ō 嵇圸⨉WN QN ℎ䥥NK ⨉▁⃫⃡⋬䃦⢏
聏倱C <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a>
聏倱C <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 開始標籤 結束標籤
聏倱C <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 開始標籤 內容 結束標籤 屬性
74. ō 74. 7PKHQTO4GUQWTEG.QECVQT 糺⃡羝䅱∮⥉ ō 痞㩽㤐⃮⛭傓⫀獌倶⻮74. ō JVVRYYYREEWGFWVY ō
痞㩽㤐⛭⃡傓⫀獌䧙⻮74. ō CDQWVJVON ō PGYUJQVJVON
聏倱C ㄙ䠉⽍㌈ ō JGTH ō VCTIGV ō ADNCPM獌桬㢑屷苬 ō AUGNH獌⛭⃡⋬屷苬
櫱崎
聏倱C 昉熿 ō 䧕碉惔┑櫢橃ℎ㧪崎KF䥥VCI
聏倱C 昉熿 ō 䧕碉惔┑櫢橃ℎ㧪崎KF䥥VCI
㉒瓞 ō UTE ㉒瓞䥥74. ō CNV 㧠⇄㡨⸸ ō VKVNG 秠爁㠟⨉㉒瓞磢歐䰛䥥㡨⸸
ō YKFVJ 瞢ㆇ 瓞倁RZ ō JGKIJV 涹ㆇ 瓞倁RZ
㉒瓞寞∽⚀┨
㹄䮛㬝ㇰ
㹄䮛⼛⻙
㹄䮛⼛⻙
None
None
㹄䮛缷㩱ㆇ ō 槜呇织ㄶ缷㩱ㆇFRK
㇛幑㉒瓞㬝ㇰ
撑晚《荈IUUQHPPHM3W$8' 撑晚《荈IUUQHPPHM.6V2 撑晚《荈IUUQHPPHM5X4[Z ,2)
撑晚《荈IUUQHPPHMVIC)M. 撑晚《荈'BDFCPPL 撑晚《荈IUUQHPPHMZR* )+(珮20)
㉒瓞㬝ㇰ矦䡑 )+( ,2) 20) 䈙⽅ ⃮≔ ≔ ≔ 耼㣯綖㥐 㧪
䐂 㧪 +'⇆⃬⃮㠐㛕 ▶䡌 㧪 䐂 䐂 啓㉊ㆇ DKV DKV DKV 㵵礌Ⰸ⻰ ⻰ ℎ Ⰸ 肏䠉磢祚 +%10珮▶䡌 瓴㉊䧙䔨珮䈙⽅疍䔨 傓櫢↬橃珮疍䔨缙䈙 ⽅⚫綖㥐耼㣯 表格取自:http://goo.gl/ZNO8Su
哋嬭僕劳 ō 㢑⭿RJQVQUJVONℇ⻨⃪⋬亥⓸疍䔨徝⃫ ō ⨉KPFGZJVON㇛䶬聏倱 ō ㇛䶬聏倱┑RJQVQUJVON苌歐䰛⛮䴒ׅ疍䔨׆ ō ㇛䶬IQQING聏倱苌ℇ桬㢑屷苬
孉㬝VCDNG ō VCDNG ō VT VCDNGTQY ō VF
VCDNGFCVC ō VJ VCDNGJGCFKPI
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌惉㷥珮惉⓸
孉㬝獌VJGCF珮VDQF[珮VHQQV
孉㬝獌VJGCF珮VDQF[珮VHQQV
孉㬝獌VJGCF珮VDQF[珮VHQQV <thead> <tbody> <tfoot>
哋嬭僕劳 ō ㇛䶬傓櫢VCDNGJVON ō 寞∽痞⛔疍䥥孉㬝 課表 時間 MON TUE WED
THU FRI 歷史 英文 ASP.NET 數位影音 體育 微積分 色彩學 社會 午餐 色度學 心理學 印刷 剪接 軍訓 國文 僅供參考 <thead> <tbody> <tfoot>
孉⢏
Name:
Name: 砒䷐ 4WD[#520'62*2Ŏ
Name: 砒䷐ 4WD[#520'62*2Ŏ *+5COO[
孉⢏㚈┗櫦 㡨⸸戙⑆㷥 ⢏嬭 ⺧䮝戙⑆ 㡨⸸戙⑆㷥 ⯻嬭 综肞肞櫦㬧 ⢏肞肞櫦㬧 㵵礌⃫⎔ ⃬㖪肞⢏
耰ⓛ硻胪
孉⢏(QTO
圖片來自於:http://goo.gl/qTEusF
㡨⸸戙⑆㬧 ⢏嬭 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō OCZNGPIVJ 磷Ⰸ桘ㆇ
ō XCNWG ⌝
⺧䮝戙⑆㬧 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō OCZNGPIVJ 磷Ⰸ桘ㆇ ō
XCNWG ⌝
㡨⸸戙⑆㬧 ⯻嬭 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō EQNU 瞢ㆇ
⸸磕 ō TQYU 涹ㆇ ⸸磕
⢏肞肞櫦㬧 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō EJGEMGF 肞㞨 ō
㿉㏰獌⛭⃡倥肞櫦PCOG䥥⌝㊦櫩䧙⛭
综肞肞櫦㬧 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō EJGEMGF ◟肞 ō
㿉㏰獌⛭⃡倥肞櫦PCOG䥥⌝㊦櫩䧙⛭
⃬㖪肞⢏ ō UGNGEV ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō QRVKQP ⽍㌈
ō XCNWG ⌝ ō UGNGEVGF 肞㞨
㵵礌⃫⎔ ō 㿉㏰獌㧪嵓VCI磢苌HQTO 䥥OGVJQF⽍㌈㊦櫩㤐RQUV珯
硻胪 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō XCNWG 歐䰛⛮䴒
腢墰㚈┗櫦 ō ⽍㌈ ō PCOG 㚈┗櫦⛮䴒 ō XCNWG ⌝
NCDGN ō ⽍㌈ ō HQT 㜎搮䥥㚈┗櫦+&
HKGNFUGV珮NGIGPF
*6/.㢑⭿㚈┗櫦珮▀叞 required=“required”
*6/.㢑⭿㚈┗櫦珮▀叞 placeholder=“暫時顯⽰示的⽂文字”
*6/.㢑⭿㚈┗櫦珮▀叞 type=“url”
*6/.㢑⭿㚈┗櫦珮▀叞 type=“email”
*6/.㢑⭿㚈┗櫦珮▀叞 type=“date”
哋嬭僕劳 ō ㇛䶬EQPVCEVJVON ō ㇛䶬 ō 瘧⛮ ㊦⭌ ō
'OCKN ㊦⭌ ō ㌈┆ ⢏肞 ō 嵃⠰Ⅼ櫦 ⃬㖪ㇰ肞⢏ 獌傓䶺Ⅼ甒珮☐㸟Ⅼ櫦珮↷ ō ⑈ ㊦⭌ ō 耰ⓛ硻胪 ō ⛐⇆哋嬭▁⑆RNCEGJQNFGT⽍㌈苌㓷㤐▁⑆↷䥥㚈┗櫦
None
崜缷 ō 年粕ㇰ䮝䃦㰻㣴㒣 ō 年砒↛惀哋ヒ懶淧⃡熿
☡疥倁DNQEMGNGOGPV ō ≬痞獌J 珮R 珮WN 珮NK 珮FKX
嬭⑈倁KPNKPGGNGOGPVU ō ≬痞獌C 珮D 珮GO 珮KOI 珮KPRWV 珮URCP 粹
FKX 珮URCP ō 搮⛩%55䠉䥥6#)5苌≠䠉+&珮ENCUU㚈┗ ō FKX 峹㉸▁⃫崜缷
KHTCOG 櫢ℎ櫢 ō ⽍㌈獌 ō UTE 櫢橃74. ō JGKIJV 涹ㆇ
ō YKFVJ 瞢ㆇ
KHTCOG 櫢ℎ櫢⑈剏㬧㪗 ō ⽍㌈獌 ō UTE 櫢橃74. ō JGKIJV 涹ㆇ
ō YKFVJ 瞢ㆇ
OGVC 櫢橃䧙梽羝峫 ō ◦✌⨉JGCF ō 㚰耡櫢橃羝峫珮梽晖⸸珮∽勦粹
*6/.㢑⭿䥥嵿㏰甙VCI <wbr> <article> <aside> <bdi> <details> <dialog> <figcaption> <figure> <footer>
<header> <meter> <menuitem> <nav> <progress> <rp> <rt> <ruby> <main> <mark> <section> <summary> <time>
⻰倱 ō 痙䥥*6/.⛐⇆年碘瞩ㇶ碸䥥瓭禆㚱涹 ō 恫撮缙䥥⑈㒪嵓缙恫⃫橃 ō 痼畏≠䠉J`J 哔⻲缙䠉┑J`J ō
肏䡗≠䠉GO UVTQPI 粹㳺佅 ō 肥䠉VCDNG㙳䔩
⚤勤傓䶺 ō JVVRYYYYUEJQQNUEQOJVONFGHCWNVCUR
3#