1.3 HTML语言的基础知识
1.HTML语言概述
HTML是Hypertext Marked Language的缩写,即超文本标记语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。只有采用HTML制作的网页,浏览器才能正确地阅读和运行。
用HTML语言制作网页,一般有两种方法:一种是使用记事本之类的工具,输入HTML的源代码,然后保存为以.html或.htm为扩展名的网页文件;另一种是使用可视化的网页制作工具,根据用户的可视化操作自动生成HTML代码,如Dreamweaver、FrontPage等软件。
2.HTML文档基本结构
一个HTML文档是由一系列的元素和标记组成的,HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分(head)和正文主体部分(body)两大部分,其中头部分描述浏览器所需的信息,而主体部分则包含所要说明的具体内容。具体结构如下。
<html> <head> 头部信息 </head> <body> 正文主体部分 </body> </html>
<html>标记用于HTML文档的最前面,用来标识HTML文档的开始,而</html>标记恰恰相反,它放在HTML文档的最后面,用来标识HTML文档的结束,这两个标记必须一起使用。
<head>和</head>标记构成HTML文档的开头部分,可以包含<title></title>、<script></script>等标记,这些标记都是描述HTML文档相关信息的标记。
<body></body>是HTML文档的主体部分,可包含<p></p>、<img>、<br>、<a></a>等标记,其内容将在浏览器窗口中显示出来。
提示
● 在HTML文档中,所有的标记都要用括号<>括起来,如<p>、<hr>。
● HTML标记不区分大小写。
● 标记中如果包含多个参数,各参数之间用空格分隔,参数位置不受限制。
3.HTML常用标记
(1)标题标记
格式:<title>网页的标题</title>
说明:该标记在<head></head>标记中,所包含的文字将出现在浏览器的标题栏上。
(2)主体标记
格式:<body bgcolor="页面背景颜色" background="背景图像" text="文本颜色">
主体内容 </body>
说明:包括所有主体内容,可以设置页面的背景颜色、背景图像、文字颜色等属性。
例如,将图像tx.jpg设置为网页背景图像,网页文字颜色为黑色。
<body background="tx.jpg" text="#000000">
主体内容
</body>
(3)段落标记
格式:<p align="对齐方式">段落文本</p>
说明:用来划分段落,在该标记中可以输入一段文字。
例如,将标题“倡议书”居中显示。
<p align="center">倡议书</p>
(4)换行标记
格式:<br>
说明:用来标记一个换行动作,换行后的内容与原内容仍属于同一段落。
(5)水平线标记
格式:<hr align="对齐方式" color="颜色" width="宽度" size="高度">
说明:在页面中插入一条水平线,通常用于分割文档。
例如,插入一条红色水平线,并居中显示。
<hr align="center" color="#ff0000">
(6)图像标记
格式:<img src="图像的URL" align="对齐方式" width="宽度" height="宽度" alt="替换文字">
说明:在页面中插入一幅图像。
例如,插入图像images文件夹中的tx.jpg,宽度和高度均为300像素,鼠标指向图像或图像不能正常浏览时提示“风景图片”。
<img src="images/tx.jpg" width="300" height="300" alt="风景图片">
(7)超链接标记
格式:<a href="目标文件的URL" target="目标属性">文本或图像</a>
说明:为标记中的文本或图像添加超链接目标,浏览网页时单击可打开指定的目标文件。
例如,为文本“新浪网”创建超链接到http://www.sina.com。
<a href="http://www.sina.com">新浪网</a>
(8)表格标记
表格标记由表格标记、行标记和单元格标记3部分组成。
● 表格标记
<table width="宽度" height="高度" align="对齐方式" border="边框宽度" cellpadding="单元格边距" cellspacing ="单元格间距">…</table>
● 行标记
<tr>…</tr>
● 单元格标记
<td rowspan="跨越行数" colspan ="跨越列数">…</td>
例如,创建一个如图1-26所示的表格,对应的源代码如下。
图1-26 表格
<table width="300" height="95" border="1" cellpadding="0" cellspacing="0"> <tr align="center"> <td >新闻</td> <td >体育</td> <td>音乐</td> </tr> <tr> <td colspan="3" bgcolor="#FFCCFF"> </td> </tr> </table>