SlideShare a Scribd company logo

关于 Html5 那点事

•Download as KEY, PDF•
•
Sofish Lin
Sofish Lin

在前端开发组“半月谈”分享会中分享的KeyNote，简单进介绍了HTML5和一些个人的想法。

Technology
1 of 50
HTML
HTML sofish @ Alipay WD Team sofish @ twitter
HTML sofish @ Alipay WD Team sofish @ twitter
HTML 5 sofish @ Alipay WD Team sofish @ twitter
INTRO HTML5
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ...
HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
CSS3 HTML5
CSS3 HTML5
CSS3 HTML5
CSS3 HTML5
Morden Web Browsers 100% <Form />: Opera Rocks IE - All: Drag and Drop IE8: LocalStorage / SessionStorage / PostMsg / Hash Change (event)
Javascript <audio /> in MP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); : http://diveintohtml5.org/everything.html
?
?
?
HTML5
HTML5
HTML5
HTML5 HTML5 <input />
HTML5 HTML5 <input /> &&
HTML5 HTML5 <input /> && <canvas />
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
&& <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
?
? Web Art
? Web Art Utility
? Web Art Utility Powerful ID
? Web Art Utility Powerful ID window.getElementsByClassName = getElementsByClassName || function(c) {   var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)"));   var elements = document.getElementsByTagName('*');   var results = [];   for (var i = 0; i < elements.length; i++) {     if (elements[i].className.match(reg)) { results.push(elements[i]);}   }   return results; };
?
?
sofish @ Alipay WD Team sofish @ twitter http://happinesz.cn 读 HTML5 议 术 http://www.happinesz.cn/archives/1389/ 发组 ? http://www.happinesz.cn/archives/1292/

Recommended

Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
HTML5 and the web of tomorrow!
HTML5 and the web of tomorrow!HTML5 and the web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensiblyChristian Heilmann
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 EssentialsMarc Grabanski
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walkJens-Christian Fischer
 
新 · 交互
新 · 交互新 · 交互
新 · 交互Sofish Lin
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 

Recommended

Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
HTML5 and the web of tomorrow!
HTML5 and the web of tomorrow!HTML5 and the web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensiblyChristian Heilmann
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 EssentialsMarc Grabanski
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walkJens-Christian Fischer
 
新 · 交互
新 · 交互新 · 交互
新 · 交互Sofish Lin
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare InstantSaket Choudhary
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare InstantSaket Choudhary
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3Kevin van Dijk
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Selenium for-ops
Selenium for-opsSelenium for-ops
Selenium for-opsŁukasz Proszek
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Pradeep Varadaraja Banavara
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3Felipe Lavín
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone InteractivityEric Steele
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Filippo Dino
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 

More Related Content

What's hot

jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3Felipe Lavín
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone InteractivityEric Steele
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Filippo Dino
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 

What's hot (20)

jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare Instant
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare Instant
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Selenium for-ops
Selenium for-opsSelenium for-ops
Selenium for-ops
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 

Similar to 关于 Html5 那点事

HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short introjeiseman
 
Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Jim Osowski
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 
HTML5 New and Improved
HTML5 New and ImprovedHTML5 New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 

Similar to 关于 Html5 那点事 (20)

HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Html5
Html5Html5
Html5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short intro
 
HTML5
HTML5HTML5
HTML5
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
HTML5 New and Improved
HTML5 New and ImprovedHTML5 New and Improved
HTML5 New and Improved
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 

Recently uploaded

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 

Recently uploaded (20)

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 

关于 Html5 那点事

  • 2. HTML sofish @ Alipay WD Team sofish @ twitter
  • 3. HTML sofish @ Alipay WD Team sofish @ twitter
  • 4. HTML 5 sofish @ Alipay WD Team sofish @ twitter
  • 6. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 7. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 8. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 9. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 10. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 11. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 12. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 13. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 14. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
  • 15. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ...
  • 16. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
  • 17. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
  • 18. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
  • 19. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
  • 24. Morden Web Browsers 100% <Form />: Opera Rocks IE - All: Drag and Drop IE8: LocalStorage / SessionStorage / PostMsg / Hash Change (event)
  • 25. Javascript <audio /> in MP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); : http://diveintohtml5.org/everything.html
  • 26. ?
  • 27. ?
  • 28. ?
  • 29. HTML5
  • 30. HTML5
  • 31. HTML5
  • 34. HTML5 HTML5 <input /> && <canvas />
  • 35. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 36. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 37. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 38. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 39. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 40. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 41. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
  • 42. ?
  • 44. ? Web Art Utility
  • 45. ? Web Art Utility Powerful ID
  • 46. ? Web Art Utility Powerful ID window.getElementsByClassName = getElementsByClassName || function(c) {   var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)"));   var elements = document.getElementsByTagName('*');   var results = [];   for (var i = 0; i < elements.length; i++) {     if (elements[i].className.match(reg)) { results.push(elements[i]);}   }   return results; };
  • 47.
  • 48. ?
  • 49. ?
  • 50. sofish @ Alipay WD Team sofish @ twitter http://happinesz.cn 读 HTML5 议 术 http://www.happinesz.cn/archives/1389/ 发组 ? http://www.happinesz.cn/archives/1292/

Editor's Notes