第2章 HTML编程基础.ppt

《第2章 HTML编程基础.ppt》由会员分享，可在线阅读，更多相关《第2章 HTML编程基础.ppt（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 第第2章章 HTML编程基础编程基础主讲人：王曦主讲人：王曦E-mail:本章要点本章要点介绍介绍HTMLHTML的发展历史的发展历史HTMLHTML的基本框架的基本框架介绍介绍HTMLHTML的各种常用标记的各种常用标记 文字标记 图片标记 超级链接标记2023/4/82HTML概述概述1995年，Internet Engineering Task Force（）整理了以前的各种版本，倡导并主持开发了.0规范，同年推出了.0技术规范从年下半年推出到现在依然使用的.02023/4/83案例名称：案例名称：HTMLHTML网页框架网页框架案例名称：案例名称：HTML网页框架网页框架程序名称：程

2、序名称：2-01.htm这是一段最基本的HTML标识，任何HTML文档都是由一个和标记包含的，然后分为和两大部分，页面的标识一般都是在标识中定义的。HTML文件不区别大小写，浏览器认为和是一样的，在使用的时候需要保持风格的完整性。HTML文件的扩展名可以是.htm或者.html都可以，现在已经没有区别了。原来在Linux操作系统上用html作为文件的扩展名，而在Windows操作系统上用.htm，因为早期的Windows操作系统不支持三个以上字母的文件扩展名。2023/4/84HEAD头元素元素HEAD头元素主要包括该页面的一些基本描述语句。META的属性包括：Description，网页的描

3、述信息；Keywords，关键字，当搜索引擎查找时，按此关键字查找；Content-type，用来设置该网页的编码；Author，用来设置该网页的作者姓名；Refresh，用来设置网页的自动更新。当CONTENT=3;URL=http:/时，该网页打开3秒钟后，就自动的转到网站 2023/4/85HTML的常用的常用标记HTML的常用标记有一些共同特点：都放在BODY标记里面。常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等。2023/4/86字体字体标记处理文字时通常利用如“xx”的标记定义字符xx的字体显示为隶书，字号是40，颜色是红色。程序2-03.htm说明如何使用文字格式

4、。2023/4/87图片片标记利用“”格式可以插入一张图片，myimage.jpg文件必须和该HTML文件放在同一个目录下。IMG是HTML的一个标记，是IMAGE的缩写；SRC属性给出要连接的图片的路径和文件名2023/4/88超超级链接接使用超级链接的基本的语法是：XX。XX是一个超级链接，连接到Address.htm文件；是单词Anchor的缩写，中文的意思是“锚”，功能是从一个页面链接到另一个页面；属性HREF定义的是链接到哪一页。2023/4/89书签链接接如果某个页面很大，为了加强层次感，需要引入书签链接。使用的方法和超级链接类似。2023/4/810电子子邮件件链接接电子邮件链接

5、提供了当点击页面上的链接时，将自动打开默认的邮件发送程序发邮件。2023/4/811列表列表列表有两种方式，一种是有序列表，另一种是无序列表。无序列表是所有的行之前都有一个小圆圈，而有序列表是自动排序的，前面有序号。2023/4/812基本表格基本表格是表格的基本标记。代表表格的行，代表表格的列。定义一个三行两列的表格如程序2-09.htm所示。2023/4/813表格的灵活表格的灵活应应用用（1）ROWSPAN和COLSPAN属性的使用方法。利用ROWSPAN属性设置该单元格占用多行，利用COLSPAN属性设置该单元格是占用多列。2023/4/814Cellpadding和和Cellspac

6、ing（2）Cellpadding和Cellspacing属性的使用方法。Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。2023/4/815表格的表格的样样式式BORDERCOLOR属性设置表格边框的颜色，BGCOLOR属性设置背景颜色，ALIGN属性设置表格的对齐方式，标记是将内部的文字加粗显示。显示的结果2023/4/816表表单单表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。表单信息的处理过程为：当单击表单中的提交按钮时，表单中的信息就会上传到

7、服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP或JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。2023/4/817（1）表）表单头单头及其属性及其属性表单的通用格式是：XX。表单元素包含在标记中，有两个重要的属性：METHOD=“Post”或“Get”，Post和Get方式的区别在于Post是一种邮寄的方式，在浏览器的地址栏中不显示提交的信息，这种方式传送的数据量的大小没有限制；Get方式将信息传递到浏览器的地址栏上，最大传输的信息量是2 KB。当不指明是哪种方式时，默认为Get方式。Action属性是设置利用哪个文件来

8、处理所提交的数据。2023/4/818（2）表）表单单中常用控件中常用控件在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。除了文本域和下拉列表，其他只要修改TYPE属性就可以了，使用方法如程序2-13.htm所示。2023/4/819 块级元素元素 块级元素包括DIV和SPAN两种标记。DIV称为层标记，有时也称为块标记。利用DIV标记和CSS的定位技术可以做出相当出色的效果。SPAN标记和DIV标记的基本语法是一样的，但SPAN标记和DIV标记的区别还是很大的。使用方法如程序2-14.htm所示。20

9、23/4/820预排版排版标记包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。语法如程序2-15.htm文件所示 2023/4/821设计网网页框架框架设计网页时，经常用到的一种格式是框架。基本网页框架分成两种，左右框架和上下框架。语法如程序2-16.htm文件所示。2023/4/822案例案例2-2 使用框架使用框架一般情况下工程的主页面都采用这种框架格式，在上面的页面放置网站的图片，右边放置主页面，左边放一个下拉菜单。可以像对普通Windows窗口一样操作网页框架，可以最大化窗口页可以最小化窗口，修改

10、案例2-2右框架的代码，如案例2-3所示。2023/4/823MARQUEE标记使用的基本语法是：xx，显示的效果是xx就会从屏幕一边跑到另外一边。啦啦啦，我从右向左移！啦啦啦，我从右向左移！啦啦啦，我从左向右移！啦啦啦，我从左向右移！啦啦啦，我一圈一圈绕着走！啦啦啦，我一圈一圈绕着走！啦啦啦，我只走一次就歇了！啦啦啦，我只走一次就歇了！啦啦啦，我来回走！啦啦啦，我来回走！啦啦啦，我走一步，停一停！啦啦啦，我走一步，停一停！2023/4/824 CSS概述概述 1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中

11、。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。为什么要使用CSS呢？原因主要有如下四点：（1）弥补HTML对网页格式化功能的不足，比如段落间距，行距等。（2）字体变化和大小。（3）页面格式的动态更新。（4）排版定位等。2023/4/825加加载CSS样式的三种方式式的三种方式使用CSS来格式化网页，共有三种方式：在HEAD中引用在BODY中引用作为文件来引用。2023/4/826CSS

12、与与标记对应的三种方式的三种方式HTML标记和CSS样式表标记有3种方式：标记选择符类选择符选择符。2023/4/827定定义超超级链接接样式式可以指定A标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接（Link）、已访问链接（Visited）和鼠标移动过（Hover）。可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。2023/4/828小小结l本章作本章作为编程基程基础，主要介，主要介绍两大部分的两大部分的内容：内容：lHTML的常用的常用标记和和CSS样式表的使用方式表的使用方法法l需要重点掌握的是表格和表需要重点掌握的是表格和表单的使用方式、的使用方式、加加载CSS样式的三种方式和式的三种方式和CSS与与标记对应的三种方式。的三种方式。2023/4/829