请输入您要查询的百科知识:

 

词条 HTML
释义

§ 简介

HTML(HyperText Markup Language),超文本标记语言,是一种专门用于创建Web超文本文档的编程语言,它能告诉Web浏览程序如何显示Web文档(即网页)的信息,如何链接各种信息。使用HTML语言可以在其生成的文档中含有其它文档,或者含有图像、声音、视频等,从而形成超文本。

超文本文档本身并不真正含有其他的文档,它仅仅含有指向这些文档的指针,这些指针就是超链接。HTML是用来制作网页的语言,网页中的每个元素都需要用HTML规定的专门标记来定义。在7.3节将介绍使用HTML进行网页设计。[1]

要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读,需要一种规范化的发布语言。在万维网(WWW)上,文档的发布语言是HTML。

标记语言是一种基于源代码解释的访问方式,它的源文件由一个纯文本文件组成,代码中由许多元素组成,而前台浏览器通过解释这些元素显示各种样式的文档。换句话说,浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。

HTML和网络是紧密相连的,HTML语言的发展和浏览器的支持是密不可分的,在20世纪90年代网络刚刚兴起时,多种浏览器同时流行于世界各地,它们支持HTML语言的标准也各不相同,这样限制了HTML标记语言本身的发展,逐渐,W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML标准,并且力推浏览器解释语言和显示方法的统一。

到今天,IE浏览器随着WINDOWS操作信息系统的绝对垄断地位占据着主流市场,这也在另一方面为HTML标准的统一起到了关键作用。

§ 新突破

1997年 HTML 3.2版已经极大丰富了HTML功能。

1997年12月推出HTML 4.0版将HTML语言推向一个新高度,该版本倡导了两个理念。

(1)将文档结构和显示样式分离;

(2)更广泛的文档兼容性。

由于同期CSS层叠样式表的配套推出,更使得HTML和CSS对于网页制作的能力达到前所未有的高度。

1999年12月,W3C网络标准化组织推出改进版的HTML4.01,该语言相当成熟可靠,一直沿用至今。

HTML4.01相比先前的版本在国际化设置,提高兼容性,样式表支持,以及脚本,打印方面都有所提高。

编辑和查看结果HTML

--一个最简单的HTML源文件-----------------------------------------------------------------

<html>

<head>

<title>HTML示例</title>

</head>

<body>

<p>第一段<b><i>HTML</i></b>代码。

</body>

</html>

-------------------------------------------------------------------

IE浏览器翻译的结果就是这样的一个页面,可以看到所有标记语言都没有显示出来。

§ 元素、属性和数据类型

一个标准的HTML文件由HTML元素,元素的属性和相关属性值3个基本部分组成。

HTML元素

HTML元素的英文名称是element,它通常由首尾两个标记(tag)组成,它一个标记都由一组尖括号“<”的“>”包含。一组首尾标记组成了一个元素。

以下划线元素为例, 〈u〉HTML〈/u〉

HTML元素的出现形式有3类:

首尾标记必须成对出现的元素,例如:<h1>,<button>等元素

起始标记必须出现,而结尾标记是可选的,例如<p>,<option>等元素

只有起始标记,而禁止结尾标记的元素,例如<input>,<img>等元素

<html>

<head>

<title>HTML示例</title>

</head>

<body>

<p>第一段<b>HTML</b>代码。

<p><img src="../horse.gif" width="70" height="70" alt="马">

</body>

</html>

缩进和大小写规范

网络标准化组织从HTML4开始建议所有HTML元素都用小写,虽然大小写无关功能。

HTML源代码都遵循编程的统一规范--缩进格式。令源文件的代码结构更为清晰。

HTML属性

每一个元素都有一个或者几个属性(attribute,property)定义该元素的显示样式,行为或者其它内容,同一个元素的各个属性之间的顺序没有前后之分,属性的类型主要有等式型和布尔型两种。

属性的设定方法

属性全部都设置在HTML元素起始标记的尖括号内,一般是以“<起始标记 属性1="属性值1" 属性2="属性值2".......>”的格式出现。属性之间没有先后顺序,属性也没有大小写之分。每一对属性/属性值之间用空格分隔。

布尔属性只有属性名称而没有属性值,指定了这个属性就代表它为“真(True)”,反之则代表“假(False)”默认情况下,每一个布尔属性都是假,即不用指定,只有在需要的时候才添加该项属性。

<input type="button" value="查看效果" disabled>

<option value="30" selected>

注意,在字符串或者文本类型的属性值是区分大小写的。

<input type="button" value="click button">

<input type="button" value="CLICK BUTTON">

显示出来的结果是:

HTML源代码都遵循编程的统一规范--缩进格式。令源文件的代码结构更为清晰。

引号的使用规范

按照HTML规范和标准,等号以后的属性值应该全部用英文半角双引号所含。但要注意在某些嵌套的情况下,会出错。

注意:如果引号需要进行嵌套,外层用单引号,里层用双引号。

<html>

<head>

<title>HTML示例</title>

</head>

<body>

<input type="button" value="点击查看效果" onclick='javascript:alert("Hello World!");'>

</body>

</html>

HTML数据类型

HTML常用的数据类型有长度,颜色,URI链接地址和字符串等形式。

长度值

长度值的定义方法有许多种,既有绝对数值定义,又有相对数值定义。

像素值:

像素是计算机屏幕上所能显示的最小单位。不同计算机屏幕由于分辨率设置的不同,所以显示出像素的大小也不同。例如,同样一个17英寸的液晶屏幕,设置为800*600时,水平有800个像素点,设置为1024*768的时候,水平有1024个像素点,显然,在屏幕总宽度不变的情况下,像素的大小是不一样的。

像素值也是长度定义中使用最为普遍的单位,因为一般浏览器输出页面总是在屏幕上,如果设计者不考虑打印输出的话,利用像素值就能够在屏幕上进行了精确的定位。

像素值的英文名称为pixel,px就成了单位名称,例如10px就是像素长度,468px就是468像素长度。

用像素值定义长度的时候,一定要考虑屏幕分辨率的兼容性,例如,一个设计者设置了一个张图片的显示宽度是800像素,在800*600像素分辨率的屏幕上它能够占据整个宽度,而在1600*1200像素宽度的屏幕上,它只能占有屏幕宽度的。

像素值的单位也可以省略不写,例如76就代表76px,即76像素长度。如果浏览器遇到了在数字后面有不能识别的字符,就会忽略这些字符直接取前面的数字作为长度值。例如,100abcd会被浏览器识别为100px。

相对长度值:

百分比形式就是最典型的相对长度值。

<img src="../horse.gif" width="100%" height="100%" alt="horse">

如果对一张图片定义了百分比值,则它的参照对象是整个浏览器窗口的宽度和高度。当浏览器窗口大小再变的时候,图片的尺寸也会跟随窗口大小相应变化。

比值长度定义:

HTML元素属性中还有一种长度定义是比值定义,它的格式为数字加上星号“*”,这些属性总是若干个一起出现,此时,星号前面的数字代表这些数值之间的比值。星号“*”前面如果是1可以省略。

颜色值

颜色定义也是HTML属性中比较常用的数据类型定义。页面文档不可能是一成不变的黑白显示,浏览器默认将没有设置过颜色值的字体,直线和边框都定义为黑色,而背景全部定义为白色。

计算机屏幕上的任意一种颜色都是由红,蓝,绿按照一定比例混合而成的,三色规律的另一种称呼也叫做RGB颜色。颜色值的命名就使用3个数值的连写格式进行了定义,格式为颜色=“#RRGGBB”

按照标准化定义,红,绿,蓝每一种颜色数值都由十六进制00至十六进制FF表示,因此,单一颜色深度为256等级。这样一来,颜色的总数量就是256*256*256=16,777,216种。

比如,我们利用编辑器来调出一种色调。

按照十六进制,“#FF8000”表示红色打满(相当于FF),绿色打一半(相当于80),蓝色不出现(相当于0)。则此时应该出现的是橙色。

§ HTML 5

HTML 5 是一个新的网路标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要外挂程式的丰富性网路应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 草桉的前身名为 Web Applications 1.0,是在2004年由 WHATWG 提出,再于2007年获 W3C 接纳,并成立了新的 HTML 工作团队。在2008年1月22日,第一份正式草桉发布。WHATWG 表示该规范是目前仍在进行的工作,仍须多年的努力。目前 Firefox、Google Chrome、Opera 及 Safari(版本 4 以上)已支援 HTML5 技术。

HTML 5的标准草桉目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google代表Ian Hickson预期,可能得等到2012年才会推出建议候选版(W3C Candidate Recommendation)。

与 HTML 4 的不同之处

新的解析顺序

新的元素:section, video, progress, nav, meter, time, aside, canvas

input 元素的新属性:日期和时间,email, url

新的通用属性:ping, charset, async

全域属性:id, tabindex, repeat

移除元素:center, font, u, strike, s, frameset, frame, applet [2]

§ 文件结构

HTML文件结构

HTML文件可以使用任何文本编辑软件创建和编辑,其扩展名为htm、html或asp。所有HTML文件都具有相同的整体结构,由头部(head)和主体(body)两部分组成。HTML定义了三个标记描述这一结构,如右图所示。

其中<html>、</html>标记表示HTML文件的开始和结束;<head>、</head>标记之间的内容是HTML文件的头部,如网页的主题信息、所使用的脚本;<body>、</ body >标记之间的内容是HTML文件的主体,用于描述网页上显示的主体信息,如文本、链接、图像、表格及它们显示的方式等。[3]

§ HTML标记

HTML的主要语法是元素和标记。标记用来规定元素的属性及它在文档中的位置。

标记用<>括起来,不区分大小写。大多数标记是成对出现的,称为双标记,由“始标记”和“尾标记”两部分构成,其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠“/”即成为尾标记。这类标记的语法为:<标记>内容</标记>,其中“内容”部分就是要被这对标记施加作用的部分。例如<title>这是一个例子</title>将句子“这是一个例子”作为该网页的标题。

也有一些标记可以单独使用,不需结束标记,只需单独使用就能完整地表达意思,称为单标记。最常用的单标记是<br>,表示换行。

许多单标记和双标记的始标记内可以包含一些属性,其语法为:

<标记名 属性1 属性2 属性3 … >

各属性间用空格隔开,无先后次序,属性也可省略取默认值。例如,单标记<hr>表示在文档当前位置画一条水平线(horizontal line),一般是从窗口中当前行的最左端一直画到最右端,也可带一些属性,如:

<hr size=3 align=left width="75%">

其中size属性定义线的粗细,属性值取整数,缺省为1;align属性表示对齐方式,缺省为left,还可取center、right;width属性定义线的长度,可取相对值,由一对" "号括起来的百分数,表示相对于充满整个窗口的百分比,也可取绝对值,用整数表示占屏幕像素点的个数,如width=300,缺省值为"100%"。

常用标记

(1)网页标题标记

标记<title>…</title>设置网页标题,是HTML文件头部最重要的内容。

(2)文档标题标记

HTML提供了6级文档标题,通过在标题内容两边加<h1>与</h1>,…,<h6>与</h6>6对标记来设置,标题字号依次减小。标题标记自动换行,并插入一个空行。

(3)字体、字号、字符颜色标记

标记 <font>…</font>设置文本的字体、字号和颜色,格式如下:

<font [face="字体名称"] [size=n] [color=颜色名称或#颜色数值]>…</font>

其中[ ]表示该属性短语为可选。现仅以常用的size属性举例说明,size属性的有效值范围为1~7,缺省值为3,可在其值前加“+/-”来指定相对于字号初始值的增量或减量。

(4)字体效果标记 [3]

(5)段落格式标记

文字换行。<body>和</body>之间的文字一直到浏览器窗口右边界才会自动换行。HTML中有两个单标记<br>和<p>可用于换行。<br>标记后面的内容将从下一行开始显示,而<p>标记后面的内容先空一行,再从下一行开始显示。

段落对齐方式。HTML默认的文字都是左对齐的,标记<p align=对齐方式>…</p>设置段落的对齐方式,可选left(左)、center(居中)、right(右)。

预格式文本。如果不想使用复杂的段落设置标记,可使用标记<pre>…</pre>,所有出现在<pre>和</pre>之间的文本按原来在HTML文件中的显示格式显示,包括段落、回车和空格等。

(6)插入图片

插入图片的格式如下:

<img src=“图片文件名” [align=对齐方式] [width=宽度] [height=高度] [alt=“提示信息”]>

其中,src用于指明图片文件存放的位置及文件名,width、height分别为图片显示时的宽度和高度(占屏幕的像素点数),alt为当鼠标移动到该图片上时显示的提示信息。

(7)插入链接

标记<a href="链接目标">…</a>用来插入一个超级链接。例如,在<img>标记前后加上该标记表示插入一个图片链接,单击该图片,将打开“链接目标”所指定的网页或其它资源,如果是“mailto:邮箱地址”则打开新邮件编辑窗口,收件人为该指定邮箱地址,链接目标也可以是一个文本、图像、声音或视频等各种类型的文件。

标记<a name="书签名称">…</a>则在HTML文件中的特定位置设置一个书签(或称为锚),在同一个HTML文件中将#书签名称作为href短语的链接目标,可以定位到该书签位置,如果想从其他HTML文件定位到该书签,需在书签名称前加上其URL地址。

(8)插入表格

表格一般用于网页内容的排版,例如想将文字放在页面的某个位置,就可以做个表格,然后设置表格的相关属性,将相应文字放在表格的某个单元格里,表格线可以设为不可见。除了页面的排版外,表格还可以制作出非常好看的效果,如按钮、变色、边线等。

每个表格的所有内容都在标记<table>和</table>之间,在<table>中可以使用一些短语对表格的宽度、线型、对齐方式等进行设置,常用的短语有:

l    align=表格对齐方式。用于调整窗口的水平位置,有left、center、right三种方式。

l    border=n。用于设置表格边框的阴影宽度,如果缺省,表格将没有任何线条(包括边框线和表内的水平、垂直线)。如果只有关键词border,缺省n值,则默认为1。

l    cellspacing=n。用于设置单元格间距。

l    width=n或n%。用于设置表格的宽度,用数值则以像素为单位,用百分比则表示占浏览器窗口宽度的比例。

HTML中还有一些专门的表格标记,只能出现在<table>和</table>标记之间,用于描述表格的内容,常用的有:

l    <caption>表格标题</caption>用来定义整个表格的标题。

l    <tr></tr>用来定义一行数据。表格中每一行数据都是以<tr>标记开始的,因此在<table>和</table>之间有多少个<tr>,这个表格就有多少行。

l    <td></td>或<th></th>用来定义一个单元格的数据。行数据是由单元格数据组成的,在一对<tr></tr>之间有多少个<td>或<th>,这一行就有多少个单元格。

HTML中也可插入非规则表格。所谓不规则的表格就是行列数不统一的表格,所有非规则表格都可以由规则表格通过合并单元格获得。在<td>或<th>标记中使用短语rowspan=n可以将单元格向下延伸n行,即纵向合并n个单元格。colspan=n可以将单元格向右延伸n列,即横向合并n个单元格。

(9)使用框架拆分浏览器窗口

在制作网页时,有时希望能够将浏览器的工作区拆分为两个甚至多个区域,以显示不同的内容,方便浏览。HTML支持这个功能,并且在一个区域点击的链接可以显示到另一个区域,相当于在一个浏览器窗口可以显示多个HTML文件,它们称为帧,并且互相之间具有关联,这就是所谓的框架结构。

定义一个有框架结构的HTML文件的格式如下:

<html>

<head>

<title>网页标题</title>

</head>

<frameset>

……

</frameset>

</html>

在<frameset>标记中使用rows="分隔方式"或cols="分隔方式"短语表示将网页主窗口进行水平分割或者垂直分割,一次只能使用一种分割方式。用引号括起来的分隔方式用于定义帧的个数和大小,格式是n个数字之间用逗号分开,表示分为n个帧,数字值为每帧的大小。

在标记<frameset>和</frameset>之间使用<frame>标记为每个帧指定一个HTML文件,<frame>是单独使用的标记,框架结构中有几个帧,就需要几个<frame>标记,其格式如下:

<frame src="文件路径名或URL地址" [name="帧名称"] [noresize] [scrolling=滚动条]>

l    src短语用于指定帧中显示文档的文件路径名或URL地址,如果它所指向的HTML文件也有框架结构,则形成框架的嵌套,由于<frameset>标记一次只能进行水平分割或垂直分割,如果要定义一个既有水平分割又有垂直分割的框架,须使用框架嵌套。

l    name短语用于为帧指定一个名称,当在一个帧中插入一个链接,希望在另一帧中显示内容时,可以在<a>标记中使用target="帧名称"指定在其他帧打开链接目标。

l    HTML默认的帧边界线是可以移动的,用于改变帧的大小,加上noresize短语则不允许用户改变帧的大小。

l    scrolling短语用于设置帧内是否有滚动条,有三个可供选择的设置:yes、no、auto。[3] 

随便看

 

百科全书收录594082条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。

 

Copyright © 2004-2023 Cnenc.net All Rights Reserved
更新时间:2025/3/8 3:21:24