第三章 HTML
? HTML基本知识
?文本
?表格
?图象
?超链接
? HTML表单
? HTML的框架结构
3.1 HTML基本知识
? 什么是 HTML
? HTML基本概念
如果想成为一名网页设计高手，就必须掌握 HTML
（ Hyper Text Markup Language,超文本置标语言），
HTML是网络的通用语言，它允许设计者建立文本与图象
相结合的复杂页面，这些页面可以被网上任何其他人浏
览，无论使用的是什么类型的电脑或浏览器。用 HTML编
写的文件将保存成文档名为 htm或 html的文件，浏览器
通过解释执行 HTML编码。
一个 HTML文件中包含了所有将显示在网页上的文字
信息，其中也包括对浏览器的一些指示，如那些哪些文
字应放置在何处，显示模式等。如果还有一些图片、动
画、声音或是任何其他形式的资源,HTML文件也会告诉
浏览器到哪里去查找这些资源，以及这些资源将放在网
页的什么位置。 HTML文件通过标记来实现这一功能
可以用 Windows自带的记事本来编写 HTML文件，也
可以用其他任意的文本编辑器来编写 HTML文件，如
Urtra Edit等，记住，在保存时要保存为,htm或,html.
3.1.1
3.1.2 HTML基本概念
?标记, 用语描述功能的符号
?特殊字符, 用替代命令代表特殊的意义
?语法, 用于描述标记的属性参数
3.2 文本
? 字体
? 段落
在网页设计中，表格的应用是相当广泛的，
几乎现在没有哪个网站的网页中没有表元素，表
的属性非常多可以设置背景图象、背景色、大小、
嵌套表等等，而且网页的排版很大程度上是表在
起作用。下面从两个方面阐述表格：
基本表格
表格控制
3.3 表格
3.3.1基本表格
表格的插入是用
<table></table>标记
来实现的，必须有
<tr></tr>和
<td></td>,其中
<tr></tr>表示行，
<td></td>表示列。
右面是一个基本表的
例子，自己动手看看
效果吧！
<html>
<head><title>table示例 </title></head>
<body>
<table border=1>
<tr>
<td>第一列 </td>
<td>第二列 </td>
</tr>
</table>
</body>
</html>
3.3.2表格控制
? Cellspacing使表格的边框加宽，从而加大格子之间的
距离。 Cellpadding在格子的边框中加进看不见的空白，
从而使格子里的内容与格子的四个边框产生距离。
? 对表格边框的设置是通过 border来进行的。 Border 可
以不等于任何值，这是会按浏览器默认的宽度设定边
宽，另外可以设定具体值如 border=*,其中 *代表数 1，
2,3等。
? 表格边的颜色、亮度和背景颜色可以设定，甚至可以
用图片作表格的背景。它们分别用到属性 gbcolor(表
格背景色）,background（表格背景图）、
bordercolor（表格边颜色） bordercolorlight（表
格边明亮部分颜色） bordercolordark（表格边昏暗
部分颜色）,
3.4图象控制标签
一个网站如果没有图片，那将是没有生气的，也
吸引不了读者的目光。一个好的设计师会用合适的图
片美化自己的设计，如果使用恰当会有点睛之笔的效
果。
1.插入图片：
插入图象的语句是 <img src=“图片的 URL”>,它没有
结束标签。
2.图象应用示例
3.5网页中的超链接
? 页面链接
? 锚点链接
? 电子邮件链接
? 应用技巧
3.5.1页面链接
页面链接就是指向其他网页或文件的超链接，浏览
者单击这样的超链接时将跳转到相应的网页或显示相应
文件。如果超链接的目标文件位于同一个站点，也就是
指向网站内部文件的超链接，通常采用的都是相对 URL；
如果超链接的目标文件位于其他位置，则需要指定绝对
URL。
< a href=“网页 URL”></a>
3.5.2锚点链接
除了可以对不同网页或文件进行链接以外，对于
包含了大量文字的网页来说，还可以对同一网页的不同
部分进行链接，这种连接称为锚点链接。锚点链接就是
在页面的特定区域先指定一个锚点，然后创建一个指向
锚点的链接，单击该链接时浏览器自动跳转显示锚点所
在的区域。
<a name=“锚点名, ></a>
<a href=“#锚点名, >
3.5.3电子邮件链接
所谓电子邮件链接就是指当浏览者单击该超链
接时，系统会启动客户端电子邮件程序并打开新邮件
窗口，使访问者能方便地撰写电子邮件。
<a href=mailto：邮件地址 ></a>
3.6 HTML表单
? 在很多网页中，经常会看到
表单的例子，它是用户与服
务器之间进行交互的一种方
式。一般是将表单设计在
html文档中，当用户填写完
信息后提交，于是表单的内
容就从客户端的浏览器传送
到服务器上，经过服务器上
的 ASP或 CGI等程序处理后，
再将用户所需信息传送回客
户端的浏览器上，这样网页
就具有了交互性。
3.6.1 常用表单标记属性
Type取值 输入区域类型
<input type=“TEXT” size=“”
axlength=“”>
单行的文本输入区域
<input type=“password”> 输入密码的区域
<input type=“submit”> 将表单内容提交给服务器的按钮
<input type=“reset”> 将表单内容清除，重新填写
<input type=“checkbox”checked> 复选框
<input type=“radio”> 单选按钮类型
<input type=“hidden”> 隐藏区域
<input type=“image” src=“url”> 使用图象来代替 SUBMIT按钮
3.7 HTML的框架结构
?<frameset></frameset>
?<frame>
?<noframes></noframes>
3.7.1<frameset>
<frameset></frameset>标志对放在祯
主文档的 <body></body>标签对的外面，也可
以嵌在其他祯文档中，并且可以嵌套使用。
此标签对用来定义主文档中有几个祯和各祯
之间是如何排列的。它具有 rows和 cols属性。
3.7.2 <frame>
<frame>是放在 <frameset>中，它
是用来定义一个具体的祯。它具有 src
和 name属性。
3.7.3 <noframes>
<noframes></noframes>中的内容是
在浏览器不支持 Frame的情况下页面显示
的内容，早期的 Netscape就不支持 Frame,
此标签对中放入 <body></body>标签
? HTML基本知识
?文本
?表格
?图象
?超链接
? HTML表单
? HTML的框架结构
3.1 HTML基本知识
? 什么是 HTML
? HTML基本概念
如果想成为一名网页设计高手，就必须掌握 HTML
（ Hyper Text Markup Language,超文本置标语言），
HTML是网络的通用语言，它允许设计者建立文本与图象
相结合的复杂页面，这些页面可以被网上任何其他人浏
览，无论使用的是什么类型的电脑或浏览器。用 HTML编
写的文件将保存成文档名为 htm或 html的文件，浏览器
通过解释执行 HTML编码。
一个 HTML文件中包含了所有将显示在网页上的文字
信息，其中也包括对浏览器的一些指示，如那些哪些文
字应放置在何处，显示模式等。如果还有一些图片、动
画、声音或是任何其他形式的资源,HTML文件也会告诉
浏览器到哪里去查找这些资源，以及这些资源将放在网
页的什么位置。 HTML文件通过标记来实现这一功能
可以用 Windows自带的记事本来编写 HTML文件，也
可以用其他任意的文本编辑器来编写 HTML文件，如
Urtra Edit等，记住，在保存时要保存为,htm或,html.
3.1.1
3.1.2 HTML基本概念
?标记, 用语描述功能的符号
?特殊字符, 用替代命令代表特殊的意义
?语法, 用于描述标记的属性参数
3.2 文本
? 字体
? 段落
在网页设计中，表格的应用是相当广泛的，
几乎现在没有哪个网站的网页中没有表元素，表
的属性非常多可以设置背景图象、背景色、大小、
嵌套表等等，而且网页的排版很大程度上是表在
起作用。下面从两个方面阐述表格：
基本表格
表格控制
3.3 表格
3.3.1基本表格
表格的插入是用
<table></table>标记
来实现的，必须有
<tr></tr>和
<td></td>,其中
<tr></tr>表示行，
<td></td>表示列。
右面是一个基本表的
例子，自己动手看看
效果吧！
<html>
<head><title>table示例 </title></head>
<body>
<table border=1>
<tr>
<td>第一列 </td>
<td>第二列 </td>
</tr>
</table>
</body>
</html>
3.3.2表格控制
? Cellspacing使表格的边框加宽，从而加大格子之间的
距离。 Cellpadding在格子的边框中加进看不见的空白，
从而使格子里的内容与格子的四个边框产生距离。
? 对表格边框的设置是通过 border来进行的。 Border 可
以不等于任何值，这是会按浏览器默认的宽度设定边
宽，另外可以设定具体值如 border=*,其中 *代表数 1，
2,3等。
? 表格边的颜色、亮度和背景颜色可以设定，甚至可以
用图片作表格的背景。它们分别用到属性 gbcolor(表
格背景色）,background（表格背景图）、
bordercolor（表格边颜色） bordercolorlight（表
格边明亮部分颜色） bordercolordark（表格边昏暗
部分颜色）,
3.4图象控制标签
一个网站如果没有图片，那将是没有生气的，也
吸引不了读者的目光。一个好的设计师会用合适的图
片美化自己的设计，如果使用恰当会有点睛之笔的效
果。
1.插入图片：
插入图象的语句是 <img src=“图片的 URL”>,它没有
结束标签。
2.图象应用示例
3.5网页中的超链接
? 页面链接
? 锚点链接
? 电子邮件链接
? 应用技巧
3.5.1页面链接
页面链接就是指向其他网页或文件的超链接，浏览
者单击这样的超链接时将跳转到相应的网页或显示相应
文件。如果超链接的目标文件位于同一个站点，也就是
指向网站内部文件的超链接，通常采用的都是相对 URL；
如果超链接的目标文件位于其他位置，则需要指定绝对
URL。
< a href=“网页 URL”></a>
3.5.2锚点链接
除了可以对不同网页或文件进行链接以外，对于
包含了大量文字的网页来说，还可以对同一网页的不同
部分进行链接，这种连接称为锚点链接。锚点链接就是
在页面的特定区域先指定一个锚点，然后创建一个指向
锚点的链接，单击该链接时浏览器自动跳转显示锚点所
在的区域。
<a name=“锚点名, ></a>
<a href=“#锚点名, >
3.5.3电子邮件链接
所谓电子邮件链接就是指当浏览者单击该超链
接时，系统会启动客户端电子邮件程序并打开新邮件
窗口，使访问者能方便地撰写电子邮件。
<a href=mailto：邮件地址 ></a>
3.6 HTML表单
? 在很多网页中，经常会看到
表单的例子，它是用户与服
务器之间进行交互的一种方
式。一般是将表单设计在
html文档中，当用户填写完
信息后提交，于是表单的内
容就从客户端的浏览器传送
到服务器上，经过服务器上
的 ASP或 CGI等程序处理后，
再将用户所需信息传送回客
户端的浏览器上，这样网页
就具有了交互性。
3.6.1 常用表单标记属性
Type取值 输入区域类型
<input type=“TEXT” size=“”
axlength=“”>
单行的文本输入区域
<input type=“password”> 输入密码的区域
<input type=“submit”> 将表单内容提交给服务器的按钮
<input type=“reset”> 将表单内容清除，重新填写
<input type=“checkbox”checked> 复选框
<input type=“radio”> 单选按钮类型
<input type=“hidden”> 隐藏区域
<input type=“image” src=“url”> 使用图象来代替 SUBMIT按钮
3.7 HTML的框架结构
?<frameset></frameset>
?<frame>
?<noframes></noframes>
3.7.1<frameset>
<frameset></frameset>标志对放在祯
主文档的 <body></body>标签对的外面，也可
以嵌在其他祯文档中，并且可以嵌套使用。
此标签对用来定义主文档中有几个祯和各祯
之间是如何排列的。它具有 rows和 cols属性。
3.7.2 <frame>
<frame>是放在 <frameset>中，它
是用来定义一个具体的祯。它具有 src
和 name属性。
3.7.3 <noframes>
<noframes></noframes>中的内容是
在浏览器不支持 Frame的情况下页面显示
的内容，早期的 Netscape就不支持 Frame,
此标签对中放入 <body></body>标签
