HTML+CSS+JavaScript网页设计实用教程
上QQ阅读APP看书,第一时间看更新

1.4 HTML网页技术

HTML网页技术是一切网页技术的基础,只有学好HTML技术,才能够制作出精美的网站。

HTML主要运用标签使页面文件显示出预期的效果,也就是在文本文件的基础上,加上一系列的网页元素展示效果,最后形成后缀名为.htm或.html的文件。当读者通过浏览器阅读HTML文件时,浏览器负责解释插入到HTML文本中的各种标签,并以此为依据显示文本的内容。把HTML语言编写的文件称为HTML文本,HTML语言即网页的描述语言。

1.4.1 HTML概述

在介绍HTML语言之前,不得不介绍万维网(World Wide Web)。万维网是一种建立在因特网上的、全球性的、交互的、多平台的和分布式的信息资源网络。它采用HTML语法描述超文本(Hypertext)文件。Hypertext一词有两个含意:一个是链接相关联的文件;另一个是内含多媒体对象的文件。

HTML是Internet中用于编写网页的主要语言,HTML提供了精简而有力的文件定义,可以设计出多姿多彩的超媒体文件。通过HTTP通信协议,HTML文件可以在万维网上进行跨平台的文件交换。

HTML文件制作简单,且功能强大,支持不同数据格式的文件导入,其主要特点如下。

1.HTML文档容易创建,只需要一个文本编辑器就可以完成;

2.HTML文件存储容量小,能够尽可能快速在网络中进行传输和显示;

3.HTML文件与操作平台无关,HTML独立于操作系统平台,能够与多种平台兼容,只需要一个浏览器就可以在操作系统中浏览网页文件;

4.简单易学,不需要很深的编程知识;

5.HTML具有扩展性,HTML的广泛应用带来了加强功能、增加标识符等要素,HTML采取了类元素的方式,为系统扩展提供了保证。

提示:

HTML文件可以直接由浏览器解释执行,而无需编译。当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容。正是因为如此,网页显示的速度同网页代码的质量有很大的关系,保持精简和高效的HTML源代码是十分重要的。

1.4.2 HTML文档结构

HTML的所有标题都是由“<”和“>”括号括起来,如<html>。在起始标签的标签名前加上符号“/”便是其终止标签,如</html>。HTML文档内容要包含在<html>与</html>标签之间,完整的HTML网页文档应该包括头部和主体两大部分。

HTML文件基本结构如下。

      <html>       <! --HTML文件开始-->
      <head>       <! --HTML文件的头部开始-->
      网页头部部分
      </head>      <! --HTML文件的头部结束-->
      <body>       <! --HTML文件的主体开始-->
      网页主体内容部分
      </body>      <! --HTML文件的主体结束-->
      </html>       <! --HTML文件结束-->

● <html>……</html>

告诉浏览器HTML文件开始和结束,<html>标签出现在HTML文档的第一行,用来表示HTML文档的开始。</html>标签出现在HTML文档的最后一行,用来表示HTML文档的结束。两个标签一定要一起使用,网页中的所有其他内容都需要放在<html>与</html>之间。

● <head>……</head>

网页的头标签,用来定义HTML文档的头部信息。该标签也是成对使用的。

● <body>……</body>

在<head>标签之后就是<body>与</body>标签了,该标签也是成对出现的。<body>与</body>标签之间为网页主体内容和其他用于控制内容显示的标签。

1.4.3 HTML中的标签形式

绝大多数元素都有起始标签和结束标签,在起始标签和结束标签之间的部分是元素体,例如<body>…</body>。第一个元素都有名称和可选择的属性,元素的名称和属性都在起始标签内标明。

知识点:普通标签

普通标签是由一个起始标签和一个结束标签所组成的,其语法格式如下。

<x>控制文字</x>

其中,x代表标签名称。<x>和</x>就如同一组开关:起始标签<x>为开启某种功能,而结束标签</x>(通常为起始标签加上一个斜线/)为关闭功能,受控制的文字信息便放在两标签之间,例如,下面的代码。

<b>加粗文字</b>

标签之中还可以附加一些属性,用来实现或完成某些特殊效果或功能,例如,下面的代码。

<x a1="v1"a2="v2" ……an="vn">控制文字</x>

其中,a1、a2、……an为属性名称,而v1、v2、……vn则是其所对应的属性值。属性值加不加引号,目前所使用的浏览器都可接受,但根据W3C的新标准,属性值是要加引号的,所以最好养成加引号的习惯。

知识点:空标签

虽然大部分的标签是成对出现的,但也有一些是单独存在的,这些单独存在的标签称为空标签,其语法格式如下。

<x>

同样,空标签也可以附加一些属性,用来完成某些特殊效果或功能,例如,下面的代码。

<x al="v1"a2="v2" ……an="vn">

W3C定义的新标准(XHTML1.0/HTML4.0)建议:空标签应以/结尾,即<x />。

如果附加属性,则格式如下。

<x a1="v1"a2="v2" ……an="vn" />

例如,下面的代码。

<hr color="#0000FF" />

目前所使用的浏览器对于空标签后面是否要加/并没有严格要求,即在空标签最后加/和没有加/不影响其功能,但是如果希望文件能满足最新标准,最好加上/。

提示:

其实HTML还有其他更为复杂的语法,使用技巧也非常的多,作为一种语言,它有很多的编写原则并且以很快的速度发展着。

1.4.4 编写HTML时需要注意的问题

HTML由标签和属性构成,在编写HTML文档时,需要注意以下几点。

1.“<”和“>”是任何标签的开始和结束。元素的标签需要使用这对尖括号括起来,并且在结束标签的前面加上符号“/”,如<p></p>。

2.在HTML代码中不区分大小写。

3.任何空格和回车在HTML代码中均不起作用。为了HTML代码的清晰,建议不同的标签之间使用回车进行换行。

4.在HTML标签中可以添加各种属性设置,例如下面的HTML代码。

<p align="center">这里是段落文本</p>

5.需要正确地输入HTML标签。输入HTML标签时,不要输入多余的空格,否则浏览器可能无法识别这个标签,导致无法正确地显示。

6.在HTML代码中合理的使用注释。<! --需要注释的内容-->注释语句只会出现在HTML代码中,不会在浏览器中显示。