HTML5+CSS3+JavaScript从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2　HTML文档结构

HTML是构成网页文档的主要语言，使用HTML语言创建的文档为文本文件，可以使用任意文本编辑器进行编辑，文件扩展名为.html或.htm。

1.2.1　HTML4基本结构

视频讲解

HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。

【示例】一个完整的HTML4文档基本结构如下。

可以看到，每个标签都是成对组成，第一个标签（如<html>）表示标识的开始位置，而第二个标签（如</html>）表示标识的结束位置。<html>标签包含<head>和<body>标签，而<head>和<body>标签是并列排列。

如果把上面字符代码放置在文本文件中，然后另存为“test.html”，就可以在浏览器中浏览了。当然，由于这个简单的HTML文档还没有包含任何信息，所以在浏览器中是看不到任何显示内容的。

　提示：网页就是一个文本文件，文件扩展名一般为.html或.htm，俗称为静态网页，可以直接在浏览器中预览；也可以是.asp、.aspx、.php或.jsp等，俗称为动态网页，需要服务器解析之后，浏览器才能够预览。

1.2.2　XHTML基本结构

视频讲解

XHTML是The Extensible HyperText Markup Language的缩写，中文翻译为可扩展标识语言，实际上它是HTML4的升级版本。XHTML和HTML4在语法和标签使用方面差别不大。熟悉HTML语言，再稍加熟悉标准结构和规范，也就熟悉了XHTML语言。XHTML具有如下特点：

　用户可以扩展元素，从而扩展功能，但在目前1.1版本下，用户只能够使用固定的预定义元素，这些元素基本上与HTML4版本元素相同，但删除了部分属性描述性的元素。

　能够与HTML很好地沟通，可以兼容当前不同的网页浏览器，实现XHTML页面的正确浏览。

【示例】完整的XHTML文档结构如下所示。

    <!--[XHTML文档基本框架]-->
    <!--定义XHTML文档类型-->
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
    <!--XHTML文档根元素，其中xmlns属性声明文档命名空间-->
    <html>
    <!--头部信息结构元素-->
    <head>
    <!--设置文档字符编码-->
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <!--设置文档标题-->
    <title>无标题文档</title>
    </head>
    <!--主体内容结构元素-->
    <body>
</body>
</html>

XHTML代码不排斥HTML规则，在结构上也基本相似，但如果仔细比较，它有两点不同。

1．定义文档类型

在XHTML文档第一行新增了<!DOCTYPE>元素，该元素用来定义文档类型。DOCTYPE是document type（文档类型）的简写，它设置XHTML文档的版本。使用时应注意该元素的名称和属性必须大写。

DTD（如xhtml1-transitional.dtd）表示文档类型定义，里面包含了文档的规则，网页浏览器会根据预定义的DTD来解析页面元素，并把这些元素所组织的页面显示出来。要建立符合网页标准的文档，DOCTYPE声明是必不可少的关键组成部分，除非你的XHTML确定了一个正确的DOCTYPE，否则页面内的元素和CSS不能正确生效。

2．声明命名空间

在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace的缩写，中文翻译为命名空间（也有人翻译为名字空间、名称空间）。命名空间是收集元素类型和属性名字的一个详细DTD，它允许通过一个URL地址指向来识别命名空间。

XHTML是HTML向XML过渡的标识语言，它需要符合XML规则，因此也需要定义名字空间。但是XHTML 1.0还不允许用户自定义元素，因此它的命名空间都相同，就是“http://www.w3.org/1999/xhtml”。这也是每个XHTML文档的xmlns值都相同的缘故。

1.2.3　HTML5基本结构

视频讲解

HTML5文档允许省略<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型，简化<meta>元素的charset属性值，省略<p>元素的结束标记、使用<元素／>的方式来结束<meta>元素，以及<br>元素等语法知识要点。

【示例】一个简单的HTML5文档基本结构如下。

    <!DOCTYPE html>
    <meta charset="UTF-8">
    <title>HTML5基本语法</title>
    <h1>HTML5的目标</h1>
    <p>HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
    <br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出
了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。

这段代码在IE浏览器中的运行结果如图1.4所示。

图1.4　编写HTML5文档

本周热推：
Java高手真经（高级编程卷）：Java Web高级开发技术EOS区块链应用开发指南SaaS攻略：入门、实战与进阶WebAssembly原理与核心技术小程序，大未来：微信小程序开发
上一章目录下一章