8、XHTML与HTML：网页开发的技术解析-CSDN博客

XHTML与HTML：网页开发的技术解析

在网页开发的领域中，HTML和XHTML是两个至关重要的概念。了解它们的特点、区别以及如何运用，对于创建高质量的网页至关重要。

1. HTML空白处理与XHTML的革新

在HTML里，空白、制表符和空行在文本格式化时基本被忽略。例如下面两段代码：

<p><strong>XHTML</strong> is the next big thing.</p>

和

<p>            <strong>XHTML</strong>   is     the      next
big
thing.</p>

在浏览器中显示效果是一样的，都会显示为 “XHTML is the next big thing.”。这种处理方式让编写HTML文档更灵活，但不能依靠传统的制表符和空格来手动格式化和对齐文本，而需要使用CSS指令。

HTML在20世纪90年代引发了网络革命，但随着网络的发展，其缺点逐渐显现。它过于宽松灵活，规则不一致且存在很多草率的捷径，这在处理复杂平台和环境（如手机和手持设备）上的复杂页面时会导致歧义等问题。

XHTML基于可扩展标记语言（XML）技术，是HTML的升级版，组织和结构更优。未来的网页开发都将聚焦于XHTML，因此强烈建议使用XHTML来开发网页。

2. HTML与XHTML的区别

XHTML和HTML有以下明显区别：
- 大小写要求 ：XHTML的元素和属性必须是小写。HTML大小写不敏感，如 <table> 、 <TABLE> 和 <tAbLe> 被视为相同；而在XHTML中，所有元素和属性名必须是小写字母。
- 元素闭合 ：XHTML元素必须始终闭合。在HTML中，一些标签常只使用开始标签，如 <p> 、 <br> 和 <hr> ；但在XHTML中，每个开始标签都需要有匹配的结束标签，如 <p> 标签需要 </p> 来闭合。
- 空元素简写 ：空的XHTML元素可以使用简写符号 “/>” 来闭合。例如 <hr> 元素，在XHTML中可以写成 <hr/> 。常见的自闭合XHTML元素包括 br 、 hr 、 img 、 input 、 link 和 meta 。
- 根元素要求 ：XHTML文档必须有一个根元素来包含所有其他元素。虽然大多数HTML页面会将代码包含在 html 元素中，但技术上可以没有；而XHTML文档必须将所有元素包含在 html 根元素内。
- 图片替代文本属性 ：在XHTML中，图片元素 img 必须有 alt 属性来提供图片的替代文本描述，而在HTML中该属性是可选的。
- DOCTYPE要求 ：XHTML文档必须有有效的DOCTYPE声明，而HTML后期版本只是鼓励使用。

3. 网页文档结构

一个HTML文档通常由头部（head）和主体（body）两部分组成。头部包含文档的重要信息，主体包含页面的内容和格式化元素。以下是一个基本的HTML页面结构示例：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<title>Untitled Document</title>
</head>
<body>
Content goes here.
</body>
</html>

4. 各元素解析

DOCTYPE元素 ：DOCTYPE元素看起来很奇怪，它以感叹号开头，名称全大写，属性不遵循常规的名值对规则，且没有闭合标签。它实际上不是HTML或XHTML元素，而是文档类型声明，用于声明文件包含的文档类型和所使用的HTML或XHTML版本。浏览器通过它来确定如何准确高效地渲染页面，它只出现在HTML或XHTML文档的顶部，在 html 元素之前。
DOCTYPE有三种基本类型：
Strict ：最严格，要求将呈现指令编码在级联样式表（CSS）中，而不是HTML或XHTML中。不允许使用的元素有 center 、 font 、 iframe 、 strike 和 u 等；不允许使用的属性有 align （某些表格元素除外）、 alink 、 background 等。
Transitional ：更灵活，允许保留一些旧的HTML呈现元素和属性，但这只是将旧的HTML代码转换为新标记标准的临时解决方案，W3C预计最终会淘汰这种类型。
Frameset ：用于在文档中放置框架。

建议除非有充分理由，否则使用Strict DOCTYPE，这样能确保网页代码不过时，且浏览器使用最严格的渲染方式，让你对页面显示有更大的控制权。

以下是典型的DOCTYPE声明：
| DTD | Declaration |
| — | — |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> |

html元素 ： html 元素就像一个信封，用于包裹所有内容。在传统HTML中， html 元素没有参数；在XHTML中，需要声明XML命名空间，如 <html xmlns=”http://www.w3.org/1999/xhtml”> 。
head元素 ： head 元素用于存储与文档相关的信息，但这些信息不会在浏览器中作为内容显示。它包含文档标题、外部样式或脚本文件的链接以及其他元信息，如字符集或文档作者。
title元素 ： title 元素位于 head 元素内，其内部的文本为文档提供描述性标题，浏览器通常会在窗口或标签中显示该标题。标题对搜索引擎也非常重要，谷歌等搜索引擎在评估网页时会重点考虑标题内容，它也是搜索结果列表中每个主要条目的标识。因此，标题应限制在80个字符以内，且要富有表现力和描述性，还可以巧妙地融入与页面相关的关键词。
meta元素 ： meta 元素用于指定文档的元信息，如作者、日期、关键词、内容描述和字符集等，包含这些信息的标签常被称为元标签。使用 meta 元素有两个规则：必须放在 head 元素内；从不包含它所描述的内容，且总是自闭合（以 /> 结尾）。
- 内容类型声明 ：用于向浏览器声明文档的内容，如 <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> ，大多数网站构建器在创建新文档时会自动添加此信息。
- Meta描述 ：搜索引擎常将其作为搜索结果列表中页面摘要文本的来源。例如 <meta name=”description” content=”Wimbly Tech Online solves all of your technology needs in 5 seconds or less.”/> ，但谷歌等搜索引擎会忽略它，而是根据文档内容自动生成摘要文本。如果使用该标签，建议使用HTML页面内容前几句话作为描述。
- Meta关键词 ：曾是向搜索引擎提供特定关键词以便索引网页的常用方式，但由于多年来被网站设计师滥用，现在重要性大大降低，大多数主要搜索引擎都忽略它。如果要提供给仍使用该标签的搜索引擎，代码如下： <meta name=”keywords” content=”Waterslides,Hoses,Water fun,HydroDance” /> 。使用时要注意：关键词数量限制在20个以内；避免重复单词；只使用与文档内容相关的关键词。
body元素 ： body 元素包含网页的内容，是大部分实际工作的地方。放在开始和结束 body 标签之间的任何文本都会在浏览器中显示。例如：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<title>Creating Web Pages</title>
</head>
<body>
All of the text I place inside the document body is shown in the browser.
</body>
</html>

在浏览器中查看该页面时， body 内的文本会显示，其他内容则对用户隐藏，同时 title 元素的内容会显示在浏览器窗口的标题栏中。

5. 网页文本与链接处理

虽然图像和视频吸引了很多关注，但网页的核心仍然是文本和链接。下面介绍如何使用常见的HTML元素来显示和格式化网页上的文本，以及如何创建到其他网页的链接。

6. 文档结构处理

任何编写和编辑的文档都至少有基本的结构和格式，否则文本很难阅读。在处理HTML文档时，不能像使用老式打字机那样通过按Enter和Tab键来格式化，需要给文档赋予内置结构。
- 段落处理 ： p 元素用于包含一段文本，开始标签 <p> 放在段落开头，结束标签 </p> 放在结尾。例如：

<p>”Not much of a blowing up, I am sure,” Mrs. Ellison said; “and as likely as not, a shilling at the end of it.”</p>
<p>”Well, Mary, I must own,” the squire said pleasantly, “that a shilling did find its way out of my pocket into his.”</p>

每个段落会显示为一个文本块，结尾会有一个额外的空行与下一段落分隔。在使用传统HTML时，建议给段落添加结束标签 </p> ，因为XHTML要求必须闭合。
- 换行处理 ： br 元素用于手动结束一行或创建空行，相当于在电子邮件或文字处理文档中按Enter键开始新行。它使用时会强制换行，且不会在其他段落周围添加空格，常位于 p 元素内。例如：

<p>”Not much of a blowing up, I am sure,”<br/>
Mrs. Ellison said.<br/>
“And as likely as not, a shilling at the end of it.”</p>

标题设置 ：HTML支持六级标题，分别由 h1 、 h2 、 h3 、 h4 、 h5 和 h6 元素表示， h1 最大， h6 最小。示例如下：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

水平线添加 ：可以使用 hr 元素在文档中添加水平线来分隔文本块。例如：

<p>The next day Mrs. Whitney and Reuben moved, with all their belongings, to Lewes.</p>
<hr/>
<h1>Chapter 3: The Burglary At The Squire’s.</h1>
<p>”What is that woman Whitney going to do with her boy?” the squire asked the schoolmaster, when he happened to meet him in the village about a month after she had left. “Have you heard?”</p>

综上所述，掌握HTML和XHTML的特点及运用方法，对于创建高质量、兼容性好的网页至关重要。在实际开发中，应根据需求选择合适的DOCTYPE类型，合理运用各种元素来构建网页结构和处理文本内容。

XHTML与HTML：网页开发的技术解析

7. 文本样式处理

在网页开发中，除了构建文档结构，文本样式的处理也十分关键。以下为你介绍一些常见的文本样式设置方法。

7.1 加粗与斜体文本

在HTML中，可使用 <strong> 和 <em> 元素分别实现文本加粗和斜体效果。示例代码如下：

<p><strong>这段文本会显示为加粗样式。</strong></p>
<p><em>这段文本会显示为斜体样式。</em></p>

在浏览器中， <strong> 元素内的文本会以加粗形式呈现，而 <em> 元素内的文本则会以斜体形式呈现。

7.2 指定字体属性

虽然现在更推荐使用CSS来设置字体属性，但在HTML中也可以进行基本的字体设置。不过，在严格的DOCTYPE类型下，部分HTML字体属性是不被允许的，建议优先使用CSS。以下是一个简单的HTML字体设置示例：

<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">这段文本使用Arial字体，字号为16px，颜色为深灰色。</p>

在上述代码中，通过 style 属性直接在元素内设置了字体家族、字号和颜色。

8. 链接的创建

链接是网页的重要组成部分，它可以实现页面之间的跳转以及与外部资源的连接。以下介绍如何创建不同类型的链接。

8.1 网页链接

要创建指向其他网页的链接，可使用 <a> 元素。示例代码如下：

<p>点击 <a href="https://www.example.com">这里</a> 访问示例网站。</p>

在上述代码中， href 属性指定了链接的目标地址，用户点击 “这里” 文本时，浏览器会跳转到 https://www.example.com 页面。

8.2 电子邮件链接

创建电子邮件链接可以方便用户直接向指定邮箱发送邮件。使用 <a> 元素并将 href 属性设置为 mailto: 加上邮箱地址。示例代码如下：

<p>如有疑问，请 <a href="mailto:info@example.com">联系我们</a>。</p>

用户点击 “联系我们” 文本时，浏览器会打开默认的邮件客户端，并自动填写收件人地址为 info@example.com 。

9. 总结与建议

通过前面的介绍，我们了解了HTML和XHTML的区别、网页文档结构、文本处理以及链接创建等方面的知识。为了更好地进行网页开发，以下给出一些总结和建议：

9.1 选择合适的DOCTYPE类型

建议优先选择Strict DOCTYPE，除非有特殊需求。这样可以确保代码的规范性和可维护性，同时让浏览器以最严格的方式渲染页面，提高页面的兼容性和性能。

9.2 遵循XHTML规范

由于未来的网页开发趋势是XHTML，因此在编写代码时应遵循XHTML的规范，如元素和属性使用小写、元素必须闭合、图片添加 alt 属性等。

9.3 合理使用CSS

虽然HTML可以进行一些基本的样式设置，但为了实现更灵活、可维护的页面样式，建议使用CSS来处理页面的呈现效果。将样式代码与HTML结构分离，便于后续的修改和扩展。

9.4 优化标题和元标签

标题和元标签对搜索引擎优化非常重要。标题应简洁明了，包含关键信息和关键词；元描述要准确概括页面内容；元关键词虽然重要性降低，但合理使用仍有一定帮助。

10. 流程图示例

下面通过mermaid格式的流程图展示一个简单的网页开发流程：

graph LR
    A[需求分析] --> B[选择DOCTYPE类型]
    B --> C[构建HTML结构]
    C --> D[添加内容和链接]
    D --> E[使用CSS设置样式]
    E --> F[测试和优化]
    F --> G[上线发布]

11. 表格总结

12. 操作步骤总结

在实际的网页开发过程中，可按照以下步骤进行：
1. 需求分析 ：明确网页的功能和内容需求。
2. 选择DOCTYPE类型 ：根据项目需求和兼容性要求，选择合适的DOCTYPE类型，如Strict、Transitional或Frameset。
3. 构建HTML结构 ：创建 html 、 head 和 body 元素，在 head 中添加必要的元信息和标题，在 body 中添加页面内容。
4. 添加内容和链接 ：使用各种HTML元素添加文本、图片、链接等内容，确保元素闭合和属性设置正确。
5. 使用CSS设置样式 ：通过外部样式表或内联样式设置页面的字体、颜色、布局等样式。
6. 测试和优化 ：在不同浏览器和设备上测试页面，检查兼容性和性能问题，并进行优化。
7. 上线发布 ：将优化后的网页部署到服务器上，正式发布。