HTML文档结构标记
我们先来看一个标准的 HTML文档结构：
<html>
<head>
<title>标题内容 </title>
</head>
<body>
主要内容在这里！
</body>
</html>
将以上代码在浏览器上发布，会是什么结果？
在记事本中演示。
HTML文档结构标记
1,HTML标记
标记的格式：
<html>
……
</html>
标记说明,HTML标记用于表示一
个页面的开始和结束（ <html>表示
开始,</html>表示结束）。
HTML文档结构标记
2,HEAD标记
标记的格式：
<head>
……
</head>
标记说明,HEAD标记是页面的第二层
标记，用于包含页面的标题信息。
提示,HEAD标记必须在 BODY标记开始
之前结束，即 </head>必须放在 <body>
之前） 。
HTML文档结构标记
3,TITLE标记
标记的格式：
<title>
页面的标题
</title>
标记说明,TITLE标记提供了页面
的标题名称，这对标记之间的文本
作为页面的标题。
提示：这对标记是放在 HEAD标记
符之间的。
HTML文档结构标记
4,BODY标记
标记的格式：
<body>
页面的内容
</body>
标记说明,BODY标记标志着页面内容的
开始和结束，页面中所用其它的 HTML标
记都在这对标记符之间。
BODY标记参数,background(指定背景图像 )，
Bgcolor(指定背景颜色 ),text,link,alink,vlink。
HTML文档结构标记
5、注释标记
标记的格式：
<!--…… -->
标记说明,<!--…… -->标记是注释标
记，在这个标记之内的文本都不会
在用户的浏览器窗口中显示出来
（ 但是，如果是程序代码，即使放
在注释标记内，也会被执行 ）。
返回
1,FONT标记
标记的格式：
<font face=“字体名称 1,字体名称 2,… 字体名
称 n,” size=“字号, color=“字体颜
色, >… </font>
标记说明,FONT标记是专门对文本进行设置的
标记，该标记共有三个参数,face指定字体的
名称，可以设置一种，也可以设置多种，字
体名称之间用逗号隔开。 Size参数指定字体的
大小（字号），数值范围在 7~(-7)之间。
Color参数用于指定文本的颜色。
页面文本的排版标记
2,H标记
标记的格式：
<H1>文本内容 </H1>
……,
<H6>文本内容 </H6>
标记说明,实际 H标记是一系列以 H开头的标记，
使用 H标记指定标记之间的文本的大小（共
分为 6级，数值越大字越小）。 (专门用作标
题 )
H标记有一个参数,align,它用于设置文本的对
齐方式，取值为 center(居中对齐 ),left(左对
齐 ),right(右对齐 )。
页面文本的排版标记
页面文本的排版标记
3,BIG标记
标记的格式：
<big>
文本
</big>
标记说明,BIG标记将使用比当前页面的
字体更大的字体显示该标记之间的文本。
例如,<html>
<head><title>BIG标记 </title></head>
<body bgcolor=“ffffff”>
这是正常字体。 <big>这是使用了 big标记
的文本 </big></body></html>
4,B标记,I标记,U标记,S标记
这四个标记的格式为：
<B>文本 </B> <U>文本 </U>
<I>文本 </I> <S>文本 </S>
标记说明,B标记用于将标记之间的文本设
置成粗体。
I标记用于将标记之间的文本设置成斜体。
U标记用于将标记之间的文本加下划线。
S标记用于将标记之间的文本添加删除线。
页面文本的排版标记
5,BR标记
标记的格式：
<br>
标记说明,BR标记用于添加一个换行符，
相当于一个回车符，它不用成对使用。
页面文本的排版标记
页面文本的排版标记
6,HR标记
标记的格式：
<hr width=“宽度数值, size=“高度数值,
align=“对齐方式, color=“颜色, >
标记说明,HR标记用于在页面上划出一条
水平线，和 BR标记一样，它也不要求成
对使用。该标记的参数中,width和 size的
单位是像素。
7,P标记
标记的格式：
<p align=“对齐方式, >文本内容 </p>
标记说明,P标记用来分隔文档中的各个
段落，它只有一个参数 align，用来设置
被定义的文本内容的对齐方式。
页面文本的排版标记
8,CENTER标记,LEFT标记,RIGHT
标记，这三个 标记的格式为：
<center>文本内容 </center>
<left>文本内容 </left>
<right>文本内容 </right>
标记说明,CENTER（ LEFT,RIGHT ）
标记用于将标记之间的文本在浏览器窗
口之间居中（左边、右边）显示。如果
文本还包含在表格中，那么在其所在的
单元格中居中（左边、右边）显示。
页面文本的排版标记
页面文本的排版标记
9,marquee标记（跑马灯标记）
标记的格式：
<marquee direction=“设置起始方向,
scrollamount=“设置每次移动的距离,
scrolldelay=“设置停留的时间, >指明要
滚动显示的文本内容 </marquee>
标记说明,marquee标记用来设置标记之
间的文本内容移动，它有三个参数：
Direction:设置文本移动的起始方向。
Scrollamount:设置文本每次移动的距离。 (像素 )
Scrolldelay:设置文本移动停留的时间。 (毫秒 )
说明,marquee标记可以单独使用，即不
使用参数。 当这个标记没有参数时，它
的功能是：从左向右滚动，每次移动的
距离是 6，停留时间是 90毫秒。
10、空格标记
标记格式：
标记说明, 标记用于设置空格，一
个  表示一个西文空格，该标记不必
放在尖括号 <>里面。
 
1,TABLE标记
标记的格式：
<table >
定义表格的行列及内容
</table>
标记说明,TABLE标记标志着一个表格的
开始和结束，表格的所有定义都包含在
这对标记之间。该标记有一些参数，用
于定义整个表的位置、背景、边框等。
如 align,background,bgcolor,border,
cellpadding,cellspacing,width,height等。
表格标记
2,TR标记
标记的格式：
<tr >
第 n行 …,
</tr>
标记说明,TR标记表明了表格的一行开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
3,TD标记
标记的格式：
<td >
表格单元的内容
</td>
标记说明,TD标记指定表格单元的内容，
表格的行标记 TR应该在 TD标记之前，
换句话说，这对 TD标记是放在 TR标记
之间。
表格标记
定义表格：需要将这几个表格标记组合起来使用，
才能完成一个完整的表格。 下面的代码设置了
一个两行两列的表格。
<html>
<head>
<title>表格 </title>
</head>
<body bgcolor=yellow>
<table align=center width=“268” height=“191” border=“5”
cellpadding=“2” cellspacing=“2”>
<tr>
<td width=“120”>第一行第一列 </td>
<td width=“120”>第一行第二列 </td>
</tr>
表格标记
<tr>
<td width=“120”>第二行第一列 </td>
<td width=“120”>第二行第二列 </td>
</tr>
</table>
</body>
</html>
返回
1,IMG标记
标记的格式：
<img src=“URL” align=“对齐方式, >
标记说明,IMG标记表示插入一个图像。该标
记一定要和 src一起使用，用 src参数告诉要插
入的图像的地址和文件名。
提示,如果要插入的图像文件与页面同在一个
文件夹中，此时路径名可以省略，只需输入
图像的文件名；如果不同在一个文件夹内，
路径名不能省略。
其它标记
2,A标记
标记的格式：
<a href=“URL” > 超级链接文本内容或图像 </a>
标记说明,A标记表示建立一个链接。该标记一定
要和 href一起使用，用 href参数告诉要链接的文
件的地址和文件名。
提示,如果要链接的文件与设计的页面同在一个
文件夹中，此时路径名可以省略，只需输入链接
的文件名；如果不同在一个文件夹内，路径名不
能省略。
其它标记
返回
本节小结
本节介绍了一些简单的 HTML标记的使
用方法，要求：
1、慢慢学会看懂 HTML标记的功能。
2、熟悉 HTML标记的特点。
3、能熟悉掌握简单的 HTML标记的使用。
作业
1、复习掌握今天的相关内容。
2、用我们学过的超文本标识语言编写 3
个网页。要求：使用所有学习过的
HTML标记，如设置不同的网页背景
（或者颜色）、设置不同的字体、大
小、颜色及不同的字体风格、设置滚
动的字幕。
我们先来看一个标准的 HTML文档结构：
<html>
<head>
<title>标题内容 </title>
</head>
<body>
主要内容在这里！
</body>
</html>
将以上代码在浏览器上发布，会是什么结果？
在记事本中演示。
HTML文档结构标记
1,HTML标记
标记的格式：
<html>
……
</html>
标记说明,HTML标记用于表示一
个页面的开始和结束（ <html>表示
开始,</html>表示结束）。
HTML文档结构标记
2,HEAD标记
标记的格式：
<head>
……
</head>
标记说明,HEAD标记是页面的第二层
标记，用于包含页面的标题信息。
提示,HEAD标记必须在 BODY标记开始
之前结束，即 </head>必须放在 <body>
之前） 。
HTML文档结构标记
3,TITLE标记
标记的格式：
<title>
页面的标题
</title>
标记说明,TITLE标记提供了页面
的标题名称，这对标记之间的文本
作为页面的标题。
提示：这对标记是放在 HEAD标记
符之间的。
HTML文档结构标记
4,BODY标记
标记的格式：
<body>
页面的内容
</body>
标记说明,BODY标记标志着页面内容的
开始和结束，页面中所用其它的 HTML标
记都在这对标记符之间。
BODY标记参数,background(指定背景图像 )，
Bgcolor(指定背景颜色 ),text,link,alink,vlink。
HTML文档结构标记
5、注释标记
标记的格式：
<!--…… -->
标记说明,<!--…… -->标记是注释标
记，在这个标记之内的文本都不会
在用户的浏览器窗口中显示出来
（ 但是，如果是程序代码，即使放
在注释标记内，也会被执行 ）。
返回
1,FONT标记
标记的格式：
<font face=“字体名称 1,字体名称 2,… 字体名
称 n,” size=“字号, color=“字体颜
色, >… </font>
标记说明,FONT标记是专门对文本进行设置的
标记，该标记共有三个参数,face指定字体的
名称，可以设置一种，也可以设置多种，字
体名称之间用逗号隔开。 Size参数指定字体的
大小（字号），数值范围在 7~(-7)之间。
Color参数用于指定文本的颜色。
页面文本的排版标记
2,H标记
标记的格式：
<H1>文本内容 </H1>
……,
<H6>文本内容 </H6>
标记说明,实际 H标记是一系列以 H开头的标记，
使用 H标记指定标记之间的文本的大小（共
分为 6级，数值越大字越小）。 (专门用作标
题 )
H标记有一个参数,align,它用于设置文本的对
齐方式，取值为 center(居中对齐 ),left(左对
齐 ),right(右对齐 )。
页面文本的排版标记
页面文本的排版标记
3,BIG标记
标记的格式：
<big>
文本
</big>
标记说明,BIG标记将使用比当前页面的
字体更大的字体显示该标记之间的文本。
例如,<html>
<head><title>BIG标记 </title></head>
<body bgcolor=“ffffff”>
这是正常字体。 <big>这是使用了 big标记
的文本 </big></body></html>
4,B标记,I标记,U标记,S标记
这四个标记的格式为：
<B>文本 </B> <U>文本 </U>
<I>文本 </I> <S>文本 </S>
标记说明,B标记用于将标记之间的文本设
置成粗体。
I标记用于将标记之间的文本设置成斜体。
U标记用于将标记之间的文本加下划线。
S标记用于将标记之间的文本添加删除线。
页面文本的排版标记
5,BR标记
标记的格式：
<br>
标记说明,BR标记用于添加一个换行符，
相当于一个回车符，它不用成对使用。
页面文本的排版标记
页面文本的排版标记
6,HR标记
标记的格式：
<hr width=“宽度数值, size=“高度数值,
align=“对齐方式, color=“颜色, >
标记说明,HR标记用于在页面上划出一条
水平线，和 BR标记一样，它也不要求成
对使用。该标记的参数中,width和 size的
单位是像素。
7,P标记
标记的格式：
<p align=“对齐方式, >文本内容 </p>
标记说明,P标记用来分隔文档中的各个
段落，它只有一个参数 align，用来设置
被定义的文本内容的对齐方式。
页面文本的排版标记
8,CENTER标记,LEFT标记,RIGHT
标记，这三个 标记的格式为：
<center>文本内容 </center>
<left>文本内容 </left>
<right>文本内容 </right>
标记说明,CENTER（ LEFT,RIGHT ）
标记用于将标记之间的文本在浏览器窗
口之间居中（左边、右边）显示。如果
文本还包含在表格中，那么在其所在的
单元格中居中（左边、右边）显示。
页面文本的排版标记
页面文本的排版标记
9,marquee标记（跑马灯标记）
标记的格式：
<marquee direction=“设置起始方向,
scrollamount=“设置每次移动的距离,
scrolldelay=“设置停留的时间, >指明要
滚动显示的文本内容 </marquee>
标记说明,marquee标记用来设置标记之
间的文本内容移动，它有三个参数：
Direction:设置文本移动的起始方向。
Scrollamount:设置文本每次移动的距离。 (像素 )
Scrolldelay:设置文本移动停留的时间。 (毫秒 )
说明,marquee标记可以单独使用，即不
使用参数。 当这个标记没有参数时，它
的功能是：从左向右滚动，每次移动的
距离是 6，停留时间是 90毫秒。
10、空格标记
标记格式：
标记说明, 标记用于设置空格，一
个  表示一个西文空格，该标记不必
放在尖括号 <>里面。
 
1,TABLE标记
标记的格式：
<table >
定义表格的行列及内容
</table>
标记说明,TABLE标记标志着一个表格的
开始和结束，表格的所有定义都包含在
这对标记之间。该标记有一些参数，用
于定义整个表的位置、背景、边框等。
如 align,background,bgcolor,border,
cellpadding,cellspacing,width,height等。
表格标记
2,TR标记
标记的格式：
<tr >
第 n行 …,
</tr>
标记说明,TR标记表明了表格的一行开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
3,TD标记
标记的格式：
<td >
表格单元的内容
</td>
标记说明,TD标记指定表格单元的内容，
表格的行标记 TR应该在 TD标记之前，
换句话说，这对 TD标记是放在 TR标记
之间。
表格标记
定义表格：需要将这几个表格标记组合起来使用，
才能完成一个完整的表格。 下面的代码设置了
一个两行两列的表格。
<html>
<head>
<title>表格 </title>
</head>
<body bgcolor=yellow>
<table align=center width=“268” height=“191” border=“5”
cellpadding=“2” cellspacing=“2”>
<tr>
<td width=“120”>第一行第一列 </td>
<td width=“120”>第一行第二列 </td>
</tr>
表格标记
<tr>
<td width=“120”>第二行第一列 </td>
<td width=“120”>第二行第二列 </td>
</tr>
</table>
</body>
</html>
返回
1,IMG标记
标记的格式：
<img src=“URL” align=“对齐方式, >
标记说明,IMG标记表示插入一个图像。该标
记一定要和 src一起使用，用 src参数告诉要插
入的图像的地址和文件名。
提示,如果要插入的图像文件与页面同在一个
文件夹中，此时路径名可以省略，只需输入
图像的文件名；如果不同在一个文件夹内，
路径名不能省略。
其它标记
2,A标记
标记的格式：
<a href=“URL” > 超级链接文本内容或图像 </a>
标记说明,A标记表示建立一个链接。该标记一定
要和 href一起使用，用 href参数告诉要链接的文
件的地址和文件名。
提示,如果要链接的文件与设计的页面同在一个
文件夹中，此时路径名可以省略，只需输入链接
的文件名；如果不同在一个文件夹内，路径名不
能省略。
其它标记
返回
本节小结
本节介绍了一些简单的 HTML标记的使
用方法，要求：
1、慢慢学会看懂 HTML标记的功能。
2、熟悉 HTML标记的特点。
3、能熟悉掌握简单的 HTML标记的使用。
作业
1、复习掌握今天的相关内容。
2、用我们学过的超文本标识语言编写 3
个网页。要求：使用所有学习过的
HTML标记，如设置不同的网页背景
（或者颜色）、设置不同的字体、大
小、颜色及不同的字体风格、设置滚
动的字幕。
