DOCTYPE和XHTML的相关认识

DOCTYPE 是一种文档类型定义,它使得浏览器知道文档使用哪种规范解析。在 HTML 中,DOCTYPE 是必须的,否则浏览器将无法正确显示页面。而在 XHTML 中,DOCTYPE 不仅是必须的,还与 XHTML 版本紧密相关。

常用的 DOCTYPE 有以下几种:

  • HTML5:<!DOCTYPE html>
  • HTML 4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

一般情况下,我们推荐使用 HTML5 作为 DOCTYPE,因为它最简洁、最具可读性,并且支持最新的 HTML 特性。在任何情况下,必须确保 DOCTYPE 是正确的。

XHTML 是一种基于 XML 的 HTML 版本,它更严谨、更标准化,因此更容易与其他 XML 应用程序集成。XHTML 要求文档严格遵循 XML 规范,必须有正确的 DOCTYPE,不能包含任何错误的标签或属性,所有标签必须要有相应的结束标签。XHTML 支持 XML 命名空间,并使用更多的小写字母。

以下是两个示例说明:

示例 1:HTML5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML5 DOCTYPE 示例</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

这是一个 HTML5 文档,它使用最简单的 DOCTYPE,只需指定 <!DOCTYPE html>,然后就可以使用 HTML5 特性,比如语义化标签、音视频元素、Canvas 元素等等。

示例 2:XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML 1.0 DOCTYPE 示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

这是一个 XHTML 1.0 文档,它必须有正确的 DOCTYPE,使用严格模式,所有标签和属性必须要符合 XML 的规范。XHTML 还需要在文档头指定 XML 命名空间 (xmlns="http://www.w3.org/1999/xhtml")和 XML 语言 (xml:lang="en")。这段示例代码不仅是 XHTML 1.0 严格模式的示例,也是 XML 的示例,XML 是一种通用的标记语言,广泛应用于数据存储和传输。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:DOCTYPE和XHTML的相关认识 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • ui组件之input多选下拉实现方法(带有搜索功能)

    下面是详细的攻略过程: UI组件之Input多选下拉实现方法(带有搜索功能) 在前端开发中,多选下拉框是十分常见的一种UI组件。那么如何实现这样一个组件呢?接下来我们将使用HTML、CSS和JavaScript来实现一个具有搜索的多选下拉框。 1. HTML结构 首先,在HTML中,我们需要一个输入框和一个下拉框。下拉框中可以用列表展示选项。基本的HTML结…

    css 2023年6月9日
    00
  • CSS实现元素居中原理解析

    CSS实现元素居中有多种方法,下面将逐一介绍以及加以分析。 1. 相对定位 + 负偏移 在HTML中,我们可以为需要居中的元素设置相对定位(position: relative;), 然后通过负偏移(top: -50%; left: -50%;)将元素移动到其外层容器的正中心。 .container { position: relative; } .cent…

    css 2023年6月10日
    00
  • CSS3中的元素过渡属性transition示例详解

    CSS3中的元素过渡属性transition示例详解 CSS3中的元素过渡属性transition是指在我们提供一定的时间,从一种CSS样式过渡到另一种样式的效果。它可以实现鼠标滑过、单击、焦点等交互时的过渡效果,是实现网页动画效果的重要技术之一。本文将介绍transition的用法、示例,并提供代码和效果演示。 语法格式 transition有若干个可设的…

    css 2023年6月10日
    00
  • 针对浏览器隐藏CSS之独孤九剑

    首先, 针对浏览器隐藏CSS之独孤九剑,需要了解 CSS的三种隐藏方式: display:none; 元素被完全隐藏,并且不占用页面空间 visibility:hidden; 元素被隐藏,但仍占用页面空间 opacity:0; 元素被透明化,但仍占用页面空间 以下是对应的攻略: 隐藏方式一:display:none; 方法一:通过Chrome开发者工具修改 …

    css 2023年6月10日
    00
  • 主流浏览器css兼容问题汇总

    下面就是“主流浏览器css兼容问题汇总”的完整攻略: 概述 随着不同浏览器的出现,每个浏览器都有其特定的CSS规则,这就使得在不同的浏览器中页面的样式可能会不一样。因此,解决主流浏览器的CSS兼容问题,成为Web前端开发中的重要任务。 具体步骤 1. 确定主流浏览器 我们需要确定目前主流浏览器的种类,以下为主流浏览器的名称:- Chrome- Firefox…

    css 2023年6月9日
    00
  • CSS3制作半透明边框(Facebox)类似渐变

    下面是关于“CSS3制作半透明边框(Facebox)类似渐变”的详细攻略: 1. 什么是Facebox效果 Facebox效果是指通过CSS3技术制作的一种类似渐变的半透明边框效果,可以用于美化网页中的图片、文本框等元素,突出他们的重要性和美观度。Facebox效果具有注重细节、奇妙而简洁的特点,而且可以实现的方式也非常简单,接下来我将向你介绍Facebox…

    css 2023年6月9日
    00
  • jquery animate实现鼠标放上去显示离开隐藏效果

    要实现“jquery animate实现鼠标放上去显示离开隐藏效果”的效果,我们可以按照以下步骤进行: 第一步:编写HTML结构 首先,我们需要编写一个HTML结构,例如: <div class="box"> <img src="image.jpg"> <div class="o…

    css 2023年6月10日
    00
  • css选中父元素下的第一个子元素(:first-child)

    在 CSS 中,我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个完整攻略,包含了如何使用 :first-child 伪类选中父元素下的第一个子元素的过程和两个示例说明。 使用 :first-child 伪类选中父元素下的第一个子元素 我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个示例:…

    css 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部