HTML网页设计基础.docx

HTML网页设计基础.docx

《HTML网页设计基础.docx》由会员分享，可在线阅读，更多相关《HTML网页设计基础.docx（34页珍藏版）》请在冰豆网上搜索。

HTML网页设计基础

HTML网页设计基础

知识目标

●了解HTML的基本结构；

●掌握HTML的常用标签。

技能目标

●熟练使用HTML中的各种标签；

●能够独立编写HTML网页。

HTML（hypertextmark-uplanguage）即超文本标记语言，是构成网页最基本的要素，也是Web应用程序开发的基础。

近年来，虽然随着计算机信息技术的进步，产生了DHTML和XML等语言，此外还涌现了许多功能强大的、所见即所得的网页设计工具，如FrontPage和Dreamweaver等，然而它们仍然构建在HTML基础之上。

事实上，目前HTML的功能是不可替代的，网页设计和Web应用程序的开发者，应该很好地掌握HTML。

第一节HTML简介

HTML是一种结构化的网页内容标签语言，使用各种不同的标签符号来分别标识和设定不同的网页元素。

每一个网页元素通常由开始标签、结束标签以及夹在这两个标签中的内容所组成。

每个HTML元素的开始标签和结束标签的名称相同，并且都用一对尖括号“<>”括起来，只是在结束标签的前面多了一个“/”斜杠符号。

例如：

表示将网页中的文字居中显示。

其中，

当浏览器在显示该网页的过程中，如果遇到center元素，就将该元素的内容居中显示在浏览器的窗口中。

并不是所有的网页标签都是如上例中那样成对出现的。

有开始标签且一定有结束标签的标签叫双边标签，而有开始标签不需要结束标签的标签为单边标签。

例如，
就是一个单边标签。

另外，还有一些网页元素的结束标签可以自由取舍，如段落标签

、选项标签等。

许多元素的开始标签中还允许加入若干属性，用于进一步对该元素的特征进行说明或限定。

通常用“属性名称=属性值”的方式来设定元素的属性，属性值可以用双引号引起来，也可以省略。

例如，“”和“”效果相同，但如果属性值内有空格或特殊字符，则其两端双引号就不可以省略。

此外，在一个元素的开始标签中各个属性设置的先后顺序是任意的。

综上所述，一个HTML元素可表示为：

<标签名称属性名称1=属性值1属性名称2=属性值2…>内容

第二节HTML的结构

一、网页基本结构

任意打开一个网页，查看它的源代码，就可以看到这个网页的HTML代码。

无论该网页如何复杂，都是由一个最基本的HTML结构组成的，以下是的HTML的基本结构。

【例2-1】HTML文档的基本结构，效果如图3-1所示。

这是显示在浏览器中的主要内容！

图3-1【例3-1】代码运行效果

…标签中的内容是HTML文档的主体元素，用于指出HTML文档的开始与结束。

…标签中的内容只能有、、3种下属的一级元素，但其中的与元素是不能共存的。

这就是说，在…中最多只能有两个下属一级元素，其他的元素都包含在这两个元素之中。

标签通常用于提供一些识别或补充的信息给浏览器，而浏览器不会把这些信息显示在网页中。

理论上在…标签中至少必须包括

其中，各项的含义如下：

（1）标签又称为元标签，主要功能是对网页进行定义和说明。

（2）描述型标签主要负责对网页的重要内容进行定义说明，从而方便搜索引擎的检索，通常不会在网页中显示。

其语法格式为

。

其中，name属性用于对网页中的重要内容进行说明，其属性值主要有description（对当前网页的描述）、keywords（网页关键词）、author（网页作者）等。

content属性用于设置与name属性值对应的内容。

（3）动态控制型标签主要对网页的动态排列和动态链接进行控制。

其基本格式为

其中，http-equiv属性用于设置动态控制的类型，其属性值主要有两个：

content-type（动态排列）、refresh（动态链接）。

content属性用于对http-equiv属性值进行详细描述。

【例3-2】标签的基本结构实例，效果如图3-2所示。

请注意元标签的使用

图3-2【例3-2】代码运行效果

表示当浏览器窗口大小改变时，文字的排版也会随着窗口大小的改变而改变，以便让文字都显示在窗口中。

其中，“text/html”表示当前文件为MIME类型中的text主类型下的html子类型，“charset＝gb2312”表示当前文档的字符编码为国标2312，即支持简体中文。

说明：

MIME即多功能Internet邮件扩充服务，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。

服务器将MIME类型放入传送的数据中来告诉浏览器使用哪种插件读取相关文件，如设置为application/msword，则浏览器将调用Word来打开相关数据文件。

表示网页将动态刷新，其刷新时间设置为3秒，刷新后的链接URL为。

即3秒后，该网页将自动跳转到新浪的首页。

三、标签

标签用于设置网页的基本样式。

其语法格式如下：

其中，各属性的含义如下：

（1）bgcolor属性设置网页背景颜色。

（2）background属性设置网页的背景图像。

（3）text属性设置网页文字颜色。

（4）link属性设置未访问的超链接文字颜色。

（5）vlink属性设置已访问过的超链接文字颜色。

（6）alink属性设置超链接被激活时的颜色，即鼠标单击链接的瞬间，链接文字的颜色。

【例3-3】标签的使用实例，效果如图3-3所示。

背景颜色:

silver

文字颜色:

blue

链接颜色:

red

已访问链接颜色:

lime

激活链接颜色:

navy

新浪

图3-3【例3-3】代码运行效果

第三节HTML的主要标签

下面介绍HTML中的主要标签。

一、段落标签

段落标签用于设置段落文字及格式，包括标题标签、分段标签、换行标签、水平线标签和文本块标签。

（一）标题标签

标题标签的语法格式如下：

标题内容

hx中的x表示标题级别，共有h1、h2、h3、h4、h5、h6等6种，例如，h1表示一级标题。

x的数值越小，字体越大。

align属性用于设置标题对齐方式，可供选择的属性值有3个：

left（左对齐）、center（居中对齐）、right（右对齐），默认为left。

标签所表示的标题在网页中均独占一行。

（二）分段标签

分段标签的语法格式为：

段落文字

…

align属性用于设置段落的对齐方式，可供选择的属性值有3个：

left（左对齐）、center（居中对齐）、right（右对齐），默认为left。

分段结束标签

（三）换行标签

换行标签
用于强制中断当前文字行而从下一行开始显示，且在断行之间不产生空行（这与

标签不同）。

标签通常放在这一行的末尾，其语法格式如下：

文字

（四）水平线标签

水平线标签

其语法格式如下：

其中各属性的含义如下：

（1）size属性用于设置水平线的粗细，以像素为单位，默认值为2。

（2）align属性用于设置水平线的对齐方式，属性值有left、center、right，默认为left。

（3）width属性用于设置水平线的长度。

其表示方式有两种：

第一种为绝对数值，单位为像素，即水平线的长度是一个固定值。

第二种为百分比，表示水平线相对于浏览器窗口的宽度，当窗口的宽度改变时，此水平线的宽度会自动改变。

若没有设置宽度，则该水平线将横穿整个浏览器窗口（即默认为width="100%"）。

（4）color属性用于设置水平线的颜色，默认为黑色。

（五）文本块标签

文本块标签

…

其语法格式如下：

文字

【例3-4】段落标签综合使用实例，效果如图3-4所示。

HTML段落标签介绍

段落标签

段落标签主要包括标题标签、分段标签、换行标签、水平线标签和文本块标签等几类。

图3-4【例3-4】代码运行效果

二、文字格式标签

（一）字体标签

字体标签可用于设置文本的字体、字型、字号和字符颜色等，是HTML文档中常用的标签。

其语法格式如下：

文字

其中各属性的含义如下：

（1）size属性用于设置字号，即文字的大小。

取值范围为1~7，共7级字体。

字号越大，文字越大。

（2）face属性用于设置字体名称，双击“控制面板”中的“字体”选项，可以看到可以引用字体的名称，这些字体的名称都可以给face属性赋值。

（3）color属性用于设置文字颜色。

color属性的颜色值可以用英文的颜色名称来表示，如red、green、blue等；也可以使用“#RRGGBB”的方式来表示，其中R代表红色、G代表绿色、B代表蓝色，RR、GG、BB的取值范围为十六进制数的00~FF（相当于十进制的0~255）。

（二）文字效果标签

1.粗体标签

粗体标签有两种，其语法格式分别如下：

文字

文字

以上两种标签均能实现文字加粗效果，在网页中的表现形式并无不同，但标签是W3C推荐使用的标签，在各种浏览器中兼容性更好。

2.斜体标签

斜体标签的语法格式有如下3种：

文字

文字

文字

以上3种方式均能实现同样的文字斜体效果，但一般认为标签是用来对文本进行强调的，标签通常用在对文献进行引用的情况下，而标签如前面所说的粗体标签一样，都不是W3C所推荐使用的标签。

3.下划线标签

下划线标签用于为文本添加下划线。

其语法格式如下：

文字

4.删除线标签

删除线标签用于为文本添加删除线，其语法格式如下：

文字

5.上标标签

上标标签^{用于将文本设置成上标的形式，其语法格式如下：}

^文字

6.下标标签

下标标签_{用于将文本设置成上标的形式，其语法格式如下：}

_文字

7.文字闪烁标签

文字闪烁标签用于为文本设置闪烁效果，其语法格式如下：

文字

说明：

IE中不支持此文字闪烁效果，而Netscape支持。

（三）特殊字符标签

在HTML文档中，因为“<”、“>”、“"”、“&”等字符具有特殊意义，所以如果要在浏览器中显示这些字符本身就需要使用特殊的字符串。

另外，由于HTML文档中多个空格、Tab键和Enter键均只能解释为一个空格，因此要表示多个空格，也要用到特殊的字符串。

HTML常见的特殊字符及其代码见表3-1。

说明：

表3-1中的字符代码内容部分的分号“；”通常可以去掉，如“<”也可写为“<”；但加上分号是个好习惯，这样可以把特殊字符与其他标签或网页内容进行区分。

在

字体格式标签有很多,例如:

<b>    粗体

<i>    斜体

<u>    下划线

<strike>    斜体

<sup>    上标字体s=πr²

<sub>    下标字体H₂O

图3-5【例3-5】代码运行效果

三、列表标签

HTML文档中的列表可分为无序列表和有序列表。

带有项目符号的列表为无序列表，带有编号的列表为有序列表。

（一）无序列表标签

无序列表标签

…