HTML语言的结构Word格式文档下载.docx

HTML语言的结构Word格式文档下载.docx

《HTML语言的结构Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《HTML语言的结构Word格式文档下载.docx（14页珍藏版）》请在冰豆网上搜索。

　　　html文件开始

文件头开始

文件头

　文件头结束

文件体开始

文件体

文件体结束

　　html文件结束

一般来讲，html的元素有下列三种表示方法：

1）<

元素名>

文件或超文本<

／元素名>

2）<

元素名　属性名＝“属性值…>

文本成超文本<

　3）<

第三种写法仅用于一些特殊的元素,比如水平线<

hr>

，它没有结尾链接签。

　　html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。

在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。

这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。

与此相反，出

现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。

第二章：

构成网页的基本元素

2.1网页主题（TITLE）

Title元素是文件头中出现的元素，title元素的格式为：

<

title>

文件题目<

/title>

title标明该html文件的题目，是对文件内容的概括。

一

个好的题目应该能使读者从中判断出该文件的大概内容。

文件的题目一般不会显示在文本窗口中，而以窗口的名

称显示出来。

title的长度没有限制，但过长的题目会导致折行，

一般情况下它的长度不应超过64个字符。

由于title的作

用是标明文件内容，所以太短的title也是不可取的，比

如：

"

introduction"

这个题目，读者不可能根据它判断出

本文介绍的是什么。

一个好的例子是：

titl>

　AnIntroductiontoHTML4.0<

在头元素中还可以出现其他元素，如<

isindex>

，

meta>

等等。

这些元素都不是必须的，而且也不常用。

这些元素的用法和它们的含义可以参考有关文献。

下面是一个最简单的html文件

简单一页<

Thisismyfirsthtmlfile.

§

2.2段落格式标题（hn）

标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。

标题号越小，字体越大。

一般情况下，浏览器对标题作如下解释：

h1黑体，特大字体，居中，上下各有两行空行。

h2黑体，大字体，上下各有一到两行空行

h3黑体（斜体），大字体，左端微缩进，上下空行

h4黑体，普通字体，比h3更多缩进，上边一空行

h5黑体（斜体），与h4相同缩进，上边一空行

h6黑体，与正文有相同缩进，上边一空行

hn可以有对齐属性，align＝#，#表示

left标题居左

center标题居中

right标题居右

例:

h2align=center>

Chapter2<

下面给出hn的例子及其输出：

h1>

Todayisfine!

／h1>

Todayisfine!

／h2>

h3>

／h3>

h4>

／h4>

h5>

／h5>

h6>

／h6>

2.3分段<

P>

html的浏览器是基于窗口的，用户可以随时改变显示

区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。

html的分段完全依赖于分段元素<

ThisisalevelTwoHeading<

paragraphyone<

paragraphtwo<

…………………………

也可以有多种属性，比较常用的属性是：

aligh＝#

#可以是left,center,right,其含义同上文。

例　<

palign=center>

Thisisacentered

paragraph<

／p>

2.4项目列表（清单）List

清单用于列举事实，常用的清单有2种格式，即

无序清单（unorderedList），

有序清单（orderedlist）

2.4.1无序清单（ul）

无序清单用（ul）开始，每一个清单条目用<

li>

...<

/Li>

引导，最后是<

/ul>

输出时每一清单条目缩进，并且以黑点标示。

例：

源文件

ul>

Today<

/li>

Tommorow<

输出为

●Today

●Tommorow

2.4.2有序清单<

ol>

有序清单与无序清单相比，只是在输出时清单条目用数

字标示，下面是一个例子及其输出：

/ol>

输出为：

1.Today

2.Tommorow

2.4.4改变条目标记

1.改变无序清单条目标记

无序清单输出时，每一条目前都有一个黑色圆点，

用户可以用type序性修改条目的标记。

type可以是

disc实心圆点　cirde圆圈square实心方点

litype=disc>

ONE<

litype=circle>

TWO<

litype=square>

THREE<

●ONE

○TWO

■THREE

2.改变有序清单条目标记

有序清单条目标记的缺省值是阿拉伯数字，可以用

type属性修改。

方法为<

oltype=#>

#=A,大写字母

a,小写字母

I,大写罗马数字

i,小写罗马数字

l,缺省,阿拉伯数字

oltype="

A"

li>

ONE-ONE<

ONE-TWO<

A.ONE-ONE

B.ONE-TWO

a"

ONE－TWO<

a.ONE-ONE

b.ONE-TWO

I"

／ol>

Ⅰ.ONE-ONE

Ⅱ.ONE-TWO

i"

i.ONE-ONE

ii.ONE-TWO

1"

1.ONE-ONE

2.ONE-TWO

3.改变有序清单条目的起始数字

有序清单的条目数字在缺省情况下是从1开始的，用

start属性可修改这一值。

olstart=#>

#是条目

起始号

olstart=5>

litype=A>

olstart=10>

TWO-ONE<

litype=i>

TWO-TWO<

E.ONE-ONE

6.ONE-TWO

10.TWO-ONE

xi.TWO-TWO

2.7居中

很多元素都有对齐方式属性，如hn、p等。

也可以直接

用居中链接签<

center>

／center>

h3align=center>

Wonderful!

!

/h3>

Thismustbemydream.

/center>

Wonderful!

第三章：

超文本链接指针

　　超链接是html最吸引人们优点之一。

使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。

人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。

因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节（比如一些枯燥的数据），而且有助于更好地理解作者的意图。

　　一个超文本链接指针由两部分组成。

一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；

另一部分是指向目标

的链接指针。

　　§

3.1统一资源定位器URL

统一资源定位器（uuiformResourceLocator）是文件名的扩展。

3.2指向一个目标<

a>

在html文件中用链接指针指向一个目标。

其基本格式

为：

ahref="

url"

字符串<

/a>

href属性中的统一资源定位器（url）是被指向的目标，随

后的“字符串”在html文件中充当指针的角色，它一般

显示为蓝色。

当读者用鼠标点这个字符串时，浏览器就会

将url处的资源显示在屏幕上。

例如：

中央电视台<

用户用鼠标点取"

中央电视台"

，即

可看到关于中央电视台的介绍。

在这个例子

中，充当指针的是"

，后面我们将

看到用图象做为指针的例子。

3.3标记一个目标（锚点）

上节提到的链接指针可以使读者在整个Interner网上方

便地链接。

但如果你编写了一个很长的html文件，从头

到尾地读很浪费时间，能不能在同一文件的不同部分之

间也建立起链接，使用户方便地在上下方之间跳转呢？

答案是肯定的。

前面曾提到过一个超文本链接指针包括

两个部分，一个指向目标的链接指针，另一个是被指向

的目标。

对于一个完整的文件，我们可以用它的url来

唯一地标识它，但对于同一文件的不同部分，我们怎

样来标识呢？

下面的内容将介绍链接指针元素的另外的

一个用途，标识目标。

标识一个目标的方法为：

aname="

name"

text<

／a>

name属性将放置该标记的地方标记为“name”，name是

一个全文唯一的标记串，text部分可有可无。

这样，我

们就把放置标记的地方做了一个叫做“name”的标记。

做好标记后，可以用下列方法来指向它，

url#name"

text<

url是放置标记的html文件的urlname是标记名，对于同

一个文件，可以写为　

#name"

这时就可以点取text跳转到标记名为name的部分了。

3.4目标窗口

如果希望被指向的目标在一个新的窗口中显示，可以使

用target属性来修饰链接指针元素。

target="

_blank"

将url代表的资源显示在一个新的窗口中。

3.5图象链接指针

图象也可以做为链接指针。

格式为：

imgsrc="

可以看出，上例中用<

取代了链接指针中

text的位置。

是图象元素，它表明显示url代表的

图象文件，参见图象一章。

下面是一个简单的图象链接指针。

Chinahomepage<

flag.gif"

第四章：

版面风格控制

4.1　字体大小

　　html有七种字号，1号最小，7号最大。

缺省字号为3

，可以用<

basefontsize=字号>

设置缺省字号。

　　设置文本的字号有两种办法，一种是设置绝对字号

，<

fontsize=字号>

；

另一种是设置文本的相对字号；

fontsize=±

n>

用第二种方法时“＋”号表示字体变

大，“－”号表示字体变小。

fontsize=7>

/font>

fontsize=6>

fontsize=5>

fontsize=4>

4.1.2字体风格

字体风格分为物理风格和逻辑风格。

物理风格直接指定字

体，物理风格的字体有<

b>

黑体，<

i>

斜体，<

u>

下划线，

逻辑风格指定文本的作用。

em>

强调<

srrony>

特别强调<

code>

源代码

samp>

例子<

kbd>

键盘输入<

var>

变量

dfn>

定义<

cite>

引用<

small>

较小

big>

较大<

sup>

上标<

下标

4.1.3字体颜色

字体的颜色用<

fontcolor=#>

指定

#可以是6位16进数，分别指定红、绿、兰的值，也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,

fudrsia,white,green,purple,sliver,yellow,aqua之一。

4.2水平线　（hr）

横线，一般用于分隔同一文体的不同部分。

在窗口

中划一条横线非常简单，只要写一个<

即可。

横线的

宽度用<

hrsize=n>

指定，width=#>

指n是线宽，单位是

象素。

例：

hrsize=10>

hr定横线长度，可以指

定绝对线长，也可以指定横线长度占窗口宽度的百分比

例<

hrwidth=50>

、<

hrwidth=50%>

横线的位置用<

hralign=#>

指定。

#是left成right之一，left表示左端与左边界对齐，

right是右端与右边界对齐，缺省，横线出现在窗口正中。

4.3　使用图象

使用图象使你的页面更加漂亮，但是使用图象会导致

网络通讯量急剧增大。

使访问时间延长。

所以在主页

不宜采用很大的图象。

如果确实需要一些大

图象，最好在主页中用一个缩小的图象指向原图，并标明

该图的大小。

这样读者可以快速地访问您的主页，自己选

择看还是不看那些图象。

图象的基本格式为：

image-url"

或<

alt="

text"

image-url是图象文件的url。

目前，大部分

浏览器支持.gif和.jpg文件。

alt属性告诉不支持图象的浏览器用text代替该图。

4.3.2图象与文本的对齐方式

图象在窗口中会占据一块空间，在图象的左右可能会有空

白，不加说明时，浏览器将随后的文本显示在这些空白中

，显示的位置由align属性指定。

用align=left,righr时，图象是一个浮动图象。

比如

align=left，图象必须挨着左边框，它把原来占据该块

空白的文本“挤走”，或挤到它右边，或挤到它上下。

4.4分行<

BR>

Br>

表示在此处分行。

4.5背影和文本颜色

窗口背景可以用下列方法指定

bodybackground="

bodybgcolor=#text=#link=#alink=#vlink=#>

前者指定填充背景的图象，如果图象的大小小于窗口大

小，则把背景图象重复，直到填满窗口区域。

后者指定的是16进制的红、绿、兰分量。

bgcolor背景颜色

Text文本颜色

Link链接指针颜色

alinik活动的链接指针颜色

vlinik已访问过的链接指针颜色

例<

bodybgcolor=FFoooo>

大红背景色.

注意，此时体元素必须写完整，即用<

结束

4.6　转义字将与特殊字符

html中<

>

，&

有特殊含义，（前两个字符用于链

接签，&

用于转义），不能直接使用。

使用这三个字符时

，应使用它们的转义序列。

&

的转义序列为&

amps或&

#38；

Lt;

&

#60；

gt;

#62；

前者为字符转义序列，后者为数字转义序列。

例如　&

font&

Lgt;

显示为<

font>

若直接写为<

则被认为是一个链接签。

需要说明的是：

a.转义序列各字符间不能有空格；

b.转义序列必须以“；

”结束；

c.单独的&

不被认为是转义开始。

如“&

Lt；

”被解释为“&

”而不是<

“&

#62；

”被解释为“&

#60；

”而不是>

另一个需要转义的字符是引号，它的转义序列为"

quot;

或"

#34;

，例如

image.gif"

alt="

A&

quol;

real&

example"

第五章：

表格（Table）

5.1表格的基本形式

　　一个表由<

table>

开始，<

/table>

结束，表的内容由

tr>

<

th>

和<

td>

定义。

说明表的一个行，表有多少

行就有多少个<

说明表的列数和相应栏目的名

称，有多少个栏就有多少个<

则填充由<

和

组成的表格。

是否用表格线分开为部分内容用

border属性说明。

　　5.2有通栏的表

1、有横向通栏的表用<

thcolspan=#>

属性说明

colspan表示横向栏距，#代表通栏占据的网格数，它是

一个小于表的横向网格数的整数。

2、有纵向通栏的表用rowspan=#属性说明。

　　　rowspan表示纵向栏距，#表示通栏占据的网格数

，应小于纵向网络数。

需要说明的是有纵向通栏的表，

每一行必须用<

/tr>

明确给出一横向栏目结束,这是和表

的基本形式不同的。

　　5.3表的大小，边框宽度，表格间距

　　1、表的大小用width=#和height=#属性说明。

前者

为表宽，后者为表高，#是以象素为单位的整数。

　　2、边框宽度由border=#说明，#为宽度值，单位是

　　3、单元格间距即划分表格的线的粗细用

　　cellspacing=#表示，#的单位是象素，将

表格间距定义为10个象素，它看起来象用很粗的线划分的

表格。

　　5.4单元格边距

　　1、文本与表框的距离用cellpadding=#说明。

2、表格的宽度大于其中的文本宽度时，文本在其中的输

出位置与用align=#说明。

　　#是left，center和right三者之一，分别表示左对

齐，居中和右对齐，align属性可修饰<

链接签。

3、表格的高度大于其中文本的高度时，可以用valign=#

说明文本在其中的位置。

#是top,middle,bottom,

baseline之一。

分别表示上对齐，文本中线与表格中

线对齐，下对齐，文本基线与表格中线对齐。

　　5.6表格颜色

表格的颜色用bgcolor=#指定。

　　#是16进制的6位数，格式为rrggbb，分别表示红、

绿、兰三色的分量。

或者是16种已定义好的颜色名称，参

见文本颜色。

tableborder>

thbgcolor=000000>

fontcolor=ffffff>

Food<

/th>

thbgcolor=whit>

Drink<

tdbgclor=ffaaaa>

A<

/td>

B<

第六章：

框架Frame

　　6.1分框的基本格式

　　分框将流览器的窗口分成多个区域，每个区域可以

单独显示一个html文件，各个区域也可相关连地显示某

一个内容，比如可以将索引放在一个区域，文件内容显

示在另一个区域。

　　分框的基本结构如下

　　　　<

noframes>

/noframes>

frameset>

framesrc="

/frameset>

nframes>

中的内容显示在不支持分框的浏

览器窗口中,因而这里指向一个