零基础学PHP+MYSQL.pdf
http://www.100md.com
2020年3月14日
![]() |
| 第1页 |
![]() |
| 第7页 |
![]() |
| 第20页 |
![]() |
| 第28页 |
![]() |
| 第48页 |
![]() |
| 第358页 |
参见附件(7303KB,773页)。
零基础学PHP+MYSQL是一本非常详细的PHP入门编程基础书籍,在书中为想要学习PHP的朋友提供通俗易懂的讲解,同时还有许多的案例介绍,帮助你能够按照自己的理解学习好PHP!

介绍
《零基础学PHP+MYSQL》从初学者角度出发,通过通俗易懂的语言、丰富的实例,详细介绍丁使用PHP进行开发应该掌握的各方面技术。《零基础学PHP+MYSQL》共19章内容,包括PHP的基础知识和应用方法、PHP简介、PHP的安装和设置、PHP的语法、PHP常用函数说明、PHP简单应用实例、PHP数据库编程、Ajax、XML、正则表达式、PHP与MySQL综合应用实例等。《零基础学PHP+MYSQL》内容详尽,实例丰富,非常适合作为编程初学者及中级读者的学习用书,也可以作为开发人员的查阅、参考资料。读者在学习初期会感觉非常容易,因为每个案例都是贴近实际应用,随着学习的深入,读者会喜欢上PHP,也会喜欢上这种讲解方式。
主目录
第一篇 PHP入门基础
第1章初识PHP
第2章搭建PHP环境
第3章网页基础速成:静态及动态技术
第4章PHP基础
第5章运算符
第6章流程控制结构
第7章函数和对象的基本知识
第二篇 PHP的常用函数库
第8章PHP的常用函数库
第9章 MySQL数据库
第10章MySQL简单管理及MySQL操作
第三篇 数据库
第11章使用phpMyAdmin管理MySQL数据库
第12章PHP中使用MySQL数据库
第四篇 PHP的高级开发
第13章PHP的面向对象编程
第14章 PHP与Ajax
第15章PHP与正则表达式
第16章PHP与XML
第五篇 PHP综合实例
第17章PHP留言板实例
第18章新闻发布系统
第19章PHP论坛
PHP能做什么
1、服务器端的脚本语言。其是PHP最主要的方面,能够搭建PHP运行平台。读者在运行Web服务器时,通过Web浏览器来访问PHP程序的输出内容,也就是客户端的PHP页面。
2、命令行格式的脚本语言。读者可以编写一段PHP脚本程序,只需要使用PHP解析器来执行,就可以得到想要的内容。
编写客户端的图形界面应用程序。对基于窗口模式的应用程序,或许PHP不是最好的程序语言,但是如果读者特别精通PHP语言,而且还希望在客户端应用3、程序中使用PHP的一些高级特性,那么读者就可以利用PHP-GT来编写客户端应用程序。PHP程序语言具有跨平台的特性,读者也可以通过PHP-GTK编写跨平台的应用程序。PHP-GTK是PHP包中的一个扩展包,在通常发布的PHP包中并不包含此包。
零基础学PHP+MYSQL截图


零基础学编程
零基础学PHP+MySQL
郑海生 著
ISBN:978-7-111-26331-9
本书纸版由机械工业出版社于2009年出版,电子版由华章分社(北京华
章图文信息有限公司)全球范围内制作与发行。
版权所有,侵权必究
客服热线:+ 86-10-68995265
客服信箱:service@bbbvip.com
官方网址:www.hzmedia.com.cn
新浪微博 @研发书局
腾讯微博 @yanfabook目录
写给未来的程序员
学习编程需要注意的几点
丛书书目
丛书特点
完善的售后服务
前言
本书特点
本书内容
本书适合的读者
本书的作者
第一篇 PHP入门基础
第1章 初识PHP
1.1 了解PHP
1.2 PHP的地位及优势
1.3 PHP的学习和工作原理
1.4 初识PHP程序
1.5 小结
第2章 搭建PHP环境
2.1 Windows下的IIS与PHP2.2 Windows下的Apache配置
2.3 小结
第3章 网页基础速成:静态及动态技术
3.1 认识HTML
3.2 文字与段落标记
3.3 插入图像
3.4 表格的使用
3.5 表单的使用
3.6 网页的美化CSS
3.7 JavaScript基础
3.8 小结
第4章 PHP基础
4.1 基本语法
4.2 文件引用
4.3 数据类型
4.4 基本变量
4.5 小结
第5章 运算符
5.1 算术运算
5.2 比较运算与逻辑运算
5.3 位运算5.4 字符串运算
5.5 赋值运算
5.6 表达式
5.7 递增递减运算
5.8 掌握运算符的优先级
5.9 小结
第6章 流程控制结构
6.1 选择分支结构
6.2 循环语句
6.3 利用循环控制流程
6.4 其他流程控制语句
6.5 小结
第7章 函数和对象的基本知识
7.1 函数
7.2 一个函数的开发实例—上传文件系统
7.3 对象
7.4 一个对象的开发实例
7.5 小结
第二篇 PHP的常用函数库
第8章 PHP的常用函数库
8.1 字符串处理函数8.2 数组处理函数
8.3 数学运算函数
8.4 日期与时间函数
8.5 目录与文件函数
8.6 PHP实践—无数据库留言板
8.7 小结
第9章 MySQL数据库
9.1 认识并安装MySQL数据库
9.2 MySQL的基本操作
9.3 MySQL数据库的数据类型
9.4 小结
第10章 MySQL简单管理及MySQL操作
10.1 进入MySQL设置管理员密码
10.2 增加用户并设置密码及用户权限
10.3 取消权限及删除用户
10.4 备份和复制数据库
10.5 MySQL数据库定义
10.6 SQL数据操作
10.7 小结
第三篇 数据库
第11章 使用phpMyAdmin管理MySQL数据库11.1 phpMyAdmin的安装和配置
11.2 用phpMyAdmin进行MySQL权限管理
11.3 用phpMyAdmin进行数据库及表的管理
11.4 小结
第12章 PHP中使用MySQL数据库
12.1 MySQL数据库函数在PHP中的应用
12.2 用PHP进行数据查询
12.3 用PHP进行数据表的修改
12.4 PHP操作MySQL实例—学生信息管理系统
12.5 小结
第四篇 PHP的高级开发
第13章 PHP的面向对象编程
13.1 PHP中的类应用
13.2 PHP模板的应用
13.3 小结
第14章 PHP与Ajax
14.1 什么是Ajax
14.2 Ajax的实现原理和工作流程
14.3 Ajax应用
14.4 Spry框架
14.5 小结第15章 PHP与正则表达式
15.1 了解正则表达式
15.2 正则表达式的语法
15.3 PHP中相关正则表达式的使用
15.4 常用的正则表达式
15.5 正则表达式实例
15.6 小结
第16章 PHP与XML
16.1 XML快速入门
16.2 深入XML文档
16.3 用PHP函数处理XML文档
16.4 使用DOM库处理XML文档
16.5 小结
第五篇 PHP综合实例
第17章 PHP留言板实例
17.1 数据库设计
17.2 共用页面部分
17.3 UBBCode转换为HTML
17.4 留言列表页面
17.5 发表留言程序
17.6 管理员的登录17.7 管理员的回复程序
17.8 设计首页
17.9 小结
第18章 新闻发布系统
18.1 数据库准备
18.2 添加新闻
18.3 修改新闻
18.4 删除新闻
18.5 浏览新闻
18.6 小结
第19章 PHP论坛
19.1 数据库准备
19.2 共用显示部分
19.3 用户注册
19.4 登录页面
19.5 发表文章程序部分
19.6 文章的显示页面及文章的回复程序
19.7 文章的锁定操作
19.8 文章的置顶操作
19.9 文章的删除及修改
19.10 论坛主页面19.11 小结
附录
附录A 正则表达式参考
A.1 普通字符
A.2 元字符
A.3 转义字符
A.4 匹配多种字符的表达式
A.5 使用符号创建匹配多种字符的表达式
A.6 用来限定匹配次数的表达式
A.7 其他说明
附录B PHP代码编写的一般规则
B.1 标识符命名规范
B.2 代码编写规范
附录C PHP下的编码
C.1 我们面对的是纷繁复杂世界
C.2 浏览器的编码和解码
光盘内容写给未来的程序员
很多初学者对编程心生恐惧,不知道从何学起。尤其是看了别人的
经验,说要先学操作系统原理、数据结构、算法等,一大堆概念涌过
来,让人不知所措。其实,编程没有那么复杂,跟我们来吧,“零基
础”系列正是为不会编程的你准备的!
学习编程需要注意的几点
不要死记语法:很多初学者试图把各种语法背下来,其实这是极
其错误的,程序开发的语法、规范特别多,不可能都记得下来,你只要
知道有这么一个功能就可以了,需要的时候翻阅书籍,或者查找帮助文
件,这样省时省力。
多动手,多练习:只知道死啃书本的人,是不会成为开发高手
的,只有多上机编写程序,才能在实践中提高对编程的认识。
遇到问题,首先尝试自己解决:自己先用一天的时间,尽力解
决,实在不行再去找人帮助,千万不要遇到问题立刻找人帮忙,这样永
远也不会提高。
多用Google、Baidu:网络是一个大知识库,是最好的老师,你
遇到的问题,别人也遇到过,多去搜索一下吧。?多阅读别人的源代码:要看懂别人的设计思想,不断地融为己
用。
丛书书目
《零基础学Ajax》
《零基础学PHP+MySQL》
《零基础学JavaScript》
《零基础学C++》
《零基础学PHP》
《零基础学HTML+CSS》
《零基础学Java》
《零基础学C3.0》
《零基础学Java Web开发》
《零基础学Excel VBA》
《零基础学Visual C++》《零基础学Visual Basic》
《零基础学Visual Basic+SQL Server》
《零基础学Visual C2005》
《零基础学ASP.NET 3.5》
《零基础学SQL Server 2005》
《零基础学Dreamweaver CS3+ASP》
丛书特点
本丛书考虑了初学者的认知特点,在讲解的过程中遵循如下原则:
·从基本的环境配置讲起,告诉你如何搭建开发环境。
·细致讲解第一个例子,让你在第一个例子中学会程序开发的基本
步骤。
·强调动手实践,对每个知识点都有相应的代码段,让你在操作中
领会编程的真谛。
·注释极为详尽,方便读者阅读代码,理解其中的含义。完善的售后服务
我们提供了论坛:http:www.rzchina.net,读者可以在上面提问交
流,另外我们还会在论坛上定期发布一些小的教程、视频动画,以提高
读者的学习效率。
最后送给各位读者一句话:“天下事有难易乎?为之,则难者亦易
矣;不为,则易者亦难矣。”还等什么,现在就动手学习吧!前言
PHP是一种目前比较流行的非客户端Web程序开发语言之一。其主
要的特点是语法简单、学习容易、功能强大。对于初学者来说容易接受
且容易上手。在结合了一些最新编程语言的最佳特性后,PHP、MySQL
和Apache的组合已经成为Web服务器的一种配置标准。学习PHP是十分
轻松、令人感觉愉悦的;开发PHP程序的过程也是比较简单、快捷的。
可以说,PHP已经成为Web脚本技术的先驱,并且会继续引领Web技术
的潮流。
笔者精心编写了本书,目的是帮助想要学习PHP的人员,掌握PHP
程序开发的知识,尤其是为PHP新手进入PHP开发行业提供一个开发知
识的阶梯。笔者结合自己多年的开发经验和团队管理经验,为广大开发
人员介绍了各种领先的开发技术和开发理念,作为开发人员提高自己的
技术水平、完善自己的知识结构、扩展自己的开发知识面的参考。
本书特点
本书由浅入深地讲解了PHP开发的理论和方法,以及目前流行的各
种Web技术和常用的PHP开发工具。在每章的最后,笔者还给出了对读
者学习本章的要求及比较重要的知识点。对初学者,笔者不但介绍了
PHP的基础知识,而且介绍了PHP开发的高级阶段,使初学者可以一步到位。
本书基本涵盖了PHP开发Web程序的各个方面的知识,从开发设计
到程序的开发,从开发的基本理论到程序开发的实用技术,讲述了各种
常用的开发案例设计方法及开发流程,以及各种Web技术的使用方法。
本书的特点主要体现在以下几个方面。
本书的编排采用循序渐进的方式,适合初级、中级读者逐步掌握
PHP程序开发的基本方法和程序的设计。
本书结合笔者的开发经验由浅入深地介绍PHP知识,在每章的最
后指出了对读者学习本章的要求及比较重要的知识点。
本书在介绍各种Web开发方法和技术时,采用了浅显易懂的例
子,在介绍PHP常用函数时使用了一个知识点配一个实例的方式,方便
读者自己进行实践和演练。在本书的介绍中,提供了丰富完整的开发示
例代码,读者可直接使用,或者根据自己的实际情况进行调整。本书的
所有例子和源代码都附在随书光盘中,方便读者使用。
本书在体现基础的开发知识外,还适当地加入了目前Web开发领
域的各种先进的前沿技术和理论,方便读者借鉴PHP程序开发的理念和
技术。本书内容
本书共分为五篇,共19章和3个附录,从PHP的基本概念讲起,再
进一步介绍PHP程序开发过程所经历的各个阶段;然后结合目前PHP开
发的各种实用技术和常用工具,讲解如何进行各种类型的程序开发;最
后结合笔者的经验讲解如何养成一个良好的程序开发习惯,让开发人员
的水平得以不断提高。
第一篇(第1章~第7章)PHP入门基础。
讲述了PHP的基础知识,包括初识PHP、搭建PHP环境、网页基础
速成:静态及动态技术、PHP基础、常量和变量、运算符、流程控制结
构、函数和对象的基本认识。
第二篇(第8章~第10章)PHP的常用函数库。
讲述了PHP常用函数知识,包括PHP的常用函数库及PHP实践程序
无数据库留言板,使PHP开发人员了解PHP常用的函数库及使用方法。
第三篇(第11章~第12章)数据库。
具体讲述了MySQL数据库,包括MySQL数据库的介绍、MySQL简
单管理及MySQL操作、使用phpMyAdmin对MySQL数据库进行管理、PHP中使用MySQL数据库,使PHP初学者了解MySQL数据库及对数据库的操作。本篇也介绍了如何使用PHP管理工具phpMyAdmin,更加方
便初学者的学习。
第四篇(第13章~第16章)PHP的高级开发。
主要介绍PHP的高级开发阶段,包括PHP的面向对象编程、PHP与
Ajax、PHP与正则表达式、PHP与XML,为PHP中级学者提供一些提高
开发技术水平的知识。学习这4章内容,可以使开发人员思路清晰,更
加快捷地实现程序开发。
第五篇(第17章~第19章)PHP的综合实例。
主要介绍PHP的综合实例,包括留言板、新闻发布系统、PHP论
坛,为PHP学习者提供一些开发案例,方便PHP学习者进一步研究。
本书由浅入深,从理论到实践,尤其适合初级读者逐步学习及完善
自己的知识结构。
本书适合的读者
希望学习PHP程序开发的新手。
迫切想要提高个人PHP程序开发技能和水平的初级人员。
具备一定的PHP开发理论知识,但是缺乏实践的程序开发人员。?希望学习PHP最新开发技术的程序员。
希望了解大型Web程序的开发思想和开发技巧的人员。
目前正在考虑在PHP程序开发中使用Ajax、XML等技术的人员。
Web开发入门人员。
本书的作者
本书主要由郑海生编著,其他参与编著和资料整理的人员有冯华
君、刘博、刘燕、叶青、张军、张立娟、张艺、彭涛、徐磊、戎伟、朱
毅、李佳、李玉涵、杨利润、杨春娇、武鹏、潘中强、王丹、王宁、王
西莉、石淑珍、程彩红、邵毅、郑丹丹、郑海平、顾旭光。
编者第一篇 PHP入门基础
第1章 初识PHP
本章将介绍PHP,PHP是一种工作在服务器端的脚本语言。它的基础
语法是Perl语言,提取了C、ASP、Shell和JavaScript脚本语言的优点,是一种和ASP相似的技术。PHP是一种嵌入式脚本语言,与HTML语言
结合,实现与用户的交互以及对数据库的访问。
PHP的全名是超文本预处理器(Professional Hypertext
Preprocessor)。它是HTML中内嵌的脚本语言,拥有比其他脚本语言更
快的执行效率。而且最吸引开发人员的一点是,它完全是免费的。
PHP、MySQL(一个免费的数据库)和Apache(也是一个免费的服务
器)相互配合工作,已经被大多数网站设计员所采用。
1.1 了解PHP
PHP语言是怎么出现的,它能为Web程序带来什么发展,它都包括
哪些方面,这就是本节要介绍的主要内容。
1.1.1 PHP能做什么PHP主要用在服务器端的脚本程序,它可以完成其他任何类似于
ASP技术所能完成的工作,例如收集表单数据、生成动态网页等。但
PHP的功能不止这些。PHP脚本语言主要用于以下3个方面。
服务器端的脚本语言。其是PHP最主要的方面,能够搭建PHP运
行平台。读者在运行Web服务器时,通过Web浏览器来访问PHP程序的
输出内容,也就是客户端的PHP页面。
命令行格式的脚本语言。读者可以编写一段PHP脚本程序,只需
要使用PHP解析器来执行,就可以得到想要的内容。
编写客户端的图形界面应用程序。对基于窗口模式的应用程序,或许PHP不是最好的程序语言,但是如果读者特别精通PHP语言,而且
还希望在客户端应用程序中使用PHP的一些高级特性,那么读者就可以
利用PHP-GT来编写客户端应用程序。PHP程序语言具有跨平台的特
性,读者也可以通过PHP-GTK编写跨平台的应用程序。PHP-GTK是
PHP包中的一个扩展包,在通常发布的PHP包中并不包含此包。
PHP的功能不止上述几方面,还有其他方面。PHP也具有平台无关
性,它不仅可以在Windows中使用,还可以在Linux、UNIX中使用。
PHP还有一个显著的特性,就是可以支持多种数据库。读者将会慢
慢地发现PHP与大多数数据库相配合工作的网页是多么的简单。现在
PHP所支持的数据库如图1.1所示。图 1.1 数据库名表1.1.2 PHP的发展
1994年,Rasmus Lerdorf设计出了第1个PHP,但是今天人们使用的
PHP和最初的版本有很大的不同。现在PHP的最新版本是PHP 5.0。下面
就是PHP从PHP 1.0到PHP 5.0的一个发展过程。
(1)最初PHP只是一套简单的Perl脚本,用来跟踪访问其主页的人
们的信息。这一套脚本的名字为Personal Home Page Tools。随着更多功
能需求的增加,Rasmus使用C语言写了一个更大的、可以访问数据库、可以让用户开发简单的动态Web程序。Rasmus发布了PHPFI的源代码,以便每个人都可以使用,同时也可以让程序爱好者们修正源码中的
Bug,从而改进源代码。
PHPFI是一个专为个人主页表单提供解释程序的程序,已经包含
了今天PHP的一些基本功能。有着Perl样式的变量,自动解释表单变
量,并可以嵌入HTML。语法本身与Perl很相似,但是它很有限、很简
单,还稍微有些不协调。
(2)一直到1997年,PHPFI 2.0,也就是使用C语言实现的第2版,在全世界的用户和众多域名上被安装。
PHPFI 2.0在经历了诸多个beta版本的发布后,于1997年11月发布了官方正式版本。不久,PHP 3.0第1个alpha版本发布,PHP从此走向了成
功。
(3)PHP 3.0是类似于当今PHP语法结构的第1个版本。Andi
Gutmans和Zeev Suraski在为一所大学的项目中开发电子商务程序时,发
现PHPFI 2.0功能明显不足,于是Andi Gutmans和Zeev Suraski重写了代
码,也就是PHP 3.0。经过Andi、Rasmus和Zeev一系列的努力,考虑到
PHPFI已存在的用户群,于是决定联合发布PHP 3.0作为PHPFI 2.0的官
方后继版本。
PHP 3.0一个最强大的功能是可扩展性。除了给最终用户提供数据
库、协议和API的基础结构,PHP 3.0的可扩展性还吸引了大量的开发人
员提交新的模块。后来证实,这是PHP 3.0取得巨大成功的关键。PHP
3.0中的其他关键功能包括面向对象的支持,以及更强大和协调的语法
结构。
(4)1998年的冬天,PHP 3.0官方发布不久,Andi Gutmans和Zeev
Suraski开始重新编写PHP代码。设计目标是增强复杂程序运行时的性
能,以及PHP自身代码的模块性。PHP 3.0的新功能、广泛的第3方数据
库,API的支持以及使得这样程序的编写成为可能,但是PHP 3.0没有高
效处理如此复杂程序的能力。
新的被称为Zend Engine的引擎,也就是Zeev和Andi的缩写。它成功地实现了设计目标,并在1999年中期首次引入PHP。基于该引擎并结合
了更多新功能的PHP 4.0,在PHP 3.0发布两年后,于2000年5月发布了官
方正式版本。除了更高的性能以外,PHP 4.0还包含了其他一些关键功
能,例如支持更多的Web服务器、HTTP Sessions支持、输出缓存、更安
全地处理用户输入的方法以及一些新的语言结构。
(5)PHP 5.0是当前PHP的最新版本。PHP的开发小组有很多优秀
的开发人员,同时还有大量的优秀人才在进行着PHP相关工程的开发工
作,如PEAR和PHP文档的工程。
PHP 5.0的更多关于该引擎的信息,请访问PHP的官方网站。1.2 PHP的地位及优势
上面介绍了PHP能做什么及PHP是如何发展的。正是因为它的优
势,现在将介绍PHP在互联网中的地位及它的优势。
1.2.1 PHP所具有的优点及其在互联网中的地位
PHP之所以能有这样的发展,显然是跟它的一些优点是分不开的。
下面就来看看PHP有哪些优点。
简单性:简单就是比较好学,容易入手。PHP借用了C、Perl、Shell及JavaScript等一些好的语法框架。对于初学者来说,很快就可以
掌握。
速度快:PHP比传统的解释执行方式的语言速度快好几倍。
跨平台性:PHP可以在Windows、Linux、Unix系统下运行。将
Windows下的PHP程序拿到Linux、UNIX系统下,不需要对PHP代码进
行修改,就可以使用。
强大的数据库支持:PHP有很多可被支持的数据库,如图1.1所
示。?PHP的开放源代码:开放源代码指的不单是PHP应用程序的源代
码,而且还有PHP本身的源代码。也就是说,可以在PHP的官方网上找
到PHP源代码进行编译和执行,以得到最终的运行程序,如果有必要也
可以做出修改。
基于服务器端:也就是说PHP是运行在Web服务器端。PHP程序
可能很大、很复杂,但是它的运行速度只和服务器的速度有关,发送到
客户端只是程序运行的结果,对客户端的执行速度不会产生直接的影
响。
执行的效率高:和其他的CGI语言比较,PHP语言不但占用的系
统资源比较小,而且运行的速度比较快,所以它的执行效率较高。
正因为PHP具有上述这些优点,所以它在互联网中的地位很高,被
非常广泛地应用。读者可以在google.cn或baidu.com中输入PHP,结果是
什么样的呢?下面就以PHP在google.cn中查询为例,看看是什么结果,如图1.2所示。图 1.2 查询PHP的结果图
由图可见全世界有多少人在使用PHP,这也足可以证明读者的选择
是正确的。虽然数据并不是那么准确,但也可以表明PHP在全世界范围
内应用的广泛性。1.2.2 PHP的优势
PHP语言的优势如下。
良好的安全性:PHP的代码是开源,所有PHP的源代码每个人都
可以看得到。代码在许多工程师手中进行了检测,同时它与Apache编辑
在一起的方式也可以让它具有灵活的安全设定,因此PHP具有了公认的
安全性能。
跨平台特性:ASP比不上PHP的跨平台能力,PHP几乎支持所有
的操作系统平台及数据库系统,正是它的这种能力让UNIX和Linux有了
一种与ASP媲美的开发语言,并广为流行。
易学性:PHP嵌入在HTML语言中,且坚持以脚本语言为主。与
Java、C等语言不同,PHP语法简单、书写容易,方便学习和掌握。
执行速度快:占用系统资源少,代码执行速度快。
免费:在流行的企业应用LAMP平台中,PHP、Linux、Apache、MySQL都是免费软件,降低了企业架设成本。
目前互联网上众多动态网页都采用PHP语言编写。1.3 PHP的学习和工作原理
通过上面的介绍,读者对PHP有了初步的认识。本节将介绍PHP是
如何工作的,以及如何才能学好PHP。PHP工作流程的总结如下。
产生对PHP脚本的HTTP请求。
Apache将请求传递给PHP引擎。
PHP引擎分析扩展名为.php的脚本,并用特定的标记来启用PHP
模式。
PHP引擎在服务器上执行脚本。
利用PHP扩展或PEAR数据库抽象库,来进行数据库交互或与
LDAP源代码、cron作业等进行的交互。
处理结果。
将数据转换成HTML代码。
将响应发送至客户端浏览器进行显示。
1.3.1 PHP的工作原理PHP是一种开放源代码的脚本语言,是主要应用于Web服务器的服
务端的应用程序,用于动态网页的设计。PHP在功用上也可以替代微软
的ASP、ASP.NET、VBScript、JScript体系、Sun公司的JSP、Java体系
等。它是一种嵌入HTML页面的脚本语言。
PHP在Web服务器上运行。当PHP脚本被客户端请求时,被请求的
PHP程序就开始运行,而且也会把运行的结果返回到客户端的浏览器。
不过发送到客户端浏览器的内容只是普通的HTML文本,没有包含PHP
代码。这也是与嵌入HTML的客户端脚本的最重要的区别。下面来看
PHP的工作流程,如图1.3所示。
图 1.3 PHP工作流程图1.3.2 如何学好PHP
从自己向别人问怎么学PHP开始,到现在不少人又来问笔者怎么学
PHP,不管是新手,还是老手,似乎总是感觉摸不出一条清晰的脉络
来。不过,笔者既然对PHP有了一定水平的理解,那么笔者总结的学习
思路应该可以给初学者一个参考。
这里先把学习PHP的过程做一下概括,如下所述。
熟悉HTML、CSS、JS等网页基本元素,完成阶段可自行制作完
整的网页,对元素属性达到熟悉程度。
理解动态语言的概念、运作机制,熟悉PHP语法。
学习如何将PHP与HTML结合起来完成简单动态页面。
接触MySQL,开始设计数据库程序。
不断巩固,摸透大部分PHP的常用函数,并理解OOP、MySQL优
化以及模板的概念。
完成一个功能齐全的动态站点,是一个循序渐进的学习过程,不过
新手不要看到上面的概括就以为学习蛮简单的,在此不得不对您稍微泼
一下冷水,任何东西其实都不简单,所以读者在学习过程中要认真、坚持,坚持、再坚持,只有这样才能取得成功。
这里先解释一下学习思路,如下所述。
(1)在理解网站这一概念之后不难看出,任何网站都是由网页组
成的,也就是说想完成网站,必须先学会做网页。因此必须要掌握了
HTML,才能为今后制作网站打下基础。
(2)在学习HTML时,边学边做是最有效的方式,这一方式对于
学习PHP同样是最有效的。HTML中的任何元素都要亲自实践,只有明
白了什么元素会起到什么效果之后,才会记忆深刻,而一味地啃书,绝
对是不行的。笔者认为大部分新手之所以觉得概念难学,大部分是因为
一个字“懒”,懒是阻止进步的最大敌人,所以克服掉懒的习惯,才能更
快地学好一样东西。
(3)掌握静态网页的制作技术是学习开发网站的先决条件,这一
点就讲到这里。
(4)等到读者发奋努力地学会了用PHP成功地插入、删除、更新
数据的时候,距离成功就指日可待了。这就是要学习MySQL数据库。
(5)接下来就是巩固知识,熟悉了PHP和MySQL开发的要领之
后,再回头看之前写的那个留言本,也许会怀疑那真的是自己写的吗?
当然是自己写的。这个时候,留言本应该增加一些模块,如注册、分页、数据查询等功能。完成之后,便会感觉特有成就感。
(6)学东西永远不可能有速成这一说,只有通过自己的不断努
力,日积月累,知识才会慢慢地增加。在学习语法时,每个人都有各自
不同的方式,但笔者认为借鉴别人成功的代码,绝对是有益无害。因此
多看那些经过千锤百炼出来的经典代码,是进阶的最好方法。1.4 初识PHP程序
在上一节中,介绍了PHP的工作原理及如何学习PHP,相信大家都
有完成自己的程序的梦想。下面将介绍第1个PHP程序,及PHP与其他脚
本语言的比较。
1.4.1 第1个PHP程序
通过前面的介绍,读者知道了PHP有那么多的优点,下面就看看第
1个PHP程序,如代码1.1所示。
代码1.1 第1个PHP程序:1-1.php
第一个PHP程序
echohello!!!!!!!!!!!;输出语句
>
注意 PHP每个语句是以“;”结尾,所以在echo末尾必须要
有“;”。作用 这个程序是一个测试程序,是大多数初学者见到的第1个
PHP程序。大多数程序都会把hello作为第1个程序显示给初学者认识。
上面的代码必须保存成.php为后缀名的文件。PHP的标记是以
php开始,以?>结束。上面的程序在配置好PHP运行环境服务器后,在
地址栏中输入http:localhost1-1.php,就可以在浏览器中看
到hello!!!!!!!!!!!字符串。程序运行结果如图1.4所示。
图 1.4 第1个PHP程序的运行效果图
读者也可以在浏览器中查看此程序在客户端的源文件。查看结果如
代码1.2所示。
代码1.2 客户端显示程序:1-2.html
第1个PHP程序
echo;
>
上面的代码并没有在输出的页面中出现-->
hello!!!!!!!!!!!
注意 PHP程序执行后,发给客户端的只是HTML文件,这样更加
安全。
作用 笔者给出这个对比程序,是为了让初学者更好地去认识
PHP,更好地掌握客户端与服务器端是如何工作的,为以后的学习打下
基础。通过对比也可以知道哪些代码是在服务器端执行,哪些在客户端
运行。学习好这部分内容,在以后的开发中,也可以增加程序的安全
性。
从上面的例子中可以清楚地看出PHP的工作原理。PHP程序都是在
服务器端解释执行,而执行的结果转化成HTML语言的格式输出到客户
端。因此查看程序源文件时,PHP程序是看不到的,显示的只是PHP执
行的结果。1.4.2 PHP与ASP、JSP的比较
PHP是一种CGI语言,写CGI的方式多种多样,PHP只是其中的一
种。传统的方法有C、Visual Basic,编写时虽然效率高,但是比较烦
琐,不容易维护,所以现在应用的范围并不广。目前比较流行的除PHP
外,还有与其类似的微软的ASP、Sun公司的JSP。JSP与Java能紧密结
合,目前很多的Java程序都能非常容易地改编成JSP程序,它也有着平
台无关性,相信会有越来越多的人尝试用JSP编写动态网页。在这里笔
者并无意断言孰优孰劣,只是客观展示它们的性能特点。对PHP、ASP、JSP三种语言的比较如表1.1所示。从表1.1中可以看出,ASP与平台和服务器无关性最差,只有在微软
的Windows系统IIS上才能把功能完整地体现出来。PHP适用多种操作系
统和几乎所有的网络服务器,JSP的平台无关性最好。
在稳定性上,PHP有良好的口碑,很多应用PHP架设的网站,长时
间运作都不会出现问题。而ASP有时会使系统不稳定,需要重新启动操
作系统,不过这有可能是因为有些ASP用户使用的是Windows 9x操作系
统的缘故,ASP在WindowsNT2000上的稳定性还是不错的。由于JSP推
出时间较短,还没有大规模地应用,因此不太好断言。但JSP是秉承
Java的,从Java的稳定性来看,JSP稳定性应该不错。
总而言之,一种语言要达到各方面性能都非常优秀,几乎是不可能
的,但是PHP正处于各种性能的平衡点,完全可以满足在设计动态网页
时各方面的要求。1.5 小结
通过对本章的学习,读者可以了解到PHP有简单性、速度快、平台
无关性、强大的数据库支持、开放源代码、基于服务器端、执行效率高
等优点。
PHP的工作原理是当PHP脚本被客户端请求时,被请求的PHP程序
就开始运行,而且会把运行的结果返回到客户端的浏览器。返回到客户
端浏览器的内容只是普通的HTML文本。这样就使得程序占用空间比较
少,运行速度得到保障。第2章 搭建PHP环境
在了解了PHP众多的优秀特点后,接下来要做的是架设一个PHP运
行环境,本章要介绍如何安装和设置PHP。PHP可以在IIS上运行,也可
以在Apache服务器上运行。PHP也可以在不同的平台上运行,如
Windows操作系统、Linux操作系统等。
在不同的平台上,安装和设置PHP是有一定差异的。鉴于多数读者
所使用的环境,本章将对Windows平台下PHP的安装和设置进行详细介
绍。在Windows平台下运行PHP环境,可以是IIS服务器,也可以是
Apache服务器。
2.1 Windows下的IIS与PHP
Windows系统内置的Internet信息服务IIS对ASP具有良好的支持,因
此在IIS中调试ASP网页是非常方便的。但有些朋友的网页采用PHP编程
技术,默认情况下IIS是不支持PHP开发的,本节将介绍如何使IIS与PHP
进行天衣无缝的合作。
2.1.1 IIS的安装
如果要运行PHP程序,就得有一个能执行PHP的平台。下面就介绍在Windows下的IIS上运行PHP程序。如何得到IIS?读者可以在网上下
载,也可以使用Windows系统盘。在这里只介绍用系统盘在Windows
2003上安装IIS。
(1)先准备好一张Windows 2003系统盘,把它放入光驱,然后单
击控制面板中的“添加删除程序”图标,弹出图2.1所示的对话框。
图 2.1 “添加或删除程序”对话框
(2)在弹出的对话框中,单击“添加删除Windows组件”图标,弹
出图2.2所示的对话框。在组件下拉列表中选择“添加删除程序”项,然
后单击“下一步”按钮,弹出图2.3所示的对话框。现在已经开始安装了,稍等片刻会弹出图2.4所示的对话框。
注意 选中“添加删除程序”后,也可单击“详细信息”按钮,对安装
的主件进行选择。图 2.2 “Windows组件向导”对话框
图 2.3 安装组件
图 2.4 完成组件安装
(3)单击“完成”按钮,此时IIS就安装完成了。运行代码2.1查看IIS
是否安装成功。打开IE浏览器,在地址栏中输入http:localhost2-
1.html,如果成功,运行结果如图2.5所示。图 2.5 测试页运行效果图
代码2.1 测试IIS安装是否成功程序:2-1.html
测试页面
现在又5点了,很晚了.
想睡觉了,可是还得努力啊!
注意 IIS的默认端口号是“80”,不能被其他程序占用,如果被其他
程序占用,IIS就无法启动。可以修改IIS端口号。2.1.2 PHP的安装及配置
在Windows系统下安装PHP是大多数读者的选择。它相对于
LinuxUNIX系统下的安装比较简单。下面具体介绍Windows下安装PHP
的步骤。
(1)下载PHP 5.0 for Windows的安装程序。读者可以到
http:www.php.net下载。下载完成后,双击PHP 5.0安装包,会弹出图
2.6所示的对话框,单击Next按钮,弹出图2.7所示的对话框。
图 2.6 PHP 5.0安装图
图 2.7 PHP 5.0安装图
(2)在该对话框中勾选I accept the terms in the License Agreement复选框,Next按钮将变成黑色,单击该按钮,弹出图2.8所示的对话框。
图 2.8 选择安装目录对话框
(3)在该对话框中,可以通过单击Browse按钮,选择PHP 5.0的安
装目录。这里按照PHP 5.0默认的目录安装,单击Next按钮,弹出图2.9
所示的对话框。
图 2.9 服务器设置选项对话框
(4)这个对话框是服务器设置选项对话框,因为笔者用的是IIS,所以选择IIS ISAPI module,单击Next按钮,弹出图2.10所示的对话框。图 2.10 选择项目设置对话框
(5)在该对话框中对项目进行设置,单击Extensions和Extras两
项,在下拉列表中选择第2个选项,如图2.11所示。然后单击Next按钮,弹出图2.12所示的对话框。单击Install按钮,开始安装PHP 5.0,安装完
成后弹出对话框,如图2.13所示。
图 2.11 项目设置完成图
图 2.12 PHP 5.0设置完成图图 2.13 PHP 5.0安装完成图
(6)单击Finish按钮完成PHP 5.0的安装。接下来对PHP进行设置。
打开pnp.ini文件,首先找到extension_dir,修改成
extension_dir=C:\Program Files\PHP\ext。然后再找到
extension=msql.dll,把前面的“;”去掉。接着将php5isapi.dll和msql.dll这
两个文件复制到WINDOWS\system32\,然后在IIS里添加.php后缀,操作如图2.14所示。单击图2.14中所示的的“配置(G)...”按钮,弹出图
2.15所示的对话框。
图 2.14 IIS中添加后缀图 2.15 配置后缀
(7)单击图2.15中所示的“添加(D)...”按钮,弹出图2.16所示的
对话框。在“可执行文件”文本框中输入C:\Program
Files\PHP\php5isapi.dll,在“扩展名”文本框中输入.php,然后单击“确
定”按钮。重新启动IIS,PHP 5.0设置完成。下面就写个程序来测试一
下,如代码2.2所示。
图 2.16 添加后缀对话框
代码2.2 测试PHP的安装是否成功程序:2-2.php
程序名称:2-2.php
程序功能:测试PHP的安装是否成功.
只做简单的输出操作.
Php输出的标记是echo
echo你成功地安装了PHP!;
>在地址栏中输入http:localhost,运行效果如图2.17所示,这样就
表明PHP 5.0安装成功了。
图 2.17 测试PHP 5.0安装是否成功
注意 安装IIS和PHP 5.0没有先后顺序。2.1.3 下载并安装DevPHP3编辑器
程序运行需要一个平台,而代码的编写就需要一个编辑器。编辑器
有很多种,如EngInSite PHP Editor、NuSphere PHPEd等,这里就不一一
介绍了。下面来介绍一下DevPHP3编辑器。
(1)读者可以在网上下载这个编辑器,下载后双击该软件的安装
文件,会弹出图2.18所示的对话框。
图 2.18 编辑器语言选项对话框
(2)在这个对话框中,可以选择喜欢的语言,不过这里没有简体
中文。软件下载时会有一个简体中文语言文件,可以在安装之后进行设
置。单击OK按钮,会弹出图2.19所示的对话框。在该对话框中直接单
击(N)按钮,弹出图2.20所示的对话框。
图 2.19 编辑器安装对话框图 2.20 编辑器的阅读协议对话框
(3)在该对话框中选中第1个选项,也就是同意协议书。然后单
击(N)按钮,弹出图2.21所示的对话框。
图 2.21 选择安装路径对话框
(4)在这里可以选择适合的路径,然后单击(I)按钮,弹出图
2.22所示的对话框。单击(F)按钮,这样就完成了编辑器的安装。
图 2.22 编辑器安装完成对话框2.1.4 设置DevPHP 3编辑器
安装好DevPHP 3编辑器后,接下来学习如何设置编辑器。
(1)首先把chinese.lng文件复制到\Dev-PHP\lang\目录下,也就
是编辑器的安装目录下的lang文件包里。然后打开编辑器,按Ctrl+N键
新建一个PHP文件,如图2.23所示。
图 2.23 编辑器窗口
(2)编辑器新建PHP文件之后的窗口如图2.23所示,单击窗口中第
4个菜单,弹出图2.24所示的对话框。
图 2.24 编辑器外观选项窗口
(3)在该对话框中选择从上到下的第6个选项,将会弹出设置语言的对话框,如图2.25所示。在该对话框第1栏的下拉菜单中选择Chinese
选项,然后单击窗口下方有字的按钮,也就是窗口下方的第1个按钮,这样编辑器的语言设置就完成了。接下来需要设置编辑器环境,这样写
好的PHP程序就可以在该编辑器中直接运行了。在编辑器中单击“外
观”按钮,弹出图2.26所示的菜单项。
图 2.25 设置语言对话框
图 2.26 “外观”菜单
(4)选择“环境选项”菜单,弹出图2.27所示的对话框。选择对话框
中的“编译器”选项卡,进行环境设置,如图2.28所示。
图 2.27 “环境选项”对话框图 2.28 “编译器”选项卡
(5)在该对话框中,PHP编译器是指PHP执行文件的安装路径。笔
者的安装路径为C:\PHP\php.exe。其他选项默认就可以了。现在测试一
下,程序如代码2.3所示。
代码2.3 测试编辑器环境设置是否成功程序:2-3.php
程序名称:2-3.php
程序功能:测试编辑器环境设置是否成功.
echo测试成功!;
>
(6)执行程序,如果运行效果是乱码等,则说明设置没有成功;
如果运行效果如图2.29所示,则证明编辑器的环境设置成功。
图 2.29 测试程序执行效果图2.2 Windows下的Apache配置
Apache是什么呢?Apache就是一个应用服务器,类似微软的IIS。
Apache的安装比较简单,这里不做详细介绍。需介绍的是安装完成后,怎样对Apache进行设置,才能使Apache更好地工作。
注意 在安装Apache前,机器的“80”或“8000”端口不能被占用。如
果被其他程序占用,安装Apache时会报告错误。
2.2.1 使Apache识别PHP程序
怎样可以在Apache里能正常地显示简体中文?在Apache安装目录中
打开配置文件httpd.conf,找到AddDefaultCharset ISO-8859-1这行,将其
改为AddDefaultCharset GB2312,也就是让默认语言编码为简体中文。
为了在Apache下可以识别到PHP程序,需进行下面的设置。打开
Apache的配置文件,找到AddType applicationx-gzip.gz.tgz这行,如果没
有如下所示的几行代码,就加入如下代码;如果有如下所示的代码,就
把代码前面的“;”去掉,这样Apache就可以识别到PHP程序了。
ScriptAliasphpc:php
AddType applicationx-httpd-php.php
Action applicationx-httpd-phpphpphp-cgi.exe怎样将Apache的默认Web目录修改成读者喜欢的浏览目录?同样也
要打开Apache的配置文件httpd.conf,找
到DocumentRootD:Apache2htdocs这行代码,将其改为读者所喜欢
的Web目录,如笔者的为DocumentRootD:www。如果读者不想修
改,也可以不修改。
对于Apache的服务器配置有很多技巧,本书将在下面简要地介绍最
常用的Apache的配置技巧。2.2.2 设置请求等待时间
在Apache的安装目录下,打开conf文件夹下的httpd.conf Apache配
置文件,找到TimeOut n,其中的n表示以秒为单位的整数。修改此项可
以有以下方法:通过获得一个get请求的总时间;也可以通过获得一个
post和put请求的TCP包间的时间差;最后是TCP包传输中响应的时间间
隔。2.2.3 修改Apache监听的端口
打开Apache的配置文件,找到Listen的选项。例如,要修改Apache
监听的端口为8000,则需要修改Listen选项为Listen 8000,这样Apache
的监听端口就为8000了。
注意 如果要同时监听给定的端口和地址,就可以修改为Listen
192.168.60.188:8000。
现在测试一下Apache服务器,程序如代码2.4所示。
代码2.4 测试Apache服务器设置是否成功程序:2-4.php
程序名称:2-4.php
程序功能:测试Apache服务器设置是否成功.
echo测试成功!;
>
如果运行效果如图2.30所示,说明Apache安装成功;如果没有正常
显示,则需要再详细地查看配置文件,找到出现问题的原因,将其解
决。
图 2.30 测试程序2-4.php的运行效果图2.3 小结
本章学习了PHP在Windows下的环境的搭建,有IIS的安装、PHP的
安装及配置、编辑器的安装并设置、Apache的安装配置。
在IIS里添加PHP的后缀,是为了使PHP程序在IIS中解释执行。
PHP的配置,是为了在运行PHP程序时,不出现MySQL等模块没
有正确加载。
对编辑器的设置,可以使PHP程序能在编辑器中直接执行。
Apache的配置,是为了可以正常地执行PHP程序,以及Apache服
务器如何设置等待时间和监听端口。第3章 网页基础速成:静态及动态技术
本章要为读者介绍页面的基础知识。实现网页最基本的语言就是
HTML语言。虽然现在有好多新的技术(XML等),但是网页中最常用
的还是HTML语言。本章将为读者介绍如何使用样式,使网页变得更加
美观。
本章还将介绍JavaScript的基础知识,以及如何使用JavaScript进行
表单的检验等,这些知识涉及一些基本的网页动态操作,希望读者能好
好掌握。
3.1 认识HTML
HTML是一种超文本标识语言,用来描述WWW上的超文本文件。
它主要是在原来文本文件的基础上,加一系列的标识符号描述其格式,形成网络文件。当用户使用浏览器下载文件时,就把这些标识解释成它
应有的含义,按照一定的格式,将这些被标识的文件显示在屏幕上。而
HTML的标识符号并不显示在屏幕上。
3.1.1 HTML介绍
HyperText Markup Language的缩写是HTML,简称超文本标记语言。它是现在最常见的网页制作语言,也是网页的基础语言。不管使用
哪种技术开发Web,最终反应在用户浏览器上的总是HTML代码。
HTML具有跨平台兼容特性。它可以在所有安装浏览器的计算机
上浏览HTML文档。
HTML 4.0的推出,改进了语言环境、设备环境和显示环境的特
性,完善了一些功能,样式支持、脚本等方面得到了提高。
学习HTML,主要是了解网页是如何工作的。了解HTML的基础
知识,就可以灵活地制作出读者喜欢的网页效果,也可以使PHP与
HTML更好地结合。3.1.2 HTML基本标记介绍
HTML是由标记和属性构成的。标记是用于告诉浏览器怎么显示文
档。属性是标记的一个选项,起到修饰作用,如高度、宽度、对齐方式
和颜色等。标记的构成是由一对尖括号(<>)括起来的元素,尖括号
之间的内容就是HTML命令。标记的格式如下:
标记大多数是成对出现,称为起始标记和结束标记。如,但是也有少量的不是配对出现的标记。起始标记和结束标记
样子很相似,唯一不同的就是结束标记有一个斜杠号。也就是在起始标
记中加一个斜杠号,放在尖括号内的首部,就是结束标记。
标记的使用是,把需要标记的内容放入起始标记和结束标记之间,也就是起始标记要放在需要标记的内容前面,而结束标记要放在需要标
记内容之后。下面通过一个例子来说明如何使用HTML标记,程序如代
码3.1所示。
代码3.1 如何使用HTML标记程序:3-1.html
标记的使用
需要标记的内容
零基础学PHP+MySQL
郑海生 著
ISBN:978-7-111-26331-9
本书纸版由机械工业出版社于2009年出版,电子版由华章分社(北京华
章图文信息有限公司)全球范围内制作与发行。
版权所有,侵权必究
客服热线:+ 86-10-68995265
客服信箱:service@bbbvip.com
官方网址:www.hzmedia.com.cn
新浪微博 @研发书局
腾讯微博 @yanfabook目录
写给未来的程序员
学习编程需要注意的几点
丛书书目
丛书特点
完善的售后服务
前言
本书特点
本书内容
本书适合的读者
本书的作者
第一篇 PHP入门基础
第1章 初识PHP
1.1 了解PHP
1.2 PHP的地位及优势
1.3 PHP的学习和工作原理
1.4 初识PHP程序
1.5 小结
第2章 搭建PHP环境
2.1 Windows下的IIS与PHP2.2 Windows下的Apache配置
2.3 小结
第3章 网页基础速成:静态及动态技术
3.1 认识HTML
3.2 文字与段落标记
3.3 插入图像
3.4 表格的使用
3.5 表单的使用
3.6 网页的美化CSS
3.7 JavaScript基础
3.8 小结
第4章 PHP基础
4.1 基本语法
4.2 文件引用
4.3 数据类型
4.4 基本变量
4.5 小结
第5章 运算符
5.1 算术运算
5.2 比较运算与逻辑运算
5.3 位运算5.4 字符串运算
5.5 赋值运算
5.6 表达式
5.7 递增递减运算
5.8 掌握运算符的优先级
5.9 小结
第6章 流程控制结构
6.1 选择分支结构
6.2 循环语句
6.3 利用循环控制流程
6.4 其他流程控制语句
6.5 小结
第7章 函数和对象的基本知识
7.1 函数
7.2 一个函数的开发实例—上传文件系统
7.3 对象
7.4 一个对象的开发实例
7.5 小结
第二篇 PHP的常用函数库
第8章 PHP的常用函数库
8.1 字符串处理函数8.2 数组处理函数
8.3 数学运算函数
8.4 日期与时间函数
8.5 目录与文件函数
8.6 PHP实践—无数据库留言板
8.7 小结
第9章 MySQL数据库
9.1 认识并安装MySQL数据库
9.2 MySQL的基本操作
9.3 MySQL数据库的数据类型
9.4 小结
第10章 MySQL简单管理及MySQL操作
10.1 进入MySQL设置管理员密码
10.2 增加用户并设置密码及用户权限
10.3 取消权限及删除用户
10.4 备份和复制数据库
10.5 MySQL数据库定义
10.6 SQL数据操作
10.7 小结
第三篇 数据库
第11章 使用phpMyAdmin管理MySQL数据库11.1 phpMyAdmin的安装和配置
11.2 用phpMyAdmin进行MySQL权限管理
11.3 用phpMyAdmin进行数据库及表的管理
11.4 小结
第12章 PHP中使用MySQL数据库
12.1 MySQL数据库函数在PHP中的应用
12.2 用PHP进行数据查询
12.3 用PHP进行数据表的修改
12.4 PHP操作MySQL实例—学生信息管理系统
12.5 小结
第四篇 PHP的高级开发
第13章 PHP的面向对象编程
13.1 PHP中的类应用
13.2 PHP模板的应用
13.3 小结
第14章 PHP与Ajax
14.1 什么是Ajax
14.2 Ajax的实现原理和工作流程
14.3 Ajax应用
14.4 Spry框架
14.5 小结第15章 PHP与正则表达式
15.1 了解正则表达式
15.2 正则表达式的语法
15.3 PHP中相关正则表达式的使用
15.4 常用的正则表达式
15.5 正则表达式实例
15.6 小结
第16章 PHP与XML
16.1 XML快速入门
16.2 深入XML文档
16.3 用PHP函数处理XML文档
16.4 使用DOM库处理XML文档
16.5 小结
第五篇 PHP综合实例
第17章 PHP留言板实例
17.1 数据库设计
17.2 共用页面部分
17.3 UBBCode转换为HTML
17.4 留言列表页面
17.5 发表留言程序
17.6 管理员的登录17.7 管理员的回复程序
17.8 设计首页
17.9 小结
第18章 新闻发布系统
18.1 数据库准备
18.2 添加新闻
18.3 修改新闻
18.4 删除新闻
18.5 浏览新闻
18.6 小结
第19章 PHP论坛
19.1 数据库准备
19.2 共用显示部分
19.3 用户注册
19.4 登录页面
19.5 发表文章程序部分
19.6 文章的显示页面及文章的回复程序
19.7 文章的锁定操作
19.8 文章的置顶操作
19.9 文章的删除及修改
19.10 论坛主页面19.11 小结
附录
附录A 正则表达式参考
A.1 普通字符
A.2 元字符
A.3 转义字符
A.4 匹配多种字符的表达式
A.5 使用符号创建匹配多种字符的表达式
A.6 用来限定匹配次数的表达式
A.7 其他说明
附录B PHP代码编写的一般规则
B.1 标识符命名规范
B.2 代码编写规范
附录C PHP下的编码
C.1 我们面对的是纷繁复杂世界
C.2 浏览器的编码和解码
光盘内容写给未来的程序员
很多初学者对编程心生恐惧,不知道从何学起。尤其是看了别人的
经验,说要先学操作系统原理、数据结构、算法等,一大堆概念涌过
来,让人不知所措。其实,编程没有那么复杂,跟我们来吧,“零基
础”系列正是为不会编程的你准备的!
学习编程需要注意的几点
不要死记语法:很多初学者试图把各种语法背下来,其实这是极
其错误的,程序开发的语法、规范特别多,不可能都记得下来,你只要
知道有这么一个功能就可以了,需要的时候翻阅书籍,或者查找帮助文
件,这样省时省力。
多动手,多练习:只知道死啃书本的人,是不会成为开发高手
的,只有多上机编写程序,才能在实践中提高对编程的认识。
遇到问题,首先尝试自己解决:自己先用一天的时间,尽力解
决,实在不行再去找人帮助,千万不要遇到问题立刻找人帮忙,这样永
远也不会提高。
多用Google、Baidu:网络是一个大知识库,是最好的老师,你
遇到的问题,别人也遇到过,多去搜索一下吧。?多阅读别人的源代码:要看懂别人的设计思想,不断地融为己
用。
丛书书目
《零基础学Ajax》
《零基础学PHP+MySQL》
《零基础学JavaScript》
《零基础学C++》
《零基础学PHP》
《零基础学HTML+CSS》
《零基础学Java》
《零基础学C3.0》
《零基础学Java Web开发》
《零基础学Excel VBA》
《零基础学Visual C++》《零基础学Visual Basic》
《零基础学Visual Basic+SQL Server》
《零基础学Visual C2005》
《零基础学ASP.NET 3.5》
《零基础学SQL Server 2005》
《零基础学Dreamweaver CS3+ASP》
丛书特点
本丛书考虑了初学者的认知特点,在讲解的过程中遵循如下原则:
·从基本的环境配置讲起,告诉你如何搭建开发环境。
·细致讲解第一个例子,让你在第一个例子中学会程序开发的基本
步骤。
·强调动手实践,对每个知识点都有相应的代码段,让你在操作中
领会编程的真谛。
·注释极为详尽,方便读者阅读代码,理解其中的含义。完善的售后服务
我们提供了论坛:http:www.rzchina.net,读者可以在上面提问交
流,另外我们还会在论坛上定期发布一些小的教程、视频动画,以提高
读者的学习效率。
最后送给各位读者一句话:“天下事有难易乎?为之,则难者亦易
矣;不为,则易者亦难矣。”还等什么,现在就动手学习吧!前言
PHP是一种目前比较流行的非客户端Web程序开发语言之一。其主
要的特点是语法简单、学习容易、功能强大。对于初学者来说容易接受
且容易上手。在结合了一些最新编程语言的最佳特性后,PHP、MySQL
和Apache的组合已经成为Web服务器的一种配置标准。学习PHP是十分
轻松、令人感觉愉悦的;开发PHP程序的过程也是比较简单、快捷的。
可以说,PHP已经成为Web脚本技术的先驱,并且会继续引领Web技术
的潮流。
笔者精心编写了本书,目的是帮助想要学习PHP的人员,掌握PHP
程序开发的知识,尤其是为PHP新手进入PHP开发行业提供一个开发知
识的阶梯。笔者结合自己多年的开发经验和团队管理经验,为广大开发
人员介绍了各种领先的开发技术和开发理念,作为开发人员提高自己的
技术水平、完善自己的知识结构、扩展自己的开发知识面的参考。
本书特点
本书由浅入深地讲解了PHP开发的理论和方法,以及目前流行的各
种Web技术和常用的PHP开发工具。在每章的最后,笔者还给出了对读
者学习本章的要求及比较重要的知识点。对初学者,笔者不但介绍了
PHP的基础知识,而且介绍了PHP开发的高级阶段,使初学者可以一步到位。
本书基本涵盖了PHP开发Web程序的各个方面的知识,从开发设计
到程序的开发,从开发的基本理论到程序开发的实用技术,讲述了各种
常用的开发案例设计方法及开发流程,以及各种Web技术的使用方法。
本书的特点主要体现在以下几个方面。
本书的编排采用循序渐进的方式,适合初级、中级读者逐步掌握
PHP程序开发的基本方法和程序的设计。
本书结合笔者的开发经验由浅入深地介绍PHP知识,在每章的最
后指出了对读者学习本章的要求及比较重要的知识点。
本书在介绍各种Web开发方法和技术时,采用了浅显易懂的例
子,在介绍PHP常用函数时使用了一个知识点配一个实例的方式,方便
读者自己进行实践和演练。在本书的介绍中,提供了丰富完整的开发示
例代码,读者可直接使用,或者根据自己的实际情况进行调整。本书的
所有例子和源代码都附在随书光盘中,方便读者使用。
本书在体现基础的开发知识外,还适当地加入了目前Web开发领
域的各种先进的前沿技术和理论,方便读者借鉴PHP程序开发的理念和
技术。本书内容
本书共分为五篇,共19章和3个附录,从PHP的基本概念讲起,再
进一步介绍PHP程序开发过程所经历的各个阶段;然后结合目前PHP开
发的各种实用技术和常用工具,讲解如何进行各种类型的程序开发;最
后结合笔者的经验讲解如何养成一个良好的程序开发习惯,让开发人员
的水平得以不断提高。
第一篇(第1章~第7章)PHP入门基础。
讲述了PHP的基础知识,包括初识PHP、搭建PHP环境、网页基础
速成:静态及动态技术、PHP基础、常量和变量、运算符、流程控制结
构、函数和对象的基本认识。
第二篇(第8章~第10章)PHP的常用函数库。
讲述了PHP常用函数知识,包括PHP的常用函数库及PHP实践程序
无数据库留言板,使PHP开发人员了解PHP常用的函数库及使用方法。
第三篇(第11章~第12章)数据库。
具体讲述了MySQL数据库,包括MySQL数据库的介绍、MySQL简
单管理及MySQL操作、使用phpMyAdmin对MySQL数据库进行管理、PHP中使用MySQL数据库,使PHP初学者了解MySQL数据库及对数据库的操作。本篇也介绍了如何使用PHP管理工具phpMyAdmin,更加方
便初学者的学习。
第四篇(第13章~第16章)PHP的高级开发。
主要介绍PHP的高级开发阶段,包括PHP的面向对象编程、PHP与
Ajax、PHP与正则表达式、PHP与XML,为PHP中级学者提供一些提高
开发技术水平的知识。学习这4章内容,可以使开发人员思路清晰,更
加快捷地实现程序开发。
第五篇(第17章~第19章)PHP的综合实例。
主要介绍PHP的综合实例,包括留言板、新闻发布系统、PHP论
坛,为PHP学习者提供一些开发案例,方便PHP学习者进一步研究。
本书由浅入深,从理论到实践,尤其适合初级读者逐步学习及完善
自己的知识结构。
本书适合的读者
希望学习PHP程序开发的新手。
迫切想要提高个人PHP程序开发技能和水平的初级人员。
具备一定的PHP开发理论知识,但是缺乏实践的程序开发人员。?希望学习PHP最新开发技术的程序员。
希望了解大型Web程序的开发思想和开发技巧的人员。
目前正在考虑在PHP程序开发中使用Ajax、XML等技术的人员。
Web开发入门人员。
本书的作者
本书主要由郑海生编著,其他参与编著和资料整理的人员有冯华
君、刘博、刘燕、叶青、张军、张立娟、张艺、彭涛、徐磊、戎伟、朱
毅、李佳、李玉涵、杨利润、杨春娇、武鹏、潘中强、王丹、王宁、王
西莉、石淑珍、程彩红、邵毅、郑丹丹、郑海平、顾旭光。
编者第一篇 PHP入门基础
第1章 初识PHP
本章将介绍PHP,PHP是一种工作在服务器端的脚本语言。它的基础
语法是Perl语言,提取了C、ASP、Shell和JavaScript脚本语言的优点,是一种和ASP相似的技术。PHP是一种嵌入式脚本语言,与HTML语言
结合,实现与用户的交互以及对数据库的访问。
PHP的全名是超文本预处理器(Professional Hypertext
Preprocessor)。它是HTML中内嵌的脚本语言,拥有比其他脚本语言更
快的执行效率。而且最吸引开发人员的一点是,它完全是免费的。
PHP、MySQL(一个免费的数据库)和Apache(也是一个免费的服务
器)相互配合工作,已经被大多数网站设计员所采用。
1.1 了解PHP
PHP语言是怎么出现的,它能为Web程序带来什么发展,它都包括
哪些方面,这就是本节要介绍的主要内容。
1.1.1 PHP能做什么PHP主要用在服务器端的脚本程序,它可以完成其他任何类似于
ASP技术所能完成的工作,例如收集表单数据、生成动态网页等。但
PHP的功能不止这些。PHP脚本语言主要用于以下3个方面。
服务器端的脚本语言。其是PHP最主要的方面,能够搭建PHP运
行平台。读者在运行Web服务器时,通过Web浏览器来访问PHP程序的
输出内容,也就是客户端的PHP页面。
命令行格式的脚本语言。读者可以编写一段PHP脚本程序,只需
要使用PHP解析器来执行,就可以得到想要的内容。
编写客户端的图形界面应用程序。对基于窗口模式的应用程序,或许PHP不是最好的程序语言,但是如果读者特别精通PHP语言,而且
还希望在客户端应用程序中使用PHP的一些高级特性,那么读者就可以
利用PHP-GT来编写客户端应用程序。PHP程序语言具有跨平台的特
性,读者也可以通过PHP-GTK编写跨平台的应用程序。PHP-GTK是
PHP包中的一个扩展包,在通常发布的PHP包中并不包含此包。
PHP的功能不止上述几方面,还有其他方面。PHP也具有平台无关
性,它不仅可以在Windows中使用,还可以在Linux、UNIX中使用。
PHP还有一个显著的特性,就是可以支持多种数据库。读者将会慢
慢地发现PHP与大多数数据库相配合工作的网页是多么的简单。现在
PHP所支持的数据库如图1.1所示。图 1.1 数据库名表1.1.2 PHP的发展
1994年,Rasmus Lerdorf设计出了第1个PHP,但是今天人们使用的
PHP和最初的版本有很大的不同。现在PHP的最新版本是PHP 5.0。下面
就是PHP从PHP 1.0到PHP 5.0的一个发展过程。
(1)最初PHP只是一套简单的Perl脚本,用来跟踪访问其主页的人
们的信息。这一套脚本的名字为Personal Home Page Tools。随着更多功
能需求的增加,Rasmus使用C语言写了一个更大的、可以访问数据库、可以让用户开发简单的动态Web程序。Rasmus发布了PHPFI的源代码,以便每个人都可以使用,同时也可以让程序爱好者们修正源码中的
Bug,从而改进源代码。
PHPFI是一个专为个人主页表单提供解释程序的程序,已经包含
了今天PHP的一些基本功能。有着Perl样式的变量,自动解释表单变
量,并可以嵌入HTML。语法本身与Perl很相似,但是它很有限、很简
单,还稍微有些不协调。
(2)一直到1997年,PHPFI 2.0,也就是使用C语言实现的第2版,在全世界的用户和众多域名上被安装。
PHPFI 2.0在经历了诸多个beta版本的发布后,于1997年11月发布了官方正式版本。不久,PHP 3.0第1个alpha版本发布,PHP从此走向了成
功。
(3)PHP 3.0是类似于当今PHP语法结构的第1个版本。Andi
Gutmans和Zeev Suraski在为一所大学的项目中开发电子商务程序时,发
现PHPFI 2.0功能明显不足,于是Andi Gutmans和Zeev Suraski重写了代
码,也就是PHP 3.0。经过Andi、Rasmus和Zeev一系列的努力,考虑到
PHPFI已存在的用户群,于是决定联合发布PHP 3.0作为PHPFI 2.0的官
方后继版本。
PHP 3.0一个最强大的功能是可扩展性。除了给最终用户提供数据
库、协议和API的基础结构,PHP 3.0的可扩展性还吸引了大量的开发人
员提交新的模块。后来证实,这是PHP 3.0取得巨大成功的关键。PHP
3.0中的其他关键功能包括面向对象的支持,以及更强大和协调的语法
结构。
(4)1998年的冬天,PHP 3.0官方发布不久,Andi Gutmans和Zeev
Suraski开始重新编写PHP代码。设计目标是增强复杂程序运行时的性
能,以及PHP自身代码的模块性。PHP 3.0的新功能、广泛的第3方数据
库,API的支持以及使得这样程序的编写成为可能,但是PHP 3.0没有高
效处理如此复杂程序的能力。
新的被称为Zend Engine的引擎,也就是Zeev和Andi的缩写。它成功地实现了设计目标,并在1999年中期首次引入PHP。基于该引擎并结合
了更多新功能的PHP 4.0,在PHP 3.0发布两年后,于2000年5月发布了官
方正式版本。除了更高的性能以外,PHP 4.0还包含了其他一些关键功
能,例如支持更多的Web服务器、HTTP Sessions支持、输出缓存、更安
全地处理用户输入的方法以及一些新的语言结构。
(5)PHP 5.0是当前PHP的最新版本。PHP的开发小组有很多优秀
的开发人员,同时还有大量的优秀人才在进行着PHP相关工程的开发工
作,如PEAR和PHP文档的工程。
PHP 5.0的更多关于该引擎的信息,请访问PHP的官方网站。1.2 PHP的地位及优势
上面介绍了PHP能做什么及PHP是如何发展的。正是因为它的优
势,现在将介绍PHP在互联网中的地位及它的优势。
1.2.1 PHP所具有的优点及其在互联网中的地位
PHP之所以能有这样的发展,显然是跟它的一些优点是分不开的。
下面就来看看PHP有哪些优点。
简单性:简单就是比较好学,容易入手。PHP借用了C、Perl、Shell及JavaScript等一些好的语法框架。对于初学者来说,很快就可以
掌握。
速度快:PHP比传统的解释执行方式的语言速度快好几倍。
跨平台性:PHP可以在Windows、Linux、Unix系统下运行。将
Windows下的PHP程序拿到Linux、UNIX系统下,不需要对PHP代码进
行修改,就可以使用。
强大的数据库支持:PHP有很多可被支持的数据库,如图1.1所
示。?PHP的开放源代码:开放源代码指的不单是PHP应用程序的源代
码,而且还有PHP本身的源代码。也就是说,可以在PHP的官方网上找
到PHP源代码进行编译和执行,以得到最终的运行程序,如果有必要也
可以做出修改。
基于服务器端:也就是说PHP是运行在Web服务器端。PHP程序
可能很大、很复杂,但是它的运行速度只和服务器的速度有关,发送到
客户端只是程序运行的结果,对客户端的执行速度不会产生直接的影
响。
执行的效率高:和其他的CGI语言比较,PHP语言不但占用的系
统资源比较小,而且运行的速度比较快,所以它的执行效率较高。
正因为PHP具有上述这些优点,所以它在互联网中的地位很高,被
非常广泛地应用。读者可以在google.cn或baidu.com中输入PHP,结果是
什么样的呢?下面就以PHP在google.cn中查询为例,看看是什么结果,如图1.2所示。图 1.2 查询PHP的结果图
由图可见全世界有多少人在使用PHP,这也足可以证明读者的选择
是正确的。虽然数据并不是那么准确,但也可以表明PHP在全世界范围
内应用的广泛性。1.2.2 PHP的优势
PHP语言的优势如下。
良好的安全性:PHP的代码是开源,所有PHP的源代码每个人都
可以看得到。代码在许多工程师手中进行了检测,同时它与Apache编辑
在一起的方式也可以让它具有灵活的安全设定,因此PHP具有了公认的
安全性能。
跨平台特性:ASP比不上PHP的跨平台能力,PHP几乎支持所有
的操作系统平台及数据库系统,正是它的这种能力让UNIX和Linux有了
一种与ASP媲美的开发语言,并广为流行。
易学性:PHP嵌入在HTML语言中,且坚持以脚本语言为主。与
Java、C等语言不同,PHP语法简单、书写容易,方便学习和掌握。
执行速度快:占用系统资源少,代码执行速度快。
免费:在流行的企业应用LAMP平台中,PHP、Linux、Apache、MySQL都是免费软件,降低了企业架设成本。
目前互联网上众多动态网页都采用PHP语言编写。1.3 PHP的学习和工作原理
通过上面的介绍,读者对PHP有了初步的认识。本节将介绍PHP是
如何工作的,以及如何才能学好PHP。PHP工作流程的总结如下。
产生对PHP脚本的HTTP请求。
Apache将请求传递给PHP引擎。
PHP引擎分析扩展名为.php的脚本,并用特定的标记来启用PHP
模式。
PHP引擎在服务器上执行脚本。
利用PHP扩展或PEAR数据库抽象库,来进行数据库交互或与
LDAP源代码、cron作业等进行的交互。
处理结果。
将数据转换成HTML代码。
将响应发送至客户端浏览器进行显示。
1.3.1 PHP的工作原理PHP是一种开放源代码的脚本语言,是主要应用于Web服务器的服
务端的应用程序,用于动态网页的设计。PHP在功用上也可以替代微软
的ASP、ASP.NET、VBScript、JScript体系、Sun公司的JSP、Java体系
等。它是一种嵌入HTML页面的脚本语言。
PHP在Web服务器上运行。当PHP脚本被客户端请求时,被请求的
PHP程序就开始运行,而且也会把运行的结果返回到客户端的浏览器。
不过发送到客户端浏览器的内容只是普通的HTML文本,没有包含PHP
代码。这也是与嵌入HTML的客户端脚本的最重要的区别。下面来看
PHP的工作流程,如图1.3所示。
图 1.3 PHP工作流程图1.3.2 如何学好PHP
从自己向别人问怎么学PHP开始,到现在不少人又来问笔者怎么学
PHP,不管是新手,还是老手,似乎总是感觉摸不出一条清晰的脉络
来。不过,笔者既然对PHP有了一定水平的理解,那么笔者总结的学习
思路应该可以给初学者一个参考。
这里先把学习PHP的过程做一下概括,如下所述。
熟悉HTML、CSS、JS等网页基本元素,完成阶段可自行制作完
整的网页,对元素属性达到熟悉程度。
理解动态语言的概念、运作机制,熟悉PHP语法。
学习如何将PHP与HTML结合起来完成简单动态页面。
接触MySQL,开始设计数据库程序。
不断巩固,摸透大部分PHP的常用函数,并理解OOP、MySQL优
化以及模板的概念。
完成一个功能齐全的动态站点,是一个循序渐进的学习过程,不过
新手不要看到上面的概括就以为学习蛮简单的,在此不得不对您稍微泼
一下冷水,任何东西其实都不简单,所以读者在学习过程中要认真、坚持,坚持、再坚持,只有这样才能取得成功。
这里先解释一下学习思路,如下所述。
(1)在理解网站这一概念之后不难看出,任何网站都是由网页组
成的,也就是说想完成网站,必须先学会做网页。因此必须要掌握了
HTML,才能为今后制作网站打下基础。
(2)在学习HTML时,边学边做是最有效的方式,这一方式对于
学习PHP同样是最有效的。HTML中的任何元素都要亲自实践,只有明
白了什么元素会起到什么效果之后,才会记忆深刻,而一味地啃书,绝
对是不行的。笔者认为大部分新手之所以觉得概念难学,大部分是因为
一个字“懒”,懒是阻止进步的最大敌人,所以克服掉懒的习惯,才能更
快地学好一样东西。
(3)掌握静态网页的制作技术是学习开发网站的先决条件,这一
点就讲到这里。
(4)等到读者发奋努力地学会了用PHP成功地插入、删除、更新
数据的时候,距离成功就指日可待了。这就是要学习MySQL数据库。
(5)接下来就是巩固知识,熟悉了PHP和MySQL开发的要领之
后,再回头看之前写的那个留言本,也许会怀疑那真的是自己写的吗?
当然是自己写的。这个时候,留言本应该增加一些模块,如注册、分页、数据查询等功能。完成之后,便会感觉特有成就感。
(6)学东西永远不可能有速成这一说,只有通过自己的不断努
力,日积月累,知识才会慢慢地增加。在学习语法时,每个人都有各自
不同的方式,但笔者认为借鉴别人成功的代码,绝对是有益无害。因此
多看那些经过千锤百炼出来的经典代码,是进阶的最好方法。1.4 初识PHP程序
在上一节中,介绍了PHP的工作原理及如何学习PHP,相信大家都
有完成自己的程序的梦想。下面将介绍第1个PHP程序,及PHP与其他脚
本语言的比较。
1.4.1 第1个PHP程序
通过前面的介绍,读者知道了PHP有那么多的优点,下面就看看第
1个PHP程序,如代码1.1所示。
代码1.1 第1个PHP程序:1-1.php
echohello!!!!!!!!!!!;输出语句
>
注意 PHP每个语句是以“;”结尾,所以在echo末尾必须要
有“;”。作用 这个程序是一个测试程序,是大多数初学者见到的第1个
PHP程序。大多数程序都会把hello作为第1个程序显示给初学者认识。
上面的代码必须保存成.php为后缀名的文件。PHP的标记是以
php开始,以?>结束。上面的程序在配置好PHP运行环境服务器后,在
地址栏中输入http:localhost1-1.php,就可以在浏览器中看
到hello!!!!!!!!!!!字符串。程序运行结果如图1.4所示。
图 1.4 第1个PHP程序的运行效果图
读者也可以在浏览器中查看此程序在客户端的源文件。查看结果如
代码1.2所示。
代码1.2 客户端显示程序:1-2.html
echo;
>
上面的代码并没有在输出的页面中出现-->
hello!!!!!!!!!!!
注意 PHP程序执行后,发给客户端的只是HTML文件,这样更加
安全。
作用 笔者给出这个对比程序,是为了让初学者更好地去认识
PHP,更好地掌握客户端与服务器端是如何工作的,为以后的学习打下
基础。通过对比也可以知道哪些代码是在服务器端执行,哪些在客户端
运行。学习好这部分内容,在以后的开发中,也可以增加程序的安全
性。
从上面的例子中可以清楚地看出PHP的工作原理。PHP程序都是在
服务器端解释执行,而执行的结果转化成HTML语言的格式输出到客户
端。因此查看程序源文件时,PHP程序是看不到的,显示的只是PHP执
行的结果。1.4.2 PHP与ASP、JSP的比较
PHP是一种CGI语言,写CGI的方式多种多样,PHP只是其中的一
种。传统的方法有C、Visual Basic,编写时虽然效率高,但是比较烦
琐,不容易维护,所以现在应用的范围并不广。目前比较流行的除PHP
外,还有与其类似的微软的ASP、Sun公司的JSP。JSP与Java能紧密结
合,目前很多的Java程序都能非常容易地改编成JSP程序,它也有着平
台无关性,相信会有越来越多的人尝试用JSP编写动态网页。在这里笔
者并无意断言孰优孰劣,只是客观展示它们的性能特点。对PHP、ASP、JSP三种语言的比较如表1.1所示。从表1.1中可以看出,ASP与平台和服务器无关性最差,只有在微软
的Windows系统IIS上才能把功能完整地体现出来。PHP适用多种操作系
统和几乎所有的网络服务器,JSP的平台无关性最好。
在稳定性上,PHP有良好的口碑,很多应用PHP架设的网站,长时
间运作都不会出现问题。而ASP有时会使系统不稳定,需要重新启动操
作系统,不过这有可能是因为有些ASP用户使用的是Windows 9x操作系
统的缘故,ASP在WindowsNT2000上的稳定性还是不错的。由于JSP推
出时间较短,还没有大规模地应用,因此不太好断言。但JSP是秉承
Java的,从Java的稳定性来看,JSP稳定性应该不错。
总而言之,一种语言要达到各方面性能都非常优秀,几乎是不可能
的,但是PHP正处于各种性能的平衡点,完全可以满足在设计动态网页
时各方面的要求。1.5 小结
通过对本章的学习,读者可以了解到PHP有简单性、速度快、平台
无关性、强大的数据库支持、开放源代码、基于服务器端、执行效率高
等优点。
PHP的工作原理是当PHP脚本被客户端请求时,被请求的PHP程序
就开始运行,而且会把运行的结果返回到客户端的浏览器。返回到客户
端浏览器的内容只是普通的HTML文本。这样就使得程序占用空间比较
少,运行速度得到保障。第2章 搭建PHP环境
在了解了PHP众多的优秀特点后,接下来要做的是架设一个PHP运
行环境,本章要介绍如何安装和设置PHP。PHP可以在IIS上运行,也可
以在Apache服务器上运行。PHP也可以在不同的平台上运行,如
Windows操作系统、Linux操作系统等。
在不同的平台上,安装和设置PHP是有一定差异的。鉴于多数读者
所使用的环境,本章将对Windows平台下PHP的安装和设置进行详细介
绍。在Windows平台下运行PHP环境,可以是IIS服务器,也可以是
Apache服务器。
2.1 Windows下的IIS与PHP
Windows系统内置的Internet信息服务IIS对ASP具有良好的支持,因
此在IIS中调试ASP网页是非常方便的。但有些朋友的网页采用PHP编程
技术,默认情况下IIS是不支持PHP开发的,本节将介绍如何使IIS与PHP
进行天衣无缝的合作。
2.1.1 IIS的安装
如果要运行PHP程序,就得有一个能执行PHP的平台。下面就介绍在Windows下的IIS上运行PHP程序。如何得到IIS?读者可以在网上下
载,也可以使用Windows系统盘。在这里只介绍用系统盘在Windows
2003上安装IIS。
(1)先准备好一张Windows 2003系统盘,把它放入光驱,然后单
击控制面板中的“添加删除程序”图标,弹出图2.1所示的对话框。
图 2.1 “添加或删除程序”对话框
(2)在弹出的对话框中,单击“添加删除Windows组件”图标,弹
出图2.2所示的对话框。在组件下拉列表中选择“添加删除程序”项,然
后单击“下一步”按钮,弹出图2.3所示的对话框。现在已经开始安装了,稍等片刻会弹出图2.4所示的对话框。
注意 选中“添加删除程序”后,也可单击“详细信息”按钮,对安装
的主件进行选择。图 2.2 “Windows组件向导”对话框
图 2.3 安装组件
图 2.4 完成组件安装
(3)单击“完成”按钮,此时IIS就安装完成了。运行代码2.1查看IIS
是否安装成功。打开IE浏览器,在地址栏中输入http:localhost2-
1.html,如果成功,运行结果如图2.5所示。图 2.5 测试页运行效果图
代码2.1 测试IIS安装是否成功程序:2-1.html
现在又5点了,很晚了.
想睡觉了,可是还得努力啊!
注意 IIS的默认端口号是“80”,不能被其他程序占用,如果被其他
程序占用,IIS就无法启动。可以修改IIS端口号。2.1.2 PHP的安装及配置
在Windows系统下安装PHP是大多数读者的选择。它相对于
LinuxUNIX系统下的安装比较简单。下面具体介绍Windows下安装PHP
的步骤。
(1)下载PHP 5.0 for Windows的安装程序。读者可以到
http:www.php.net下载。下载完成后,双击PHP 5.0安装包,会弹出图
2.6所示的对话框,单击Next按钮,弹出图2.7所示的对话框。
图 2.6 PHP 5.0安装图
图 2.7 PHP 5.0安装图
(2)在该对话框中勾选I accept the terms in the License Agreement复选框,Next按钮将变成黑色,单击该按钮,弹出图2.8所示的对话框。
图 2.8 选择安装目录对话框
(3)在该对话框中,可以通过单击Browse按钮,选择PHP 5.0的安
装目录。这里按照PHP 5.0默认的目录安装,单击Next按钮,弹出图2.9
所示的对话框。
图 2.9 服务器设置选项对话框
(4)这个对话框是服务器设置选项对话框,因为笔者用的是IIS,所以选择IIS ISAPI module,单击Next按钮,弹出图2.10所示的对话框。图 2.10 选择项目设置对话框
(5)在该对话框中对项目进行设置,单击Extensions和Extras两
项,在下拉列表中选择第2个选项,如图2.11所示。然后单击Next按钮,弹出图2.12所示的对话框。单击Install按钮,开始安装PHP 5.0,安装完
成后弹出对话框,如图2.13所示。
图 2.11 项目设置完成图
图 2.12 PHP 5.0设置完成图图 2.13 PHP 5.0安装完成图
(6)单击Finish按钮完成PHP 5.0的安装。接下来对PHP进行设置。
打开pnp.ini文件,首先找到extension_dir,修改成
extension_dir=C:\Program Files\PHP\ext。然后再找到
extension=msql.dll,把前面的“;”去掉。接着将php5isapi.dll和msql.dll这
两个文件复制到WINDOWS\system32\,然后在IIS里添加.php后缀,操作如图2.14所示。单击图2.14中所示的的“配置(G)...”按钮,弹出图
2.15所示的对话框。
图 2.14 IIS中添加后缀图 2.15 配置后缀
(7)单击图2.15中所示的“添加(D)...”按钮,弹出图2.16所示的
对话框。在“可执行文件”文本框中输入C:\Program
Files\PHP\php5isapi.dll,在“扩展名”文本框中输入.php,然后单击“确
定”按钮。重新启动IIS,PHP 5.0设置完成。下面就写个程序来测试一
下,如代码2.2所示。
图 2.16 添加后缀对话框
代码2.2 测试PHP的安装是否成功程序:2-2.php
程序名称:2-2.php
程序功能:测试PHP的安装是否成功.
只做简单的输出操作.
Php输出的标记是echo
echo你成功地安装了PHP!;
>在地址栏中输入http:localhost,运行效果如图2.17所示,这样就
表明PHP 5.0安装成功了。
图 2.17 测试PHP 5.0安装是否成功
注意 安装IIS和PHP 5.0没有先后顺序。2.1.3 下载并安装DevPHP3编辑器
程序运行需要一个平台,而代码的编写就需要一个编辑器。编辑器
有很多种,如EngInSite PHP Editor、NuSphere PHPEd等,这里就不一一
介绍了。下面来介绍一下DevPHP3编辑器。
(1)读者可以在网上下载这个编辑器,下载后双击该软件的安装
文件,会弹出图2.18所示的对话框。
图 2.18 编辑器语言选项对话框
(2)在这个对话框中,可以选择喜欢的语言,不过这里没有简体
中文。软件下载时会有一个简体中文语言文件,可以在安装之后进行设
置。单击OK按钮,会弹出图2.19所示的对话框。在该对话框中直接单
击(N)按钮,弹出图2.20所示的对话框。
图 2.19 编辑器安装对话框图 2.20 编辑器的阅读协议对话框
(3)在该对话框中选中第1个选项,也就是同意协议书。然后单
击(N)按钮,弹出图2.21所示的对话框。
图 2.21 选择安装路径对话框
(4)在这里可以选择适合的路径,然后单击(I)按钮,弹出图
2.22所示的对话框。单击(F)按钮,这样就完成了编辑器的安装。
图 2.22 编辑器安装完成对话框2.1.4 设置DevPHP 3编辑器
安装好DevPHP 3编辑器后,接下来学习如何设置编辑器。
(1)首先把chinese.lng文件复制到\Dev-PHP\lang\目录下,也就
是编辑器的安装目录下的lang文件包里。然后打开编辑器,按Ctrl+N键
新建一个PHP文件,如图2.23所示。
图 2.23 编辑器窗口
(2)编辑器新建PHP文件之后的窗口如图2.23所示,单击窗口中第
4个菜单,弹出图2.24所示的对话框。
图 2.24 编辑器外观选项窗口
(3)在该对话框中选择从上到下的第6个选项,将会弹出设置语言的对话框,如图2.25所示。在该对话框第1栏的下拉菜单中选择Chinese
选项,然后单击窗口下方有字的按钮,也就是窗口下方的第1个按钮,这样编辑器的语言设置就完成了。接下来需要设置编辑器环境,这样写
好的PHP程序就可以在该编辑器中直接运行了。在编辑器中单击“外
观”按钮,弹出图2.26所示的菜单项。
图 2.25 设置语言对话框
图 2.26 “外观”菜单
(4)选择“环境选项”菜单,弹出图2.27所示的对话框。选择对话框
中的“编译器”选项卡,进行环境设置,如图2.28所示。
图 2.27 “环境选项”对话框图 2.28 “编译器”选项卡
(5)在该对话框中,PHP编译器是指PHP执行文件的安装路径。笔
者的安装路径为C:\PHP\php.exe。其他选项默认就可以了。现在测试一
下,程序如代码2.3所示。
代码2.3 测试编辑器环境设置是否成功程序:2-3.php
程序名称:2-3.php
程序功能:测试编辑器环境设置是否成功.
echo测试成功!;
>
(6)执行程序,如果运行效果是乱码等,则说明设置没有成功;
如果运行效果如图2.29所示,则证明编辑器的环境设置成功。
图 2.29 测试程序执行效果图2.2 Windows下的Apache配置
Apache是什么呢?Apache就是一个应用服务器,类似微软的IIS。
Apache的安装比较简单,这里不做详细介绍。需介绍的是安装完成后,怎样对Apache进行设置,才能使Apache更好地工作。
注意 在安装Apache前,机器的“80”或“8000”端口不能被占用。如
果被其他程序占用,安装Apache时会报告错误。
2.2.1 使Apache识别PHP程序
怎样可以在Apache里能正常地显示简体中文?在Apache安装目录中
打开配置文件httpd.conf,找到AddDefaultCharset ISO-8859-1这行,将其
改为AddDefaultCharset GB2312,也就是让默认语言编码为简体中文。
为了在Apache下可以识别到PHP程序,需进行下面的设置。打开
Apache的配置文件,找到AddType applicationx-gzip.gz.tgz这行,如果没
有如下所示的几行代码,就加入如下代码;如果有如下所示的代码,就
把代码前面的“;”去掉,这样Apache就可以识别到PHP程序了。
ScriptAliasphpc:php
AddType applicationx-httpd-php.php
Action applicationx-httpd-phpphpphp-cgi.exe怎样将Apache的默认Web目录修改成读者喜欢的浏览目录?同样也
要打开Apache的配置文件httpd.conf,找
到DocumentRootD:Apache2htdocs这行代码,将其改为读者所喜欢
的Web目录,如笔者的为DocumentRootD:www。如果读者不想修
改,也可以不修改。
对于Apache的服务器配置有很多技巧,本书将在下面简要地介绍最
常用的Apache的配置技巧。2.2.2 设置请求等待时间
在Apache的安装目录下,打开conf文件夹下的httpd.conf Apache配
置文件,找到TimeOut n,其中的n表示以秒为单位的整数。修改此项可
以有以下方法:通过获得一个get请求的总时间;也可以通过获得一个
post和put请求的TCP包间的时间差;最后是TCP包传输中响应的时间间
隔。2.2.3 修改Apache监听的端口
打开Apache的配置文件,找到Listen的选项。例如,要修改Apache
监听的端口为8000,则需要修改Listen选项为Listen 8000,这样Apache
的监听端口就为8000了。
注意 如果要同时监听给定的端口和地址,就可以修改为Listen
192.168.60.188:8000。
现在测试一下Apache服务器,程序如代码2.4所示。
代码2.4 测试Apache服务器设置是否成功程序:2-4.php
程序名称:2-4.php
程序功能:测试Apache服务器设置是否成功.
echo测试成功!;
>
如果运行效果如图2.30所示,说明Apache安装成功;如果没有正常
显示,则需要再详细地查看配置文件,找到出现问题的原因,将其解
决。
图 2.30 测试程序2-4.php的运行效果图2.3 小结
本章学习了PHP在Windows下的环境的搭建,有IIS的安装、PHP的
安装及配置、编辑器的安装并设置、Apache的安装配置。
在IIS里添加PHP的后缀,是为了使PHP程序在IIS中解释执行。
PHP的配置,是为了在运行PHP程序时,不出现MySQL等模块没
有正确加载。
对编辑器的设置,可以使PHP程序能在编辑器中直接执行。
Apache的配置,是为了可以正常地执行PHP程序,以及Apache服
务器如何设置等待时间和监听端口。第3章 网页基础速成:静态及动态技术
本章要为读者介绍页面的基础知识。实现网页最基本的语言就是
HTML语言。虽然现在有好多新的技术(XML等),但是网页中最常用
的还是HTML语言。本章将为读者介绍如何使用样式,使网页变得更加
美观。
本章还将介绍JavaScript的基础知识,以及如何使用JavaScript进行
表单的检验等,这些知识涉及一些基本的网页动态操作,希望读者能好
好掌握。
3.1 认识HTML
HTML是一种超文本标识语言,用来描述WWW上的超文本文件。
它主要是在原来文本文件的基础上,加一系列的标识符号描述其格式,形成网络文件。当用户使用浏览器下载文件时,就把这些标识解释成它
应有的含义,按照一定的格式,将这些被标识的文件显示在屏幕上。而
HTML的标识符号并不显示在屏幕上。
3.1.1 HTML介绍
HyperText Markup Language的缩写是HTML,简称超文本标记语言。它是现在最常见的网页制作语言,也是网页的基础语言。不管使用
哪种技术开发Web,最终反应在用户浏览器上的总是HTML代码。
HTML具有跨平台兼容特性。它可以在所有安装浏览器的计算机
上浏览HTML文档。
HTML 4.0的推出,改进了语言环境、设备环境和显示环境的特
性,完善了一些功能,样式支持、脚本等方面得到了提高。
学习HTML,主要是了解网页是如何工作的。了解HTML的基础
知识,就可以灵活地制作出读者喜欢的网页效果,也可以使PHP与
HTML更好地结合。3.1.2 HTML基本标记介绍
HTML是由标记和属性构成的。标记是用于告诉浏览器怎么显示文
档。属性是标记的一个选项,起到修饰作用,如高度、宽度、对齐方式
和颜色等。标记的构成是由一对尖括号(<>)括起来的元素,尖括号
之间的内容就是HTML命令。标记的格式如下:
标记大多数是成对出现,称为起始标记和结束标记。如,但是也有少量的不是配对出现的标记。起始标记和结束标记
样子很相似,唯一不同的就是结束标记有一个斜杠号。也就是在起始标
记中加一个斜杠号,放在尖括号内的首部,就是结束标记。
标记的使用是,把需要标记的内容放入起始标记和结束标记之间,也就是起始标记要放在需要标记的内容前面,而结束标记要放在需要标
记内容之后。下面通过一个例子来说明如何使用HTML标记,程序如代
码3.1所示。
代码3.1 如何使用HTML标记程序:3-1.html
需要标记的内容
是HTML标记,是HTML头标
记,它们之间是标题标记,即,而
是网页主体标记。标记使用程序运行效果如图3.1所示。
图 3.1 标记使用程序运行效果
注意 输写代码时,标记要对齐,这样代码的可读性比较高。
HTML语言的标记属性是不区分大小写的。
作用 在程序中使用了HTML的注释和HTML代码的对比,可以使
用初学者明白在HTML中,被注释的部分是不会显示在页面中的。通过
此程序,可以使初学者了解HTML基本标记的使用。
表3.1所示的是HTML的一部分标记符,还有很多的标记可以查看HTML手册。
注意 表中是HTML最重要的标记。如果没有
HTML文件标记,浏览器将无法识别该文件是否为网页,并会以纯文字
文件处理。
是网页文件头信息标记,设定网页的标题名称、指定背景音乐、作用语言等。是网页的标题标记。读
者常常会看到一些网站会有欢迎词,这些就是通过来
设定的。是网页中的语言和其他相关设置标记。网页
有自己默认的语言,通过这个标记可以设置读者喜欢的语言。接下来就
把网页设置成为“简体中文”语言。格式如下。
上面的代码要放在之间,通过这样的设置,网页可以正常地显示简体中文。下面测试代码3.2的显示情况。执行程序3-
2.html,运行效果如图3.2所示。
图 3.2 网页语言设置效果图
代码3.2 在网页中显示简体中文的程序:3-2.html
网页语言设置
正常显示简体中文。
注意 如果网页不设置语言,就会使用默认语言。如果内容是简体
中文,运行的结果是简体中文,部分会是乱码。
作用 通过对此程序的学习,读者可以对页面的编码进行设置,这样可以使页面采用读者自己需要的编码来显示。
是网页主体标记。网页的内容如图片、文字
等,要放在之间,只有这样,网页的主体内容才能
显示出来。是背景音乐标记。一个网站如果只有图和文字
就太枯燥了,可以通过此标记给网页添加背景音乐,使网页更加活泼。
注意 标记不是成对出现的。3.1.3 HTML基本标记演练
前面讲述了HTML的一些标记,下面通过实例来了解它们的功能,如代码3.3所示。
代码3.3 网页标记的使用程序:3-3.html
网页标记的使用
网页使用背景音乐标记添加了背景音乐。
程序的运行效果如图3.3所示。图 3.3 使用背景音乐等标记的运行效果图
作用 在网页中增加背景音乐可以使网页的内容更加丰富,让读者
更好地浏览网页。3.1.4 HTML注释符
注释用于在程序中插入描述语句时使用,而在程序执行时,不会被
运行,在用户浏览时,这些描述性语句不会出现在Web页面中。它的格
式如下所示。
它是以结束,中间部分就是要描述的语句。下面
通过一个实例来对比介绍。没有加注释的代码如代码3.4所示。
代码3.4 不加注释的程序:3-4.html
无注释符
这是笔者喜爱的一些话!
生气是拿别人做错的事来惩罚自己
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
获得幸福的不二法则是珍视你所拥有的,遗忘你所没有的
你可以用爱得到全世界,你也可以用恨失去全世界
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
程序3-4.html没有加注释符,运行效果如图3.4所示。
图 3.4 没有加注释符的运行效果图
注意 程序3-4.html中,
是换行标记,只在程序执行时运
行,而不会显示在Web页面上。
没有加注释符,程序运行时会显示body中的所有内容,但是不包
括标记。当在代码3.4中加入注释符时,运行效果如代码3.5所示。
代码3.5 有注释符的HTML程序:3-5.html
有注释符
是换行标记-->
生气是拿别人做错的事来惩罚自己
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
在程序3-4.html的基础上,可将不想显示的内容加了注释。运行程
序3-5.html,观看加上注释的内容是否还会显示。运行程序3-5.html的效
果如图3.5所示。图 3.5 加有注释符后的运行效果图
从图3.5可以看出,被加了注释符的内容没有显示在Web页面中。那
么注释符的作用也就显而易见了。3.2 文字与段落标记
文字也是网页的一大组成元素,对于文字的修饰,HTML语言提供
了文字的标记和属性,这样会使网页看起来更加的美观与直观。
3.2.1 标题标记
标题标记,也叫标题字体。它可以分离大段文字,概括下文,所以
HTML提供了6个等级的标题标记。标题标记如表3.2所示。
标题标记是从到,字体逐渐变小,即标记字
体是最大的,而标记字体是最小的。下面以代码3.6为例,使读
者了解标题标记的用法。
代码3.6 标题标记的使用程序:3-6.html
标题标记的使用
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
是HTML标记,是HTML头标
记,它们之间是标题标记,即
是网页主体标记。标记使用程序运行效果如图3.1所示。
图 3.1 标记使用程序运行效果
注意 输写代码时,标记要对齐,这样代码的可读性比较高。
HTML语言的标记属性是不区分大小写的。
作用 在程序中使用了HTML的注释和HTML代码的对比,可以使
用初学者明白在HTML中,被注释的部分是不会显示在页面中的。通过
此程序,可以使初学者了解HTML基本标记的使用。
表3.1所示的是HTML的一部分标记符,还有很多的标记可以查看HTML手册。
注意 表中是HTML最重要的标记。如果没有
HTML文件标记,浏览器将无法识别该文件是否为网页,并会以纯文字
文件处理。
是网页文件头信息标记,设定网页的标题名称、指定背景音乐、作用语言等。
者常常会看到一些网站会有欢迎词,这些就是通过
设定的。是网页中的语言和其他相关设置标记。网页
有自己默认的语言,通过这个标记可以设置读者喜欢的语言。接下来就
把网页设置成为“简体中文”语言。格式如下。
上面的代码要放在之间,通过这样的设置,网页可以正常地显示简体中文。下面测试代码3.2的显示情况。执行程序3-
2.html,运行效果如图3.2所示。
图 3.2 网页语言设置效果图
代码3.2 在网页中显示简体中文的程序:3-2.html
正常显示简体中文。
注意 如果网页不设置语言,就会使用默认语言。如果内容是简体
中文,运行的结果是简体中文,部分会是乱码。
作用 通过对此程序的学习,读者可以对页面的编码进行设置,这样可以使页面采用读者自己需要的编码来显示。
是网页主体标记。网页的内容如图片、文字
等,要放在之间,只有这样,网页的主体内容才能
显示出来。
就太枯燥了,可以通过此标记给网页添加背景音乐,使网页更加活泼。
注意
前面讲述了HTML的一些标记,下面通过实例来了解它们的功能,如代码3.3所示。
代码3.3 网页标记的使用程序:3-3.html
网页使用背景音乐标记添加了背景音乐。
程序的运行效果如图3.3所示。图 3.3 使用背景音乐等标记的运行效果图
作用 在网页中增加背景音乐可以使网页的内容更加丰富,让读者
更好地浏览网页。3.1.4 HTML注释符
注释用于在程序中插入描述语句时使用,而在程序执行时,不会被
运行,在用户浏览时,这些描述性语句不会出现在Web页面中。它的格
式如下所示。
它是以结束,中间部分就是要描述的语句。下面
通过一个实例来对比介绍。没有加注释的代码如代码3.4所示。
代码3.4 不加注释的程序:3-4.html
这是笔者喜爱的一些话!
生气是拿别人做错的事来惩罚自己
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
获得幸福的不二法则是珍视你所拥有的,遗忘你所没有的
你可以用爱得到全世界,你也可以用恨失去全世界
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
程序3-4.html没有加注释符,运行效果如图3.4所示。
图 3.4 没有加注释符的运行效果图
注意 程序3-4.html中,
是换行标记,只在程序执行时运
行,而不会显示在Web页面上。
没有加注释符,程序运行时会显示body中的所有内容,但是不包
括标记。当在代码3.4中加入注释符时,运行效果如代码3.5所示。
代码3.5 有注释符的HTML程序:3-5.html
是换行标记-->
生气是拿别人做错的事来惩罚自己
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
在程序3-4.html的基础上,可将不想显示的内容加了注释。运行程
序3-5.html,观看加上注释的内容是否还会显示。运行程序3-5.html的效
果如图3.5所示。图 3.5 加有注释符后的运行效果图
从图3.5可以看出,被加了注释符的内容没有显示在Web页面中。那
么注释符的作用也就显而易见了。3.2 文字与段落标记
文字也是网页的一大组成元素,对于文字的修饰,HTML语言提供
了文字的标记和属性,这样会使网页看起来更加的美观与直观。
3.2.1 标题标记
标题标记,也叫标题字体。它可以分离大段文字,概括下文,所以
HTML提供了6个等级的标题标记。标题标记如表3.2所示。
标题标记是从
到,字体逐渐变小,即标记字
体是最大的,而标记字体是最小的。下面以代码3.6为例,使读
者了解标题标记的用法。
代码3.6 标题标记的使用程序:3-6.html
标题标记的使用
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标记字
体是最大的,而标记字体是最小的。下面以代码3.6为例,使读
者了解标题标记的用法。
代码3.6 标题标记的使用程序:3-6.html
标题标记的使用
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
者了解标题标记的用法。
代码3.6 标题标记的使用程序:3-6.html
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记的字体逐渐变小
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记的字体逐渐变小
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记的字体逐渐变小
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记的使用
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
程序3-6.html中,在相同的文字上使用了这6个等级的标题标记。显
示效果如图3.6所示。图 3.6 标题标记使用效果图
注意 在一行中不可以显示不同大小字体的标题,因为使用了标题
标记,它会自动插入一个空行。
作用 读者通过此程序,可以了解到标题标记的几种形式。在以后
的使用中,可以正确地使用这些标题标记。使页面更加美观。
从图3.6中可以看出,标题标记的字体是逐渐变小的。在程序3-
6.html中可以看到,文字在网页显示中,全部是左对齐的。如果读者想
让文字居中或右对齐该怎么办呢?下面表3.3罗列的是对齐方式属性
表。从表3.3可知,标题标记的属性有左对齐、居中和右对齐。现在将
这些属性加入标题标记中,程序如代码3.7所示。
代码3.7 如何在标题标记中加入标题的属性程序:3-7.html
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记在同一行显示不同大小的字体
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
标题标记在同一行显示不同大小的字体
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
在此程序中使用了标题标记及对齐方式,通过此代码,可以使页面
中的内容更加直观,使页面中标题可以出现在理想的位置,并让页面更
加美观、整洁。标题标记的属性要放在标题标记的开始部分。如果读者想更好地理
解标题标记的属性,可以试着把它放在标题的文字部分、标题标记的结
束部分中或标题标记的结束部分,看看显示的效果。一定不会是程序3-
7.html执行的运行效果图,程序3-7.html执行的运行效果如图3.7所示。
图 3.7 标题标记属性的使用效果图
注意 上面的所有标题标记的属性,在使用时必须放在标题标记的
开始标记中,如
。3.2.2 基本文字标记及属性
基本文字的标记就是对单个文字及词组强记,如强调字的黑体、斜
体、下画线等。基本文字标记符如表3.4所示。
为了使这些效果显示,必须把要强调的文字放在开始标记与结束标
记之间。下边通过实例来了解基本文字标记的使用方法,程序如代码
3.8所示。
代码3.8 基本文字标记的使用程序:3-8.html
基本文字标记
这是笔者喜爱的一些话!
明天的希望,让我们忘了今天的痛苦
发光并非太阳的专利,你也可以发光
n【SUB】2【SUB】
3【SUP】n【SUP】
真正的爱,应该超越生命的长度,心灵的宽度,灵魂的深度
在此程序中使用的基本文字标记,可以使页面中的文字更醒目,使
浏览页面的用户更快地看到网站突出的内容。使用此标记时要注意:把
需要标记的文字放到标记符的中间,运行效果如图3.8所示。图 3.8 基本文字标记使用效果图3.2.3 基本段落标记及属性
代码3.9 段落标记的使用程序:3-9.html
段落标记的使用
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便地阅读代
码。
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
在实例3-9.html中,第1段使用的是非配对的段落标记符,而在第2
段使用的是配对的段落标记符。使用配对的段落标记符可使代码的可读
性更好,运行效果却是相同的。实例3-9.html运行结束如图3.9所示。图 3.9 段落标记符使用的实例效果图
注意 如果使用非配对的段落标记符,则必须要把段落标记符放在
段落的末尾,这样才能使段落标记符的前面文字是一个段落。
段落标记符使段落与段落之间有一行空格,如果读者想在没有这一
行空格的前提下,新起一行文字该怎么办呢?下面就介绍一下BR换行
符。换行标记符可以非常方便地在要换行的地方使用。如一首诗,在一
行没有结束时需要新起行,这样比较美观。下边通过代码3.10来了解换
行标记的作用。
代码3.10 换行标记的作用程序:3-10.html
换行标记的使用
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的是插入图像的标记,用来实现图像的插
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
标记是识别HTML中的表格标记,可以使
用它来创建表格;标记是识别HTML中表格的行标记,使用它可以创建表格中的行;标记是识别HTML中表格
行中的一个单元; 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中
表格标记的格式。表格标记的格式如下所示:
>
在上面的格式中,在表格要出现的地方加入标记,在表格
结束时加入标记,也可以不加;在表格的每一行前加入标记标记,在表格的行结束时加入 标记;标记是表格的
列标记符,在表格的列结束时加入 标记。下面通过实例来介绍表
格的创建,如代码3.13所示。
代码3.13 如何创建表格程序:3-13.html
表格的创建
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
在此程序中,使用了表格标记创建表格,使用表格的行和列标记实
现表格单元的创建。代码3.13的运行效果如图3.14所示。图 3.14 表格的创建程序运行效果图
注意 如果省略结束标记,将内容放在开始标记后和下一个标记
前,浏览器识别到下一个标记时,默认当前标记结束。3.4.2 表格的属性
表格的属性就是对表格的设置,如表格的边框、对齐方式等。边框
是表格项目周围的直线,用于分开行、列和单元。默认情况下,大部分
浏览器显示无边框的表格,但是使用表格边框更加美观。
表格边框用一个属性和边框宽度的像素数指定。大多数浏览器将边
框显示为具有三维效果的直线。表格的边框属性如表3.7所示。
设置表格的边框的属性是BORDER,通过给表格边框属性赋值就
可以实现表格边框的设置。
设置表格的边框颜色的属性是BORDERCOLOR,通过给表格边
框颜色属性赋值就可以实现对表格边框颜色的设置。3.4.3 设置表格的边框
下面通过实例来介绍如何使用表格的边框属性,实现更加美观的表
格,如代码3.14所示。
代码3.14 表格的边框属性使用程序:3-14.html
表格的边框属性使用
第一行第一列
第一行第二列
第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列 第三行第二列
第三行第三列
第三行第四列
在此程序中使用了表格标记及表格的行、列标记,实现表格的创
建。通过在表格标记的开始标记中加入表格边框属性的使用,来设置表
格的边框及表格边框的颜色,使表格变得更加美观。代码3.14的运行效
果如图3.15所示。
图 3.15 表格边框属性的使用程序运行效果图
注意 表格边框属性的设置,必须放在表格标记的开始标记中。
当然也可以使用没有边框的表格。实现无边框的表格比较简单,只
要给表格边框属性赋值为0,就可以实现。3.4.4 表格的对齐
读者可使用表格对齐方式来设置表格的位置,也可以使用表格的宽
度属性设置表格的宽度。表格的对齐方式属性及表格的宽度属性如表
3.8所示。
读者可以使用这些标记创建想要的表格,下面通过实例来进一步介
绍表格对齐、宽度属性的使用,程序如代码3.15所示。
代码3.15 表格对齐、宽度属性的使用程序:3-15.html
表格对齐、宽度属性的使用程序
第一行第一列
第一行第二列 第一行第三列
第一行第四列
第二行第一列
第二行第二列
第二行第三列
第二行第四列
第三行第一列
第三行第二列
第三行第三列
第三行第四列
此程序在创建表格时使用了表格的边框属性、表格的边框颜色属
性、表格的对齐方式属性、表格的宽度属性。在此程序中设置表格的对
齐方式是LEFT,所以在浏览器中,表格是靠左显示的。代码程序3.15的
运行结果如图3.16所示。图 3.16 表格对齐、宽度属性的使用程序运行效果图
从图中可以看出,表格是显示在浏览器的左边的,所以读者还可以
设置表格居中、左对齐。
注意 表格的属性标记的使用要放置在表格标记的开始标记中。3.5 表单的使用
表单是Web页面与Web站点之间双向通信的唯一途径。表单是通过
网员收集数据的工具。实际上表单也可以从访问者取得信息而不必让访
问者有“填表”的感觉。现在的大多数网站上都使用了表单,如Web的聊
天室、选择的下拉菜单等。
3.5.1 表单的创建
表单中看见的部分,也就是访问者填写的部分;看不到的部分就是
指定服务如何处理信息的部分。表单包含的部件有提交和复位按钮,用
于将表单的信息发送给服务器处理或返回表单的初始设置。其他部件功
能如下。
文本字段用来输入少量文本的区域,用于字数不多的响应。
选择清单用来使访问者选择一个或几个项目的清单,用于列出有
限的选项的清单。
复选框用来让访问者选择多个项目的清单,用于列出多行选项的
清单。也就是单选按钮。
单选按钮是让访问者选择单个项目。?文本区是输入大段的文本区域。
创建表单的第1步就是插入
在前面的章节中介绍了文字的标记,当文字多的时候,就会形成段落,下面就对段落标记
进行介绍。段落标记是对一整段文字进行格式化。最常用的段落标记是,适合用于一般的文本
文字。段落标记是非配对的标记,就是不需要成对出现。如果读者想成对出现也可以,把段落
标记的开始标记符放在段落的首部,结束标记符放在段落的尾部,这样会更加方便的地读代
码。
望岳
岱宗夫如何,齐鲁青未了。造化钟神秀,阴阳割昏晓。
荡胸生层云,决眦入归鸟。会当凌绝顶,一览众山小。
通过上面的实例可以看到,换行符使用在结束行的后边,新起行的
前面。实例3-10.html的运行效果如图3.10所示。
图 3.10 换行标记符使用效果图3.2.4 水平线
水平线标记用来分开大段文本水平线,用以分割页面中的不同部
分。水平线的标记符是
,在网页中加入此标记符,页面中的
HTML代码会自动识别标记来生成水平线。水平标记符有3个属性,分
别是size、widht和noshade。这此属性的作用如下所示。
size:表示水平线的宽度。
width:表示水平线的长,用占屏幕宽度的百分比或像素值来表
示。
noshade:表示线段无阴影属性,为实心线段。3.3 插入图像
读者在浏览普通的文本网页时,可能会觉得比较单调。如果在普通
的文本网页中加上了图像,就会觉得比较生动,信息能实现到更好的沟
通。但是在HTML中加入图像有利也有弊。为什么这样说呢?因为使用
生动专业水平的图像可以使站点清晰、易用,这是对网站有利的一面。
而造成网站弊端的是,图像越多,下载时间越长,就形成了网站打开速
度比较慢的局面。
3.3.1 图像的格式和标记
图像文件中有信息和文件的存放方式,它们是由图像格式确定的。
目前Web中用得比较多的,也是浏览器最为广泛接受的两种图像格式是
GIF和JPG。还有一种新的格式是PNG,它结合了GIF和JPG格式的长
处,但是现在用得不太多,相信不久会普及。
GIF是Graphics Interchange Format的缩写,简称图像交换格式。所
有的浏览器都认识GIF格式,也有些浏览器只认识GIF格式。GIF图像的
文件扩展名为.gif。
注意 图像文件扩展名是不区分大小写的。插入图片是为了可以使网页更加美观、更加生动。图片的标记与属
性如表3.5所示。
在HTML文档中加入图像时,要用一个引用图像的标记SRC,格式
如下所示:
图像的宽度
BORDER=图像边框的象数ALIGN=图像的对齐方式>
上面的代码中的
入。而ALT=是在网页中的图片不能显示时,替换图片的文字,这个
属性可用可不用。还有SRC=是指定图片文件的位置;HEIGHT=n指定
图片的高度;WIDTH=n指定图片的宽度;BORDER=n设置图片边框的
像素;‘ALIGN=是设置图片的对齐方式。下面就通过实例来介绍如何
插入图像,程序如代码3.11所示。
代码3.11 插入图片标记的使用程序:3-11.html
插入图片

BORDER=0>
程序中的
是插入图片的标记,ALIGN是设置图片的对齐方
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
BORDER=0>
程序中的
式。接下来就是设置图片的高和宽等,运行效果如图3.11所示。图 3.11 插入图片标记使用效果图
注意 ALIGN在左对齐时可以不用加,默认是左对齐。
作用 在页面中使用了插入图片的标记,可以增加页面的美观,更
加有说服力。3.3.2 图像的超链接
图片链接有两个好处:网站上有了图片,可以使网站更生动,更加
有说服力;一张图可代替许多文字,使读者更加明白。这样也使网站节
省了许多空间。
想要在插入的图片上加入链接,就要在插入图片开始标记的前面加
入图片开始标记,在插入图片结束标记的后
边插入图片链接结束标记。下面通过实例来介绍图片链接标记的
用法,如代码3.12所示。
代码3.12 图片链接标记的使用程序:3-12.html
图片链接标记使用

HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
HEIGHT=150 WIDTH=130 BORDER=0>本程序使用图片链接标记,并设置了图片在不能正常显示时,在插
入图片处显示替换的文字,还有对齐方式、高和宽等。程序3-12运行效
果如图3.12所示。当单击图片时,页面会自动跳转到链接所指向的页
面。单击图片,显示效果如图3.13所示。
图 3.12 图片链接标记使用效果图
图 3.13 单击链接图片显示效果图3.4 表格的使用
本节主要介绍HTML中的表格。表格是由行和列组成,而行和列组
成一个单元格,在表格中可以插入文本,也可以插入图片。
3.4.1 表格的创建
表格是通过在HTML中插入表格的标记来创建的,然后再通过行和
列标记来设置表格的行和列。表格的标记如表3.6所示。
注意 结束标记TR、TD和TH是可选项,加上结束标记可以使标
记的结构更加清楚。也可以增加与旧版本的浏览器兼容性。
| 标记是识别HTML中表格 行中的一个单元; | 标记是识别HTML中表格的列。通过前面的介绍读者已经了解了HTML中表格的标记,下面来介绍HTML中 表格标记的格式。表格标记的格式如下所示:
|
|---|





