SlideShare a Scribd company logo
(   )
(   )


TwinsenLiang
• 94   Netscape

• 95   IE      Netscape   Javascript

• 96   IE3.0               “    ”
• 94   Netscape

• 95   IE      Netscape   Javascript

• 96   IE3.0               “    ”
XHTML XHTML
XHTML XHTML
XHTML XHTML
XHTML XHTML

1.
XHTML XHTML

1.

2.
XHTML XHTML

1.

2.

3.
XHTML XHTML

1.

2.

3.

4.            -_-!
DOM

•                          tag

                   attribute     tag



•

    HashTable[i]

     i     Tag
HTML Tidy
IE8
IE8
SA   IE8
FF   SA   IE8   IE7
FF   SA   OP   IE8   IE7
FF   SA   OP   IE8   IE7
•

• IE
•

• IE
       IE
•                       TOP=TOP+1

       CPU

•                            HTML Tidy



•      Google                    XHTML1.0

    XML                          http://

    www.google.com.hk/m?dc=gbackstop
Introduction to TIDY
When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a
simple way to fix these mistakes automatically and tidy up sloppy editing into
nicely layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free
utility for doing just that. It also works great on the atrociously hard to read
markup generated by specialized HTML editors and conversion tools, and can
help you identify where you need to pay further attention on making your pages
more accessible to people with disabilities.

Tidy is able to fix up a wide range of problems and to bring to your attention
things that you need to work on yourself. Each item found is listed with the line
number and column so that you can see where the problem lies in your markup.
Tidy won't generate a cleaned up version when there are problems that it can't be
sure of how to handle. These are logged as "errors" rather than "warnings".
HTML Tidy
       HTML

                         Dave Raggett

HTML

       XXX



Tidy

                  Tidy

              “   ”      “   ”
1.   XHTML               4      HTML5.0

2.

                     doctype

                       chrome

3.

4.           “   ”
Html Validator
Html Validator
Thanks
  Q&A

More Related Content

Similar to 从浏览器渲染看标准的重要性

Html&Browser
Html&BrowserHtml&Browser
Html&Browser
Alipay
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
RyanTeo35
 
[2010]我有一个梦想
[2010]我有一个梦想[2010]我有一个梦想
[2010]我有一个梦想
Twinsen Liang
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
Ravi Raj
 
Html 5
Html 5Html 5
HTML standards
HTML standardsHTML standards
HTML standards
Sukh Sandhu
 
Html
HtmlHtml
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
Dmitry Bakaleinik
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Brian Moon
 
Top 5 HTML 5 Tools For Web Development
Top 5 HTML 5 Tools For Web Development Top 5 HTML 5 Tools For Web Development
Top 5 HTML 5 Tools For Web Development
MarkupBox
 
LIS3353 SP12 Week 8
LIS3353 SP12 Week 8LIS3353 SP12 Week 8
LIS3353 SP12 Week 8
Amanda Case
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
Ankur Mishra
 
Html5 Primer
Html5 PrimerHtml5 Primer
Html5 Primer
Graeme Bryan
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
Html5 - Tutorial
Html5 - TutorialHtml5 - Tutorial
Html5 - Tutorial
adelaticleanu
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
Jesus Cortes
 
wt mod1.pdf
wt mod1.pdfwt mod1.pdf
wt mod1.pdf
VinayKumarV24
 
web designing course bangalore
web designing course bangaloreweb designing course bangalore
web designing course bangalore
Infocampus Logics Pvt.Ltd.
 
HTML 5
HTML 5HTML 5

Similar to 从浏览器渲染看标准的重要性 (20)

Html&Browser
Html&BrowserHtml&Browser
Html&Browser
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
 
[2010]我有一个梦想
[2010]我有一个梦想[2010]我有一个梦想
[2010]我有一个梦想
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
Html 5
Html 5Html 5
Html 5
 
HTML standards
HTML standardsHTML standards
HTML standards
 
Html
HtmlHtml
Html
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Top 5 HTML 5 Tools For Web Development
Top 5 HTML 5 Tools For Web Development Top 5 HTML 5 Tools For Web Development
Top 5 HTML 5 Tools For Web Development
 
LIS3353 SP12 Week 8
LIS3353 SP12 Week 8LIS3353 SP12 Week 8
LIS3353 SP12 Week 8
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
Html5 Primer
Html5 PrimerHtml5 Primer
Html5 Primer
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Html5 - Tutorial
Html5 - TutorialHtml5 - Tutorial
Html5 - Tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
wt mod1.pdf
wt mod1.pdfwt mod1.pdf
wt mod1.pdf
 
web designing course bangalore
web designing course bangaloreweb designing course bangalore
web designing course bangalore
 
HTML 5
HTML 5HTML 5
HTML 5
 

Recently uploaded

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 

Recently uploaded (20)

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 

从浏览器渲染看标准的重要性

  • 1. ( )
  • 2. ( ) TwinsenLiang
  • 3. • 94 Netscape • 95 IE Netscape Javascript • 96 IE3.0 “ ”
  • 4. • 94 Netscape • 95 IE Netscape Javascript • 96 IE3.0 “ ”
  • 5.
  • 6.
  • 14. DOM • tag attribute tag • HashTable[i] i Tag
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54. IE8
  • 55. IE8
  • 56. SA IE8
  • 57. FF SA IE8 IE7
  • 58. FF SA OP IE8 IE7
  • 59. FF SA OP IE8 IE7
  • 60.
  • 63. TOP=TOP+1 CPU • HTML Tidy • Google XHTML1.0 XML http:// www.google.com.hk/m?dc=gbackstop
  • 64. Introduction to TIDY When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for doing just that. It also works great on the atrociously hard to read markup generated by specialized HTML editors and conversion tools, and can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities. Tidy is able to fix up a wide range of problems and to bring to your attention things that you need to work on yourself. Each item found is listed with the line number and column so that you can see where the problem lies in your markup. Tidy won't generate a cleaned up version when there are problems that it can't be sure of how to handle. These are logged as "errors" rather than "warnings".
  • 65. HTML Tidy HTML Dave Raggett HTML XXX Tidy Tidy “ ” “ ”
  • 66. 1. XHTML 4 HTML5.0 2. doctype chrome 3. 4. “ ”
  • 69.