asp.net
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所示。
图 2.1 使用HTML语言编写网页
2.1.3 掌握HTML的常用标记
HTML标记语言发展了十几年,从开始的1.0,到现在的5.0版本,每次升级就会增加很多功能。熟练使用常用的标记是做网页编程的基础,有些标记没有必要死记,因为现在很多的网页制作工具都是“所见即所得”的制作模式,那些标记都是自动生成的,只要我们知道那些标记是起什么作用就行了。常用的标记主要有一下几个:
(1)<title>标记
上一节的实例中我们已经使用过该标记了,利用该标记可以为网页添加网页标题。
(2)<body>标记
该标记是网页内容的主题,网页中需要表现的内容都在该标记内,在<body>标记内可以使用一些段落格式控制标记来控制内容的格式。
如:
<P>标记:分段标签,用于段落控制;
标记:换行符号,用于段落控制;
<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>
<td>
</td>
<td>
表格控制符
</td>
<td>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
第一个单元格
</td>
<td>
第二个单元格
</td>
<td>
第三个单元格
</td>
</tr>
</tbody>
</table>
</body>
</html>
预览效果如图2.2所示:
图 2.2 标记控制文本排列格式
(6)<frameset>标记
该标记是用来分割网页页面的。在一个页面内可以实现多个htm网页显示。比如下面一段代码就可以实现将窗体水平分割三块:
<frameset cols=”网页1的显示宽度,网页2的显示宽度,网页3的显示宽度”>
<frame src= 网页1的路径>
<frame src= 网页2的路径>
<frame src= 网页3的路径>
</frameset>
将<frameset>标记的cols属性换为rows就可以实现垂直分割窗体了。