Html&Browser

2,193 views

Published on

html tags browser

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,193
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
67
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html&Browser

    1. 1. HTML Browser zhuowenjun@alipay.com
    2. 2. HTML & Browser zhuowenjun@alipay.com
    3. 3. chapter.HTML
    4. 4. HTML BasicTAGsGraceful HTMLHTML5 chapter.HTML
    5. 5. htmlHTML BasicTAGs htmlGraceful HTML htmlHTML5 html chapter.HTML
    6. 6. HTML.Basic
    7. 7. What is HTML? HTML.Basic
    8. 8. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages. HTML.Basic
    9. 9. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages.HTML’s origin HTML.Basic
    10. 10. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages.HTML’s origin1.0 / 2.0 ... 4.0 / 4.0.1 /xhtml1.0 ... 5 HTML.Basic
    11. 11. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages.HTML’s origin HTML.Basic
    12. 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. 13. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages.HTML’s origin HTML.Basic
    14. 14. What is HTML?Hyper Text Markup Language —— The basic building-blocks of webpages.HTML’s originALL u should know is 5 coming HTML.Basic
    15. 15. HTML.Basic
    16. 16. The structure of an HTML document HTML.Basic
    17. 17. The structure of an HTML document HTML.Basic
    18. 18. HTML.Basic
    19. 19. 1. <!Doctype> HTML.Basic
    20. 20. 1. <!Doctype><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML.Basic
    21. 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. 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. 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. 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. 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. 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. 27. HTML.Tags
    28. 28. Tags HTML.Tags
    29. 29. TagsElements are not tags. HTML.Tags
    30. 30. Tags Elements are not tags.- < “ ” “ ”……> …… < >- *- tag- *- id- html entities https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg&hl=en_US HTML.Tags
    31. 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. 32. <head>• <title> HTML.Tags
    33. 33. <head>• <title> HTML.Tags
    34. 34. <head>• <title> HTML.Tags
    35. 35. <head>• <title> <meta> HTML.Tags
    36. 36. <head>• <title> <meta>• <meta charset="gbk" /> <meta charset="gb2312">• <meta http-equiv="x-ua-compatible" content="ie=7" /> HTML.Tags
    37. 37. HTML.Tags
    38. 38. <a><img> HTML.Tags
    39. 39. <a>• href a:hover• accesskey• focus<img> HTML.Tags
    40. 40. <a>• href a:hover• accesskey• focus<img>• alt• src• png jpg gif• width & height HTML.Tags
    41. 41. <a>• href a:hover• accesskey• focus<img>• alt• src• png jpg gif• width & height No.3 width & height HTML.Tags
    42. 42. HTML.Tags
    43. 43. <ul> <ol> <dl> <li><menu><pre> & <code> HTML.Tags
    44. 44. <ul> <ol> <dl> <li><menu>•• ul, ol li menu<pre> & <code> HTML.Tags
    45. 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. 46. HTML.Tags
    47. 47. <cite> <q> <blockquote><em> & <strong><small> HTML.Tags
    48. 48. <cite> <q> <blockquote>• <cite> </cite> :<q> ...</q>• blockquote<em> & <strong><small> HTML.Tags
    49. 49. <cite> <q> <blockquote>• <cite> </cite> :<q> ...</q>• blockquote<em> & <strong>•<small> HTML.Tags
    50. 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. 51. HTML.Tags
    52. 52. <hr><br> HTML.Tags
    53. 53. <hr>•• hr http://sofish.de/1328<br> HTML.Tags
    54. 54. <hr>•• hr http://sofish.de/1328<br>•• br• css padding margin br HTML.Tags
    55. 55. HTML.Tags
    56. 56. <table><form> HTML.Tags
    57. 57. <table>• table table• <thead> <tfoot> <tbody>• table summary• <th> scope<form> HTML.Tags
    58. 58. <table>• table table• <thead> <tfoot> <tbody>• table summary• <th> scope<form>• form• form > fieldset• form type=”submit” input• a onclick HTML.Tags
    59. 59. HTML.Tags
    60. 60. <input><label> HTML.Tags
    61. 61. <input>• input tabindex• input accesskey• label• input type<label> HTML.Tags
    62. 62. <input>• input tabindex• input accesskey• label• input type<label>•• for HTML.Tags
    63. 63. HTML.Tags
    64. 64. <iframe>< !-- here is comment --> HTML.Tags
    65. 65. <iframe>• iframe• frame iframe img embed src• @alipay src https <iframe src="javascript:;"></iframe>< !-- here is comment --> HTML.Tags
    66. 66. <iframe>• iframe• frame iframe img embed src• @alipay src https <iframe src="javascript:;"></iframe>< !-- here is comment -->• id class• HTML.Tags
    67. 67. HTML.Tags
    68. 68. <div> HTML.Tags
    69. 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. 70. HTML.Tags
    71. 71. HTML.Tags
    72. 72. • <font> <s> <strike> <tt> <u> <basefont> <big> <center> HTML.Tags
    73. 73. • <font> <s> <strike> <tt> <u> <basefont> <big> <center>• <frame> <frameset><noframes> HTML.Tags
    74. 74. • <font> <s> <strike> <tt> <u> <basefont> <big> <center>• <frame> <frameset><noframes>• <acronym> <applet> <isindex> <dir> HTML.Tags
    75. 75. semanticaccessibilityefficiency Graceful.HTML
    76. 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. 77. accessibility - dom - label - tabindex - input type - title - alt Graceful.HTML
    78. 78. efficiency <hgroup>       <h1>Big Smile</h1> - web </hgroup> - - ... No.3 HTML 3 Graceful.HTML
    79. 79. HTML5Web Development to the next level. • What html5 • Why html5? • How html5?
    80. 80. What HTML5? HTML5 ~= HTML + CSS + JS • • • Javascript API • CSS3
    81. 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. 82. How html5?• Flash Google features first HTML 5 canvas doodle alipay doodle
    83. 83. How html5?• Form field types on mobile• Forms change Alipay
    84. 84. More about html5• https://docs.google.com/#folders/folder.0.0B2iI12yCmwaoYTBkZWNiMzYtMTIwMC00NTRiLTg1N2QtMWIwYzZiYjI4ZjFm
    85. 85. More about html5• https://docs.google.com/#folders/folder.0.0B2iI12yCmwaoYTBkZWNiMzYtMTIwMC00NTRiLTg1N2QtMWIwYzZiYjI4ZjFmNo.4:
    86. 86. No.5: htmlNo.6: html
    87. 87. Rumors about BrowserBrowsers Type In AlipayTips for Browser chapter.Browser
    88. 88. 2010 1 Internet Explorer Mozilla Firefox Google ChromeSafari Opera Opera chapter.Browser
    89. 89. • Trident• Gecko W3C• Webkit chapter.Browser
    90. 90. • Internet Explorer• 360• Chrome• Firefox• Sougou• Maxthon chapter.Browser
    91. 91. -• IE 9 - unknown/Chakra• Chrome - V8• Firefox - TraceMonkey/JägerMonkey• Safari - Nitro• Opera - Carakan chapter.Browser
    92. 92. • Alipay
    93. 93. • Alipay Attachment
    94. 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
    95. 95. Above all
    96. 96. Above all
    97. 97. Above all http://doc.alipay.net/pages/viewpage.action?pageId=11244965
    98. 98. Thank u~

    ×