Web前端技术开发（HTML5+CSS3+JavaScript）课件 第一单元 网页开发入门

Web前端开发技术第一单元网页开发入门对如何制作和设计网页有一个全面的了解，作为一个全局性的认识为下面的学习打下基础。HTML、CSS、JavaScript三者的角色与作用1.1网页基础知识1.2HTML、CSS、JavaScript三者的角色1.3常用开发工具网页基础知识11.1.1网页与网站网页概念：

网页是互联网上展示信息的一种形式。网页又称Web页面，呈现文字、图像、视音频多媒体等网页内容。它会以文本文档的形式存储在Web服务器上，通过Internet传输到浏览器上，并由各种浏览器解析和显示。网页分类：

静态网页：内容相对固定不变，没有后台程序的支持，缺乏灵活性，以.html或.htm为扩展名的网页文件。

动态网页：内容可根据用户、时间、地点等因素变化而不同，浏览器能与服务器进行交互，动态网页有ASP、JSP、PHP等1.1.2经典网页赏析网页基本要素：

网页标题、网站标志Logo、导航菜单、侧边栏、页眉与页脚以及页面内容尺寸等。网页风格：

简明，酷炫，温馨等，一些知名网站也形成了独有的设计风格，如Google风格、FlatUI等。网页布局：

“厂”字型、两栏、多栏布局等常见布局结构。网页内容：

网站logo、导航栏、页面标题、主要信息内容模块、侧栏模块和网站版权信息底部模块。1.1.3浏览器的兼容性问题兼容性定义：

各种浏览器由不同公司开发，使用的浏览器内核不一样，就会对网页的解析处理的方式不同，同一张网页会有不同的显示效果，就是我们网页开发人员要考虑的浏览器兼容性问题。主流浏览器：

HTML、CSS、JavaScript三者的角色21.2HTMLCSSJavaScript三者的角色HTML：

HTML指的是超文本标记语言(HyperTextMarkupLanguage)CSS：CSS（CascadingStyleSheet，即“层叠样式表”或“级联样式表”）是一组格式设通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。JavaScript：

JavaScript是一种脚本语言，可以和HTML语言结合，在HTML中可以直接编写JavaScript代码1.2HTMLCSSJavaScript三者的角色三者关系：

本书主要关注在静态网页的制作上面，静态网页的制作离不开这3类代码：HTML、CSS、JavaScript，这三者相辅相成，发挥着不同的作用。1.2.1HTML与HTML5的概念HTML：

HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML5：HTML5是最新一代的HTML标准，对已有版本的改进和完善，增加了一些特性，性能得到进一步提升。修改了HTML和XHTML的标记，相关的API、Canvas等，同时HTML5的图像img标记及svg也进行了改进。1.2.2CSS与CSS3的概念CSS：CSS(CascadingStyleSheet)，全称“层叠样式表”或“级联样式表”，简称样式表。CSS是一种样式标准，定义网页元素样式和页面排版布局。CSS3：CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，增加了许多新特性，使得对网页元素的样式控制更加灵活和细致。如可设置圆角、渐变和动态等效果。1.2.3JavaScript介绍JavaScript：

JavaScript简称JS，是一种脚本语言，类似Java语言，JS也有定义变量、方法，同时可以操纵网页中的元素，实现网页的动态效果，增加网页交互性。

JavaScript的优点：动态性：它可以直接对用户或客户的输入做出响应，无须经过Web服务程序。因此，可以实现类似弹出提示框这样的交互性网页功能。它对用户的响应是以“事件”做驱动的，比如，“单击网页中的按钮”这个事件可以引发对应的响应。跨平台性：JavaScript依赖于浏览器，与操作系统无关。因此，只要在有浏览器的计算机上，且浏览器支持JavaSc