SlideShare uma empresa Scribd logo
1 de 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/

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante a 关于 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 (入門編)博史 高木
 

Semelhante a 关于 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
 

Último

Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 

Último (20)

Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 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/

Notas do Editor