第 14章 HTML基础
Internet网页的基础是 HTML语言（超文本标
记语言），这是一种标记控制语言。
网页浏览器（如 IE等）可解析 HTML语言
本章主要内容
? HTML文件编辑器
? HTML文件结构
? 字模与格式控制命令
? 表格
? 链接
? 图片
? 页面分帧
? JavaScript
? HTML为英文 Hyper Text Markup Language（超
文本标记语言）的缩写，属于标记控制语言。
? 所谓标记控制语言，即在源文件中插入排版控制
标记（命令），通过专门的解析器解析后才能显
示和打印排版后的效果。
? 所谓超文本，指除了文本内容外，还可以表现图
形、图像、音频、视频、链接等非文本要素。
? HTML语言的解析器主要为网页浏览器。
网页及其 HTML源代码
14.1 HTML文件编辑器
? 文本格式编辑器,
? Windows的记事本（ Notepad）
? FrontPage的 HTML源码编辑方式
? UltraEdit软件（特别推荐）
1,记事本
2,FrontPage的 HTML模式
3,UltraEdit
14.2 HTML文件结构
<html>
<head>
HTML文件头
</head>
<body>
HTML文件体
</body>
</html>
?对整体进行
设置的参数、
命令及注释
页面中表现的内容
? HTML文件中的标记命令均以,<>”括住，大部分
命令是成对出现的开关命令。
? 起始命令为,<命令 >”，而结束命令则为,</命令
>”。
? HTML文件中的标记命令对大小写不敏感。
14.3 字模与格式控制命令
1,Small：缩小命令，作用为字号缩小一级。为
开关命令。例如：
<small>缩小一级字号 </small>
<small><small>缩小两级字号 </small></small>
2,Big：放大命令，作用为字号放大一级。为开
关命令。例如：
<big>放大一级字号 </big>
<big><big>放大二级字号 </big></big>
3,Strong：强调命令，作用为对文字加粗。为开
关命令。例如：
<strong>文字强调（加粗） </strong>
4,B：加粗命令，作用为对文字加粗。为开关命
令。例如：
<b>文字加粗 </b>
5,i：斜体命令，作用为对文字做倾斜处理。为开
关命令。例如：
<i>文字倾斜 </i>
6,U：下线命令，作用为对文字加上下划线。为
开关命令。例如：
<u>文字加下线 </u>
7,FONT：字模控制命令，可用多个参数来控制字
模的各个方面。为开关命令。
（ 1） size参数：控制字号的级数，共分 7级。例：
<font size=5>字号为 5级 </u>
（ 2） color参数：控制文字的颜色，可以用颜色的
英文单词来设置，也可以用以,#”开头的 6位 16
进制数字来表示红、绿、蓝颜色。例如：
<font color=red>文字为红色 </font>
<font color=#FF0000>文字还是红色 </font>
（ 3） face参数：控制字体。例如：
<font face="隶书 ">字体为隶书 </font>
一些 HTML命令及其在 IE中的显示效果
8,H1,H2,H3等：级别标题命令，为开关命令，
用于设置各级标题。例如：
<h1>一级标题 </h1>
<h2>二级标题 </h2>
<h3>三级标题 </h3>
9,Center：段落居中命令。为开关命令。例如：
<center>居中显示 </center>
10,BR：折行命令。不是开关命令。例如
本命令后将重起一行。 <br>
11,P：段落命令，为开关命令，带上参数后可对整
个段落进行格式控制。
? 例如,align为对齐参数，其值有 left,center,right
等。以下是一些例子：
<p>本命令括起一段后进行整体设置 </p>
<p align=left>本命令括起一段后进行整体设置，本参数为
左对齐段落 </p>
<p align=center>本命令括起一段后进行整体设置，本参
数为居中段落 </p>
<p align=right>本命令括起一段后进行整体设置，本参数
为右对齐段落 </p>
<p>在一个段落中,<br>
可以通过 BR命令来进行折行 </p>
另一些命令例子及显示效果
14.4 表 格
? 表格是一种基本的格式元素,HTML也包含对
表格进行排版和控制的命令。
1,Table：表格命令，为开关命令，标记表格的开始
和结束。可带参数。常用的参数有：
（ 1） border参数：边框宽度参数，以像素为单位。
（ 2） bgcolor参数：背景颜色参数，可以用颜色的
英文单词，也可以用以＃开头的 6位 16进制表示。
（ 3） align参数：对齐位置参数，值有 left,center、
right等，代表左对齐、居中、右对齐。
（ 4） width参数：宽度参数，可用像素或所占显示
窗口宽度的百分比表示。
（ 5） height参数：高度参数，可用像素或所占显示
窗口高度的百分比表示。
1,表格命令,table
2,表行命令,tr
2,Tr：表行命令，为开关命令，标记一个表行的开
始和结束。可带参数。常用的参数有：
（ 1） bgcolor参数：背景颜色参数，可以用颜色
英文单词或以＃开头的 6位 16进制表示。
（ 2） align参数：对齐位置参数，值有 left、
center,right等，代表该行表格单元中的内容左
对齐、居中、右对齐。
（ 3） height参数：高度参数，可用像素或所占显
示窗口高度的百分比表示。
3,单元格命令,td
3,Td：单元格命令，为开关命令，标记一个单元格
的开始和结束。可带参数。常用的参数有：
（ 1） bgcolor参数：背景颜色参数，可用颜色英文
单词或以＃开头的 6位 16进制表示。
（ 2） align参数：水平对齐参数，值有 left,center,
right等，代表单元格内容左齐、居中、右齐。
（ 3） valign参数：垂直对齐位置参数，值有 top、
center,bottom等，分别代表单元格内容顶对齐、
居中、底对齐。
（ 4） width参数：宽度参数，可用像素表示或百分
比表示。
（ 5） height参数：高度参数，可用像素表示或百分
比表示。
14.5 链 接
链接命令的格式如下：
<a href=“目的资源的网址” >文字、图片或其他资源 </a>
例如，某表格例子程序名为 file1003.htm，，一
个指向前述“表格”页面的链接代码为：
<a href="file03.htm">表格 </a>
下面再给出几个关于链接的例子：
1．指向网站的链接。代码如下：
<a href="http://www.sina.com.cn">新浪网 </a>
2．在新的页面中打开链接，代码如下：
<a href="http://www.sina.com.cn"
target="_blank">新浪网 </a>
target指定目标显示窗口,_blank表示新开窗口。
3．邮箱链接，点击后打开默认的邮件系统写信和发
信。代码如下：
<a href="mailto,dadong@21bj.com">给我写信 </a>
14.6 图 片
图片命令的格式如下：
<img src=图片文件路径 >
图片命令参数常见的有：
1,Border参数，表示图片边框的宽度，以像素
为单位。
2,Alt参数，图片的别名，即在将鼠标移至图片
上面时显示的文字。
3,width参数：宽度参数，可用像素或所占整个
窗口宽度的百分比表示。
4,height参数：高度参数，可用像素或所占整
个窗口高度的百分比表示。
下面给出一些关于图片的例子：
1．加入一张图片，代码如下：
<img src="images/img01.jpg">
2．图片加边框。代码如下：
<img src="images/img01.jpg" border=1>
3．控制图片大小，代码如下：
<img src="images/img01.jpg"
width=250 height=100>
4．图片加链接，代码如下：
<a href=http://www.xajh.com>
<img src=images/img01.jpg >
</a>
14.7 页面分帧
? 帧就是页面上独立的显
示区域。通过对页面分
帧，可以更好地对页面
进行显示控制，并可减
小单个页面的大小，加
快页面显示的速度。
14.8 JavaScript
JavaScript是一段可以嵌入在 Html文件中的描述语
言，通过它可以执行一定的程序功能，以方便
对页面进行控制。
例如，下面是一个 JavaScript的简单例子：
<script>
document.write("用 JavaScript写一句话 !")
</script>
例 2：自动跳窗代码如下：
<script>
window.open(跳出窗显示的页面网址或文件名 );
</script>
14.9 思考与练习
1,什么是标记控制语言？
2,对 HTML编辑器有什么要求？
3,HTML文件的结构是怎么样的？
4,掌握本章学习过的 HTML命令。
Internet网页的基础是 HTML语言（超文本标
记语言），这是一种标记控制语言。
网页浏览器（如 IE等）可解析 HTML语言
本章主要内容
? HTML文件编辑器
? HTML文件结构
? 字模与格式控制命令
? 表格
? 链接
? 图片
? 页面分帧
? JavaScript
? HTML为英文 Hyper Text Markup Language（超
文本标记语言）的缩写，属于标记控制语言。
? 所谓标记控制语言，即在源文件中插入排版控制
标记（命令），通过专门的解析器解析后才能显
示和打印排版后的效果。
? 所谓超文本，指除了文本内容外，还可以表现图
形、图像、音频、视频、链接等非文本要素。
? HTML语言的解析器主要为网页浏览器。
网页及其 HTML源代码
14.1 HTML文件编辑器
? 文本格式编辑器,
? Windows的记事本（ Notepad）
? FrontPage的 HTML源码编辑方式
? UltraEdit软件（特别推荐）
1,记事本
2,FrontPage的 HTML模式
3,UltraEdit
14.2 HTML文件结构
<html>
<head>
HTML文件头
</head>
<body>
HTML文件体
</body>
</html>
?对整体进行
设置的参数、
命令及注释
页面中表现的内容
? HTML文件中的标记命令均以,<>”括住，大部分
命令是成对出现的开关命令。
? 起始命令为,<命令 >”，而结束命令则为,</命令
>”。
? HTML文件中的标记命令对大小写不敏感。
14.3 字模与格式控制命令
1,Small：缩小命令，作用为字号缩小一级。为
开关命令。例如：
<small>缩小一级字号 </small>
<small><small>缩小两级字号 </small></small>
2,Big：放大命令，作用为字号放大一级。为开
关命令。例如：
<big>放大一级字号 </big>
<big><big>放大二级字号 </big></big>
3,Strong：强调命令，作用为对文字加粗。为开
关命令。例如：
<strong>文字强调（加粗） </strong>
4,B：加粗命令，作用为对文字加粗。为开关命
令。例如：
<b>文字加粗 </b>
5,i：斜体命令，作用为对文字做倾斜处理。为开
关命令。例如：
<i>文字倾斜 </i>
6,U：下线命令，作用为对文字加上下划线。为
开关命令。例如：
<u>文字加下线 </u>
7,FONT：字模控制命令，可用多个参数来控制字
模的各个方面。为开关命令。
（ 1） size参数：控制字号的级数，共分 7级。例：
<font size=5>字号为 5级 </u>
（ 2） color参数：控制文字的颜色，可以用颜色的
英文单词来设置，也可以用以,#”开头的 6位 16
进制数字来表示红、绿、蓝颜色。例如：
<font color=red>文字为红色 </font>
<font color=#FF0000>文字还是红色 </font>
（ 3） face参数：控制字体。例如：
<font face="隶书 ">字体为隶书 </font>
一些 HTML命令及其在 IE中的显示效果
8,H1,H2,H3等：级别标题命令，为开关命令，
用于设置各级标题。例如：
<h1>一级标题 </h1>
<h2>二级标题 </h2>
<h3>三级标题 </h3>
9,Center：段落居中命令。为开关命令。例如：
<center>居中显示 </center>
10,BR：折行命令。不是开关命令。例如
本命令后将重起一行。 <br>
11,P：段落命令，为开关命令，带上参数后可对整
个段落进行格式控制。
? 例如,align为对齐参数，其值有 left,center,right
等。以下是一些例子：
<p>本命令括起一段后进行整体设置 </p>
<p align=left>本命令括起一段后进行整体设置，本参数为
左对齐段落 </p>
<p align=center>本命令括起一段后进行整体设置，本参
数为居中段落 </p>
<p align=right>本命令括起一段后进行整体设置，本参数
为右对齐段落 </p>
<p>在一个段落中,<br>
可以通过 BR命令来进行折行 </p>
另一些命令例子及显示效果
14.4 表 格
? 表格是一种基本的格式元素,HTML也包含对
表格进行排版和控制的命令。
1,Table：表格命令，为开关命令，标记表格的开始
和结束。可带参数。常用的参数有：
（ 1） border参数：边框宽度参数，以像素为单位。
（ 2） bgcolor参数：背景颜色参数，可以用颜色的
英文单词，也可以用以＃开头的 6位 16进制表示。
（ 3） align参数：对齐位置参数，值有 left,center、
right等，代表左对齐、居中、右对齐。
（ 4） width参数：宽度参数，可用像素或所占显示
窗口宽度的百分比表示。
（ 5） height参数：高度参数，可用像素或所占显示
窗口高度的百分比表示。
1,表格命令,table
2,表行命令,tr
2,Tr：表行命令，为开关命令，标记一个表行的开
始和结束。可带参数。常用的参数有：
（ 1） bgcolor参数：背景颜色参数，可以用颜色
英文单词或以＃开头的 6位 16进制表示。
（ 2） align参数：对齐位置参数，值有 left、
center,right等，代表该行表格单元中的内容左
对齐、居中、右对齐。
（ 3） height参数：高度参数，可用像素或所占显
示窗口高度的百分比表示。
3,单元格命令,td
3,Td：单元格命令，为开关命令，标记一个单元格
的开始和结束。可带参数。常用的参数有：
（ 1） bgcolor参数：背景颜色参数，可用颜色英文
单词或以＃开头的 6位 16进制表示。
（ 2） align参数：水平对齐参数，值有 left,center,
right等，代表单元格内容左齐、居中、右齐。
（ 3） valign参数：垂直对齐位置参数，值有 top、
center,bottom等，分别代表单元格内容顶对齐、
居中、底对齐。
（ 4） width参数：宽度参数，可用像素表示或百分
比表示。
（ 5） height参数：高度参数，可用像素表示或百分
比表示。
14.5 链 接
链接命令的格式如下：
<a href=“目的资源的网址” >文字、图片或其他资源 </a>
例如，某表格例子程序名为 file1003.htm，，一
个指向前述“表格”页面的链接代码为：
<a href="file03.htm">表格 </a>
下面再给出几个关于链接的例子：
1．指向网站的链接。代码如下：
<a href="http://www.sina.com.cn">新浪网 </a>
2．在新的页面中打开链接，代码如下：
<a href="http://www.sina.com.cn"
target="_blank">新浪网 </a>
target指定目标显示窗口,_blank表示新开窗口。
3．邮箱链接，点击后打开默认的邮件系统写信和发
信。代码如下：
<a href="mailto,dadong@21bj.com">给我写信 </a>
14.6 图 片
图片命令的格式如下：
<img src=图片文件路径 >
图片命令参数常见的有：
1,Border参数，表示图片边框的宽度，以像素
为单位。
2,Alt参数，图片的别名，即在将鼠标移至图片
上面时显示的文字。
3,width参数：宽度参数，可用像素或所占整个
窗口宽度的百分比表示。
4,height参数：高度参数，可用像素或所占整
个窗口高度的百分比表示。
下面给出一些关于图片的例子：
1．加入一张图片，代码如下：
<img src="images/img01.jpg">
2．图片加边框。代码如下：
<img src="images/img01.jpg" border=1>
3．控制图片大小，代码如下：
<img src="images/img01.jpg"
width=250 height=100>
4．图片加链接，代码如下：
<a href=http://www.xajh.com>
<img src=images/img01.jpg >
</a>
14.7 页面分帧
? 帧就是页面上独立的显
示区域。通过对页面分
帧，可以更好地对页面
进行显示控制，并可减
小单个页面的大小，加
快页面显示的速度。
14.8 JavaScript
JavaScript是一段可以嵌入在 Html文件中的描述语
言，通过它可以执行一定的程序功能，以方便
对页面进行控制。
例如，下面是一个 JavaScript的简单例子：
<script>
document.write("用 JavaScript写一句话 !")
</script>
例 2：自动跳窗代码如下：
<script>
window.open(跳出窗显示的页面网址或文件名 );
</script>
14.9 思考与练习
1,什么是标记控制语言？
2,对 HTML编辑器有什么要求？
3,HTML文件的结构是怎么样的？
4,掌握本章学习过的 HTML命令。
