Upgrade to Pro — share decks privately, control downloads, hide ads and more …

講給設計師聽的HTML-參考f2eclass

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sammy Lin Sammy Lin
June 07, 2013
Programming
200
6

 講給設計師聽的HTML-參考f2eclass

Avatar for Sammy Lin

Sammy Lin

June 07, 2013

More Decks by Sammy Lin

See All by Sammy Lin
How to become a T-shaped talent as software developer
Avatar for Sammy Lin sammylin
0
220
2020-09-26_Kubernetes_Summit_帶你從無到有打造_Kubernetes_的環境_.pdf
Avatar for Sammy Lin sammylin
0
290
2020-01-08 Thinking after that disaster in cloud
Avatar for Sammy Lin sammylin
0
84
2019-10-17 17Media SRE Journey
Avatar for Sammy Lin sammylin
0
120
2017-06-23 How to design a automatic deployment system?
Avatar for Sammy Lin sammylin
0
170
2016-09-21 Rancher 傻瓜也會用的容器集群管理
Avatar for Sammy Lin sammylin
1
410
2016-07-06 跨牆工程師的中國 infra 小指南 @ DevOps Summit 2016
Avatar for Sammy Lin sammylin
19
2.1k
20141101簡報(HTML/CSS) day 03
Avatar for Sammy Lin sammylin
0
170
20141101簡報(HTML/CSS) day 02
Avatar for Sammy Lin sammylin
1
180

Other Decks in Programming

See All in Programming
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
820
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
1
140
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
580
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
150
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
190
Foundation Models frameworkで画像分析
Avatar for リョウ ryodeveloper
1
630
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
640
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
210
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
720
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
660
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
290
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
240

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
210
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
460
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
300
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
610
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
870
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
550

Transcript

  1. 講給設計師聽的 HTML Sammy

  2. 不要聽到HTML就怕

  3. 愛他可以不用背他

  4. HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML）

  5. HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML） 做簡報之前我還不知道全名是什麼 orz

  6. 純文字檔，副檔名為.htm .html

  7. 所有的元素都是由標籤組成

  8. 了解正確的觀念

  9. 語意化 semantic

  10. 沒語意化

  11. 沒語意化 完全看不懂呀.....

  12. 有話意化

  13. 有話意化 可以⽐比較清楚知道網⾴頁架構

  14. 差在哪？

  15. 差在哪？ • 沒語意化HTML，就是醜爆了！

  16. 差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東 ⻄西)

  17. 差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東 ⻄西) • 有語意化的HTML，使⽤用適當的標籤，不 放噁⼼心的東⻄西。

  18. 差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東 ⻄西) • 有語意化的HTML，使⽤用適當的標籤，不 放噁⼼心的東⻄西。

    • 有語意化的HTML，更好被Google搜尋到

  19. 有語意化的好處

  20. 有語意化的好處 • 容易維護、DeBug

  21. 有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快

  22. 有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁

  23. 有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋

  24. 有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋

    • 看起來帥氣專業
  25. None

  26. 結構

  27. 結構 樣式

  28. 結構 樣式 ⾏行為

  29. 怎麼語意化?

  30. 怎麼語意化? • 由HTML來定義結構

  31. 怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式

  32. 怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式 • 由JavaScript來負責特效

  33. HTML的組成

  34. HTML的組成 • 由很多標籤(tag)組成的

  35. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱>

  36. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1>

  37. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute)

  38. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute) •

    語法：<標籤名稱 屬性名稱=’屬性值’>內容</標籤名稱>

  39. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute) •

    語法：<標籤名稱 屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a>

  40. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute) •

    語法：<標籤名稱 屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a> • 註解(在網⾴頁看看不到)

  41. HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute) •

    語法：<標籤名稱 屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a> • 註解(在網⾴頁看看不到) • 範例：<!-- 你看不到我 -->

  42. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html>

  43. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html> 此為HTML5⽂文件宣告，不可省略

  44. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html> HTML的內容

  45. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html> 不會出現在網⾴頁的內容，例如編碼、 作者、關鍵字、標題...等。

  46. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html> 不會出現在網⾴頁的內容，例如編碼、 作者、關鍵字、標題...等。

  47. 了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>

    <!-- 網⾴頁內容 --> </body> </html> 實際會出現在網⾴頁的內容

  48. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>

  49. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>

  50. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思

  51. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次

  52. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示

  53. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題

  54. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構

  55. 標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構 • SEO很重要的地⽅方

  56. 段落 <p>....</p> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>

  57. 段落 <p>....</p> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>

    </head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>
  58. None
  59. None

  60. h1

  61. h1

  62. h1 h2

  63. h1 h2

  64. h1 h2 p

  65. h1 h2 p

  66. h1 h2 p p

  67. 強調 <em>....</em> em = emphasize <!doctype html> <html lang="en"> <head>

    <meta charset="UTF-8"> <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<em>超⽂文件標⽰示語⾔言</em>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<em>語意化</em></p> </body> </html>

  68. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title> </head> <body>

    <h1>什麼是HTML</h1> <p>HTML就是<em>超⽂文件標⽰示語⾔言</em>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<em>語意化</em></p> </body> </html> 強調 <em>....</em> em = emphasize

  69. 更強調 <strong>....</strong> 與em有程度的差別，更強調的意思 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

    <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> </body> </html>

  70. 更強調 <strong>....</strong> 與em有程度的差別，更強調的意思 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

    <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> </body> </html>

  71. 連結 <a href=‘網址’>連結字樣</a> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

    <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> <p>如果需要參考請到<a href=‘http://www.google.com’>Google</a>搜尋</a> </body> </html>

  72. 連結 <a href=‘網址’>連結字樣</a> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

    <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> <p>如果需要參考請到<a href=‘http://www.google.com’>Google</a>搜尋</a> </body> </html>

  73. 圖⽚片 <img src=”圖⽚片網址” alt=”破圖說明”> <img src=”http://farm9.staticflickr.com/8543/8748617369_5b9048d29c_z.jpg” alt=”JSDC 2013開始”>

  74. 圖⽚片 <img src=”圖⽚片網址” alt=”破圖說明”> <img src=”http://farm9.staticflickr.com/8543/8748617369_5b9048d29c_z.jpg” alt=”JSDC 2013開始”> ⾼高度 說明

    src 圖⽚片網址 alt 破圖時的⽂文字 title 提⽰示⽂文字 width 寬度 height 屬性

  75. 無順序的清單 <ul> <li></li> <li></li> </ul> unordered list HTML Result

  76. 有順序的清單 <ol> <li></li> <li></li> </ol> ordered list HTML Result

  77. 表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>

    </tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table>

  78. 表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>

    </tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table>

  79. 表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>

    </tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table>

  80. 表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>

    </tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table> •不要拿table來排版

  81. 表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>

    </tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table> •不要拿table來排版 •類似Excel來存放資料

  82. 換⾏行區塊 division <div> ... </div> 把相關的HTML，群組化，不相關的隔離 <div> <a href="#">這是連結⼀一</a> </div>

    <div> <a href="#">這是連結⼆二</a> </div>

  83. 換⾏行區塊 division <div> ... </div> 把相關的HTML，群組化，不相關的隔離 <div> <a href="#">這是連結⼀一</a> </div>

    <div> <a href="#">這是連結⼆二</a> </div>

  84. 單⾏行區塊 span <span>...</span> 跟div⼀一樣是區分HTML，但是不會換⾏行 <span> <a href="#">這是連結⼀一</a> </span> <span> <a

    href="#">這是連結⼆二</a> </span>

  85. 單⾏行區塊 span <span>...</span> 跟div⼀一樣是區分HTML，但是不會換⾏行 <span> <a href="#">這是連結⼀一</a> </span> <span> <a

    href="#">這是連結⼆二</a> </span>

  86. 注意

  87. 注意 • 標籤與屬性都要⼀一律⼩小寫

  88. 注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆

  89. 注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML)

  90. 注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:<br>,

    <link>, <img>

  91. 注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:<br>,

    <link>, <img> • 可以任意空⽩白、換⾏行

  92. 注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:<br>,

    <link>, <img> • 可以任意空⽩白、換⾏行 • 製作階層關係，可以提⾼高維護性
  93. None
  94. None

  95. 看到想吐了....

  96. 練習 • 連結：http://goo.gl/mEeFx • 建⽴立test1.html，把內容貼上 • 10分鐘 • 會⽤用到的連結： •

    h1, h2, ul, li, p, em

  97. • 解答 http://goo.gl/lJu38 練習

  98. 參考 • 本簡報資料⼤大部分來⾃自於 • http://www.slideshare.net/josephj/ html-14701114

  99. Q&A 簡報網址： http://goo.gl/OnXW6