XHTML 语法规则及 HTML/XHTML(XHTML 1.0/XHTML 1.1 和 HTML 4.01/HTML 5) 文档类型说明

简介: XHTML 语法规则及 HTML/XHTML(XHTML 1.0/XHTML 1.1 和 HTML 4.01/HTML 5) 文档类型说明

文章目录


前言

可扩展超文本标记语言(英语:eXtensible HyperText Markup Language,XHTML),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML 是一种基于标准通用标记语言(SGML)的应用,是一种非常灵活的置标语言,而 XHTML 则基于可扩展标记语言(XML),XML 是 SGML 的一个子集。XHTML 1.0 在 2000 年 1 月 26 日成为 W3C 的推荐标准。通过本文我们将进一步了解 XHTML 语法规则及 HTML/XHTML(XHTML 1.0/XHTML 1.1 和 HTML 4.01/HTML 5) 文档类型说明的发展历史。

image.png


我们都知道 XHTML 是 HTML 向 XML 发展的一种过渡技术,它是使用 XML 的规则对 HTML 4.0 进行的扩展。

一、XHTML 语法规则

标准的 XHTML 遵循严格的 XML 语法规则。这些规则主要如下:

  1. 文档之首必须使用 DOCTYPE 声明。
  2. 文档的根元素必须是 html,并且必须为其指定命名空间,例如:
 <html xmls="http://www.w3.org/1999/xhtml">
  1. 元素必须正确嵌套。即当有标记嵌套使用时,必须先结束里层的标记,再结束外层的标记,例如:
<b>标记嵌套<font color="red">错误!</b></font>
<b>标记嵌套<font color="red">正确!</font></b>
  1. 标记必须成对使用。每个元素都必须有结束标记,除非在 DTD 中将其声明为 EMPTY。对于单标记,必须在开始标记的右尖括号前加一反斜线,如<br/>
  2. 标记名和属性名必须小写。
  3. 属性值必须用引号括起来,并且引号必须在英文状态下输入。
  4. 每个属性都必须有属性值。HTML 标记的属性可以没有值,而 XHTML 规定所有属性都必须有一个确定的值,没有值得以属性名作为属性值,例如:
 <input type="checkbox" name="shirt" value="short" checked="checked">
  1. 使用 id 作为标记的标识属性。
  2. <script>和<style>标记必须设置 type 属性。

二、XHTML、HTML 文档类型说明

规范的 HTML/XHTML 文档需要以<!DOCTYPE>标记开始。DOCTYPE 是 document type 的简写,主要用来说明所使用的 XHTML 或者 HTML 是什么版本,以及按什么规范来解析网页。

解析规范由 DOCTYPE 定义的 dtd(文档类型定义)所指定,dtd 规定了使用通用标记语言的网页语法。

三、XHTML 文档类型

XHTML 1.0 提供了以下 3 种类型的 DOCTYPE。

3.1、XHTML 1.0 过渡类型(Transitional)

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

基本格式如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.2、XHTML 1.0 严格类型(Strict)

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

基本格式如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.3、XHTML 1.0 框架类型(Frameset)

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

基本格式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

3.4、XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

基本格式如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

四、HTML 文档类型

4.1、HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

基本格式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

4.2、HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

基本格式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

4.3、HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

基本格式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

4.4、HTML 5

基本格式如下:

<!DOCTYPE html>

总结

本文简单总结了 XHTML 语法规则以及 HTML/XHTML 文档类型说明。现在 HTML 5 基本普及,也给我们程序员带来很多便捷,我们无须再去记一堆约束信息。虽然大多时候都是 IDE 生成的,我们也需要对这个发展历史做一个简单的了解。

image.png


我是白鹿,一个不懈奋斗的程序猿。望本文能对你有所裨益,欢迎大家的一键三连!若有其他问题、建议或者补充可以留言在文章下方,感谢大家的支持!


相关文章
|
3月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
78 5
|
4月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)
本文介绍了Twaver HTML5中的形状连线(ShapeLink),包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型:直线(lineto)、正交(orthogonalto)、二次贝塞尔曲线(quadto)和三次贝塞尔曲线(cubicto),并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
62 3
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
50 5
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
|
3月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
107 1