1. (yunqian@taobao.com)
http://www.chencheng.org/

2. 1
HTML
http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

3. 1 2
HTML
HTML DOM
http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

4. 1 2 3
CSS
HTML
HTML DOM
http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

5. 1 2 3 4
CSS
HTML
HTML DOM
http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

6. 1 2 3 4 5
CSS
HTML
HTML DOM
http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

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. HTML, CSS, JavaScript
http://www.alistapart.com/articles/understandingprogressiveenhancement/

9. HTML, CSS, JavaScript
http://www.alistapart.com/articles/understandingprogressiveenhancement/

12. HTML, CSS, JavaScript

13. #content div.box {
position: absolute;
color: red;
}

14. #content div.box {
position: absolute;
color: red;
}

15. #content div.box {
position: absolute;
color: red;
}

16. #content div.box {
position: absolute;
color: red;
}

17. #content div.box {
position: absolute;
color: red;
}

18. • ( )
• ( )
•
• ( )
• ( )

19. <!-- 1 -->
<link rel=”stylesheet” href=”” />
<!-- 2 -->
<style></style>

20. ...

24. position: fixed

25. http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html

26. Bug

28. Bug

29. Bug
•
•

30. Bug
•
•
•
•
•
•

31. Bug
•
•
•
•
•
•
•
•

33. Bug

34. Bug
•
•

35. Bug
•
•
•
•

36. Bug
•
•
•
•
•
•
•

38. Bug
http://www.chencheng.org/blog/archives/css-overflow-test-script.html

39. Bug
•
•
Bug
http://www.chencheng.org/blog/archives/css-overflow-test-script.html

40. Bug
•
•
Bug
•
•
•
http://www.chencheng.org/blog/archives/css-overflow-test-script.html

41. Bug
•
•
Bug
•
•
•
•
• Auto Overflow Test
http://www.chencheng.org/blog/archives/css-overflow-test-script.html

43. HTML, CSS, JavaScript

44. HTML, CSS, JavaScript

45. JavaScript Web
HTML
Brendan Eich

46. <!-- 1 -->
<script src=””></script>
<!-- 2 -->
<script>...</script>
<!-- 3 -->
script injection

47. ...

48. Array.forEach

49. JS Error
• EvalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

55. HTML, CSS, JavaScript

57. Bug Bug?
IE6 Chrome

58. Bug Bug?

59. Bug Bug?

60. Bug Bug?

61. Bug Bug?
•
• Chrome/FF
•
•

62. Bug or ?

63. Bug or ?

64. Bug or ?
• HTML, CSS, JavaScript
•

65. Thanks!