提供行业解决方案

别再纠结了!尽管把你的烦恼交给我们吧,我们会将问题转化为一整套解决方案提供给你!方案的前期咨询根本不需你花一分钱。还不马上咨询?

提供软件客制服务

或许一套通用软件就能让你从烦恼中解脱出来,那就先到我们的软件产品仓库中选一款吧!我们还可以为你提供现有软件的扩展定制,即客户化定制。

提供软件实施服务

购买软件与汉堡包不同,软件产品和软件实施相结合才能发挥作用!没有良好的软件实施,必败!而采用我们的方案或产品,免费获得软件实施支持。

提供网站建设服务

坚持用心建站! 您只需告知所需要到达的终点,我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护,享受全程的贴心服务。

提供网站维护服务

何必专门招人负责网站维护呢?你可能反驳招人能兼干其他工作,但是这样就不够专注。而我们提供的网站后期维护更专业,更专注,更划算。

12. HTML 基础知识

序言

在本篇文章中,你们将学习 HTML 基础知识,包括 HTML 的定义、功能,它的简要发展史,以及 HTML 文档的结构是什么样的。后面的几篇文章将详细讲述 HTML 的各个组成部分。本篇文章的内容目录如下:

什么是 HTML

绝大多数读写文件的桌面应用程序都使用某一种特定的文件格式。例如,Microsoft Word 用于读写文件扩展名为“.doc”的文件,而 Microsoft Excel 用于读写文件扩展名为“.xls”的文件。这些文件包含如何在你下次打开文档时重建文档的指令,文档的内容是什么,以及文档的“元数据”,如文档的作者、最后修改日期等,甚至还可以包括已做的改动的列表,让你可以查看文档的不同版本。

HTML(“超文本标记语言”)是一种描述 Web 文档的内容的语言。HTML 使用特殊的语法来包含标记(被称为“元素”)——文档中的文本都被包裹在标记中,来指示用户代理(user agents)应该如何解释文档的各个部分。

注意,我们在这里使用了一个技术术语“用户代理”,而不是“Web 浏览器”。所谓“用户代理”是指用于代表用户访问网页的任何软件。这里需要指出的是,“用户代理”和“Web 浏览器”之间有一个重大的区别:即所有类型的桌面浏览器(如 Internet Explorer,Opera,Firefox,Safari 等)以及其它浏览器(如 Wii 互联网频道、手机浏览器如 Opera Mini、iPhone 上的 WebKit 浏览器等)都是“用户代理”,但并不是所有的“用户代理”都是浏览器软件。Google 和 Yahoo! 用于为其搜索引擎编制网页索引的自动程序也是“用户代理”,但没有人在直接控制这些自动程序。

HTML 是什么样子的

HTML 就是内容和其一般含义的纯文本形式表现。例如,标题为“The Purpose of HTML”的 HTML 代码看起来是这样的:

<h2 id="htmllooks">What HTML looks like</h2>

<h2>”部分是一个标记(marker),我们称之为一个“标签”(tag),其含义是“这之后的文本应被视为一个二级标题”。“</h2>”是一个指明二级标题在哪里结束的标签,我们称之为一个“结束标签”。起始标签、结束标签,以及它们之间的所有文本,被称为一个“元素”(element)。许多人在使用“元素”和“标签”这两个术语时,将二者视为可互换的意思完全相同的术语,严格说来这是不正确的。id="htmllooks" 是一个属性(attribute)。在后面我还将更为详细地讲述这些术语。

在绝大多数浏览器中,都有一个“源代码”或“查看源代码”选项,一般在“查看”菜单下。如果你使用的浏览器有这个选项,请现在就选定它,查看本页面的 HTML 源代码。

HTML 的发展史

互联网和 Web 的历史这篇文章中,你们已经了解到一些关于现代 Web 发展史的知识。当 Tim Berners-Lee 发明万维网时,他创制了第一个 Web 服务器、Web 浏览器和第一个版本的 HTML

尽管自其诞生以来,HTML 已有了相当大的变化,但我们目前使用的 HTML 的很多内容都可以在 Tim Berners-Lee 写的第一个 HTML 文档中找到,而且在最初的那个“HTML 标签”文件所描述的“标签”中,有超过一半以上的“标签”现在依然存在。

随着越来越多的人开始编写网页,以及更多的浏览器的不断出现,更多的特性和功能被加入 HTML。许多新特性和功能得到普遍采用(如使用 img 元素向文档中插入图像,这最先是在 NCSA Mosaic 浏览器中得到使用的)。有些特性和功能则具有专有性,只在一两种浏览器中得到使用。在这种情况下,要求对 HTML 进行“标准化”的呼声日益高涨,这样其它 Web 浏览器软件的作者就能有一个明确描述 HTML 是什么样子的文件(被称为“规范”),可以判断是否遗漏执行了HTML 的某些部分。

互联网工程工作组(IETF,一个负责制订互联网标准的组织)于1993年发布了一个 HTML 草案,它未能成为一个标准,并在 1994年就过期了,但它促使 IETF 创建了一个研究 HTML 标准化的工作小组。

1995年,基于 1993年那个 HTML 草案的“HTML 2.0”编写完成。同时,另一个被称为“HTML+”的方案也由 Dave Raggett 编写完成,它被用作浏览器执行的很多新的 HTML 元素的标准(如向文档中插入图像的方法等,向文档中插入图像最先是在 NCSA Mosaic 浏览器中得到使用的)。

1995下半年,HTML 3.0 的草案开始编写,但由于缺乏浏览器制造商对工作方向的支持,制订 HTML 3.0 的工作停顿了下来。HTML 3.2 放弃了 HTML 3.0 中的很多新特性和功能,转而采用了随后流行的 Mosaic 浏览器和 Netscape Navigator 浏览器创造的很多新特性和功能。

1997年,万维网联盟(W3C)发布了 HTML 4.0,将其作为建议使用的规范。HTML 4.0 采用了更多的浏览器特定扩展,同时通过将一些 HTML 元素标注为不建议使用的元素(即这些元素已过时,将不再出现在以后更高版本的 HTML 规范中),万维网联盟也试图净化 HTML,使之更为合理。万维网联盟希望通过 HTML 4.0 的发布,促使人们在文档中使用更好的、更为语义化的 HTML(详细信息请参见Web 标准所包括的模块这篇文章)。

1999年,万维网联盟发布了 HTML 4.01,并在 2001年做了一些勘误。这是最近版本的 HTML 规范,不过目前 HTML 5 已正在起草中。

2000年,万维网联盟还发布了 XHTML 1.0 规范,即把 HTML 重构为有效的 XML 文件。

HTML 文档的结构

以下是一个最简单的有效 HTML 文档示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example page</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

在以上这个 HTML 文档中,第一行是文档类型元素,或被称为 doctype(文档类型,将在为你的 HTML 文档选择适当的文档类型这篇文章中详细讲述)。它描述所使用的是哪一种类型的 HTML,这样“用户代理”就能确定该如何解释这个文档,并确定它是否遵守所声明将要遵守的规则。

在文档类型元素之后,你可以看到 html 元素的起始标签,它包裹了整个文档。最后是 html 的结束标签,在任何一个 HTML 文档中,它都位于结尾处。

html 元素之中,有一个 head 元素,它包裹的是关于文档的信息(元数据)。关于 head 元素,将在下一篇文章中详细讲述。在 head 元素之中,有一个 title 元素,它定义将被显示在标题栏中的“Example page”标题。

head 元素之后,有一个 body 元素,它包裹的是本页面的实际内容,在本示例中,就只有一个一级标题(h1)元素,其中包含“Hello world.”这个文本。这就是我们这个 HTML 文档的全貌。

正如你们看到的那样,元素中常常包含其它元素。文档主体中通常都包含有很多嵌套元素。页面分区(divisions)创造出文档的整体结构,其中将包含小分区(subdivision)。它们将包含标题、段落、列表等等。段落又可包含链接到其它文档的元素、引用、强调等。在以后的课程中,你们将更多地了解这些元素。

HTML 元素的语法

正如你们已看到的那样,HTML 中的一个基本元素由两个包裹一块文本的标记组成。不过有些元素并不包裹文本,同时几乎在所有情况下,元素中都可包含子元素(如在以上那个示例中,html 元素包含 headbody 元素)。

元素也可以有属性,属性可修饰元素的行为并引入额外的含义。

<div id="masthead">
<h1>The Basics of 
<abbr title="Hypertext Markup Language">HTML</abbr>
</h1>
</div>

在这个示例中,一个 div 元素(页面分区,一种将文档划分为逻辑块的方式)被添加了一个 id 属性,而属性又被赋予了一个“值”(value),即 masthead。这个 div 元素包含一个 h1 元素(一级标题,或最重要的标题),该 h1 元素中又包含一些文本。这些文本的一部分被包裹在一个 abbr 元素(用于定义缩略语)中,该元素的属性为 title,属性的值为 Hypertext Markup Language

HTML 中的很多属性都通用于所有元素,不过有些属性仅适用于一种或几种特定的元素。所有属性的格式都是 keyword="value" 这种格式。“值”必须位于单引号或双引号之间(一些情况下可不用引号,但这不是一个好的习惯,因此你应当把“值”始终放在单引号或双引号之间)。

在 HTML 规范中,定义了绝大多数的属性及它们可能有的“值”。你如果自己编造属性的话,会使 HTML 无效,因为这样会让“用户代理”无法完全正确地解释网页。唯一的例外是 idclass 属性,它们的“值”是完全由你控制的,这是因为它们的功能就是让你为文档添加你自己的含义和语义。

包含在另一个元素中的一个元素被称为另一个元素的“子元素”。在以上那个示例中,abbr 就是 h1 的子元素,而 h1 又是 div 的子元素。相反地,div 被称为 h1 的“父元素”。父元素/子元素概念是很重要的概念,它构成了 CSS 的基础,并在 JavaScript 中大量使用。

块级元素和内联元素

HTML 中的元素可分为两大类,即块级元素和内联元素,对应于这些元素所代表的内容和结构的类型。

块级元素指更高层级的元素,通常用于显示文档的结构。通俗地说,如果元素是块级的,那么它总是在新行上显示。一些常见的块级元素包括段落、列表项目、标题和表格。

内联元素指那些包含在块级结构元素只中的元素,只包裹文档内容的一小部分,而不是包裹文档内容的整个段落和编组。内联元素不在文档的新行上显示,而是在文本的一个段落(当前行)中显示。一些常见的内联元素包括超文本链接、突出显示的单词或短句,以及简短的引述。

字符引用

最后我们来看看如何在 HTML 文档中插入特殊字符。在 HTML 中<,>,和 & 这三个字符都是特殊的字符,它们用于表示 HTML 的起始和结束,而不是代表小于符号、大于符号和 & 符号。

网页作者最先可能犯的错误之一就是在 HTML 文档中使用 &,然后就出现意想不到的错误。例如,写入“Imperial units measure weight in stones&pounds”(意为,英国的重量单位为英石和磅),“stones&pounds”在一些浏览器中可能被显示为“…stones£s”。

这个问题的原因是,在 HTML 中“&pound;”这个字符串实际上是字符引用。字符引用适用以下情况,试图在文档中包含某些无法或难于使用键盘输入的字符,或者是在一些特殊的文件编码中,保存并表示一些不属于此编码集的字符。

and 符号(&)表示字符引用开始,半角分号(;)表示字符引用结束。不过很多“用户代理”都可以容忍一些 HTML 错误,如遗漏分号等,这样就会把“&pound”视为字符引用处理。需要说明的是,字符引用可以为数字形式(数字字符引用——numeric references),也可以为简写词形式(实体引用——entity references)。

在 HTML 文档中输入真正的 & 符号,可以采用字符实体引用,即输入“&amp;”,或采用数字字符引用,即输入“&#38;”,你可以在 evolt.org 这个网站上找到完整的字符引用表

总结

在本篇文章中,你们学习了 HTML 的基础知识,了解到了 HTML 文档结构的一些初步知识。在后面的文章中,我们将接着深入学习 HTML 文档的 <head> 元素和 <body> 元素。

联系我们

  • 网址:www.yercent.com
  • 电话:+86-531-66683968
  • 传真:+86-531-61365117
  • QQ:1251420996或564590102
  • Email: 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。
当前位置:首页 建站知识 12. HTML 基础知识