Html&Browser
- 3. chapter.HTML
- 4. HTML Basic TAGs Graceful HTML HTML5 chapter.HTML
- 5. html HTML Basic TAGs html Graceful HTML html HTML5 html chapter.HTML
- 6. HTML.Basic
- 7. What is HTML? HTML.Basic
- 8. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML.Basic
- 9. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin HTML.Basic
- 10. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin 1.0 / 2.0 ... 4.0 / 4.0.1 /xhtml1.0 ... 5 HTML.Basic
- 11. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin HTML.Basic
- 12. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin ‣ 1991 HTML ‣ 1994 HTML 2 ‣ 1996 CSS 1 + JavaScript ‣ 1997 HTML 4 ‣ 1998 CSS 2 ‣ 2000 XHTML 1 ‣ 2005 AJAX ‣ 2009 HTML 5 HTML.Basic
- 13. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin HTML.Basic
- 14. What is HTML? Hyper Text Markup Language —— The basic building-blocks of webpages. HTML’s origin ALL u should know is 5 coming HTML.Basic
- 15. HTML.Basic
- 16. The structure of an HTML document HTML.Basic
- 17. The structure of an HTML document HTML.Basic
- 18. HTML.Basic
- 19. 1. <!Doctype> HTML.Basic
- 20. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML.Basic
- 21. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML.Basic
- 22. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML.Basic
- 23. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML.Basic
- 24. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!Doctype html> HTML.Basic
- 25. 1. <!Doctype> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!Doctype html> No.1 <!Doctype html>? HTML.Basic
- 26. 2. . charset | encoding | content-type . http://ued.koubei.com/?p=537 http://imethan.com/?p=105 http://every-best.iteye.com/blog/970861 http://arale.alipay.net/wp/?p=295 No.2 charset | encoding | content-type HTML.Basic
- 27. HTML.Tags
- 28. Tags HTML.Tags
- 29. Tags Elements are not tags. HTML.Tags
- 30. Tags Elements are not tags. - < “ ” “ ”……> …… < > - * - tag - * - id - html entities https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg&hl=en_US HTML.Tags
- 31. Classification in Specification according to 5 ‣Root html ‣Metadata head title meta base link style ‣Scripting script noscript ‣Sections body section nav article aside h1~h6 hgroup header footer address ‣Grouping content p hr pre blockquote ul li ol dl dt dd figure figcaption div ‣Text-level semantic a em strong small s cite q dfn abbr time code var kbd sup sub i b u mark ruby rt rp bdi bdo span br wbr ‣Edits ins del ‣Embedded content img iframe embed object param video audio source track canvas map area ‣Tabular data table caption colgroup col tbody thead tfoot tr td th ‣Forms form fieldset legend label input button select datalist optgroup option textarea keygen output progress meter ‣Interactive elements details summary command menu ‣Links a area HTML.Tags
- 32. <head> • <title> HTML.Tags
- 33. <head> • <title> HTML.Tags
- 34. <head> • <title> HTML.Tags
- 35. <head> • <title> <meta> HTML.Tags
- 36. <head> • <title> <meta> • <meta charset="gbk" /> <meta charset="gb2312"> • <meta http-equiv="x-ua-compatible" content="ie=7" /> HTML.Tags
- 37. HTML.Tags
- 38. <a> <img> HTML.Tags
- 39. <a> • href a:hover • accesskey • focus <img> HTML.Tags
- 40. <a> • href a:hover • accesskey • focus <img> • alt • src • png jpg gif • width & height HTML.Tags
- 41. <a> • href a:hover • accesskey • focus <img> • alt • src • png jpg gif • width & height No.3 width & height HTML.Tags
- 42. HTML.Tags
- 43. <ul> <ol> <dl> <li><menu> <pre> & <code> HTML.Tags
- 44. <ul> <ol> <dl> <li><menu> • • ul, ol li menu <pre> & <code> HTML.Tags
- 45. <ul> <ol> <dl> <li><menu> • • ul, ol li menu <pre> & <code> <code>text-align:center</code> <pre> { ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) } </pre> HTML.Tags
- 46. HTML.Tags
- 47. <cite> <q> <blockquote> <em> & <strong> <small> HTML.Tags
- 48. <cite> <q> <blockquote> • <cite> </cite> :<q> ...</q> • blockquote <em> & <strong> <small> HTML.Tags
- 49. <cite> <q> <blockquote> • <cite> </cite> :<q> ...</q> • blockquote <em> & <strong> • <small> HTML.Tags
- 50. <cite> <q> <blockquote> • <cite> </cite> :<q> ...</q> • blockquote <em> & <strong> • <small> • Small print typically features disclaimers, caveats, legal restrictions, or copyrights. HTML.Tags
- 51. HTML.Tags
- 52. <hr> <br> HTML.Tags
- 53. <hr> • • hr http://sofish.de/1328 <br> HTML.Tags
- 54. <hr> • • hr http://sofish.de/1328 <br> • • br • css padding margin br HTML.Tags
- 55. HTML.Tags
- 56. <table> <form> HTML.Tags
- 57. <table> • table table • <thead> <tfoot> <tbody> • table summary • <th> scope <form> HTML.Tags
- 58. <table> • table table • <thead> <tfoot> <tbody> • table summary • <th> scope <form> • form • form > fieldset • form type=”submit” input • a onclick HTML.Tags
- 59. HTML.Tags
- 60. <input> <label> HTML.Tags
- 61. <input> • input tabindex • input accesskey • label • input type <label> HTML.Tags
- 62. <input> • input tabindex • input accesskey • label • input type <label> • • for HTML.Tags
- 63. HTML.Tags
- 64. <iframe> < !-- here is comment --> HTML.Tags
- 65. <iframe> • iframe • frame iframe img embed src • @alipay src https <iframe src="javascript:'';"></iframe> < !-- here is comment --> HTML.Tags
- 66. <iframe> • iframe • frame iframe img embed src • @alipay src https <iframe src="javascript:'';"></iframe> < !-- here is comment --> • id class • HTML.Tags
- 67. HTML.Tags
- 68. <div> HTML.Tags
- 69. <div> • when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors. HTML.Tags
- 70. HTML.Tags
- 71. HTML.Tags
- 72. • <font> <s> <strike> <tt> <u> <basefont> <big> <center> HTML.Tags
- 73. • <font> <s> <strike> <tt> <u> <basefont> <big> <center> • <frame> <frameset><noframes> HTML.Tags
- 74. • <font> <s> <strike> <tt> <u> <basefont> <big> <center> • <frame> <frameset><noframes> • <acronym> <applet> <isindex> <dir> HTML.Tags
- 75. semantic accessibility efficiency Graceful.HTML
- 76. Semantic - divitis - & <body> <div id="wrapper"> <header> <div id="header"> <h1>My super duper page</h1> <h1>My super duper page</h1> <!-- Header content --> <!-- Header content --> </header> </div> <div role="main"> <div id="main"> <!-- Page content --> <!-- Page content --> </div> </div> <aside role="complementary"> <div id="secondary"> <!-- Secondary content --> <!-- Secondary content --> </aside> </div> <footer> <div id="footer"> <!-- Footer content --> <!-- Footer content --> </footer> </div> </body> </div> Graceful.HTML
- 77. accessibility - dom - label - tabindex - input type - title - alt Graceful.HTML
- 78. efficiency <hgroup> <h1>Big Smile</h1> - web </hgroup> - - ... No.3 HTML 3 Graceful.HTML
- 79. HTML5 Web Development to the next level. • What html5 • Why html5? • How html5?
- 80. What HTML5? HTML5 ~= HTML + CSS + JS • • • Javascript API • CSS3
- 81. Why html5? • Better User Experience • More Efficient • Google loves HTML5 • Strong Support • Apple loves HTML5 • Mozilla loves HTML5 • Opera loves HTML5 • Microsoft loves HTML5
- 82. How html5? • Flash Google features first HTML 5 canvas doodle alipay doodle
- 83. How html5? • Form field types on mobile • Forms change Alipay
- 84. More about html5 • https://docs.google.com/#folders/folder.0.0B2iI12yCmwaoYTBkZWNiMzYtMTIwMC00NTRiLTg1N2QtMWIwYzZiYjI4ZjFm
- 85. More about html5 • https://docs.google.com/#folders/folder.0.0B2iI12yCmwaoYTBkZWNiMzYtMTIwMC00NTRiLTg1N2QtMWIwYzZiYjI4ZjFm No.4:
- 86. No.5: html No.6: html
- 87. Rumors about Browser Browsers Type In Alipay Tips for Browser chapter.Browser
- 88. 2010 1 Internet Explorer Mozilla Firefox Google Chrome Safari Opera Opera chapter.Browser
- 89. • Trident • Gecko W3C • Webkit chapter.Browser
- 90. • Internet Explorer • 360 • Chrome • Firefox • Sougou • Maxthon chapter.Browser
- 91. - • IE 9 - unknown/Chakra • Chrome - V8 • Firefox - TraceMonkey/JägerMonkey • Safari - Nitro • Opera - Carakan chapter.Browser
- 92. • Alipay
- 93. • Alipay Attachment
- 94. • Ctrl+Shift+Delete • Cache, History, Form & Password • Flash Cookies, LocalStorage • Firefox Firebug command-line • IE F12 Dev toolbar IE6/7 • Chrome Chrome Dev tool No.7: 2 -.- chapter.Browser
- 96. Above all
- 97. Above all
- 98. Above all http://doc.alipay.net/pages/viewpage.action?pageId=11244965
- 99. Thank u~
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n