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

HTML & CSS Basics

stupig
August 16, 2012
Programming
4
250

HTML & CSS Basics

HTML 与 CSS基础

stupig

August 16, 2012
Tweet

Other Decks in Programming

See All in Programming
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
160
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
510
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
390
CloudflareStack でRAGに入門
asahiiwm
0
140
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.2k
HTML/CSS超絶浅い説明
yuki0329
0
150
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
130
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
220
バグを見つけた？それAppleに直してもらおう！
uetyo
0
210
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
850
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

eiganken
1
390
テストコード書いてみませんか？
onopon
2
280

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
850
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Documentation Writing (for coders)
carmenintech
67
4.5k
Building Applications with DynamoDB
mza
92
6.1k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Gamification - CAS2011
davidbonilla
80
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Navigating Team Friction
lara
183
15k
Making Projects Easy
brettharned
116
6k

Transcript

  1. HTML & CSS basics @ 巩守强 http:/ /stupig.me 12年8月28⽇日星期⼆二

  2. HTML (HyperText Markup Language) 12年8月28⽇日星期⼆二

  3. HTML history 12年8月28⽇日星期⼆二

  4. HTML history HTML2.0 12年8月28⽇日星期⼆二

  5. HTML history HTML2.0 HTML4.0.1 12年8月28⽇日星期⼆二

  6. HTML history HTML2.0 HTML4.0.1 XHTML1.0 12年8月28⽇日星期⼆二

  7. HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 12年8月28⽇日星期⼆二

  8. HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 XHTML2.0 12年8月28⽇日星期⼆二

  9. HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 XHTML2.0 HTML 5 12年8月28⽇日星期⼆二

  10. sample.html 12年8月28⽇日星期⼆二

  11. sample.html 12年8月28⽇日星期⼆二

  12. <!DOCTYPE> 12年8月28⽇日星期⼆二

  13. <!DOCTYPE> html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

  14. <!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

  15. <!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    strict , transitional , frameset html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

  16. <!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    strict , transitional , frameset html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

  17. <!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    strict , transitional , frameset <!DOCTYPE html> html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

  18. <!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    strict , transitional , frameset <!DOCTYPE html> backward compatibility html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

  19. sample.html 12年8月28⽇日星期⼆二

  20. sample.html 12年8月28⽇日星期⼆二

  21. <head> 12年8月28⽇日星期⼆二

  22. <head> title 12年8月28⽇日星期⼆二

  23. <head> title meta 12年8月28⽇日星期⼆二

  24. <head> title meta link 12年8月28⽇日星期⼆二

  25. <head> title meta link script 12年8月28⽇日星期⼆二

  26. sample.html 12年8月28⽇日星期⼆二

  27. sample.html 12年8月28⽇日星期⼆二

  28. <body> 12年8月28⽇日星期⼆二

  29. <body> block element 12年8月28⽇日星期⼆二

  30. <body> block element inline element 12年8月28⽇日星期⼆二

  31. <body> block element inline element <div>block0</div> <div>block1</div> 12年8月28⽇日星期⼆二

  32. <body> block element inline element <div>block0</div> <div>block1</div> 12年8月28⽇日星期⼆二

  33. <body> block element inline element <div>block0</div> <div>block1</div> <span>inline0</span> <span>inline1</span> 12年8月28⽇日星期⼆二

  34. <body> block element inline element <div>block0</div> <div>block1</div> <span>inline0</span> <span>inline1</span> 12年8月28⽇日星期⼆二

  35. HTML elements 12年8月28⽇日星期⼆二

  36. HTML elements block element 12年8月28⽇日星期⼆二

  37. HTML elements block element div, p, h1~h6, ol, ul, li,

    dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, fieldset, legend, address, blockquato, pre, hr 12年8月28⽇日星期⼆二

  38. HTML elements block element inline element div, p, h1~h6, ol,

    ul, li, dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, fieldset, legend, address, blockquato, pre, hr 12年8月28⽇日星期⼆二

  39. HTML elements block element inline element div, p, h1~h6, ol,

    ul, li, dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, fieldset, legend, address, blockquato, pre, hr a, abbr, span, br, code, em, i, label, input, img, q, del, select, strong, sub, sup, textarea, input, button, select 12年8月28⽇日星期⼆二

  40. Global Attributes 12年8月28⽇日星期⼆二

  41. Global Attributes core attributes 12年8月28⽇日星期⼆二

  42. Global Attributes core attributes accesskey, class, dir, hidden, id, lang,

    style, tabindex, title 12年8月28⽇日星期⼆二

  43. Global Attributes core attributes accesskey, class, dir, hidden, id, lang,

    style, tabindex, title event-handler attributes 12年8月28⽇日星期⼆二

  44. Global Attributes core attributes accesskey, class, dir, hidden, id, lang,

    style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... 12年8月28⽇日星期⼆二

  45. Global Attributes core attributes accesskey, class, dir, hidden, id, lang,

    style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... xml attributes 12年8月28⽇日星期⼆二

  46. Global Attributes core attributes accesskey, class, dir, hidden, id, lang,

    style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... xml attributes xml:lang, xml:space, xml:base 12年8月28⽇日星期⼆二

  47. Semantic HTML 12年8月28⽇日星期⼆二

  48. Semantic HTML what’s semantic HTML? 12年8月28⽇日星期⼆二

  49. Semantic HTML what’s semantic HTML? Semantic HTML is the use

    of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look) -----------from http://en.wikipedia.org/wiki/Semantic_HTML 12年8月28⽇日星期⼆二

  50. Semantic HTML 12年8月28⽇日星期⼆二

  51. Semantic HTML the good for semantic HTML 12年8月28⽇日星期⼆二

  52. Semantic HTML the good for semantic HTML lighter code 12年8月28⽇日星期⼆二

  53. Semantic HTML the good for semantic HTML lighter code accessibility

    12年8月28⽇日星期⼆二

  54. Semantic HTML the good for semantic HTML lighter code accessibility

    search engine optimization 12年8月28⽇日星期⼆二

  55. Semantic HTML the good for semantic HTML lighter code accessibility

    search engine optimization repurposing 12年8月28⽇日星期⼆二

  56. Semantic HTML the good for semantic HTML lighter code accessibility

    search engine optimization repurposing developer comprehension 12年8月28⽇日星期⼆二

  57. Semantic HTML 12年8月28⽇日星期⼆二

  58. Semantic HTML how to write semantic HTML? 12年8月28⽇日星期⼆二

  59. Semantic HTML how to write semantic HTML? 12年8月28⽇日星期⼆二

  60. Semantic HTML how to write semantic HTML? back to nature

    12年8月28⽇日星期⼆二

  61. Semantic HTML 12年8月28⽇日星期⼆二

  62. Semantic HTML structure: body, head, html, title 12年8月28⽇日星期⼆二

  63. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var 12年8月28⽇日星期⼆二

  64. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 12年8月28⽇日星期⼆二

  65. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a 12年8月28⽇日星期⼆二

  66. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p 12年8月28⽇日星期⼆二

  67. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea 12年8月28⽇日星期⼆二

  68. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea table: caption, table, td, th, tr 12年8月28⽇日星期⼆二

  69. Semantic HTML structure: body, head, html, title text: abbr, acronym,

    address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea table: caption, table, td, th, tr image: img 12年8月28⽇日星期⼆二

  70. Semantic HTML snippets 12年8月28⽇日星期⼆二

  71. Semantic HTML snippets 12年8月28⽇日星期⼆二

  72. Semantic HTML snippets 12年8月28⽇日星期⼆二

  73. Semantic HTML snippets 12年8月28⽇日星期⼆二

  74. Semantic HTML snippets 12年8月28⽇日星期⼆二

  75. Semantic HTML snippets 12年8月28⽇日星期⼆二

  76. Semantic HTML snippets 12年8月28⽇日星期⼆二

  77. Semantic HTML snippets 12年8月28⽇日星期⼆二

  78. Semantic HTML snippets 12年8月28⽇日星期⼆二

  79. Semantic HTML snippets 12年8月28⽇日星期⼆二

  80. Semantic HTML snippets 12年8月28⽇日星期⼆二

  81. Semantic HTML snippets 12年8月28⽇日星期⼆二

  82. Semantic HTML snippets 12年8月28⽇日星期⼆二

  83. Deprecation 12年8月28⽇日星期⼆二

  84. Deprecation elements font, base, u, center, s, strike, isindex, menu,

    basefont, applet, acronym, big, tt, xmp, listing, plaintext, frame, frameset, noframe 12年8月28⽇日星期⼆二

  85. Deprecation elements font, base, u, center, s, strike, isindex, menu,

    basefont, applet, acronym, big, tt, xmp, listing, plaintext, frame, frameset, noframe attributes align, bgcolor, height, width, background... 12年8月28⽇日星期⼆二

  86. CSS (Cascading Style Sheets) 12年8月28⽇日星期⼆二

  87. CSS history 12年8月28⽇日星期⼆二

  88. CSS history CSS 1.0 12年8月28⽇日星期⼆二

  89. CSS history CSS 1.0 CSS 2.0 12年8月28⽇日星期⼆二

  90. CSS history CSS 1.0 CSS 2.0 CSS 2.1 12年8月28⽇日星期⼆二

  91. CSS history CSS 1.0 CSS 2.0 CSS 2.1 CSS 3

    12年8月28⽇日星期⼆二

  92. Box model 12年8月28⽇日星期⼆二

  93. Box model non-replaced inline element have no margin-top or margin-bottom

    12年8月28⽇日星期⼆二

  94. Selector 12年8月28⽇日星期⼆二

  95. Selector 12年8月28⽇日星期⼆二

  96. Selector 12年8月28⽇日星期⼆二

  97. Selector 12年8月28⽇日星期⼆二

  98. Selector 12年8月28⽇日星期⼆二

  99. Selector 12年8月28⽇日星期⼆二

  100. Selector 12年8月28⽇日星期⼆二

  101. Selector 12年8月28⽇日星期⼆二

  102. Selector 12年8月28⽇日星期⼆二

  103. Selector 12年8月28⽇日星期⼆二

  104. Selector 12年8月28⽇日星期⼆二

  105. Selector priority 12年8月28⽇日星期⼆二

  106. Selector priority selector style id class attribute priority 12年8月28⽇日星期⼆二

  107. Selector priority selector style id class attribute priority * 0

    0 0 0 0 12年8月28⽇日星期⼆二

  108. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 12年8月28⽇日星期⼆二

  109. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 12年8月28⽇日星期⼆二

  110. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 12年8月28⽇日星期⼆二

  111. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 12年8月28⽇日星期⼆二

  112. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 div .color p #news 0 1 1 2 112 12年8月28⽇日星期⼆二

  113. Selector priority selector style id class attribute priority * 0

    0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 div .color p #news 0 1 1 2 112 style=”” 1 0 0 0 1000 12年8月28⽇日星期⼆二

  114. Demo <div> <span>StuPig</span> </div> <style> div { color:green; } span

    { color:blue; } </style> 12年8月28⽇日星期⼆二

  115. Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> .a {

    color:green; } .b { color:blue; } </style> 12年8月28⽇日星期⼆二

  116. Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> div {

    color:green!important; } #meituan { color:blue; } </style> 12年8月28⽇日星期⼆二

  117. Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> div span

    { color:green; } span { color:blue; } </style> 12年8月28⽇日星期⼆二

  118. Positioning schemes 12年8月28⽇日星期⼆二

  119. Positioning schemes position: 12年8月28⽇日星期⼆二

  120. Positioning schemes position: static(default) 12年8月28⽇日星期⼆二

  121. Positioning schemes position: static(default) relative 12年8月28⽇日星期⼆二

  122. Positioning schemes position: static(default) relative absolute 12年8月28⽇日星期⼆二

  123. Positioning schemes position: static(default) relative absolute fixed 12年8月28⽇日星期⼆二

  124. Positioning schemes 12年8月28⽇日星期⼆二

  125. Positioning schemes static: 12年8月28⽇日星期⼆二

  126. Positioning schemes 12年8月28⽇日星期⼆二

  127. Positioning schemes relative: 12年8月28⽇日星期⼆二

  128. Positioning schemes 12年8月28⽇日星期⼆二

  129. Positioning schemes absolute: 12年8月28⽇日星期⼆二

  130. Positioning schemes 12年8月28⽇日星期⼆二

  131. Positioning schemes fixed: 12年8月28⽇日星期⼆二

  132. Positioning schemes 12年8月28⽇日星期⼆二

  133. Positioning schemes principle: 12年8月28⽇日星期⼆二

  134. Positioning schemes principle: based on non-static parent element 12年8月28⽇日星期⼆二

  135. Positioning schemes principle: based on non-static parent element ‘fixed’: based

    on client screen 12年8月28⽇日星期⼆二

  136. Floats 12年8月28⽇日星期⼆二

  137. Floats fload: 12年8月28⽇日星期⼆二

  138. Floats fload: none(default) 12年8月28⽇日星期⼆二

  139. Floats fload: none(default) left 12年8月28⽇日星期⼆二

  140. Floats fload: none(default) left right 12年8月28⽇日星期⼆二

  141. Floats 12年8月28⽇日星期⼆二

  142. Floats none: 12年8月28⽇日星期⼆二

  143. Floats 12年8月28⽇日星期⼆二

  144. Floats right: 12年8月28⽇日星期⼆二

  145. Floats 12年8月28⽇日星期⼆二

  146. Floats left: 12年8月28⽇日星期⼆二

  147. Floats left: 12年8月28⽇日星期⼆二

  148. Clear float 12年8月28⽇日星期⼆二

  149. Clear float clear: left | right | both | none

    12年8月28⽇日星期⼆二

  150. Clear float clear: left | right | both | none

    clearfix: 12年8月28⽇日星期⼆二

  151. Clear float clear: left | right | both | none

    clearfix: .clearfix:after { content: ’ ’; visibility: hidden; display: block; font-size: 0; clear: both; height: 0; } 12年8月28⽇日星期⼆二

  152. Q&A 12年8月28⽇日星期⼆二

  153. !anks 12年8月28⽇日星期⼆二