0
(yunqian@taobao.com)http://www.chencheng.org/
1    HTML      http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
1              2                   HTML    HTML            DOM      http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-...
1              2                3                                       CSS                   HTML    HTML            DOM ...
1              2                3                4                                       CSS                   HTML    HTM...
1              2                3                4               5                                       CSS              ...
1              2                3                4               5                                       CSS              ...
HTML, CSS, JavaScripthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
HTML, CSS, JavaScripthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
HTML, CSS, JavaScript
#content div.box {    position: absolute;    color: red;}
#content div.box {    position: absolute;    color: red;}
#content div.box {    position: absolute;    color: red;}
#content div.box {    position: absolute;    color: red;}
#content div.box {    position: absolute;    color: red;}
•       (           )•   (                   )••   (           )•   (       )
<!--      1 --><link rel=”stylesheet” href=”” /><!--     2 --><style></style>
...
position: fixed
http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
Bug
Bug
Bug•    •
Bug•    ••    •    •    •
Bug•    ••    •    •    ••    •
Bug
Bug•    •
Bug•    ••    •
Bug•    ••    ••    •    •
Bughttp://www.chencheng.org/blog/archives/css-overflow-test-script.html
Bug•    •         Bug    http://www.chencheng.org/blog/archives/css-overflow-test-script.html
Bug•    •         Bug•    •    •    http://www.chencheng.org/blog/archives/css-overflow-test-script.html
Bug•    •         Bug•    •    ••    • Auto Overflow Test    http://www.chencheng.org/blog/archives/css-overflow-test-script...
HTML, CSS, JavaScript
HTML, CSS, JavaScript
JavaScript                   Web                      HTML             Brendan Eich
<!--      1 --><script src=””></script><!--      2 --><script>...</script><!--       3 -->script injection
...
Array.forEach
JS Error• EvalError• RangeError• ReferenceError• SyntaxError• TypeError• URIError
HTML, CSS, JavaScript
Bug      Bug?IE6         Chrome
Bug   Bug?
Bug   Bug?
Bug   Bug?
Bug   Bug?•• Chrome/FF••
Bug   or   ?
Bug   or   ?
Bug                   or   ?• HTML, CSS, JavaScript•
Thanks!
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
面向测试的前端知识
Upcoming SlideShare
Loading in...5
×

面向测试的前端知识

2,130

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,130
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
113
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "面向测试的前端知识"

  1. 1. (yunqian@taobao.com)http://www.chencheng.org/
  2. 2. 1 HTML http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  3. 3. 1 2 HTML HTML DOM http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  4. 4. 1 2 3 CSS HTML HTML DOM http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  5. 5. 1 2 3 4 CSS HTML HTML DOM http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  6. 6. 1 2 3 4 5 CSS HTML HTML DOM http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  7. 7. 1 2 3 4 5 CSS HTML HTML DOM 2.1 JS JS http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html
  8. 8. HTML, CSS, JavaScripthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  9. 9. HTML, CSS, JavaScripthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  10. 10. HTML, CSS, JavaScript
  11. 11. #content div.box { position: absolute; color: red;}
  12. 12. #content div.box { position: absolute; color: red;}
  13. 13. #content div.box { position: absolute; color: red;}
  14. 14. #content div.box { position: absolute; color: red;}
  15. 15. #content div.box { position: absolute; color: red;}
  16. 16. • ( )• ( )•• ( )• ( )
  17. 17. <!-- 1 --><link rel=”stylesheet” href=”” /><!-- 2 --><style></style>
  18. 18. ...
  19. 19. position: fixed
  20. 20. http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
  21. 21. Bug
  22. 22. Bug
  23. 23. Bug• •
  24. 24. Bug• •• • • •
  25. 25. Bug• •• • • •• •
  26. 26. Bug
  27. 27. Bug• •
  28. 28. Bug• •• •
  29. 29. Bug• •• •• • •
  30. 30. Bughttp://www.chencheng.org/blog/archives/css-overflow-test-script.html
  31. 31. Bug• • Bug http://www.chencheng.org/blog/archives/css-overflow-test-script.html
  32. 32. Bug• • Bug• • • http://www.chencheng.org/blog/archives/css-overflow-test-script.html
  33. 33. Bug• • Bug• • •• • Auto Overflow Test http://www.chencheng.org/blog/archives/css-overflow-test-script.html
  34. 34. HTML, CSS, JavaScript
  35. 35. HTML, CSS, JavaScript
  36. 36. JavaScript Web HTML Brendan Eich
  37. 37. <!-- 1 --><script src=””></script><!-- 2 --><script>...</script><!-- 3 -->script injection
  38. 38. ...
  39. 39. Array.forEach
  40. 40. JS Error• EvalError• RangeError• ReferenceError• SyntaxError• TypeError• URIError
  41. 41. HTML, CSS, JavaScript
  42. 42. Bug Bug?IE6 Chrome
  43. 43. Bug Bug?
  44. 44. Bug Bug?
  45. 45. Bug Bug?
  46. 46. Bug Bug?•• Chrome/FF••
  47. 47. Bug or ?
  48. 48. Bug or ?
  49. 49. Bug or ?• HTML, CSS, JavaScript•
  50. 50. Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×