Html&Browser

  • 1,776 views
Uploaded on

html tags browser

html tags browser

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,776
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
62
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. HTML Browser zhuowenjun@alipay.com
  • 2. HTML & Browser zhuowenjun@alipay.com
  • 3. chapter.HTML
  • 4. HTML BasicTAGsGraceful HTMLHTML5 chapter.HTML
  • 5. htmlHTML BasicTAGs htmlGraceful HTML htmlHTML5 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 origin1.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 originALL 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. TagsElements 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. semanticaccessibilityefficiency 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. HTML5Web 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.0B2iI12yCmwaoYTBkZWNiMzYtMTIwMC00NTRiLTg1N2QtMWIwYzZiYjI4ZjFmNo.4:
  • 86. No.5: htmlNo.6: html
  • 87. Rumors about BrowserBrowsers Type In AlipayTips for Browser chapter.Browser
  • 88. 2010 1 Internet Explorer Mozilla Firefox Google ChromeSafari 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
  • 95. Above all
  • 96. Above all
  • 97. Above all http://doc.alipay.net/pages/viewpage.action?pageId=11244965
  • 98. Thank u~