The document discusses the basic technologies used by web browsers to render web pages, including HTML, CSS, DOM, and JavaScript. It covers how browsers parse HTML documents to create the DOM tree and then apply CSS stylesheets and JavaScript code to render and interactive the page.

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!