HTML 版本

HTML 版本历史

HTML4/ 4.01 (SGML)

HTML4/4.01（标准通用标记语言版本）是一种基于 SGML（标准通用标记语言）的 HTML（超文本标记语言）版本，它由 W3C（World Wide Web Consortium，万维网联盟）于 1997 年发布，是 HTML4 系列标准的第一个版本。HTML4/4.01 的设计旨在为开发者提供一种结构清晰、语义明确的标记语言，以实现网页内容的丰富和交互。

它的很多特性都属于 XHTML 1.0，但是不同的是，HTML4.01 使用文档类型声明 (DOCTYPE) 描述文档的语义概念，并使用 DTD(文档类型定义) 声明，以保证 HTML4.01 代码的神经性渲染。

HTML4/4.01 的主要特点包括：

结构化标记语言：HTML4/4.01 遵循 SGML 标准，可以通过定义 DTD（文档类型定义）来规范文档结构和标记使用。
支持网页交互：HTML4/4.01 引入了表单（form）元素和相关的输入控件（input、select、textarea 等），可以用于实现用户输入、提交和数据交互等功能。
多媒体支持：HTML4/4.01 支持插入多媒体内容，如图像（img 元素）、音频（audio 元素）、视频（video 元素）等。
样式和布局：HTML4/4.01 提供了一些基本的样式和布局元素，如表格（table 元素）和列表（ul、ol 元素）等。
国际化支持：HTML4/4.01 支持多语言和多字符集，可以通过声明语言（lang 属性）和字符集（meta 标签）等方式进行指定。

HTML4/4.01 是历史上广泛使用的 HTML 标准之一，但现在已经被 HTML5 所取代。与 HTML5 相比，HTML4/4.01 在语义化、多媒体处理、表单控件、脚本编程等方面存在一些局限，但对于一些老旧的网站和系统仍然有一定的应用价值。

XHTML(XML)

XHTML(可扩展超文本标记语言) 是一种使用 XML（可扩展标记语言）语法编写的标记语言，它是 HTML（超文本标记语言）的一种扩展，用于描述 Web 页面的结构和内容。与 HTML 不同，XHTML 是一个更加严格和模块化的标记语言，它遵循 XML 的语法规则，使得 Web 页面更加标准化和易于解析。

XHTML 的主要特点包括：

语法严格：XHTML 必须符合 XML 语法规则，包括标签必须有开始和结束标记，标签必须嵌套正确，所有属性必须用引号括起来等等。
可扩展性：XHTML 的模块化设计使得它可以被扩展和定制，开发人员可以根据需要定义自己的标签和属性。
与 XML 和其他 Web 技术的兼容性：XHTML 可以与 XML、CSS、JavaScript 等其他 Web 技术完美集成，使得 Web 开发更加灵活和强大。
支持面向未来的 Web 应用：XHTML 为 Web 应用开发提供了强有力的基础，能够满足各种新型 Web 应用的需求，比如语义化的 Web 内容、可访问性和可用性等。
基于 XML 的语法。这使得 XHTML 文档更容易被计算机处理，可以方便地使用各种工具和技术来解析、转换和生成 XHTML 文档。

XHTML 有三个版本，分别为 XHTML 1.0、XHTML 1.1 和 XHTML 2.0，其中 XHTML 1.0 是目前最广泛使用的版本。与 HTML4/4.01（SGML）相比，XHTML 更加严格和模块化，也更加可扩展和面向未来的 Web 应用。

总的来说，XHTML 是一种可扩展的、基于 XML 的标记语言，它强制要求严格的语法和规则，使得 Web 页面更具一致性和可预测性。它还具有良好的可处理性和可扩展性，可以与其他 XML 文档集成使用，帮助开发者构建更加灵活和强大的 Web 应用程序。

HTML5

HTML5 是一种用于创建 Web 页面的最新版本的 HTML（超文本标记语言）标准。它于 2014 年被 W3C 正式发布，旨在提供更加丰富和灵活的 Web 页面功能。

HTML5 引入了许多新特性，其中最重要的是：

语义化标记：HTML5 提供了一组新的语义化标签，如 header、nav、article 和 section 等，使得 Web 页面更具结构化和语义化。
多媒体支持：HTML5 支持内置的视频和音频标签，使得开发者可以更轻松地嵌入多媒体内容，而不需要使用第三方插件。
Canvas 和 SVG：HTML5 引入了 Canvas 和 SVG 两种绘图技术，使得开发者可以使用 JavaScript 创建更加复杂和交互性的图形和动画。
Web 存储：HTML5 支持 Web 存储技术，如本地存储和会话存储，使得开发者可以将数据保存在浏览器端，实现更好的用户体验和性能。
Web Workers 和 Web Sockets：HTML5 引入了 Web Workers 和 Web Sockets 技术，使得开发者可以在后台运行 JavaScript 程序，并实现实时通信和数据传输。
移动设备支持：HTML5 支持响应式 Web 设计和移动设备优化，使得 Web 页面可以适应不同的屏幕尺寸和设备类型。

总的来说，HTML5 是一个更加现代化、功能更加丰富和灵活的 Web 标准，它提供了许多新特性和技术，使得开发者可以更好地构建 Web 应用程序，并提供更好的用户体验和性能。

HTML 版本区别

HTML4	XHTML	HTML5
标签允许不结束	标签必须结束	标签允许不结束
属性不用带引号	属性必须带引号	属性不用带引号
标签属性可大写	标签属性必须小写	标签属性可大写
Boolean 属性可省略值	Boolean 属性必须写值	Boolean 属性可省略值

HTML 检查

网站：The W3C Markup Validation Service

Markup Validation（标记验证）指的是检查 HTML、XML 或其他标记语言文档是否符合其规范或标准的过程。通常使用验证工具或服务进行检查，如 W3C（万维网联盟）提供的在线 HTML Validator 或 XML Validator。

标记验证的主要目的是确保文档的结构和语义正确，符合标准和规范，从而提高文档的可访问性、可维护性和可靠性。标记验证可以帮助开发者发现和修复文档中的错误、警告和建议，如缺少必要的元素或属性、使用了不合法的标记或属性、嵌套错误、语义不清等问题。

标记验证也有助于确保文档在不同浏览器和设备上的显示效果一致，从而提高用户体验和网站的可用性。

valid xhtml

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=utf-8" />
    <title>test</title>
  </head>
  <body>
    <div class="test">合法</div>
    <div class="test">标签名大写</div>
    <div id="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束 1</p>
    <p>标签不结束 2</p>
    <div style="color:red">属性不带引号</div>
  </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=utf-8" />
    <title>test</title>
  </head>
  <body>
    <div class="test">合法</div>
    <div class="test">标签名大写</div>
    <div id="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束 1</p>
    <p>标签不结束 2</p>
    <div style="color:red">属性不带引号</div>
  </body>
</html>

valid html

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
  </head>
  <body>
    <div class="test">标签名大写</div>
    <div id="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束 1</p>
    <p>标签不结束 2</p>
    <div style="color:red">属性不带引号</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
  </head>
  <body>
    <div class="test">标签名大写</div>
    <div id="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束 1</p>
    <p>标签不结束 2</p>
    <div style="color:red">属性不带引号</div>
  </body>
</html>

HTML5 新增的内容

语义化元素

这些标签的使用有助于更好地描述网页的结构和内容，让开发者和搜索引擎更容易地理解网页的内容，提高网页的可访问性和可维护性。同时，这些标签的使用也有利于 SEO，因为搜索引擎可以更好地理解网页的内容和结构，提高网页的排名。

<header> 元素：表示页面或者页面某一部分的标题区域，通常包含网站的标识、主导航等内容。
<nav> 元素：表示导航部分，通常包含站点内的链接，用于指向其他页面或其他部分。
<main> 元素：表示页面的主体内容区域，通常包含除页眉、页脚和侧边栏之外的大部分内容。
<article> 元素：表示页面或者页面某一部分的独立内容，通常是指具有完整意义的、独立于页面其他部分的文章、博客、评论等。
<section> 元素：表示文档的一个区域或者一个章节，通常包含一个标题。
<aside> 元素：表示与页面主体内容相关但不是主要内容的部分，通常包含边栏、广告、相关文章、标签云等内容。
<footer> 元素：表示页面或者页面某一部分的页脚区域，通常包含版权信息、联系方式、站点地图等内容。
<em> 元素：用于强调文本。通常情况下，浏览器会使用斜体来显示 <em> 元素中的文本。
<strong> 元素：用于表示更强烈的重点或重要性。通常情况下，使用加粗来显示 <strong> 元素中的文本。
<i>元素：用于表示与周围文本不同的一些文字，通常表现为斜体。常用于表示某些术语、技术术语、外国语单词或其他文本片段，这些文本片段不需要引起强调，但需要与周围的文本区别开来。
em vs i
在 HTML5 中，<i> 元素用于表示与周围文本不同的一些文字，通常表现为斜体。然而 <i> 元素并不是用来强调或者表示强调的文本，应该使用 <em> 元素来实现这种效果。
html
```
<p>在计算机科学中，<i>递归</i>是一种常见的算法。</p>
<p>"Bonjour"是法语中的<i>你好</i>。</p>
```
```
<p>在计算机科学中，<i>递归</i>是一种常见的算法。</p>
<p>"Bonjour"是法语中的<i>你好</i>。</p>
```
1
2
<i> 元素用于表示特定术语或外语单词，这些文本片段与周围文本不同，但也不需要强调。在视觉上，浏览器通常会将 <i> 元素中的文本呈现为斜体。

表单增强

引入了一些新的 input 元素的 type 属性：

date：用于选择日期。
time：用于选择时间。
datetime 和 datetime-local：用于选择日期和时间。
week：用于选择一周的某个日期。
month：用于选择一年中的某个月份。
number：用于输入数值。
range：用于选择数值范围。
search：用于搜索框。
email：用于电子邮件地址输入。
tel：用于电话号码输入。
url：用于 URL 地址输入。
color：用于颜色选择。

表单验证

使得开发者能够更容易地在客户端对用户提交的表单数据进行验证，减轻服务器端的负担，提高用户体验（之前版本只能使用 JS/Regex 进行验证）。

required：用于标记必填字段。
pattern：用于指定输入值的正则表达式模式。
min 和 max：用于限制数字或日期/时间的最小和最大值。
maxlength 和 minlength：用于限制输入字段的最大和最小长度。
email：用于检测电子邮件地址是否符合标准格式。
tel：用于检测电话号码是否符合标准格式。
url：用于检测网址是否符合标准格式。

TIP

这些验证方法仅仅是对于简单的表单输入验证，安全性较低。

自动聚焦/placeholder

使用 autofocus 属性在页面加载后光标自动将焦点设置到指定的表单元素上，使得用户可以更方便地进行输入操作。
使用 placeholder 属性，可以在表单元素中显示默认文本，提供给用户一些提示或示例。这个属性在表单元素未被填写时会显示，在用户输入内容后会自动消失。这个属性可以用来帮助用户更好地理解表单元素所期望的输入格式或内容。
TIP
需要注意的是，placeholder 属性不应该被用作必填项的提示，因为这个属性只是提供了一个视觉上的提示，但不会对表单数据进行验证。如果想要标记必填项，应该使用 required 属性。

HTML 版本 #

HTML 版本历史 #

HTML4/ 4.01 (SGML) #

XHTML(XML) #

HTML5 #

HTML 版本区别 #

HTML 检查 #

HTML5 新增的内容 #

语义化元素 #

表单增强 #

表单验证 #

自动聚焦/placeholder #