日期:2010-05-24  浏览次数:20506 次

    2.1.1 了解HTML的发展

    早期编写网页的的语言叫超文本标记语言,英文缩写实HTML。其文件格式是文本语言,浏览器会按照文本中的标记对其中的内容重新进行解释,并按照解释后的内容显示在浏览器的窗口中。HTML语言经过了十几年的发展,已经有了很大的变化,到现在已经到了HTML5.0,扩展了DHTML和XML等子集。随着WWW的广泛应用,图形的显示显得非常重要。从1995年开始使用GIF图像分隔符和表格来分割不同的网页元素。随着浏览器的升级,每个浏览器开发公司都在自己的浏览器中增加了一些新的功能。而HTML 4.01版本是 1999年12月发布的。自从它问世以来,因为它的通用性、易学性,因此逐渐流行起来。

    HTML是一种标记语言,那么HTML的标记语言有那些标记呢?在下面几节中我们将详细介绍。

    2.1.2 熟悉HTML的基本结构

    一个标准的HTML网页文件是一个后缀名为.htm或是.html文本文件,我们可以用任何文本编辑器来打开修改它。用HTML标记语言编写的网页应该具备这样的基本格式:

    <html>
    <head>
    <title> </title>
     </head>
    <body>
    </body>
    </html>

    整个页面的HTML代码是以<html>开始,并以</html>。<head></head> 部分是网页设置部分,可以包含一个页面相关信息,一般包含文档属性参数等,这些属性不是网页的显示元素,<title></title>部分设置网页的标题文字。网页的主题内容是在<body></body>内包含的,里面的内容均会经过浏览器解释后显示在窗口中。比如下面编制一个简单的网页代码:

    <html>
    <head>
        <title>使用Html语言编写网页</title>
    </head>
    <body>
        我学会使用HTML标记语言了!
    </body>
    </html>

    保存到硬盘上,命名为newfile.htm,鼠标双击就可以打开浏览了,如图2.1所示。     
   

夯实ASP.NET的基础之了解HTML语言
图 2.1 使用HTML语言编写网页

    2.1.3 掌握HTML的常用标记

    HTML标记语言发展了十几年,从开始的1.0,到现在的5.0版本,每次升级就会增加很多功能。熟练使用常用的标记是做网页编程的基础,有些标记没有必要死记,因为现在很多的网页制作工具都是“所见即所得”的制作模式,那些标记都是自动生成的,只要我们知道那些标记是起什么作用就行了。常用的标记主要有一下几个:

    (1)<title>标记

    上一节的实例中我们已经使用过该标记了,利用该标记可以为网页添加网页标题。

    (2)<body>标记

    该标记是网页内容的主题,网页中需要表现的内容都在该标记内,在<body>标记内可以使用一些段落格式控制标记来控制内容的格式。
    如:
    <P>标记:分段标签,用于段落控制;
    <BR>标记:换行符号,用于段落控制;
    <CENTER>标记:包含在该标记内的文本居中显示;
    <H1>标记:用于项目标题,根据字体大小可以选择<H1>、<H2>、<H3>、<H4>等;
    <UL>标记:无序表标签;
    <OL>标记:有序表标签;
    <DIR>标记:目录表标签;

    (3)<a>标记

    该标记用于超连接,比如:<a  href=http://News.163.com> 网易新闻网</a>。在生成的网页上就会出现链接到网易新闻网的超连接。

    (4)<img>标记

    该标记是用于显示图片的标记,比如:<img src=http://www.webjx.com/htmldata/2006-01-03/”index.gif”>。网页加载的时候就会显示出名为index.gif图片。

    (5)<table>标记

    <table>标记是在CSS出现以前使用最为频繁的格式控制标记。该标记是用来产生表格来控制文本内容。

    <table>标记不是单独使用的,配套的标记有:
    <tr>标记:表格的行标签;
    <td>标记:表格的单元格标签。

    例如下面的代码利用<table>标记控制文本格式:

    <html>
    <head>
        <title>使用Html语言编写网页</title>
    </head>
    <body>
        <table bordercolor="#000000" border="1">
            <tbody>
                <tr>