01_web概述
合集下载
Web基础知识
2）客户端动态技术3
插件技术（1996年）
1996年的Netscape 2.0引入了对QuickTime插件的支持，在 HTML页面中实现音频、视频等多媒体应用，插件这种开发 方式也迅速风靡了浏览器的世界。 1996年，IE 3.0正式支持在HTML页面中插入ActiveX控件的 功能 1999年，RealPlayer插件先后在Netscape和IE浏览器中取 得了成功 1996年，Macromedia公司收购了FutureWave，并将Jonatha n Gay的发明改名为我们熟悉的Flash。从此，Flash动画成 了Web开发者表现自我、展示个性的最佳方式。
16
1.1 Web基本概念—12.Web开发技术概述
1）静态页面时代
从Web架构的技术层面，其特点主要有3：
用超文本技术（HTML）实现信息与信息的连接； 用统一资源定位技术（URL）实现全球信息的精确定位； 用新的应用层协议（HTTP）实现分布式的信息共享。
这一时期的Web设计更像是平面设计，而不是程 序设计。这样设计出来的页面，只能呈现静态的 文本和图像，无法提供满足用户需求的交互模式， 也无法展示动态的信息。 第2章将重点介绍静态页面设计技术
返回的HTML文档（包含嵌入的程序代码）
客户机
服务器 24
1.1 Web基本概念—13.Web开发工具
网页设计工具
1. FrontPage 2. Dreamweaver MX 3. Fireworks MX 4. Flash MX 5. Visual Studio 2005 /2008 6. 记事本/Word等
Web服务器向浏览器提供服务的步骤 ： 1、用户打开计算机（客户机），启动浏览器程序，在浏览器中指定一个 URL，浏览器便向该URL所指向的Web服务器发出请求。 2、Web服务器接到浏览器请求后，把URL转换成页面所在服务器上的文 件路径名。 3、如果URL指向的是普通的HTML文档，Web服务器直接将它送给浏览 器。 4、如果HTML文档中嵌有ASP或CGI程序Web服务器就运行ASP或CGI程 序，并将结果传送至浏览器
插件技术（1996年）
1996年的Netscape 2.0引入了对QuickTime插件的支持，在 HTML页面中实现音频、视频等多媒体应用，插件这种开发 方式也迅速风靡了浏览器的世界。 1996年，IE 3.0正式支持在HTML页面中插入ActiveX控件的 功能 1999年，RealPlayer插件先后在Netscape和IE浏览器中取 得了成功 1996年，Macromedia公司收购了FutureWave，并将Jonatha n Gay的发明改名为我们熟悉的Flash。从此，Flash动画成 了Web开发者表现自我、展示个性的最佳方式。
16
1.1 Web基本概念—12.Web开发技术概述
1）静态页面时代
从Web架构的技术层面，其特点主要有3：
用超文本技术（HTML）实现信息与信息的连接； 用统一资源定位技术（URL）实现全球信息的精确定位； 用新的应用层协议（HTTP）实现分布式的信息共享。
这一时期的Web设计更像是平面设计，而不是程 序设计。这样设计出来的页面，只能呈现静态的 文本和图像，无法提供满足用户需求的交互模式， 也无法展示动态的信息。 第2章将重点介绍静态页面设计技术
返回的HTML文档（包含嵌入的程序代码）
客户机
服务器 24
1.1 Web基本概念—13.Web开发工具
网页设计工具
1. FrontPage 2. Dreamweaver MX 3. Fireworks MX 4. Flash MX 5. Visual Studio 2005 /2008 6. 记事本/Word等
Web服务器向浏览器提供服务的步骤 ： 1、用户打开计算机（客户机），启动浏览器程序，在浏览器中指定一个 URL，浏览器便向该URL所指向的Web服务器发出请求。 2、Web服务器接到浏览器请求后，把URL转换成页面所在服务器上的文 件路径名。 3、如果URL指向的是普通的HTML文档，Web服务器直接将它送给浏览 器。 4、如果HTML文档中嵌有ASP或CGI程序Web服务器就运行ASP或CGI程 序，并将结果传送至浏览器
常用网络服务及其配置
邮件服务器需要设置合理的安全策略和转 发规则，以确保邮件传输的安全性和可靠 性。同时需要定期清理垃圾邮件和病毒邮 件，以保持邮件系统的健康运行。
05
总结和展望
总结
常用网络服务
本文介绍了常用网络服务的配置和管理，包括DNS、FTP、SMTP、POP3等， 这些服务在网络中扮演着重要的角色，对于保障网络的正常运行和高效运作至 关重要。
安全性挑战
网络安全问题一直是网络服务面临的重要挑战之一。未来，我们需要更加重视网络安全，并采取更加 有效的措施来保护网络服务和数据的安全。
云计算和虚拟化
云计算和虚拟化技术的快速发展和应用，将为网络服务带来更多的机遇和挑战。我们需要不断学习和 掌握新技术，以适应不断变化的市场需求和技术环境。
THANKS
02 03
配置示例
在Linux系统中，可以使用BIND软件包进行DNS服务器的配置。首先安 装bind软件包，然后编辑主配置文件/etc/named.conf，添加区域定义 和转发设置。最后启动named服务即可。
注意事项
DNS服务器需要保持稳定运行，并定期更新DNS记录，以保持域名解 析的准确性。
注意事项
FTP服务器需要设置合理的用户 权限和数据传输模式，以确保文 件传输的安全性和稳定性。
Web服务配置示例
总结词
Web服务用于发布网页信息，是互联网中最常见的应用之一。
配置示例
在Linux系统中，可以使用Apache软件包进行Web服务器的配置。首先安装软件包并编辑主配置文件 /etc/httpd/conf/httpd.conf，设置虚拟主机和网页目录等参数。然后启动httpd服务即可。
邮件服务配置
邮件服务器软件选择
HTML5移动Web开发任务教程 第1章 移动Web开发概述
01 移动web开发基本概念
移动端会支持触屏、滑动、缩放、放大等手势操作。
移动Web浏览器受到屏幕尺寸的限制，所以移动端网站的设计会将本站最核心的产品进行展示，菜单栏也会缩进一个汉堡菜单中。
PC端硬件配置相对强大，各种浏览器对硬件的要求已经无需太多的限定。而手机的性能相对于PC端要低的多，内置的浏览器就需要考虑硬件因素。所以移动Web浏览器功能相对有限。但是随着手机的硬件设备不断加强，移动Web浏览器支持的功能也随着越来越多。
移动Web开发即针对移动端的Web页面的开发，它与PC端Web开发有什么区别？
移动Web开发简介
01 移动web开发基本概念
PCWeb开发
移动Web开发
移动端Web开发与PC端Web开发所用的技术类似，开发项目的呈现是依赖于移动端Web浏览器。在移动Web开发中，需要注意的有两点。 （1）由于屏幕大小的限制，在移动Web开发中，要注意由于页面的结构不能过于繁琐，要提炼出该网站最为核心的功能，简洁清晰的呈现出来。 （2）对于页面的一切交互活动由鼠标控制变成了手指触屏控制，所以在移动Web开发时，会增加一些触屏事件。
移动Web开发概述
01
移动Web开发简介
移动Web开发概述
02
移动Web开发技术
03
开发工具HBuilder的使用
01
移动Web（移动网页）:在移动端Web 浏览器中运行的Web 应用。
Native App（原生应用）：用Objective-C 等原生语言开发的移动应用。
02
Hybrid App（混合应用）：将移动Web 页面封装在原生外壳中，以App 的形式与用户交互。
移动Web开发简介
01 移动web开发基本概念
移动端会支持触屏、滑动、缩放、放大等手势操作。
移动Web浏览器受到屏幕尺寸的限制，所以移动端网站的设计会将本站最核心的产品进行展示，菜单栏也会缩进一个汉堡菜单中。
PC端硬件配置相对强大，各种浏览器对硬件的要求已经无需太多的限定。而手机的性能相对于PC端要低的多，内置的浏览器就需要考虑硬件因素。所以移动Web浏览器功能相对有限。但是随着手机的硬件设备不断加强，移动Web浏览器支持的功能也随着越来越多。
移动Web开发即针对移动端的Web页面的开发，它与PC端Web开发有什么区别？
移动Web开发简介
01 移动web开发基本概念
PCWeb开发
移动Web开发
移动端Web开发与PC端Web开发所用的技术类似，开发项目的呈现是依赖于移动端Web浏览器。在移动Web开发中，需要注意的有两点。 （1）由于屏幕大小的限制，在移动Web开发中，要注意由于页面的结构不能过于繁琐，要提炼出该网站最为核心的功能，简洁清晰的呈现出来。 （2）对于页面的一切交互活动由鼠标控制变成了手指触屏控制，所以在移动Web开发时，会增加一些触屏事件。
移动Web开发概述
01
移动Web开发简介
移动Web开发概述
02
移动Web开发技术
03
开发工具HBuilder的使用
01
移动Web（移动网页）:在移动端Web 浏览器中运行的Web 应用。
Native App（原生应用）：用Objective-C 等原生语言开发的移动应用。
02
Hybrid App（混合应用）：将移动Web 页面封装在原生外壳中，以App 的形式与用户交互。
移动Web开发简介
01 移动web开发基本概念
网页设计与制作- 第01章_网页设计概述
14
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。
Web工作原理
Web工作原理Web（World Wide Web）是指全球范围内的互联网服务系统，它是一种基于HTTP（Hypertext Transfer Protocol）协议的网络服务。
Web工作原理是指Web系统是如何运作的，包括Web服务器、客户端和网络之间的交互过程。
下面将详细介绍Web工作原理的各个方面。
一、Web服务器Web服务器是指提供Web服务的计算机软件或者硬件设备。
它接收来自客户端的HTTP请求，并将相应的Web页面或者资源发送给客户端。
常见的Web服务器软件有Apache、Nginx、IIS等。
1.1 HTTP协议HTTP协议是Web服务器与客户端之间进行通信的协议。
它使用TCP/IP协议进行数据传输，通过请求-响应的方式进行交互。
HTTP协议定义了客户端发送请求的格式和服务器返回响应的格式。
1.2 请求过程客户端向Web服务器发送HTTP请求时，请求的内容包括请求行、请求头和请求体。
请求行包括请求方法（GET、POST等）、请求的URL（Uniform Resource Locator）和HTTP协议的版本。
请求头包含了一些附加的信息，如请求的主机、用户代理、Cookie等。
请求体包含了一些需要传输给服务器的数据，如表单数据。
1.3 响应过程Web服务器接收到客户端的HTTP请求后，根据请求的内容进行处理，并生成相应的HTTP响应。
响应的内容包括响应行、响应头和响应体。
响应行包括HTTP 协议的版本、状态码和状态消息。
响应头包含了一些附加的信息，如响应的日期、内容类型、长度等。
响应体包含了服务器返回给客户端的数据，如HTML页面、图片、视频等。
二、客户端客户端是指访问Web服务器并获取Web页面或者资源的设备或者软件。
常见的Web客户端有浏览器（如Chrome、Firefox、Safari等）和挪移应用程序。
2.1 URL解析客户端通过URL来指定需要访问的Web页面或者资源。
URL由协议、主机名、端口号、路径和查询参数等组成。
第1章 网站与网页概述
• 对于静态网页HTML或XML，服务器直接返
回给客户。
• 对于动态网页ASP或JSP ， Web服务器则与数
据库服务器建立连接 ,运行脚本程序，最后生 成新的、包含动态数据的HTML或XML文档 返回客户端浏览器 。
1.1.2 Web的工作原理
图1-1 Web的工作原理
XML为可扩展标记语言，它与HTML一样都是标准通 用标记语言。
为美工设计人员提供了广阔的创意空间，
• Photoshop广泛应用于网页图像编辑、桌面出版、广
告设计、婚纱摄影等各行各业，成为许多涉及图像处 理的行业的事实标准。
小结
•
本章介绍网站与网页的相关概念和基础知识， 重点讲解网站建立的方法和管理技术，分析网站 设计要则及建站前的准备工作。设计者需要具备 一定的网络基础知识、掌握各种多媒体处理技术， 才能从容地应对开发过程中遇到的各种问题。
/k/2011-06-01/10055601835.shtml
1.1.4 静态网页与动态网页
• 动态网页中除了普通网页中的元素外，还包括一些
应用程序，这些应用程序使浏览器与Web服务器之 间发生交互行为，而且应用程序的执行需要应用程 序服务器框架 第6章：AP Div 第7章：表单
•
• •
第1章 网站与网页概述
学习目标：
• 了解Internet、Web、网站、网页的基本概念 • 了解网站、网页与主页之间的相互关系 • 掌握网站建立及管理方法 • 了解网站的开发设计应遵循的基本原则 • 了解网页设计的常用工具软件
1.1网站与网页基础知识
Internet是世界上覆盖面最广、规模最大、信息 资源最丰富的计算机网络。
•
Internet提供了许多受大众欢迎的服务，包括：
HTML5基础与实践教程
目录分析
浏览器
1.1 Web概述
1.3思考题
2.1 HTML 5简介 2.2 HTML 5特性
2.3 HTML 5基本概 念
2.4 CSS 3入门
2.5 JavaScript入
门
2.6思考题
3.1开发环境与工具 3.2浏览器调试
3.3代码规范 3.4思考题
1
4.1表单控件
2
4.2语义化标 签
3
4.3媒体标签
4
4.4文件标签
5
4.5思考题
5.2本地数据库
5.1 Web Storage
5.3思考题
6.1 Canvas画 布
6.2通信
6.3 Web Worker线程
6.4思考题
7.1 2048游戏 7.2教务管理系统
7.3贪吃蛇游戏 7.4思考题
作者介绍
这是《HTML5基础与实践教程》的读书笔记模板，暂无该书作者的介绍。
读书笔记
这是《HTML5基础与实践教程》的读书笔记模板，可以替换为自己的心得。
精彩摘录
这是《HTML5基础与实践教程》的读书笔记模板，可以替换为自己的精彩内容摘录。
感谢观看
HTML5基础与实践教程
读书笔记模板
01 思维导图
03 目录分析 05 读书笔记
目录
02 内容摘要 04 作者介绍 06 精彩摘录
思维导图
本书关键字分析思维导图
特性
浏览器
管理
全书
教务
第章
游戏
基础
知识
游戏 浏览器
工具
实践
标签
实战
系统 蛇
控件
数据库
内容摘要
《HTML5基础与实践教程》主要介绍了HTML 5相关的知识。全书共7章，对HTML 5进行细致讲解，包括：Web 的发展历程和特性，以及浏览器的知识；HTML 5，CSS和JavaScript的基础知识；代码编辑器、浏览器调试和代 码规范；HTML 5的相关特性。第7章讲解了3个HTML 5实战开发案例，分别是2048游戏、教务管理系统和贪吃蛇 游戏，通过这3个例子，帮助读者掌握HTML 5综合实战开发的技巧。
01 web01
<meta http-equiv=―refresh‖ content=―5;URL= .cn‖> 用来自动刷新网页
2013-8-7
练习
编写一个网页，要求8秒钟后自动跳转到新东方电脑部的网站。 <html> <head> <title>my first page</title> <meta http-equiv=―refresh‖ content=―8;URL=‖> </head> <body> <p align=―center‖>八秒钟后本网页将自动跳转到新东 方电脑部的首页</p> </body> </html>
2013-8-7
文字标签属性——1
字体标记
1.字体颜色 指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码 2.设定字体 <font face=―#, #, ..., #‖> ... </font> #=客户端可获得的字体 3.字体大小 <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# 4.标题字体 <h#> ... </h#> #=1, 2, 3, 4, 5, 6
用来标记搜索引擎在搜索你的页面时所取出的关键 词。
2013-8-7
HTML基本结构的 有关元素和元素属性
HEAD元素——3 <meta>元素
<meta name="author" content=―jenny"> 用来标记文档的作者。
2013-8-7
练习
编写一个网页，要求8秒钟后自动跳转到新东方电脑部的网站。 <html> <head> <title>my first page</title> <meta http-equiv=―refresh‖ content=―8;URL=‖> </head> <body> <p align=―center‖>八秒钟后本网页将自动跳转到新东 方电脑部的首页</p> </body> </html>
2013-8-7
文字标签属性——1
字体标记
1.字体颜色 指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码 2.设定字体 <font face=―#, #, ..., #‖> ... </font> #=客户端可获得的字体 3.字体大小 <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# 4.标题字体 <h#> ... </h#> #=1, 2, 3, 4, 5, 6
用来标记搜索引擎在搜索你的页面时所取出的关键 词。
2013-8-7
HTML基本结构的 有关元素和元素属性
HEAD元素——3 <meta>元素
<meta name="author" content=―jenny"> 用来标记文档的作者。
第1章Web应用基础
客户端动态WEB页面
❖ 动态地改变网页的内容，为不同用户提供 个性化的服务。
客户端的动态Web页面工作原理
Web服务器 3、Web服务器定位HTML文件和指令文件
1、作者编写 的网页文件
4、HTML和指令被返回到浏览器
2、客户请求网页
5、浏览器处理 指令并将指令 转换为HTML
6、浏览器处理HTML
例如： <body bgcolor="silver" text="blue" link= "red " >
常用HTML标记符及其功能
❖ <head>…</head>：首部标记符，不包含网页 的内容，仅提供一些与网页相关的信息。
❖ <body>…</body>：主体标记符，包含网页内 的所有内容，如文字、图片及超链接等。
DB2
调用 JavaBean J2EE/EJB
调用
DLL
XML
的历史
❖ ASP（Active Server Pages），是Microsfot公司 1996年11月推出的WEB应用程序开发技术，它既 不是一种程序语言，也不是一种开发工具，而是一 种技术框架。因其简单的语法和嵌入HTML的编辑 方法在很短的时间内便取得了巨大的成功，成为 Windows平台上Web开发技术的霸主，在当时地 位难以动摇。此外，它可通过ActiveX等组件技术 实现更强大的功能，如使用ADO可以轻松地访问 数据库。
提供了一个新的 ListView 数据控件，该控件可用于显示数据， 还可提供具有高度可自定义性的用户界面。
提供了一个新的 LinqDataSource 控件，该控件通过 数据源控件结构公开语言集成查询 (LINQ)。
web前端PPT课件
2023
PART 06
Web前端最佳实践
REPORTING
响应式设计
响应式设计
是指网页能够自适应不同设备和屏幕大小，提供良好的用户体验 。
设计原则
使用流式布局、媒体查询、弹性布局等实现自适应设计。
响应式图片
使用srcset属性为不同设备提供不同分辨率的图片。
性能优化
减少HTTP请求
合并和压缩CSS、JS文件，使用CDN加速资源 加载。
2023
PART 02
HTML基础
REPORTING
HTML简介
HTML是HyperText Markup Language的缩写，即超文本标记语言，是 用于创建网页的标准标记语言。
HTML定义了网页内容的结构和语义，使得网页能够被浏览器正确解析和 显示。
HTML由一系列的标签组成，用于描述网页中的各种元素，如标题、段落 、链接、图片等。
CSS能够分离文档内容（用HTML或XML编写） 与文档表现（如布局、颜色、字体等），使内容 与表现分离。
CSS选择器
类选择器
通过类属性选择元 素。
属性选择器
根据元素的属性选 择元素。
元素选择器
根据HTML元素名 称选择元素。
ID选择器
通过ID属性选择元 素。
伪类选择器
用于选择元素的特 定状态，如:hover 、:active等。
职责
Web前端工程师的职责包括HTML、 CSS和JavaScript等前端技术的开发、 页面布局和设计、响应式设计、性能 优化等方面。
Web前端的重要性
用户体验
良好的Web前端设计能够提供优 秀的用户体验，提高用户对网站 的信任度和满意度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Head - Meta元素
META标签分两大部分： HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME) HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些 有用的信息，以帮助正确和精确地显示网页内容 ,响应报 头信息，如页面编码、缓存模式等等. NAME 定义页面基本信息，这些信息是提供给网络搜索引 擎的，搜索引擎通过这些信息可以找到页面
浏览器访问网页文件的方式
http协议
网页文件
网页文件
www服务器
本地存储系统（硬盘）
Html 规范与版本
不同浏览器之间的不兼容问题
从软件开发角度：多个公司开发了浏览器软件，根据网页中的标 签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示 效果标签，导致不兼容
规范的制定
IETF 制定 Html 2.0 W3C 组织 3W联盟
X-AspNet-Version: 2.0.50727 X-Powered-By: Date: Mon, 25 May 2009 03:20:02 GMT Content-Length: 12173 消息体的内容（略）
HTML超文本标记语言
Html（超文本标记语言）
定义：为网页创建和其它可在网页浏览器中看到的信息设计 的一种标记语言
什么是标签及其属性?
如何创建超级链接?
Internet和万维网(www)
什么是Internet?
Internet的历史 定义 -- 连接网络的网络 TCP/IP(传输控制协议/Internet协议)，一种能保证计算机之间进 行通信的标准规范
Internet和万维网(www)
万维网(world wide web)
<script language="javascript" src="script/xxxxx.js"></script>
<title>xxxxxxxxxxxxx</title> <meta http-equiv="content-type" content="text/html; charset=gb2312“>
正在使用的Html的版本
Html 4.01 XHTML HTML 5 最新版
网页 与 网站
什么是网页?
定义：构成网站的基本元素 格式：分为静态网页和动态网页
静态网页文件扩展名为.html或.htm
动态网页文件扩展名为.jsp或.aspx .asp .php等
什么是网站?
</body>
</html>
Html的全局架构标签
<html> <head>
网页的头部 <html>
……
……
结构：<head>„</head> </head> <head> 内容：<title>, <meta>, CSS, Javascript <body>
</head> <body> …… </body>
网 页 编 程
第一章 web概述
自我介绍
中文名：祝勇军 English Name：Apple Email：zhuyongjun@ 中软国际--高级项目经理
项目经验：9年 项目类型：MIS系统、行业网站、模式识别、安全软件、游戏 熟悉语言： Web前端、Java、C++/C、C#、汇编、 Python、 Lua等 操作系统：windows、Android、linux、MacOS 兴趣爱好：羽毛球
十六进制RGB颜色码，使用一个#号后跟六位十六进制数据，例如 #FF0000 Html的颜色常量名，例如’red’
属性 background 设置网页文档的背景图片 属性 text 设置网页中文字的颜色 属性 leftmargin 设置网页中的内容到左边距之间的距离 属性 topmargin 设置网页中的内容到上边距之间的距离
…
网页的主体
<head> 结构：<body>„</body> … </html> …… <title> 欢迎来到中软国际 ETC</title> 内容：包含网页中显示的文本、图像和链接等 <body>
<Meta http-equiv=“keywords” content=“中软，培训，软件工程师”> … </body> <style> ……. </style> </html> <img src=“welcome.jpg”> <script> ……. </script> <a href=“index.html”> 欢迎来到ETC</a> </head> … … </body> …
是一个基于超文本（Hypertext ）方式的信息检索服务工具。 万维网提供这样一种友好的信息查询接口：用户仅需提出查询要 求，而到什么地方查询及如何查询则由万维网自动完成。
超文本开发语言HTML 信息资源的统一定位格式URL 超文本传送通信协议HTTP
Internet和万维网(www)
超文本传输协议HTTP
标签及其属性
示例
<meta name=“descript" content="xxxxxxxxxxxxxxxxx“> <meta name="keywords" content="xxxx,xxxx,xxx,xxxxx,xxxx"> <link href="style/style.css" rel="stylesheet" type="text/css">
课程体系ቤተ መጻሕፍቲ ባይዱ
Windows HTML Java OOP SQL Base Unix/Linux
JavaScript
XML
OOAD/UML JSP/Servlet
SQL Advance
Ajax
Weblogic/WebSphere J2EE FrameWork
Design Pattern
课程目标
理解静态网页工作原理 掌握 HTML CSS JAVASCRIPT 语言
静态网页
动态网页(1)
动态网页(2)
编辑工具
Dw( DreamWeaver) EditPlus 记事本(Notepad)
Html的全局架构标签
网页的基本结构
网页以<html>开始</html>结束 两个主要的结构：head首部，body主体
<html> <head> …… </head> <body> ……
了解DW( Dreamweaver )工具的使用
课时安排
第一章 WEB概述与超链接 (1课时) 第二章 页面排版布局与表格 (1课时) 第三章 表单与表单元素(1课时) 第四章 框架与模板(1课时) 第五章 其它标签(1课时) 第六章 CSS样式表(2课时)
第一章 WEB概述与超链接
本章目标
了解Internet和万维网(www)? 了解 Html语言历史 和 W3C组织 学习Html的全局架构标签
标签及其属性
标签 <h1> <h2> … <h6>
属性 align 设置标题文字的水平对齐方式 取值范围(left,right,center, justify)
标签 <hr/>
属性 size 设置水平线的粗细 属性 width 设置宽度
路径
相对路径
由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系 （”../” 代表上一级文件夹） 范例: web/article/01.htm
<marquee behavior=“alternate”> <font size=“30” color=“red”>Hi~大家好!</font> </marquee>
以“<标签名>”标识标签的开始，以“</标签名>”标识标 签的结束 成对标签又称为容器，一对标签中还可以嵌套其它标签 单独标签不需要与之配对的结束标签，又称之为空标签，例 如<br/> 属性设置的格式为：属性名=“属性值”
定义：网络传输协议 作用：发布和接收Html页面
统一资源定位符URL
定义：网页地址 格式：协议://域名:端口号/文件路径/文件名.文件后缀
:80/tq/index.html
HTTP协议示例
GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 HTTP/1.1 200 OKFirefox/3.0.10 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Cache-Control: private, max-age=30 Accept-Language: en-us,en;q=0.5 Content-Type: text/html; charset=utf-8 Accept-Encoding: gzip,deflate Content-Encoding: gzip Accept-Charset: Expires: Mon, ISO-8859-1,utf-8;q=0.7,*;q=0.7 25 May 2009 03:20:33 GMT Keep-Alive: 300 Mon, 25 May 2009 03:20:03 GMT Last-Modified: Connection: keep-alive Vary: Accept-Encoding If-Modified-Since: Mon, 25 May 2009 03:19:18 GMT Server: Microsoft-IIS/7.0