什么是HTML?HTML的工作原理?

html-css038

什么是HTML?HTML的工作原理?,第1张

HTML是部署在服务器上的文本文件,根据HTTP协议,浏览器发出请求给服务器,服务器做出响应,

给浏览器返回一个HTML,浏览器解释执行HTML,从而显示内容。(部署在服务器上,运行在浏览器上)

HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言,它是通用标记语言SGML的简化。用它的语法规则建立的文档可以运行在不同操作系统平台上。因此,HTML文档属于纯文本文件(它能用任意的文本编写器书写)。现在有很多网迷称HTML为程序语言,把写HTML文档理解为编程,这显然是走进了一个误区。其实,要想学习HTML,一钵(记事本)一甑(浏览器)足矣。

在了解了HTML的定义后,接下来我们便来学习此语言。由于篇幅有限,本文不可能把HTML语言的属性一一讲解。笔者只是选了一些比较重要而又广泛使用的标签进行分析。看完这篇文章后,你就会对HTML的工作原理有一个初步的认识。

一、HTML语言基础

用HTML语言编写的文档就称为HTML文档。我们平时上网所见到的就是HTML文档在浏览器中显示的结果。控制HTML文档外观的是HTML标签,浏览器可以将标签解释成具体的内容,如超级链接、标题、段落、列表等。

要学会编写HTML文档,就要掌握各种HTML标签。关于HTML标签,有五点非常重要:

1. 标签始终以尖括号相围(小于号/大于号)——如 <head>或 <i>、 </i>。

2. 多数标签都成对出现,并且围在作用材料的两侧。它们的工作方式就和电灯开关一样:第一个标签启动操作,第二个标签把它关闭。(当然,也有一些例外。例如,标签创建段落,但并没有“关闭开关”。段落创建完后,不能再把后面的部分恢复为创建之前的状态。)

3. 第二个标签——“关闭开关”总是以前斜杠开始。例如,启动粗体时使用 <b>,表达完你的强烈感情后再用 </b>恢复到一般文本。

4. 前一个标签打开,后一个标签关闭。标签都是嵌入的。所以如果你写下了这样一段 HTML文本:

<head>

那么它是无效的。正确的顺序应该是 <head></head>。

5. 许多标签都有可选的属性,这些属性使用只修改标签的行为。例如,使用 <p>标签的 ALIGN 属性,你可以更改缺省的段落对齐方式(左对齐)。比如, <p align=CENTER>就可以使它后面的段落居中。

◎HTML语言可以在任何文本编辑器中编写,如Word、记事本等,然后保存为.html语言,最后在浏览器中浏览。

下面,就让我们开始动手用记事本来写网页。

在“开始”→“程序”→“附件”中打开记事本。

1.先输入几个符号试验一下,然后将记事本另存为.html文件。

2.再看看,文本保存的格式是不是和原来不一样了?!很容易认出来。

3.打开这个新文件,看看出来的是什么?

一个基本的HTML页面包括以下基本标签:

<html>

<head>

<title>页面标题</title>

</head>

<body>

页面内容

</body>

</html>

是不是很简单?在这里,HTML标签用来表示你做的页面是HTML文档;HEAD标签用来描述HTML页的内容。在<head>与</head>之间可以插入其它标签,其中最重要的就是TITLE标签,在<title>与</title>之间的内容就将出现在浏览器的标题栏中。

Body标签用来表示页面的主体。在<body>与</body>之间可以设置页面的背景颜色、背景图像、文字色彩、页面边距等。BODY标签的基本用法如下:

<body

background=url 设置页面的背景图片

bgcolor=color 设置页面的背景颜色(颜色值为英文和十六进制代码,代码表见文章末)

text=color 设置页面文本的颜色

leftmargin=n 设置整个页面的左边距。当n=0时,页面的边缘便紧贴左边缘

下面让我们先来试验一下。

注:以下例图是将Internet Explorer浏览器(以下简称IE浏览器)和记事本同时并排打开,调整窗口大小后的对比效果。需要注意,每当在记事本中做改动后,都要保存一次,同时在用IE浏览器浏览时也要刷新一下。

在WORD中设置文字大小是很容易的,不过那是拜其强大的所见即所得功能所赐,上不了台面的。来利用HTML语言标签设置一下文字效果吧,你一定会很有成就感!

HTML语言可以用标签对文档字符进行字体设置,包括标题、字体、字号、字符颜色等。

1.H标题标签

一个页面当然要有一个醒目的标题,这样别人才能方便迅速地了解你页面的内容,并根据标题的级别来了解内容的重要程度。HTML可以定义六级标题:H1、H2、H3、H4、H5、H6。与其它标签一样,它们也是成对使用的。格式为<Hn>……</Hn>,n可以是1至6的整数。例如:

2.设置文字大小

除了对标题的文字大小进行设置以外,HTML语言还可以利用FONT标签对文档内的文字的大小进行设置。FONT标签包括三种属性:size属性,color属性,face属性。size属性用来确定字号的大小,其有效数字范围在-7(最小)和+7之间。如果不设置,系统的默认值为3。其设置格式为<font size=n>……</font>。例如:

3.设置文字颜色

FONT的color属性可以用来设置文字的颜色。这里所介绍的颜色设置与前面介绍的text=color不同。text=color是设置整个页面的文字颜色,而这里所介绍的是设置特定文字的颜色,这样可以使你的页面更加丰富多彩。其设置格式为<font color=?>……</font>。例如:

4.设置版面

你不想页面中的文字总是从左边开始吧?要想在页面中进行分行和段落设置,必须通过HTML语言进行版面设计。

分段标签<p>……</p>表示一段文字的开始和结束,单独一个<p>标签表示一个空行。

换行标签<br>……</br>表示浏览器执行一个换行动作,它与<p>标签不同的是,它并不改变段落位置。

居中标签<center>……</center>可以将文本居中显示。例如:

三、列表的设置

列表标签在文档制作中有重要作用,同样主页制作也少不了列表标签。HTML规定了多种列表标签,可以设置无序列表、有序列表、自定义列表和目录列表。我们下面可以看看实际效果。

1.无序列表包括UL标签和LI标签。UL标签创造一个标有圆点的列表,LI标签放在每个圆点列表前,并加上一个圆点。例如:

2.有序列表包括OL标签和LI标签,OL标签用来创建一个标有数字的列表,LI标签放在每个数字列表项之前,并加上一个序列数字。例如:

3.自定义列表包括DL、DT、DD等标签,在这里限于篇幅不多解释。简单地说,自定义列表就是解释词语。例如:

4.目录列表则包括DIR、LI元素,举例如下:

大家都知道,超链接是互联网的一大特点,用鼠标轻轻一点,就可以转到其它网页,这是多么神奇啊。超链接正是HTML语言的优势,它是通过A标签实现的,其属性是href。

href属性的用法:当A标签中包含href属性时,A标签的起始标记和结束标记之间的文字就成为超文本,也就是说,用鼠标点击这个超文本文字,你就可以进入另外一个网址或者自动打开默认电子邮件程序。另外,你也一定注意到,许多时候当我们把鼠标光标放到页面某个位置时,旁边就会出现一个小小的黄色文字说明,不要把这种技巧想像得太神秘,其实并不难。让我们一起试试看:

怎么样,HTML语言并不神秘吧!

四、建立超链接

做主页,难免要在页面中加入表格,那就需要用到以下这些基本标签:

TABLE标签:说明一个表格的开始和结束

BORDER标签:为表格加边框

TR标签:用以定义表格行数

TH标签:用以定义表头

TD标签:用以定义表格内容

COLSPAN标签:可以实现跨几列显示

ROWSPAN标签:可以实现跨几行显示

这些标签的用法都可以在下例中看到:

够神奇吧,只需要加几个符号,表格就出来了。当然,这个表格还是很简单的,不过我们可以用其他标签来修饰、美化它。限于篇幅,这里就不再赘述。

五、在页面中制表

用MARQUEE标签可以让你的主页动起来。该标签有许多属性,以下列举其中几种:

1.direction属性:决定文本的滚动方向,分为向左left和向右right,默认状态向左。

<marquee direction=left>从右向左滚动</marquee>

<marquee direction=right>从左向右滚动</marquee>

2.behavior属性:指定文本的滚动方式,分为三种:

Scroll:从一端消失后,在另一端出现并继续滚动。

<marquee behavior=scroll>一圈一圈地滚动</marquee>

Slide:从一端滚动,接触到另一端后停止

<marquee behaviro=slide>只滚动一次就停止</marquee>

Alternate:从一端滚动到另一端后,反向滚动。

<marquee behavior=alternate>来回滚动</marquee>

六、页面中的滚动文本

我们上面看到的都是HTML语言的一些基本使用方法,这些常用的语法可以帮助你看懂别人网页的源代码,同时也方便你对自己的主页作些小的修改。以后当你上网冲浪时看到漂亮的页面,可以通过查看这个页面的源代码来分析其采用了什么技术,也许你一时看不懂,但看到那些由HTML基础语言编写的代码,你一定不会觉得陌生了。

注:查看网页源代码方法:用鼠标左键点击IE浏览器中的“查看”栏,再在下拉菜单中点击“源文件”,这时这个网页的所有源代码即可让你一览无余。

特点:HTML是一种纯文本类型的语言,是用来设计网页的标记语言,用该语言编写的文件,以.html或者.htm结尾:有浏览器执行:在HTML页面上,可以嵌套脚本语言编写的程序段。

交互原理:HTML是部署在服务器上的文本文件,浏览器向服务器发送请求,服务器 作出响应给浏览器返回一个HTML,浏览器执行HTML,从而显示内容。