htnlcss详细介绍.ppt

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