HTML概述
HTML简介
什么是HTML
HTML语言是纯文本类型的语言,是Internet.上用于编写网页的主要语言,使用HTML语言编写的网页文件也是标准的纯文本文件。
HTML文件可以使用文本编辑器(如Windows系统自带的记事本)打开,查看其中的HTML源代码;也可以在用浏览器打开网页时,通过选择“查看”→“源文件”命令,查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行,而无须编译。当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容。
HTML语言是一-种简易的文件交换标准,它旨在定义文件内的对象和描述文件的逻辑结构,而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性,所以特别适合WWW ( World Wide Web,万维网)的出版环境。
HTML的发展历程
HTML的历史可以追溯到很久以前。1993 年,HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的快速发展,从2.0版到3.2版和4.0版,再到1999年的4.01版,一直到现在正逐步普及的HTML5。
在快速发布了HTML的前4个版本之后,业界普遍认为HTML已经“无路可走”了,对Web标准的焦点也开始转移到了XML和XHTML, HTML被放在次要位置。不过,在此期间,HTML体现出了顽强的生命力,主要的网站内容还是基于HTML的。为了能支持新的Web应用,同时克服现有的缺点,HTML迫切需要添加新功能,制定新规范。
为了将Web平台提升到一个新的高度,2004 年,WHATWG (Web Hypertext Application Technology Working Group, Web超文本应用技术工作组)成立了,他们创立了HTML5规范,同时开始专门针对Web应用开发新功能,因为这被WHATWG认为是HTML中最薄弱的环节。Web2.0这个新词也就是在那个时候被发明的,它开创了Web的第二个时代,旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。
因为HTML5能解决非常实际的问题,且得益于浏览器的实验性反馈,HTML5规范也得到了持续完善,所以HTML5以这种方式迅速融入对Web平台的实质性改进中。HTML 5成为HTML语言的新一代标准。
HTML文件的基本结构和标签
一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分,而HTML用标签来规定元素的属性和它在文件中的位置。本节将对HTML文件的元素、标签及文件结构进行详细介绍。
HTML文件的基本结构
1.标签
HTML的标签分为单独出现的标签(以下简称为单独标签)和成对出现的标签(以下简称为成对标签)两种。
1)单独标签
单独标签的格式为<元素名称>,其作用是在相应的位置插入元素。例如,
标签就是单独出现的标签,意思是在该标签所在位置插入一个换行符。
2)成对标签
大多数标签都是成对出现的,由首标签和尾标签组成。首标签的格式为<元素名称>,尾标签的格式为</元素名称>。其语法格式如下:
<元素名称>要控制的元素</元素名称>
成对标签仅对包含在其中的文件部分产生作用。例如,< title> 和< /title>标签就是成对出现的标签,用于界定标题元素的范围。也就是说,< title>和< /title>标签之间的部分是此HTML文件的标题。
说明:在HTML标签中不区分大小写。例如,< HTML>、< Html>和< html>, 其结果都是一样的。
在每个HTML标签中,还可以设置一些属性,用来控制HTML标签所建立的元素。这些属性将位于首标签中,因此,首标签的基本语法如下:
<元素名称属性1="值1”属性2="值2....>
而尾标签的建立方式则为:
</元素名称>
因此,在HTML文件中,某个元素的完整定义语法如下:
<元素名称属性1="值1”属性2="值......元素资料</元素名称>
说明:在HTML语法中,设置各属性所使用的 “ " ” 可省略。
2.元素
当用一组HTML标签将一段文字包含在中间时,这段文字与包含文字的HTML标签被称为一个元素。
在HTML语法中,每个由HTML标签与文字所形成的元素内还可以包含另-一个元素。因此,整个HTML文件就像一个大元素包含了许多小元素。
在所有的HTML文件中,最外层的元素是由< html>标签建立的。在< html>标签 所建立的元素中,包含了两个主要的子元素,这两个子元素是由< head>与< body>标签所建立的。< head>标签所建立的元素内容为文件标题,而< body>标 签所建立的元素内容为文件主体。
3. HTML文件结构
在介绍HTML文件结构之前,先来看一个简单的HTML文件及其在浏览器上的显示结果。
下面使用文本编辑器(如Windows系统自带的记事本)编写-一个HTML文件,代码如下:
<html>
<head>
<title>文件标题</title>
</head>
<body>
文件正文
</body>
</html>
用浏览器打开该文件,运行效果如图1.1所示。
从上述代码和运行效果中可以看出HTML文件的基本结构如图1.2所示。
其中,< head>与< /head>之间的部分是HTML文件的文件头部分,用以说明文件的标题和整个文件的一些 公共属性。< body>与< /body>之间的部分是HTML文件的主体部分,下面介绍的标签,如果不加特别说明,则均是嵌套在这一对标签 中使用的。
HTML文件的基本标签
1.文件开始标签< html>
在任何一个HTML文件里,最先出现的HTML标签就是< html>,它用于表示该文件是以超文本标识语言(HTML)编写的。< html>是成对出现的,首标签< html>和尾标签< /html>分别位于文件的最前面和最后面,文件中的所有内容和HTML标签都包含在其中。例如:
<html>
文件的全部内容
</html>
该标签不带任何属性。
事实上,现在常用的Web浏览器(如IE)都可以自动识别HTML文件,并不要求有< html>标签,也不对该标签进行任何操作。但是,为了提高文件的适用性,使编写的HTML文件能适应不断变化的Web浏览器,仍然应该养成使用这个标签的习惯。
2.文件头部标签< head>
习惯上,把HTML文件分为文件头和文件主体两部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容,而文件头部分用来规定该文件的标题(出现在Web浏览器窗口的标题栏中)和文件的一些属性。
是一个表示网页头部的标签。在由标签所定义的元素中,并不放置网页的任何内容,而仅仅放置关于HTML文件的信息,也就是说,它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用的。
写在与标签中间的文本,如果又写在
说明: 如果HTML文件并不需要提供相关信息,则可以省略< head>标签。
3.文件标题标签< title>
每个HTML文件都需要一个文件名称。在浏览器中,文件名称作为窗口名称显示在该窗口的最上方。这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用,今后想经常阅读,则可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来,供以后调用。网页的名称要写在< title>和< /itle>标签之间,并且< title>标签应包含在< head>与< /head>标签之中。
HTML文件的标签是可以嵌套的,即在一对标签中可以嵌入另一对子标签,用来规定母标签所含范围的属性或其中的某一部分内容。 嵌套在< head>标签中使用的主要有< title>标签。
4.元信息标签< meta>
< meta>标签元素提供的信息是用户不可见的,它不显示在页面中,一般用来定义页面信息的名称、关键字、作者等。在HTML中,< meta>标签不需要设置结束标签,在一对尖括号内就是一个meta内容,而在一个HTML头页面中可以有多个< meta>标签。< meta>标签的属性有两种: name和http-equiv,其中name属性主要用于描述网页,以便于搜索引擎机器人查找、分类。
5.页面的主体标签< body>
网页的主体部分以标签< body>标识它的开始,以标签< /body>标识它的结束。< body>标签是成对出现的。
属性 | 描述 |
---|---|
text | 设定页面文字的颜色 |
bgcolor | 设定页面背景的颜色 |
background | 设定页面的背景图片 |
bgproperties | 设定页面的背景图片为固定,不随页面的滚动而滚动 |
link | 设定页面默认的链接颜色 |
alink | 设定鼠标正在单击时的链接颜色 |
vlink | 设定访问过后的链接颜色 |
topmargin | 设定页面的上边距 |
leftmargin | 设定页面的左边距 |
6.页面的注释
在网页中,除以上这些基本标签外,还包含-一种不显示在页面中的元素,那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分,也有助于以后对代码的检查和修改。给代码加注释是一种很好的编程习惯。在HTML5文档中,注释分为3类:在文件开始标签< html>< /html>中的注释、在CSS层叠样式表中的注释和在JavaScript 中的注释,其中在JavaScript中的注释又有两种形式。下面将对这3类注释的具体语法进行介绍。
(1)在文件开始标签中的注释, 具体语法如下:
<!--注释的文字-->
注释文字的标记很简单,只需要在语法中“注释的文字”位置上添加需要的内容即可。
(2)在CSS层叠样式表中的注释,具体语法如下:
/*注释的文字*/
在CSS样式中注释时,只需要在语法中“注释的文字”位置上添加需要的内容即可。
(3)在JavaScript中的注释有两种形式:单行注释和多行注释。
单行注释的具体语法如下:
// 注释的文字
注释文字的标记很简单,只需要在语法中“注释的文字”位置上添加需要的内容即可。
多行注释的具体语法如下:
/*注释的文字*/
在JavaScript中添加多行注释时,只需要在语法中“注释的文字”位置上添加需要的内容即可。
注意: 在JavaScript中添加多行注释或单行注释的形式不是一成不变的,在进行多行注释时,单行注释也是有效的。运用 “/注释的文字” 对每行文字进行注释达到的效果和运用 “/注释的文字/” 达到的效果一样。
常见错误
在HTML代码中,当注释语法使用错误时,浏览器将注释视为文本内容,注释内容会显示在页面中。例如,下面给出的一个网页代码中有4处注释使用错误的情况。