前端技术开发 高莺.

Presentation on theme: "前端技术开发 高莺."— Presentation transcript:

1 前端技术开发 高莺

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

3 1.1 网页基础知识 1.2 HTML、CSS、JavaScript三者的角色

4 1 网页基础知识

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

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

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

8 2 HTML、CSS、 JavaScript三者的角色

9 1.2 HTML CSS JavaScript 三 者 的 角 色
HTML 指的是超文本标记语言 (Hyper Text Markup Language) CSS ： CSS（Cascading Style Sheet，即“层叠样式表”或“级联样式 表”）是一组格式设通过使用CSS样式设置页面的格式，可将页面的内 容与表现形式分离。 JavaScript： JavaScript是一种脚本语言，可以和HTML语言结合，在HTML中可 以直接编写JavaScript代码

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

11 1.2.1 HTML 与 HTML 5 的 概 念 HTML： HTML5 ：
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML5 ： HTML5是最新一代的HTML标准，对已有版本的改进和完善，增加 了一些特性，性能得到进一步提升。修改了HTML和XHTML的标记，相 关的API、Canvas等，同时HTML5的图像img标记及svg也进行了改进。

12 1.2.2 CSS 与 CSS 3 的 概 念 CSS ： CSS(Cascading Style Sheet)，全称“层叠样式表”或“级联样式表”， 简称样式表。CSS是一种样式标准，定义网页元素样式和页面排版布局。 CSS 3 ： CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的， 增加了许多新特性，使得对网页元素的样式控制更加灵活和细致。如可 设置圆角、渐变和动态等效果。

13 1.2.3 JavaScript 介 绍 JavaScript： JavaScript简称JS，是一种脚本语言，类似Java语言，JS也有定义 变量、方法，同时可以操纵网页中的元素，实现网页的动态效果，增加 网页交互性。 JavaScript的优点： 动态性：它可以直接对用户或客户的输入做出响应，无须经过Web服务 程序。因此，可以实现类似弹出提示框这样的交互性网页功能。它对用 户的响应是以“事件”做驱动的，比如，“单击网页中的按钮”这个事 件可以引发对应的响应。 跨平台性：JavaScript依赖于浏览器，与操作系统无关。因此，只要在有 浏览器的计算机上，且浏览器支持JavaScript，就可以对其正确执行。

14 THANK YOU FOR WATCHING