1、第2章 Web编程基础,2,内容提要,HTML的发展历史 HTML的基本框架 HTML的各种常用标记 文字标记 图片标记 超级链接标记 CSS的基本使用方法 如何让CSS与HTML协同工作,HTML概述,要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的语言 在Internet上，通常使用的发布语言是HTML（Hyper Text Makeup Language），即超文本标识语言。,HTML发展概述,在20世纪90年代Web网络的迅速兴起，使得HTML空前繁荣。当时，HTML被发展成了许多不同的版本。出于解决这种混乱局面的考虑，迫切需要制定一个公认的H
2、TML语言规范1995年11月，Internet Engineering Task Force（IETF）整理了以前的各种版本，倡导并主持开发HTML2.0规范，同年推出HTML3.0技术规范。1996年，World Wide Web Consortium（W3C）的HTML Working Group开始组织编写新的规范，于1997年1月推出了HTML3.2。在HTML3.2中做了许多重要改动。到1999年下半年推出到现在依然使用的HTML4.0。,建立HTML网页框架,案例名称：HTML网页框架 程序名称：2-01.htm这是一段最基本的HTML标识，任何HTML文档都是由一个和标记包含的
3、，然后分为和两大部分，页面的标识一般都是在标识中定义的。注意：HTML文件的扩展名可以是.htm或者.html都可以，现在已经没有区别了。原来在Linux操作系统上用html作为文件的扩展名，而在Windows操作系统上用.htm，因为早期的Windows不支持三个以上字母的文件扩展名。,HEAD头元素,META的属性包括：Description，网页的描述信息；Keywords，关键字，当搜索引擎查找时，按此关键字查找；Content-type，用来设置该网页的编码；Author，用来设置该网页的作者姓名；Refresh，用来设置网页的自动更新。当CONTENT =“3; URL=http:
4、/”时，该网页打开3秒钟后，就自动的转到网站，使用方法如程序2-02.htm所示。案例名称：HTML网页框架 程序名称：2-02.htm我的第一页面,HEAD头元素,当该页面被打开，3秒后就会自动转到网站，Title标记显示在浏览器的标题栏上。,HTML的常用标记,HTML的常用标记有一些共同特点 都放在BODY标记里面。,字体标记,案例名称：使用字体标记 程序名称：2-03.htm本书主要对ASP网页编程作了系统的介绍， 本书的特色是以案例为主，以知识点为主线。全书有30个完整的案例和超过200个基本程序。,字体标记,文字标记中，Face属性的功能是设置字体，双击“控制面板”中的“字体”，可
5、以看到可以引用字体的名称，这些字体的名称都可以给FACE属性赋值。 注意： （1）HTML文件不区分大小写，书写起来比较灵活； （2）HTML文件可以在资源管理器中双击该文件来执行。,图片格式,案例名称：使用图片标记 程序名称：2-04.htm,超级链接,案例名称：使用超级链接 程序名称：2-05.htm其他文件上一个页面位于北京的清华大学,列表,列表有两种方式，一种是有序列表，另一种是无序列表。 无序列表是所有的行之前都有一个小方块，而有序列表是自动排序的，前面有序号案例名称：使用有序列表 程序名称：2-06.htm热爱祖国热爱人们热爱党,无序列表,案例名称：使用无序列表 程序名称：2-07
6、.htm热爱祖国热爱人们热爱党,表格,表格的属性很多，也是网页设计上最常用的元素。 案例名称：基本表格 程序名称：2-08.htm第一行第一列第一行第二列 第二行第一列第二行第二列 第三行第一列第三行第二列 ,ROWSPAN和COLSPAN属性,案例名称：跨行和跨列 程序名称：2-09.htm跨两行跨两列10001000300020004000,Cellpadding和Cellspacing属性,案例名称：边距和间距 程序名称：2-10.htm第一行第一列第一行第二列第二行第一列第二行第二列第一行第一列第一行第二列第二行第一列第二行第二列,案例2-1：表格的样式,案例名称：表格的样式 程序名称
7、：StyleTable.htm序号 大学 师资评分 学生评分 设备评分1清华大学1001001002北京大学10010097,显示结果,其中BorderColor属性设置表格边框的颜色，BGColor属性设置背景颜色，Align属性设置表格的对齐方式，标记是将内部的文字加粗显示。,表单,表单的通用格式是： XX 。 表单元素包含在标记中，有两个重要的属性：METHOD=“Post”或“Get” Post和Get方式的区别在于 Post是一种邮寄的方式，在浏览器的地址栏中不显示提交的信息，这种方式传送的数据量的大小没有限制； Get方式将信息传递到浏览器的地址栏上，最大传输的信息量是2 KB。当
8、不指明是哪种方式时，默认为Get方式。Action属性是设置利用哪个文件来处理所提交的数据。,表单的基本使用方法,案例名称：表单的基本使用方法 程序名称：2-11.htm用户名： 密码： ,表单中常用控件,程序名称：2-12.htm姓名：密码：性别：男女 血型：OABAB 性格：热情大方温柔体贴多情善感文件：简介：城市：北京市上海市南京市,显示结果,程序中单选框分成两个组，一个是性别，另一个是血型，同一组必须用同样的名字 如果某一个默认选中，只要加上CHECKED属性就可以了 两个比较特殊的元素是下拉列表和文本域，它们使用的HTML标记是TEXTAREA和SELECT。,块级元素,块级元素包括
9、DIV和SPAN两种标记。 案例名称：使用DIV标记 程序名称：2-13.htmI am a layer!,SPAN标记,案例名称：使用SPAN标记 程序名称：2-14.htmI am a Span!,预排版标记,案例名称：预排版标记 程序名称：2-15.htm白日依山尽，黄河入海流。,设计网页框架,案例名称：上下框架 程序名称：2-16.htm,说明,的意思是 基本框架是上下框架，上面占20%，下面占80%。的意思是：框架的名称是top，放入的HTML网页是top.htm，而且不可改变大小。注意：如果有了FRAMESET标记，不可以有Body标记，否则无法显示。在当前的目录下如果有Top.h
10、tm和Bottom.htm两个文件，就可以正常的显示，如图2-16所示。,左右框架,案例名称：左右框架 程序名称：2-17.htm在实际的工程应用中，一般需要框架套装，但是基本的语法都是上面的两种基本框架格式。,案例2-2：使用框架,案例名称：使用框架组合 程序名称：Frame.htm,显示结果,CSS概述,CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术。1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，
11、也可以在外部附加文档作为外加文档。为什么要使用CSS呢？原因主要有如下四点。 （1）弥补HTML对网页格式化功能的不足，比如段落间距，行距等。 （2）字体变化和大小。 （3）页面格式的动态更新。 （4）排版定位等。,CSS样式说明,HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。 换句话说，CSS是一种用来装饰HTML的标记集合。CSS样式规则组成如下: 选择符 属性: 值 单一选择符的复合样式声明应该用分号隔开: 选择符 属性1: 值1; 属性2: 值2 ,使用CSS,案例名称：使用CSS 程序名称：2-18.htmH1 FONT-SIZE: X-LARGE;
12、COLOR: RED H2 FONT-SIZE: LARGE; COLOR: BLUE 中国，我的祖国！H1显示的中国，我的祖国！H2显示的,加载CSS样式的三种方式,使用CSS来格式化网页，共有三种方式： 在HEAD中引用 在BODY中引用 作为文件来引用。,HEAD内引用,案例名称：HEAD内引用 程序名称：2-19.htmH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;北京大学，清华大学南京大学，复旦大学,BODY内引用,案例名称：BODY内引用 程序名称：2-20.htm北京大学，清华大学南京大学，复旦大学,文件外引用,案例名称：样式
13、表文件 程序名称：mystyle.cssH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;这里定义了样式，在HTML文件中采用LINK标记将该样式表链接进入该HTML文件。如程序2-21.htm所示。案例名称：链接CSS文件 程序名称：2-21.htm北京大学，清华大学南京大学，复旦大学,导入CSS文件,案例名称：导入CSS文件 程序名称：2-22.htmIMPORT URL(MYSTYLE.CSS);北京大学，清华大学南京大学，复旦大学,CSS与标记对应的三种方式,匹配一个HTML标记和CSS样式表有三种方式： 标记选择符 类选择符 ID选择
14、符。,标记选择符,任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择符引入的。 例如： P BACKGROUND:YELLOW;，这里用的标记选择符是P。,类选择符,在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式，如程序2-23.htm所示。案例名称：类选择符 程序名称：2-23.htm.LITTLEREDCOLOR:RED;FONT-SIZE:9PT.LITTLEGREENCOLOR:GREEN;FONT-SIZE:9PT 这是红色，而且比较小！这是绿色，而且比较小！,ID选择符,案例名称：ID选择符 程序名称：2-
15、24.htm#SZG COLOR:RED 这是ID选择符号！,定义超级链接样式,案例名称：定义超级链接样式 程序名称：2-25.htmA:LINKCOLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:VISITEDCOLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:HOVERCOLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE这是超级链接,本章总结,HTML的发展历史 HTML的基本框架 HTML的各种常用标记 文字标记 图片标记 超级链接标记 CSS的基本使用方法 如何让CSS与HTML协同工作,本章习题,1. 如何在网页中设置字体？有哪些字体可以使用？ 2. 如何引入一张图片？如何给图片加上边框？ 3. 如何使用超级链接？如何将超级链接的下划线去掉？ 4. 如何定义跨行的表格？如何将表格的字体和边框的距离加大？ 5. 框架有几种基本形式？如何使用？ 6. 加载CSS样式的方式有哪些？如何使用？ 7. 编写E-mail注册的表单。（上机练习）,
