Dreamweaver CS3网页制作
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

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">&nbsp;</td>
              </tr>
            </table>