【Web 前端】HTML、XHTML、XML 有什么区别?

简介: 【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?

image.png

HTML、XHTML和XML是三种不同的标记语言,各自具有不同的特点和用途。在前端开发中,理解它们之间的区别非常重要。让我们详细分析它们,并提供示例代码以便更好地理解。

HTML (HyperText Markup Language)

HTML是最常见的标记语言之一,用于创建网页的结构和内容。它使用预定义的标签来定义文档的结构,例如标题、段落、链接等。HTML是一种相对宽松的语言,对语法和标签的使用有一定的灵活性。

特点:

  • HTML用于创建网页的结构和内容。
  • 具有相对宽松的语法,允许一些不严格的语法。
  • 常见的文件扩展名是.html.htm

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example of HTML.</p>
</body>
</html>

XHTML (eXtensible HyperText Markup Language)

XHTML是HTML的一种更严格、更规范化的版本,基于XML语法。它要求所有的标签必须被正确嵌套和闭合,并且属性值必须用引号括起来。XHTML的目标是使HTML更加模块化、可扩展和符合XML标准。

特点:

  • XHTML是HTML的一种更严格的形式,基于XML语法。
  • 所有的标签必须被正确地嵌套和闭合。
  • 属性值必须用引号括起来。
  • 常见的文件扩展名是.xhtml

示例代码:

<!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 charset="UTF-8" />
    <title>XHTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example of XHTML.</p>
</body>
</html>

XML (eXtensible Markup Language)

XML是一种通用的标记语言,用于描述数据的结构。与HTML和XHTML不同,XML不是用于显示网页的,而是用于存储和传输数据。XML没有预定义的标签,允许用户自定义标签,因此非常灵活。

特点:

  • XML用于描述数据的结构。
  • 没有预定义的标签,允许用户自定义标签。
  • 常见的文件扩展名是.xml

示例代码:

<?xml version="1.0" encoding="UTF-8"?>
<note>
    <to>John</to>
    <from>Jane</from>
    <heading>Reminder</heading>
    <body>Don't forget the meeting tomorrow!</body>
</note>

区别对比

现在让我们比较一下这三种标记语言的主要区别:

特性 HTML XHTML XML
用途 创建网页的结构和内容 创建网页的结构和内容 描述数据的结构
语法 相对宽松,允许一些不严格的语法 严格,要求所有标签必须正确闭合 自由灵活,允许自定义标签
标签闭合 有些标签可以不闭合 所有标签必须闭合 所有标签必须闭合
属性值 属性值可以不用引号括起来 属性值必须用引号括起来 属性值可以用引号括起来,也可以不用
文件扩展名 .html 或 .htm .xhtml .xml

总结

  • HTML用于创建网页的结构和内容,XHTML是HTML的一种更严格、更规范化的形式,而XML用于描述数据的结构。
  • HTML相对宽松,允许一些不严格的语法,而XHTML要求更严格,所有标签必须正确闭合。
  • XML具有最大的灵活性,允许用户自定义标签和结构,常用于数据的交换和存储。

理解这些标记语言的区别对于前端开发人员至关重要,因为它们决定了你在项目中选择使用的语言和标准,以及对应的编写规范。

相关文章
|
8天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
235 91
|
8天前
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
45 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
8天前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
8天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
40 28
|
10天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
37 19
|
8天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
29 15
|
10天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
7天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
7天前
|
前端开发
|
7天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。