在了解了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浏览器中的“查看”栏,再在下拉菜单中点击“源文件”,这时这个网页的所有源代码即可让你一览无余。
动态网页的运行原理如下:
当用户请求的是一个动态网页时,服务器要做更多的工作才能把用户请求的信息发送回去,服务器一般按照以下步骤进行工作:
1、服务器端接受请求。
2、Web服务器从服务器硬盘指定的位置或内存中读取动态网页文件。
3、执行网页文件的程序代码,将含有程序代码的动态网页转化为标准的静态页面(如HTML)。
3、Web服务器将生成的静态页面代码发送给请求浏览器。
扩展资料:
1、动态网页一般以数据库技术为基础,可以大大降低网站维护的工作量。
2、采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等。
3、动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。
4、动态网页中的“?”对搜索引擎检索存在一定的问题,搜索引擎一般不可能从一个网站的数据库中访问全部网页,因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。
参考资料来源:百度百科-动态网页
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)