- HTML5+CSS3+JavaScript从入门到精通（微课精编版）
- 前端科技
- 1305字
- 2021-03-29 23:34:31
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文档