HTML网页设计基础文档格式.docx

HTML网页设计基础文档格式.docx

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

内容<

/标签名称>

第二节HTML的结构

一、网页基本结构

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

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

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

html>

head>

title>

网页标题

/title>

/head>

<

body>

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

/body>

/html>

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

…<

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

标签中的内容只能有<

、<

frameset>

3种下属的一级元素，但其中的<

与<

元素是不能共存的。

这就是说，在<

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

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

理论上在<

标签中至少必须包括<

标签元素，但在实际上并没有这么严格的限定。

标签用于指定浏览器所要显示的标题文字，原则上不能省略，因为它还有其他用途，例如，作为网页的标签，或作为搜索引擎搜索时的索引。

用于显示网页的主要内容，其中可以包含多种不同的元素，与之相关的各种元素将在下一节中详细说明。

下面是关于书写HTML文档的几点说明。

（1）HTML文档的内容不区分字母大小写，包括属性和标签名称等。

（2）对于连续的空格、Tab键和Enter键，浏览器只会将其当成一个空格，除非置于预排版标签<

pre>

中。

（3）在一个元素的开始标签中，元素名称及各个属性名称之间应该以空格、Tab键或Enter键隔开，因此某个元素的开始标签可能会跨越数行，而浏览器只认定“<

”和“>

”记号。

（4）含有空格或特殊符号的属性值，需要用半角的双引号引起来。

（5）HTML中采用“<

!

--”和“-->

”进行注释，在该注释标签中的内容将不被处理和显示。

（6）对于HTML文档中的错误元素及其属性，浏览器将会跳过它而不予理会。

（7）各元素之间可以嵌套，但不能交错。

table>

/table>

是正确的；

是错误的。

（8）HTML文档是一个纯文本文件，可用任何文本编辑工具（如Windows中的记事本）来创建和编辑，其扩展名为.htm或.html。

二、<

标签

标签主要用于包括该页面的一些基本描述语句。

其语法格式如下：

metaname=名称content=内容>

metahttp-equiv=动态控制类型content=动态控制内容>

网页标题<

其中，各项的含义如下：

（1）<

meta>

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

（2）描述型标签<

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

其语法格式为

。

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

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

（3）动态控制型标签<

主要对网页的动态排列和动态链接进行控制。

其基本格式为

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

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

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

【例3-2】<

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

metaname="

description"

content="

HTML文档中的head头元素"

keywords"

head,meta"

author"

无名"

metahttp-equiv="

content-type"

text/html;

charset=gb2312"

refresh"

3;

url="

标签实例<

请注意元标签的使用

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

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

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

说明：

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

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

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

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

三、<

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

bodybgcolor=背景颜色background=背景图像URLtext=字体颜色link=链接颜色vlink=已访问链接颜色alink=激活链接颜色>

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

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

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

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

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

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

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

【例3-3】<

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

标签<

bodybgcolor="

silver"

text="

blue"

link="

red"

vlink="

lime"

alink="

navy"

背景颜色:

silver<

文字颜色:

blue<

链接颜色:

red<

已访问链接颜色:

lime<

激活链接颜色:

navy<

ahref="

"

新浪<

/a>

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

第三节HTML的主要标签

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

一、段落标签

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

（一）标题标签

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

hxalign=对齐方式>

标题内容<

/hx>

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

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

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

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

hx>

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

（二）分段标签

分段标签的语法格式为：

palign=对齐方式>

段落文字<

/p>

中的文字将另起一行输出，而且将在两个段落之间产生一个空行。

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

分段结束标签<

可以省略。

（三）换行标签

换行标签<

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

标签不同）。

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

文字<

（四）水平线标签

水平线标签<

hr>

用于显示一条水平线。

hrsize=线条粗细align=对齐方式width=线条宽度color=线条颜色>

其中各属性的含义如下：

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

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

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

其表示方式有两种：

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

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

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

100%"

）。

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

（五）文本块标签

文本块标签<

blockquote>

/blockquote>

用于将其包括的文本自成一段，且以缩排方式显示。

文字<

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

<

段落标签综合实例<

<

h1align=center>

HTML段落标签介绍<

/h1>

HTML文档中采用不同的标签来标识相应的HTML元素<

这些标签包括段落、字体、列表、表格、表单等几大类。

h3>

段落标签<

/h3>

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

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

二、文字格式标签

（一）字体标签

字体标签<

font>

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

fontsize=字体大小face=字体名称color=字体颜色>

/font>

（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.粗体标签

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

strong>

/strong>

b>

/b>

以上两种标签均能实现文字加粗效果，在网页中的表现形式并无不同，但<

标签是W3C推荐使用的标签，在各种浏览器中兼容性更好。

2.斜体标签

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

em>

/em>

i>

/i>

cite>

/cite>

以上3种方式均能实现同样的文字斜体效果，但一般认为<

标签是用来对文本进行强调的，<

标签通常用在对文献进行引用的情况下，而<

标签如前面所说的粗体标签<

一样，都不是W3C所推荐使用的标签。

3.下划线标签

下划线标签<

u>

用于为文本添加下划线。

/u>

4.删除线标签

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

strike>

/strike>

5.上标标签

上标标签<

sup>

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

/sup>

6.下标标签

下标标签<

sub>

/sub>

7.文字闪烁标签

文字闪烁标签<

blink>

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

/blink>

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

（三）特殊字符标签

在HTML文档中，因为“<

”、“>

”、“"

”、“&

”等字符具有特殊意义，所以如果要在浏览器中显示这些字符本身就需要使用特殊的字符串。

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

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

表3-1中的字符代码内容部分的分号“；

”通常可以去掉，如“&

lt;

”也可写为“&

lt”；

但加上分号是个好习惯，这样可以把特殊字符与其他标签或网页内容进行区分。

在<

/tilte>

标签中的内容,如果出现特殊字符，可以采用表3-1中的字符代码，也可以不采用。

例如【例3-2】、【例3-3】，均未使用特殊字符的字符编码仍然能正常显示“<

”。

表3-1HTML常见的特殊字符

显示结果

描述

字符代码

空格

&

nbsp;

小于

大于

gt;

和

amp;

引号

quot;

£

镑

pound;

§

节

sect;

©

版权符号

copy;

®

注册商标

reg;

×

乘号

times;

÷

除号

divide;

【例3-5】字体格式标签综合使用实例，效果如图3-5所示。

<

字体格式标签综合实例

fontsize="

5"

color="

face="

隶书"

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

&

b&

&

粗体<

i&

斜体<

u&

下划线<

strike&

sup&

上标字体s=πr<

2<

&

sub&

下标字体H<

O<

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

三、列表标签

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

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

（一）无序列表标签

无序列表标签<

ul>

/ul>

用于创建一个无序列表，其语法格式如下：

ultype=项目符号类型>

litype=项目符号类型>

列表项1

列表项2

……

列表项n

（1）type属性用于指定该列表中的每一个列表项的项目符号，type属性的值可以是square（■）、cirlce（○）和disk（●）等。

（2）<

li>

标签表示列表中的列表项，type属性用于指定该列表项的项目符号。

（二）有序列表标签

ol>

/ol>

标签用于创建有序列表，其语法格式如下：

oltype=序号类型start=起始序号>

litype=序号类型>

标签表示有序列表，其中的type属性用于指定列表中每一个列表项的序号类型，允许的type属性值有“1”、“A”、“a”、“I”、“i”5种。

其中“1”表示用数字做序号，“A”表示用大写英文字母做序号，“a”表示用小写英文字母做序号，“I”表示用大写罗马数字做序号，“i”表示用小写罗马数字做序号。

标签表示列表中的列表项，其中的type属性用于指定该列表项的序号类型。

（3）start属性用于设置序号的开始值，不管采用哪种列表序号，start属性的值统一用数字形式来设置起始序号。

【例3-6】列表标签综合使用实例，效果如图3-6所示。

列表标签综合实例

h2align="

center"

fontface="

华文彩云"

有序列表和无序列表<

/h2>

华文楷体"

HTML的重要内容:

--这里是有序列表-->

oltype="

1"

表格

表单

框架

应具备的基本能力:

--这里是无序列表-->

ultype="

disk"

li>

熟悉HTML基本标签

熟练编写HTML代码

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

四、图像标签

使用图像标签<

img>

可将指定的图像添加到网页中。

图像标签的语法格式如下：

imgsrc=图像文件URLborder=图像边框粗细align=对齐方式alt=图像说明文字height=图像高度width=图像宽度hspace=水平空白vspace=垂直空白>

（1）src属性的值为图像文件的URL，可以是本地文件，也可以是互联网上的文件。

（2）border属性用于设置图像边框的宽度，单位为像素。

（3）align属性用于设置图像的对齐方式，可选值为left、center、right，默认为left。

（4）alt属性用于设置图像的说明性文字（也可以使用title属性来实现同样功能）。

（5）height、width分别用于设置图像的高度和宽度，可以用绝对数值表示，单位为像素。

也可以使用百分比来设置，以浏览器窗口作为参照对象。

通常使用前者，因为使用百分比显示图像会造成图像失真。

（6）hspace、vspce分别用于设置图像与浏览器内容窗口的左边距和上边距，采用绝对数值表示，单位为像素。

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

图像标签的综合实例<

imgsrc="

logo.jpg"

alt="

欢迎您"

width="

139"

height="

52"

hspace="

20"

vspace="

40"

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

五、超链接标签

HTML意为超文本标签语言，其与文本最大的区别在于链接。

由此可见超链接标签<

a>

是HTML文档中一个十分重要的标签，使用它可链接到文档内的某个指定段落或图像，也可以链接到本地或远程计算机上的另一个文档或Web页。

超链接标签的语法格式如下：

ahref=URL>

用作链接的文字或图像<

用做链接的文字在浏览器中通常以一种特殊的颜色并带下划线的方式显示，当鼠标指针指向超链接对象时会