HTML的隐藏特性答案

【问题标题】：Hidden features of HTMLHTML的隐藏特性
【发布时间】：2010-10-31 13:24:36
【问题描述】：

HTML 作为最广泛使用的语言（至少作为一种标记语言）并没有得到应有的赞誉。
考虑到它已经存在了这么多年，像 FORM / INPUT 控件之类的东西仍然保持不变，没有添加任何新控件。

所以至少从现有的功能中，你知道有哪些不为人知但非常有用的功能。

当然，这个问题大致是这样的：

Hidden Features of JavaScript
Hidden Features of CSS
Hidden Features of C#
Hidden Features of VB.NET
Hidden Features of Java
Hidden Features of classic ASP
Hidden Features of ASP.NET
Hidden Features of Python
Hidden Features of TextPad
Hidden Features of Eclipse

不要提及 HTML 5.0 的特性，因为它在 working draft

请为每个答案指定一项功能。

【问题讨论】：

标签： html xhtml language-features hidden-features

【解决方案1】：

<img onerror="{javascript}" />

onerror 是一个 JavaScript 事件，将在小红叉（在 IE 中）图片显示之前触发。

您可以使用它来编写一个脚本，将损坏的图像替换为一些有效的替代内容，这样用户就不必处理红十字问题。

乍一看，这完全没用，因为，您不知道图像是否可用吗？但是，如果你考虑一下，这个东西有完美的有效应用；例如：假设您正在提供来自您无法控制的第三方资源的图像。就像我们在 SO 中的 gravatar 一样......它来自 http://www.gravatar.com/，这是 stackoverflow 团队根本无法控制的资源 - 尽管它是可靠的。如果http://www.gravatar.com/ 出现故障，stackoverflow 可以使用onerror 解决此问题。

【讨论】：

啊哈......如果这是我想的那样，当我真正需要它时，我应该早点知道。 ://
澄清一下，onerror 是一个 javascript 事件（就像 onclick 一样），它可以让您在图像加载失败时执行某些操作。
Daniel Silveira，您能否澄清一下，事实上，在图像损坏（例如 404）的情况下，这确实会运行错误代码？无论如何，这是一个 DOM 特性，而不是 HTML 特性本身。
我有一个numty使用这个，指向一个不存在的图像，递归任何人？？？

【解决方案2】：

大多数人也没有意识到您可以通过给它们一个名称/值对来区分按下的表单按钮。例如

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

在服务器端，实际按下的按钮可以通过检查与按钮名称关联的请求参数的存在来获得。如果不是null，则按下按钮。

我已经看到很多 不必要的 JS hacks/workarounds，例如根据按下的按钮预先更改表单操作或更改隐藏的输入值。简直令人惊叹。

此外，我已经看到了几乎与表格行一样多的 JS hacks/workarounds 来收集多个复选框的选中项。在每次选择/检查表行时，JS 会将行索引添加到隐藏输入元素中的某个逗号分隔值，然后在服务器端进一步拆分/解析。这是因为您没有意识到您可以为多个输入元素提供 相同的 名称但 不同的 值，并且您仍然可以在服务器端将它们作为数组访问。例如

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

不知情会给每个复选框一个不同的名称并省略整个 value 属性。在一些没有 JS-hack/workaround-free 的情况下，我还在服务器端代码中看到了一些不必要的压倒性magic，以区分选中的项目。

【讨论】：

嘿 .. 这显然是 HTML 的另一个隐藏特性 :/ ;)
如果一个表单有多个提交按钮，并且用户点击了一个，某些版本的 Internet Explorer 会高兴地告诉您的服务器它们都被点击了。太棒了。
@detly：仅当您使用 <button type="submit"> 而不是 <input type="submit"> 时：)
...buuuuut IE6 不是也有<input type="submit"> 的问题吗？（我对这个问题的记忆很模糊——我早就说服雇主不要担心内部网络应用程序的 IE 兼容性，所以这不再是我的问题。但我似乎记得在 IE6 中解决这个问题的一些障碍。 )
这对 i18n 不太友好。

【解决方案3】：

我最喜欢的是基本标签，如果你想使用路由或 URL 重写，它是一个救命稻草......

假设您位于：

www.anypage.com/folder/subfolder/

以下是此页面链接的代码和结果。

常规锚点：

<a href="test.html">Click here</a>

导致

www.anypage.com/folder/subfolder/test.html

现在如果你添加基本标签

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

锚点现在指向：

www.anypage.com/test.html

【讨论】：

您也可以只使用 /images/image.png，带有一个前导斜杠。 :-)
基本标签是一个核心选项 - 它相当于#define：如果你不跟踪它，请让未来的开发人员非常清楚，并使其成为一个非常低级的部分网站架构可能会导致令人沮丧的非明显错误。我从来没有需要这个，谨慎使用。
是的，当我尝试将 CSS 文件动态加载到页面中时，我还看到基本标记干扰了我的 JavaScript。此外，IE6 中的一个错误要求您显式关闭标记 ()，这是无效的。条件 cmets 可以帮助解决这个问题。
请注意，基本 URL 应用于每个相对 URL，而不仅仅是相对 URL 路径。所以引用 #top 将被解析为根索引文档中的“top”和同一文档中的“top”。
我发现这在我必须“查看源代码”并下载页面的 HTML 以使用它的情况下非常方便。下载源代码后，您可以添加具有相应 href 属性的 BASE 元素。这样，您只需下载源 HTML 即可在本地工作……无需下载所有的 javascript、css 和图像。

【解决方案4】：

指定用于打印的 css

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

【讨论】：

几周前发现
如果你之前没有处理过这个，我希望你之前没有做过任何生产网站......
这怎么能算隐藏？

【解决方案5】：

不太知名，但您可以为图像指定lowsrc，这将在加载图像的src 时显示lowsrc：

<img lowsrc="monkey_preview.png" src="monkey.png" />

对于不喜欢interlaced 图片的人来说，这是一个不错的选择。

一些琐事：在某个时候，这个属性非常模糊，以至于它被用于exploit Hotmail，大约在 2000 年。

【讨论】：

这个我不知道。可以用来“加载”动画吗？
我在 Opera 中收到来自“利用 Hotmail”链接的欺诈警告。 :o
这是一个安全网站，很安全。
但是这个属性是专有的。 msdn.microsoft.com/library/ms534138(VS.85).aspx
该属性自 HTML4 以来已被弃用 - 您不应在生产网站中使用它。

【解决方案6】：

<blink>

必须用于网站上的任何重要内容。最重要的网站将所有内容都包装在眨眼之间。

<marquee>

创建逼真的滚动效果，非常适合电子书等。

编辑：小伙子们，这只是一种幽默的尝试

【讨论】：

也许问题应该指明你不应该列出我们想要保持隐藏的特性。
...我使用了，作为 div 显示代码的伪终端样式的一部分 (:before {content: "drthomas@house: ~$";} :after {content: "_"; text-decoration: blink; } ...太棒了。我可能应该寻求帮助。=]
有史以来最烦人的 HTML 标签！！！这些不是隐藏的，只是没有使用是有原因的。
我用 Marquee 和 Blink 包裹我的整个页面，因为我就是那么酷
请。的唯一合法用途是：薛定谔的猫没有死了。（我以为这是在 xkcd 上，但我现在找不到。）

【解决方案7】：

用于标记键盘输入的<kbd>元素

Ctrl+Alt+Del

【讨论】：

除了字体格式不同之外， 有什么特别之处吗？如果不是这里是其他格式标记的列表？ w3schools.com/tags/tag_phrase_elements.asp
不是特别，只是不太出名，我不认为
默认情况下没有，但是像 SO 那样用 CSS 标记元素会更干净。
不知道它的存在，这很有趣。

【解决方案8】：

（IE、Firefox 和 Safari）的 contentEditable 属性

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

这将使单元格可编辑！来吧，try it，如果你不相信我的话。

【讨论】：

这个问题需要HTML5没有引入的特性
David Dorward，说它是由 HTML5 引入的并不完全公平，因为 contentEditable 是 MS 在 IE 5.5 中引入的，但是是的，它直到 HTML5 才被标准化； Tyson & Steve，contentEditable 在 2.0 版本中被引入 Safari，但许多重要的格式化方法直到 3.x 才添加； Victor H Valle，取决于您的文档类型。 HTML 4 应在折叠时将其展开为 ="true"。
try it 链接没有找到合适的例子
@Binoj - 绝对不是。 “contenteditable属性是一个枚举属性，其关键字为空字符串，true和false”——w3.org/TR/html5/editing.html
更好的是，将以下内容添加为书签，以便编辑您所在的任何网页：javascript:document.body.contentEditable='true';document.designMode='on';void( 0);

【解决方案9】：

标签标签使用“for”属性将标签与表单元素进行逻辑链接。大多数浏览器将其转换为激活相关表单元素的链接。

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

【讨论】：

是的，很少有网站积极使用它。我见过使用 js 来做这件事的网站...
最近才发现这个。
cagdas，HTML 中并没有真正隐藏的功能，它是一个指定的标准。
要扩展答案，还可以使用标签包装输入并省略 for 属性：Fiscal Year 标签>
在没有它的情况下使用复选框和单选按钮应该是犯罪行为。

【解决方案10】：

这与 HTML 关系不大，但很少有人知道。

人们滥用带有http-equiv 属性的<meta> 标签：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Refresh" content="5; url=somewhere/"/>

但是，许多开发人员甚至不知道这是做什么的。 http-equiv 属性意味着该标记旨在在您无法控制它们的情况下替换 HTTP 标头。因此，通过http-equiv 完成的大部分工作都应该在服务器端完成。

此外，它没有那么强大：一个文档的几个属性不能通过<meta> 标签来改变。 Content-Type 在<meta> 标记中可以告诉浏览器使用某个字符集，但大多数会忽略对文档 MIME 类型的任何更改（因此您不能将 text/html 文档设为 application/xhtml+xml方式）。

示例中的两个标签都应替换为这些简单的调用：

<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>

它必须适用于任何兼容 HTTP 的浏览器（这意味着几乎每一个浏览器）。

【讨论】：

需要注意的是<meta http-equiv="Refresh" content="5; url=foo">实际上在IE中触发了整页刷新（包括所有缓存的资产）。可以haz性能噩梦plx吗？ blogs.msdn.com/b/ieinternals/archive/2010/05/13/…
W3C 验证器建议在元元素中包含编码，以便用户可以将网页保存到本地文件系统。
@kibibu：实际上，这很有可能。很久以前我一直在做 XHTML 文档而不是 HTML 文档（大约 3 年前我放弃了 Internet Explorer），所以我将这些信息放在文档顶部的 <?xml?> 声明中：<?xml version="1.0" encoding="UTF-8"?>跨度>

【解决方案11】：

lang 属性不太为人所知，但非常有用。该属性用于标识整个文档或单个元素中内容的语言。语言代码以 ISO 2 字母语言代码给出（即“en”表示英语，“fr”表示法语）。

这对于可以调整引号显示等的浏览器很有用。屏幕阅读器也受益于lang 属性以及搜索引擎。

lang 属性的Sitepoint has some nice explanation。

示例

将整个文档的语言指定为英语，除非被 DOM 中较低级别的另一个 lang 属性覆盖。

<html lang="en">

将以下段落中的语言指定为瑞典语。

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

【讨论】：

【解决方案12】：

<optgroup> 是一个很棒的列表，人们在进行分段的<select> 列表时经常会错过它。

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

是你应该使用的，而不是

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

【讨论】：

【解决方案13】：

上标为<sup> x </sup>

【讨论】：

【解决方案14】：

在 X 秒内刷新页面的最简单方法 - META Refresh

<meta http-equiv="refresh" content="600">

内容中的值表示您希望页面刷新的秒数。
[编辑]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

做一个简单的重定向！
（感谢@rlb）

【讨论】：

当然，确定哪些元素需要刷新，然后通过 AJAX 更新它们会带来更好的用户体验...
META 刷新在用户表单活动也很重要的页面中并没有什么好处，因为它会中断用户的表单填写并丢弃所有工作。我认为很少有这样的更新是最好的。这只是正常的简单方法。
/me 讨厌这样刷新的页面...应该被禁止 =/
如果设置为略小于会话超时，这也很有用，以通知用户他的会话已超时并被删除。
短超时中断返回按钮。

【解决方案15】：

我最近发现了 fieldset 和 label 标签。如上，不隐藏但对表单有用。

<fieldset> explanation

例子：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

【讨论】：

请提供一个使用这个的示例。
解释：w3schools.com/TAGS/tag_fieldset.asp -- 示例：w3schools.com/TAGS/tryit.asp?filename=tryhtml_fieldset
从 aspnet mvc 示例页面中发现的字段集。 ^^
不知道这个。以下是 W3c 规范：w3.org/TR/html401/interact/forms.html#h-17.10
字段集和图例很棒。一种非常好的标记表单的方法。

【解决方案16】：

定义列表：

<dl>
  <dt>Some Term</dt>
  <dd>Some description</dd>
  <dd>Some other description</dd>

  <dt>Another Word/Phrase</dt>
  <dd>Some description</dd>
</dl>

我还为各种网站的表单布局和导航菜单重新分配了此任务。

【讨论】：

【解决方案17】：

我认为optgroup tag 是人们不经常使用的一项功能。与我交谈的大多数人都没有意识到它的存在。

例子：

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

【讨论】：

不幸的是，菜单层次结构的浏览器实现还有很多不足之处。我怀疑 optgroup 没有太多用处，因为它的相关用例很少而且相差甚远。
所有浏览器都应该支持一个级别。一个网络论坛，我不在其中，在某些屏幕上使用它来将论坛列表划分为与主页上使用的相同的部分。
@staticsan。我同意它对一些项目的小分类很有用。
@eyelidlessness：我总是看到下拉菜单缩进元素或使用某种“标题”文本，如---category---。
这是一个我不知道的简洁功能！

【解决方案18】：

Colgroup tag.

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

【讨论】：

根据我的经验，对 colgroup 的支持充其量是不稳定的。
WPF Grid 非常相似

【解决方案19】：

如果未指定<label> 标签的for 属性，则将其隐式设置为第一个子<input>，即

<label>Alias: <input name="alias" id="alias"></label>

等价于

<label for="alias">Alias:</label> <input name="alias" id="alias">

【讨论】：

但这比 for 属性享有更少的浏览器支持
@David — 你有任何文件支持吗？我认为我从未见过不支持这种用法的浏览器。我在 IE6/7、FF2/3、Safari 3 和 Chrome 1/2 中亲自测试过。我没有在 Opera 中测试过自己，但如果它不起作用，我会感到非常惊讶。此行为是原始 HTML 4.0 规范的一部分，该规范于 11 年前首次发布：w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
另外，将输入放在标签内是无效的，并且 DOH 在这两个示例中都没有关闭输入标签！
你在两个方面都错了：这是有效的做法，并且禁止输入元素的结束标记。

【解决方案20】：

使用独立于协议的绝对路径：

<img src="//domain.com/img/logo.png"/>

如果浏览器通过 HTTPS 在 SSL 中查看页面，那么它将使用 https 协议请求该资产，否则它将使用 HTTP 请求。

这可以防止 IE 中出现可怕的“此页面同时包含安全和非安全项目”错误消息，从而将您的所有资产请求保持在同一协议中。

警告：当用于样式表的或 @import 时，IE7 和 IE8 download the file twice。但是，所有其他用途都很好。

【讨论】：

这不是 HTML 功能，而是 URL/URI 功能。
@Gumbo：没错，这是一个 URI 功能，但我认为它足以打破规则并包含在此处。而且我预计不会很快出现 URI 规范的隐藏功能。 :)
一个斜杠是相对于域部分的，而不是来自协议部分的
IE 实在是太蠢了！为什么它会 DL 文件两次？
有一个主要缺点：当文件保存到磁盘并使用file: 协议访问时，浏览器将无法找到资源（例如，CDN 或其他一些外部资源）服务器）。

【解决方案21】：

按钮作为链接，没有 JavaScript：

您可以将任何类型的文件放入 form 操作中，并且您有一个用作链接的按钮。无需使用 onclick 事件等。您甚至可以通过在表单中粘贴“目标”在新窗口中打开文件。我没有在应用中看到太多这种技术。

替换这个

<a href="myfile.pdf" target="_blank">Download file</a>

用这个：

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

【讨论】：

按钮没有“将文件另存为”选项，不喜欢 Adobe Acrobat 接管浏览器的用户可能需要此选项。
在访问 PDF 文件时，它将与默认浏览器行为一致。它可以是 HTML 文件、word 文件、zip 文件或您想要的任何其他文件。
锚标签在什么情况下需要onclick事件？为什么 3 行 html 会比 1 行更好？你可以有一个按钮而不是一个链接的想法，所以它很好，按钮就像？尽管我对此感到很生气，但实际上我有一个使用按钮而不是链接的页面，因为该文件是在用户请求时动态创建的，所以我不希望链接到：blah.php?stuff="userdata"尽管我本可以走这条路，但我不想冒险使用文件生成脚本作为文件名而不是脚本为文件提供的文件名。
为什么不把标签的样式设置为按钮？您的标记中似乎有很多垃圾。
@UpTheCreek 一些 Web 应用程序希望看起来与操作系统相同。例如。当用户使用 Windows 时是一个丑陋的按钮，当用户使用 Mac OS X 时是一个漂亮的按钮。

【解决方案22】：

<html>、<head> 和 <body> 标签是可选的。如果省略它们，解析器将在适当的位置静默插入它们。在 HTML 中这样做完全有效（就像隐含的 <tbody>）。

HTML in theory 是一个 SGML 应用程序。这可能是最短的有效 HTML 4 文档：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

上述内容在 W3C Validator 之外的任何地方都不起作用。但是最短的有效 HTML5 text/html 文档适用于任何地方：

<!DOCTYPE html><title></title>

【讨论】：

你应该小心你的广告。上面的代码将通过验证，并在 w3c 验证器上发出 4 个警告，但 DocType 是 HTML 4.0。 HTML 4 是 SGML 的后裔，因此保持这种松散的验证标准非常简洁，但是如果您将 DTD 更改为 XHTML 1.0 STRICT，则会出现 15 个错误，这几乎等于字符数。开发 XHTML 是因为 HTML 非常懒惰（因此不安全），所以我们不想再利用它了。
如果您将 HTML/SGML 文档的 DOCTYPE 更改为 XHTML/XML，您将得到无意义的混合。这很明显，我不知道你为什么要指出这一点。
这个例子在技术上可能是有效的 HTML 4，但浏览器不支持缩写的 SGML 语法。以下是浏览器实际支持的最短的有效 HTML 5 文档：<!DOCTYPE html><title></title>
知道不考虑 head/body 的兼容性有多好，而不仅仅是从验证的角度来看？
@kibibu：浏览器对此没有问题。旧版本的 Opera 有时会在 DOM 中省略 <head>，但头部内容在 DOM 中并且无论如何都可以使用。我发现的最大问题是 OpenID 客户端要求 <head> 明确存在。

【解决方案23】：

我们可以将 base 64 编码的字符串指定为图像、JavaScript、iframe、链接的源/href 属性

例如

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

参考文献

How can I construct images using HTML markup?

Binary File to Base64 Encoder / Translator

【讨论】：

遗憾的是，IE phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under

【解决方案24】：

已经提到了我最喜欢的隐藏功能，即“base”标签。当您有一段具有相对 URL 的代码并且突然它们都移动但您的页面没有移动时，这非常方便。

但没有提到的是列表标题标签<lh>。它可能没有被提及，因为它被认为是“折旧的”，但大多数浏览器仍然支持它。我不知道为什么它被逐步淘汰了，几乎我制作的每个无序列表都可以使用标题，只是删除一个 h3 标签感觉很恶心，而且将第一个列表项作为列表的标题感觉不正确。

【讨论】：

你应该查看
、

和
标签 - 定义列表也是相当模糊的标记，但非常有用。
我之前没有听说过<lh> 元素。我喜欢你对其语义重要性的看法。糟糕的是，它已被弃用。 :(

【解决方案25】：

"!DOCTYPE" declaration。不要以为它是一个隐藏的功能，但它似乎并不为人所知但非常有用。

例如

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

【讨论】：

更不用说“对于大多数当前的标记语言来说都是强制性的，没有它就不可能可靠地验证文档”...validator.w3.org/docs/help.html#faq-doctype
我认为这不再是“不为人知的”了。在 IE 6 和 IE 7 之间的时间里，doctype 的使用从 ~1% 上升到 >50%。
@eyelidlessness 大多数 IDE 都包含这个标签，这就是它的使用增加的原因。我认为这个标签并不为人所知。
并且使用严格的文档类型修复了 95% 的浏览器不一致问题。
99% 的开发人员使用的部分标准听起来不像“隐藏功能”。

【解决方案26】：

我们都知道 DTD 或文档类型声明（那些使您的页面无法使用 W3C 验证器的东西）。但是，可以通过为自定义元素声明属性列表来扩展 DTD。

例如，W3C 验证器将fail for this page，因为behavior="mouseover" 添加到<p> 标记。但是，您可以通过以下方式使其通过：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

更多信息请访问Custom DTDs at QuirksMode。

【讨论】：

当然，这使它成为“有效：您的自定义标记语言”而不是“XHTML 1.0 过渡”
+1。我不知道为什么这是-1。无论如何，应该注意的是浏览器支持几乎为零。
相当肯定 Opera 支持这个。
@eyelidlessness 它仅适用于 XHTML。在以文本/HTML 形式发送的虚构 XHTML 中不起作用。
Eesh，不喜欢这个。对我来说，HTML 的价值在于地球上的每个人都知道它的含义（或多或少），因为我们都使用相同的标签和属性。我不确定为什么 class 属性的可扩展性不够。

【解决方案27】：

<dl> <dt> 和 <dd> 项目经常被遗忘，它们代表定义列表、定义术语和定义。

它们的工作方式类似于无序列表 (<ul>)，但它更像是键/值列表，而不是单个条目。

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

【讨论】：

此外，dl/dt/dd 语义适用于类似的列表（例如，该结构已被推荐用于对话）。
默认的显示效果不是很好，但是人们忘记了元素可以通过 CSS 以多种方式设置样式。
比较有意思的是经常被遗忘的格式是key/value/value/value/value/key/value
@D_N，我认为分歧在于我认为建议的用途是定义和语义的一部分，而不是与它分开和矛盾。
@D_N 和 @eyelidlessness - 看看 Bruce Lawson 的关于在语义上标记对话的注释......另外，HTML5 对话框元素的陪审团仍然没有结果......brucelawson.co.uk/2006/…

【解决方案28】：

将多个 html/css 类应用于一个标签。同样的帖子here

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

【讨论】：

这些是 HTML 类，而不是 CSS 类。 CSS 没有类（它有类选择器）。 HTML 类对 CSS 以外的东西很有用。
哇！我根本无法克服人们认为这是一个“隐藏”功能的事实。男孩，我是否觉得发布一些“真正隐藏”的功能很愚蠢，因为点赞的人可能甚至无法理解扩展 DTD 的含义。
d03boy, p.foo, p.var 与 p.foo.bar 不同。前者选择具有“foo”或“var”类的任何段落，后者选择具有两个类的段落。
关于 HTML 类的事情是一个好点，因为它让我明白了一点——html 不应该知道 css .. 你“应该”能够创建 html，并将其传递给无需更改 html 即可实现其设计的设计师（还不是完全如此；））.. 所以这归结为您的命名和使用类的方式.. 不要创建类来定位 css 属性.. 使用类来识别元素“是什么”。
从技术上讲，“Foo Bar BlackBg”是一个单一的类，而 p.foo 只是 p[class~=foo] 的语法糖（参见 spec）。不过，更容易将其视为具有多个类。

【解决方案29】：

DEL 和INS 标记删除和插入的内容：

HTML <del>sucks</del> <ins>rocks</ins>!

【讨论】：

肯定用得不够。
@eyelidlessness：标记已删除/插入的文本没有足够的用处。
我可以发誓，StackOverflow 不久前在修订页面上使用了<ins> 和<del>，但现在它使用了<span class="diff-add"> 和<span class="diff-delete">。 :(
@DisgruntledGoat wiki 修订历史？它有很多用例
@Horus：当然你可以找到用途，但从总体上看，这仍然不是很多情况。

【解决方案30】：

只有当表单中有提交按钮时，才可以在文本输入上按 Enter 键提交表单。试试看here。不把按钮的类型改成“提交”是不行的。

【讨论】：

这取决于您使用的浏览器。在 HTML 2 中，只包含文本输入的表单应该使用 enter 提交。 alanflavell.org.uk/www/formquestion.html