网页设计－姚屏
第 2章 网页的基本结构和段落、文字标记
2.2 HTML文件的基本结构
网页设计－姚屏
2.2 HTML文件的基本结构
?标记符概述
?在 HTML 中，所有的标记符都用尖括号 < >
括起来。例如,<html>,<a>。
?HTML 标记符是 不区分大小写 的。 <html>、
<Html>和 <HTML>没有区别。
网页设计－姚屏
?绝大多数标记符都是 成对出现 的，包括开
始标记符和结束标记符。某些标记符，例
如 <BR>，只要求单一标记符号。
?开始标记符与结束标记符的区别在于：结
束标记符多一个斜杠,/” （不是反斜杠
,\” ！）
网页设计－姚屏
?标记符属性
?属性是用来描述对象特征的特性。例如，
一个人的身高、体重就是人这个对象的属
性。
?在 HTML中，所有的属性都放置在开始标记
符的尖括号里，多个属性之间用空格分开，
通常也不区分大小写。
网页设计－姚屏
?例如，可以用字体标记符和字号属性指定
文字的大小。 <FONT SIZE=1>本行字将以较
小字体显示。 </FONT>
?注意：
?1、不是所有的标记都有属性
?2、根据需要选择需要的属性，属性之间没
有顺序。
?演示 ——属性的作用
网页设计－姚屏
2.2.2HTML文件的基本结构
?一个 Web 页实际上对应于一个 HTML 文件，
HTML 文件以,htm 或,html 为扩展名。
?最基本的 HTML文档包括,HTML标记
<HTML></HTML>、首部标记 <HEAD>和
</HEAD>、以及正文 <BODY></BODY>。
?演示 ——最简单的 HTML文件
网页设计－姚屏
2.2.3文件结构的格式标记
?HTML标记符
?<HTML>和 </HTML> 是 Web页的第一个和最
后一个标记符,Web页的其他所有内容都
位于这两个标记符之间。这两个标记告诉
浏览器或其他阅读该页的程序，此文件为
一个 Web页。
网页设计－姚屏
?HEAD标记符
?首部标记 <HEAD>和 </HEAD>位于 Web 页的
开头，其中不包括 Web 页的任何实际内容，
而是提供一些与 Web 页有关的特定信息。
?首部标记中的内容也用相应的标记符括起
来。例如，样式表（ CSS）定义位于
<STYLE>和 </STYLE>之间；脚本定义位于
<SCRIPT></SCRIPT>之间。
网页设计－姚屏
?TITLE 标记符
?在首部标记符中，最基本、最常用的标记
符是标题标记 <TITLE>和 </TITLE>，用于定
义网页的标题。
?当网页在浏览器中显示时，网页标题将在
浏览器窗口的标题栏中显示。
?演示 ——TITLE的作用
网页设计－姚屏
?BODY标记符
?正文标记符 <BODY>和 </BODY>包含 Web 页的
内容。文字、图形、链接以及其他 HTML元
素都位于该标记符内。
?正文标记符中的文字，如果没有其他标记
符修饰，则将以无格式的形式显示。
?演示 ——BODY标记符
网页设计－姚屏
2.3标题样式
?在 HTML 中，用户可以通过 Hn 标记符来
标识文档中的标题和副标题，其中 n 是 1
至 6的数字； H1表示最大的标题,H6表示最
小的标题。使用标题样式时，必须使用结
束标记符。
? <H1 align＝对齐方式 >一级标题 </H1>
?对齐方式,left（左） center right（右）
?演示 ——标题效果
网页设计－姚屏
2.4 段落标记
?2.4.1注释标记
?<!—注释内容 -->
? 添加注释都是一种良好的工作习惯。注释内容都将
被浏览器解释为注释，而不在浏览器中显示。
?2.4.2强制换行标记
?换行标记符用于在文档中强制断行，标记为一
个单独的 <BR>。该标记符与分段标记符 <P>是
有区别的。
网页设计－姚屏
?2.4.3强制换段标记
?强制换段标记：文字 <P>
?设置段落标记用于将文档划分为段落，标记为
<P></P>，其中结束标记符通常可省略。
? <P align=对齐方式 >文字 <P>
?演示 ——P与 BR
网页设计－姚屏
2.4.4显示预排格式标记
?<PRE>预先排好的格式 </PRE>
?演示 ——显示预排格式
网页设计－姚屏
2.4.5分区显示标记
?DIV 标记符
DIV 标记符用于为文档分节，以便为文档
的不同部分应用不同的段落格式，其标记
为 <DIV></DIV>。位于 DIV 标记符中的多
段文本将被认为是一个节，可为它们设置
一致的对齐格式。
网页设计－姚屏
?ALIGN 属性
ALIGN 属性用于设置段落的对齐格式，其
值包括,RIGHT（右对齐）,LEFT（左对
齐）,CENTER（居中对齐）和 JUSTIFY
（两端对齐）。 ALIGN 属性可应用于多种
标记符，最典型的是应用于 DIV,P,Hn
（标题标记符）,HR 等标记符。
网页设计－姚屏
?CENTER 标记符
如果要将文档内容居中，还可使用 CENTER
标记符，方法为：将需居中的内容置于
<CENTER>和 </CENTER>之间。
?演示 ——段落对齐
?演示 ——DIV与 CENTER
网页设计－姚屏
2.4.6水平线（ P28）
?添加水平线的标记符为 HR，它包括以下属
性：
?SIZE 属性用来改变水平线的粗细。
?ALIGN属性用来设置水平线的对齐方式．
?WIDTH 属性用来更改水平线的长度。
?NOSHADE 属性使水平线以实线显示。
?COLOR属性可以控制水平线的颜色。
?演示 ——水平线效果
网页设计－姚屏
2.5文字标记
?FONT标记符具有 3个常用的属性：
?SIZE 设置字体大小 (字号 )
?COLOR 设置字体颜色
?FACE 设置字体样式
?字号属性 size 的值可以从 1到 7,3是默认
值。该属性值也可以用 + 号或 - 号来作
为相对值指定。
演示 —— <FONT size=“” >
网页设计－姚屏
?COLOR 属性用来指定文字颜色。在编制网
页时，通过在 FONT标记符中指定 COLOR 属
性，用户可以指定文字颜色,
?演示 ——<FONT color=“”>
网页设计－姚屏
2.5.2设置字体
?Face 属性用来指定字体样式。在编制网
页时，通过在 FONT标记符中指定 face 属
性，用户可以指定一个或几个字体名称
（用逗号隔开）。
?演示 ——<FONT face=“”>
网页设计－姚屏
常用物理字符样式
?物理字符样式是指标记符本身说明了所修饰的效
果。
?常用物理字符样式标记符有：
?黑体标记 <B></B>
?斜体标记 <I></I>
?下划线标记 <U></U>等。
?演示 ——物理字符样式效果
网页设计－姚屏
格式嵌套
?格式嵌套的通常原则,
?（ 1）如果所设置的格式是相容的，则取格式叠加
的效果。
?（ 2）如果所设置的格式是冲突的，则取最近样式
符的修饰效果。
演示 —— 格式嵌套
网页设计－姚屏
2.5.4设置文字的颜色
?1,<BODY>标记中的 text属性
?设定整个网页文字的颜色。
?格式 <BODY text＝颜色 >受影响的文字 </BODY>
?2,<FONT>标记中的 color属性
?设定文字颜色
?格式 <FONT color＝颜色 >受影响的文字 </FONT>
?3,<FONT>优先
?演示 ——<FONT color=“”>
网页设计－姚屏
?演示 -特殊符号的书写
?现在开始完成课后练习！！
?P36－ 37 1,4,6,7,8题
第 2章 网页的基本结构和段落、文字标记
2.2 HTML文件的基本结构
网页设计－姚屏
2.2 HTML文件的基本结构
?标记符概述
?在 HTML 中，所有的标记符都用尖括号 < >
括起来。例如,<html>,<a>。
?HTML 标记符是 不区分大小写 的。 <html>、
<Html>和 <HTML>没有区别。
网页设计－姚屏
?绝大多数标记符都是 成对出现 的，包括开
始标记符和结束标记符。某些标记符，例
如 <BR>，只要求单一标记符号。
?开始标记符与结束标记符的区别在于：结
束标记符多一个斜杠,/” （不是反斜杠
,\” ！）
网页设计－姚屏
?标记符属性
?属性是用来描述对象特征的特性。例如，
一个人的身高、体重就是人这个对象的属
性。
?在 HTML中，所有的属性都放置在开始标记
符的尖括号里，多个属性之间用空格分开，
通常也不区分大小写。
网页设计－姚屏
?例如，可以用字体标记符和字号属性指定
文字的大小。 <FONT SIZE=1>本行字将以较
小字体显示。 </FONT>
?注意：
?1、不是所有的标记都有属性
?2、根据需要选择需要的属性，属性之间没
有顺序。
?演示 ——属性的作用
网页设计－姚屏
2.2.2HTML文件的基本结构
?一个 Web 页实际上对应于一个 HTML 文件，
HTML 文件以,htm 或,html 为扩展名。
?最基本的 HTML文档包括,HTML标记
<HTML></HTML>、首部标记 <HEAD>和
</HEAD>、以及正文 <BODY></BODY>。
?演示 ——最简单的 HTML文件
网页设计－姚屏
2.2.3文件结构的格式标记
?HTML标记符
?<HTML>和 </HTML> 是 Web页的第一个和最
后一个标记符,Web页的其他所有内容都
位于这两个标记符之间。这两个标记告诉
浏览器或其他阅读该页的程序，此文件为
一个 Web页。
网页设计－姚屏
?HEAD标记符
?首部标记 <HEAD>和 </HEAD>位于 Web 页的
开头，其中不包括 Web 页的任何实际内容，
而是提供一些与 Web 页有关的特定信息。
?首部标记中的内容也用相应的标记符括起
来。例如，样式表（ CSS）定义位于
<STYLE>和 </STYLE>之间；脚本定义位于
<SCRIPT></SCRIPT>之间。
网页设计－姚屏
?TITLE 标记符
?在首部标记符中，最基本、最常用的标记
符是标题标记 <TITLE>和 </TITLE>，用于定
义网页的标题。
?当网页在浏览器中显示时，网页标题将在
浏览器窗口的标题栏中显示。
?演示 ——TITLE的作用
网页设计－姚屏
?BODY标记符
?正文标记符 <BODY>和 </BODY>包含 Web 页的
内容。文字、图形、链接以及其他 HTML元
素都位于该标记符内。
?正文标记符中的文字，如果没有其他标记
符修饰，则将以无格式的形式显示。
?演示 ——BODY标记符
网页设计－姚屏
2.3标题样式
?在 HTML 中，用户可以通过 Hn 标记符来
标识文档中的标题和副标题，其中 n 是 1
至 6的数字； H1表示最大的标题,H6表示最
小的标题。使用标题样式时，必须使用结
束标记符。
? <H1 align＝对齐方式 >一级标题 </H1>
?对齐方式,left（左） center right（右）
?演示 ——标题效果
网页设计－姚屏
2.4 段落标记
?2.4.1注释标记
?<!—注释内容 -->
? 添加注释都是一种良好的工作习惯。注释内容都将
被浏览器解释为注释，而不在浏览器中显示。
?2.4.2强制换行标记
?换行标记符用于在文档中强制断行，标记为一
个单独的 <BR>。该标记符与分段标记符 <P>是
有区别的。
网页设计－姚屏
?2.4.3强制换段标记
?强制换段标记：文字 <P>
?设置段落标记用于将文档划分为段落，标记为
<P></P>，其中结束标记符通常可省略。
? <P align=对齐方式 >文字 <P>
?演示 ——P与 BR
网页设计－姚屏
2.4.4显示预排格式标记
?<PRE>预先排好的格式 </PRE>
?演示 ——显示预排格式
网页设计－姚屏
2.4.5分区显示标记
?DIV 标记符
DIV 标记符用于为文档分节，以便为文档
的不同部分应用不同的段落格式，其标记
为 <DIV></DIV>。位于 DIV 标记符中的多
段文本将被认为是一个节，可为它们设置
一致的对齐格式。
网页设计－姚屏
?ALIGN 属性
ALIGN 属性用于设置段落的对齐格式，其
值包括,RIGHT（右对齐）,LEFT（左对
齐）,CENTER（居中对齐）和 JUSTIFY
（两端对齐）。 ALIGN 属性可应用于多种
标记符，最典型的是应用于 DIV,P,Hn
（标题标记符）,HR 等标记符。
网页设计－姚屏
?CENTER 标记符
如果要将文档内容居中，还可使用 CENTER
标记符，方法为：将需居中的内容置于
<CENTER>和 </CENTER>之间。
?演示 ——段落对齐
?演示 ——DIV与 CENTER
网页设计－姚屏
2.4.6水平线（ P28）
?添加水平线的标记符为 HR，它包括以下属
性：
?SIZE 属性用来改变水平线的粗细。
?ALIGN属性用来设置水平线的对齐方式．
?WIDTH 属性用来更改水平线的长度。
?NOSHADE 属性使水平线以实线显示。
?COLOR属性可以控制水平线的颜色。
?演示 ——水平线效果
网页设计－姚屏
2.5文字标记
?FONT标记符具有 3个常用的属性：
?SIZE 设置字体大小 (字号 )
?COLOR 设置字体颜色
?FACE 设置字体样式
?字号属性 size 的值可以从 1到 7,3是默认
值。该属性值也可以用 + 号或 - 号来作
为相对值指定。
演示 —— <FONT size=“” >
网页设计－姚屏
?COLOR 属性用来指定文字颜色。在编制网
页时，通过在 FONT标记符中指定 COLOR 属
性，用户可以指定文字颜色,
?演示 ——<FONT color=“”>
网页设计－姚屏
2.5.2设置字体
?Face 属性用来指定字体样式。在编制网
页时，通过在 FONT标记符中指定 face 属
性，用户可以指定一个或几个字体名称
（用逗号隔开）。
?演示 ——<FONT face=“”>
网页设计－姚屏
常用物理字符样式
?物理字符样式是指标记符本身说明了所修饰的效
果。
?常用物理字符样式标记符有：
?黑体标记 <B></B>
?斜体标记 <I></I>
?下划线标记 <U></U>等。
?演示 ——物理字符样式效果
网页设计－姚屏
格式嵌套
?格式嵌套的通常原则,
?（ 1）如果所设置的格式是相容的，则取格式叠加
的效果。
?（ 2）如果所设置的格式是冲突的，则取最近样式
符的修饰效果。
演示 —— 格式嵌套
网页设计－姚屏
2.5.4设置文字的颜色
?1,<BODY>标记中的 text属性
?设定整个网页文字的颜色。
?格式 <BODY text＝颜色 >受影响的文字 </BODY>
?2,<FONT>标记中的 color属性
?设定文字颜色
?格式 <FONT color＝颜色 >受影响的文字 </FONT>
?3,<FONT>优先
?演示 ——<FONT color=“”>
网页设计－姚屏
?演示 -特殊符号的书写
?现在开始完成课后练习！！
?P36－ 37 1,4,6,7,8题
