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

Web前端开发技术

第一单元网页开发入门对如何制作和设计网页有一个全面的了解，作为一个全局性的认识为下面的学习打下基础。HTML、CSS、JavaScript三者的角色与作用

1.1网页基础知识1.2HTML、CSS、JavaScript三者的角色1.3常用开发工具

网页基础知识1

1.1.1网页与网站网页概念：网页是互联网上展示信息的一种形式。网页又称Web页面，呈现文字、图像、视音频多媒体等网页内容。它会以文本文档的形式存储在Web服务器上，通过Internet传输到浏览器上，并由各种浏览器解析和显示。网页分类：静态网页：内容相对固定不变，没有后台程序的支持，缺乏灵活性，以.html或.htm为扩展名的网页文件。动态网页：内容可根据用户、时间、地点等因素变化而不同，浏览器能与服务器进行交互，动态网页有ASP、JSP、PHP等

1.1.2经典网页赏析网页基本要素：网页标题、网站标志Logo、导航菜单、侧边栏、页眉与页脚以及页面内容尺寸等。网页风格：简明，酷炫，温馨等，一些知名网站也形成了独有的设计风格，如Google风格、FlatUI等。网页布局：“厂”字型、两栏、多栏布局等常见布局结构。网页内容：网站logo、导航栏、页面标题、主要信息内容模块、侧栏模块和网站版权信息底部模块。

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

HTML、CSS、JavaScript三者的角色2

1.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依赖于浏览器，与操作系统无关。因此，只要在有浏览器的计算机上，且浏览器支持JavaScript，就可以对其正确执行。

常用开发工具3

1.3常用开发工具开发工具列表：

THANKYOUFORWATCHING