第03章 超文本标记语言HTML.docx

《第03章 超文本标记语言HTML.docx》由会员分享，可在线阅读，更多相关《第03章 超文本标记语言HTML.docx（43页珍藏版）》请在冰豆网上搜索。

第03章超文本标记语言HTML

第3章超文本标记语言HTML

HTML语言是网页制作的一种规范，一种标准。

几乎所有的网页都是以HTML格式书写的，它通过标识符来标记网页的各个部分。

本章主要介绍了HTML语言的基本概念、基本结构、语法规则以及使用HTML制作网页的各种标记符的设置方法，包括网页文字和段落的设置、网页中表格的设计、图片和超链接的设置等。

通过本章的学习，用户可以使用HTML制作出精美的网页。

3.1HTML概述

3.1.1HTML的基本概念

1.HTML概述

HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面的基本元素，它是一种规范，一种标准，几乎所有的网页都是以HTML格式书写的。

HTML不是一种编程语言，而是一种描述性的标记语言，它通过标识符来标识网页内容的显示方式，比如图片的显示尺寸，文字的大小、颜色、字体等。

而WWW浏览器的功能就是对这些标记进行解释，显示出文字、图像、动画、媒体等网页内容。

一个HTML文件的后缀名是.html或者是.htm，由于HTML是一个纯文本格式的ASCII文件，因此，用任何文本编辑器都可以编写HTML网页文件。

HTML语言作为一种描述性的标记语言，易学易懂，能够制作出精美的网页效果，其主要功能如下：

（1）格式化文本。

如设置文本字体、字号、颜色以及文本段落、对齐方式等。

（2）创建列表。

把信息用一种易读的方式表现出来。

（3）建立表格。

表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来布局网页。

（4）插入图片。

使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。

（5）加入多媒体。

可在网页中加入音频、视频、动画等效果。

（6）添加交互式表单等。

2.标记符

标记符又称标签，它是用来控制网页内容显示效果的。

它在使用时必须用“<>”括起来。

绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。

开始标记符和相应的结束标记符定义了标记符所影响的范围。

结束标记符与开始标记符的区别在于有一个斜线。

标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护。

其格式为：

<标记符>受影响的内容

3.标记符的属性

标识符仅仅用来标识所显示的内容，但如何控制这些内容，这就需要在标记符后面加上相关的属性来实现。

属性是用来描述标识符标识对象的特征。

在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔，其格式为：

<标记符属性1=属性值1属性2=属性值2…>受影响的内容

例如：

属性示例

表示字体标记有属性color和size。

属性color表示文字的颜色，属性size表示文字的大小。

3.1.2HTML的基本结构

HTML网页文件主要由文件头和文件体两部分内容构成。

其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。

下面是HTML网页的基本结构。

HTML文件开始

文件头开始

文件头

文件头结束

文件体开始

文件体

文件体结束

HTML文件结束

1.HTML文件标记符

和标记符放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。

处于文件的最前端，表示HTML文件的开始，即浏览器从开始解释。

而则位于文件的最后一行，这表示这一整份的文档都是HTML语法的文档。

2.HEAD文件头标记符

和是HTML文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在WWW浏览器所看到的窗体中。

…通常与某些标记符一起使用，下面是一些主要的标记符：

（1）

标记符是用来标识网页文件的标题，它出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。

（2）

标识符是用来提供文档的媒体信息，目的是便于浏览器识别网页内容或者便于搜索引擎进行查找和分类。

下面介绍几种常用用法：

用来标记网页的解码方式，即说明网页使用的文字和语言。

用来标记搜索引擎在搜索你的页面时所取出的关键字。

用来标记站点的主要内容。

用来标记文档的作者名称，即告诉搜索引擎你的站点的制作的作者。

3.BODY文件体标记符

是HTML文件的主体标记符。

网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记符之间，它的格式为：

…

其主要属性含义如下：

（1）bgcolor：

标识HTML文档的背景颜色，默认设置为白色。

（2）background：

设置HTML文档的背景图片，可以使用的图片格式为GIF，JPG。

（3）text：

标识HTML文档的正文文字颜色，它定义的颜色将应用于整篇文档。

（4）超级链接颜色：

link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。

（5）topmargin和leftmargin：

设置网页主体内容距离网页顶端和左端的距离。

4.第一个网页

【实例3-1】HTML基本结构网页

Thisismyfirsthomepage!

浏览器显示效果如图3-1所示。

3.1.3HTML的语法规则

HTML应遵循以下的语法规则。

（1）HTML文件以纯文本形式存放，扩展名为“.HTM”或“.HTML”。

如果系统为UNIX系统，则扩展名必须为“.HTML”。

（2）HTML不区分大小写，例如和是相同的。

（3）多数HTML标记可以嵌套，但不可以交叉。

例如：

网站开发与网页设计

（4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。

例如：

网站开发与网页设计

和

face=”方正黑体”>

网站开发与网页设计

都是正确的，并且显示效果相同，值得注意的是在HTML标记中的一个单词不能分两行书写。

（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。

显示内容如果要换行必须用
标记，换段使用

标记，如果源文件中有多个连续空格，显示时也只显示一个。

若需要多个空格，可使用多个 转义符号。

例如：

回车换行符
的使用

段落换行符

的使用

空      格

显示效果如下：

回车换行符

的使用

段落换行符

的使用

空 格

（6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。

3.2文字与段落标记

3.2.1标题字标记

功能：

用于定义文章内章节标题的显示格式。

格式：

标题文字

属性：

n用来指定标题文字字号的大小。

n可以取1～6的整数值，数字越小，字号越大。

属性align用来设置标题在页面中的对齐方式，取值有：

left（左对齐）、center（居中）、right（右对齐）、bottom（位于底端）和top（位于顶端）。

【实例3-2】使用标题标记设置标题内容的大小与对齐方式。

第1级标题（H1）

第2级标题（H2）

第3级标题（H3）

第4级标题（H4）（居左）

第5级标题（H5）（居中）

第6级标题（H6）（居右）

浏览器显示效果如图3-2所示。

3.2.2文字格式标记

功能：

设置网页中普通文字的显示效果，如：

文字大小、字体、字型、颜色等。

格式：

被设置的文字

属性：

face属性用来设置字体。

当文字为汉字时，格式中的“字体”可以为：

宋体、幼圆、隶书、楷体、黑体、仿宋等。

当文字为英文时，字体名可以为TimesNewRoman等约50种字体。

size属性用来设置文字的大小。

数字的取值范围从1～7，size取1时最小，取7时最大。

color属性用来设置文字的颜色，颜色的取值是十六进制的RGB颜色码或者HTML给定的颜色常量名。

【实例3-3】使用标记的size属性设置文字的大小；face属性设置字体。

color属性设置文字颜色。

设置文字的格式

1号字青色

2号字绿色

3号幼圆桔黄色

4号隶书深红色

5号黑体黄绿色

6号方正舒体水蓝色

WelcomeMyHomepage!

浏览器显示效果如图3-3所示。

3.2.3字型设置标记

功能：

设置文字的风格，如：

如加粗、斜体、带下划线、上标、下标等。

格式：

这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果，常用的标记格式如下：

（1）…:

文字显示为粗体。

（2）…:

文字显示为斜体。

（3）…：

文字显示下划线。

（4）…或者…:

删除字效果。

（5）…：

使文字大小相对于前面的文字增大一级。

（6）…使文字大小相对于前面的文字增大一级。

（7）^…：

下标。

（8）_…：

上标。

（9）…：

使文字显示闪烁效果。

（10）…：

以等宽体显示西文字符。

（11）…：

输出引用方式的字体，通常是斜体。

（12）…：

强调文字，通常用斜体加黑体。

（13）…：

强调文字，通常用斜体加黑体。

【实例3-4】使用字型标记设置文字的风格。

黑体

斜体

带下划线

粗体并且斜体

带删除线

H₂o

X³

大字体

小字体

浏览器显示效果如图3-4所示。

3.2.4段落标记和强制换行标记

在HTML文档中，无法用多个回车、空格、〈Tab〉键来调整文档段落的格式。

要用HTML的标记来强制换行、分段。

1.段落标记

功能：

段落标记

定义一个新段落的开始，它不但能使后面的文字换到下一行，还可以使两段之间多一空行。

由于一段的结束意味着新一段的开始，所以使用

也可省略结束标记。

格式：

…

属性：

段落标记

的属性align用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、居右，缺省时默认为left。

2.强制换行标记

功能：

强制换行标记
通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行。

格式：

文字

通常一个段落标记

可以看作是两个强制换行标记

。

【实例3-5】段落标记与强制换行标记的使用。

段落标记

段落标记

强制换行标记

强制换行标记

浏览器显示效果如图3-5所示。

3.2.5水平线标记

功能：

水平线标记

当浏览器执行HTML文件中的标记时，会在此处换行，并加入一条水平线段。

格式：

属性：

属性align设定横线放置的位置，可选择left、right或center。

属性size设定线条粗细，以像素为单位，默认为2。

属性width用于设定线段长度，可以是绝对值（像素为单位），也可以是相对值（百分比为单位）。

属性color用于设定线条颜色，默认值为黑色，颜色可以用相应英文单词或以“#”引导的十六进制数代码来表示。

属性noshade设定线条为平面显示（没有三维效果），若缺省则有阴影或立体效果。

【实例3-6】水平线标记的使用。

浏览器显示效果如图3-6所示。

3.2.6其它标记

1.分区显示标记

功能：

分区显示标记可以使文本块或一段文字在网页上：

左对齐、居中对齐和右对齐。

格式：

文本或图像