HTML的隐藏功能

Question

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

因此，至少从现有功能来看，您知道任何很有用但又不太为人所知的功能吗？

当然，这个问题与以下类似：

JavaScript的隐秘功能
CSS的隐秘功能
C＃的隐秘功能
VB.NET的隐秘功能
Java的隐秘功能
Classic ASP的隐秘功能
ASP.NET的隐秘功能
Python的隐秘功能
TextPad的隐秘功能
Eclipse的隐秘功能

请不要提到HTML 5.0的功能，因为它仍在草案状态

每个答案请指定一个功能.

- Binoj Antony

Answer 1

使用协议无关的绝对路径：

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

如果浏览器通过HTTPS查看SSL页面，则它将使用HTTPS协议请求该资源，否则它将使用HTTP请求。这可以防止IE出现“此页面包含安全和非安全项”错误消息，使所有资产请求保持在同一协议中。

注意：当在样式表的或@import中使用时，IE7和IE8会下载文件两次。然而，其他用途都没有问题。

- Paul Irish

---

这并不是HTML的特性，而是URL/URI的特性。 - Gumbo

@Gumbo：没错，这是一个URI的特性，但我认为它足够好了，可以弯曲规则并在此处包含。而且我不指望URI规范的隐藏功能很快就会出现。 :) - Paul Irish

一个斜杠符号是相对于域名部分而言的，而不是协议部分。 - SztupY

IE太蠢了！为什么它要下载两次文件？ - user142019

主要缺陷在于：当一个文件被保存到磁盘并使用“file:”协议访问时，浏览器将无法找到该资源（例如CDN或其他外部服务器的资源）。 - Marcel Korpel

Answer 2

标签使用"for"属性逻辑上将标签与表单元素链接在一起。大多数浏览器会将其转换为链接，从而激活相关的表单元素。

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

- Brian Reiter

---

是的，令人惊讶的是很少有网站积极地使用这个功能。我见过一些使用JS来实现这个功能的网站... - Boris Callens

最近发现了这个。 - Arnis Lapsa

cagdas，HTML 没有真正的隐藏功能，它是一个规定的标准。 - eyelidlessness

为了扩展回答，您还可以使用标签包装输入框并省略 for 属性：<label>财政年度 <input name="fiscalYear" type="text" /></label>。 - eyelidlessness

没有使用复选框和单选按钮，简直是一种罪过。 - Kornel

Answer 3

contentEditable 属性适用于 IE、Firefox 和 Safari 浏览器。

<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>

这将使单元格可编辑！如果你不相信我，试试吧。

- aleemb

---

这个问题需要介绍HTML5没有涉及到的特性。 - Quentin

David Dorward说，不能完全说contentEditable是在HTML5中引入的，因为它是由微软在IE 5.5中引入的，但是直到HTML5才得到了标准化；Tyson & Steve表示，contentEditable在Safari 2.0中被引入，但许多重要的格式化方法直到3.x才加入；Victor H Valle说，这取决于你的文档类型。在HTML 4中，当折叠时应扩展为="true"。 - eyelidlessness

@Binoj - 绝对不行。 "contenteditable" 属性是一个枚举属性，其关键字为“空字符串”、“true”和“false”- http://www.w3.org/TR/html5/editing.html - Quentin

更好的方法是，将以下内容添加为书签工具，以便编辑当前网页： javascript:document.body.contentEditable='true';document.designMode='on';void(0); - Amro

我认为这主要在JavaScript环境中非常有用，当您允许用户编辑代码部分并通过js提交该内容时。 - Kzqai

Answer 4

我认为optgroup标签是人们很少使用的一个功能。我和大多数人交谈时，他们往往没有意识到这个标签的存在。

例子：

<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>

- RichardOD

---

不幸的是，浏览器对菜单层次结构的实现还有很大的改进空间。我怀疑optgroup并没有得到广泛使用，因为它相关的用例很少。 - eyelidlessness

所有浏览器都应该支持一级别。我在其他某个网络论坛上看到过它在某些屏幕上使用，将论坛列表划分为与主页上相同的部分。 - staticsan

@staticsan。我同意这对于对一些项目进行小分类非常有用。 - RichardOD

@eyelidlessness：我经常看到下拉菜单缩进元素或使用某种“标题”文本，例如---类别---。 - DisgruntledGoat

这是一个我之前不知道的不错功能！ - Chrisb

Answer 5

我的最爱是base标签，如果你想使用路由或URL重写它可以帮你省下不少麻烦...

假设你的位置是：

www.anypage.example/folder/subfolder/

以下是从这个页面获取链接的代码和结果。

常规锚点：

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

导致

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

现在如果您添加基准标签。

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

该锚点现在指向：

www.anypage.example/test.html

- Fenton

---

您也可以只使用/images/image.png，前面加上斜杠即可。 :-) - molf

基础标签是一种"核选项" - 相当于 #define：如果不注意跟踪它，不清楚地告诉未来的开发者，并将其作为站点架构的低级部分，在使用过程中可能会导致令人沮丧的非明显错误。我从未“需要”它，请谨慎使用。 - annakata

是的，我也曾看到基础标签干扰我的JavaScript，当尝试动态加载CSS文件到页面时。此外，在IE6中存在一个错误，需要您明确关闭标签（</base>），这是无效的。条件注释可以帮助解决这个问题。 - avdgaag

请注意，基础URL将应用于每个相对URL，而不仅仅是相对URL路径。 因此，引用“＃top”的位置在根索引文档中将被解析为“top”，在同一文档中也将被解析为“top”。 - Gumbo

在我需要“查看源代码”并下载HTML以便操作的情况下，我发现这非常方便。一旦源代码被下载，你可以添加一个带有适当href属性的BASE元素。这样，在仅下载源代码之后，你就可以在本地工作了...无需下载所有的javascript、css和图片。 - Andy Ford

Answer 6

<img onerror="{javascript}" />

onerror 是 JavaScript 事件，它会在出现小红叉（在IE中）之前触发。

您可以使用它来编写脚本，将损坏的图像替换为一些有效的备用内容，以便用户不必处理红叉问题。

乍一看，这似乎毫无用处，因为您不知道图片是否可用。但是，如果您考虑一下，这个东西有完全有效的应用场景；例如：假设您正在从第三方资源（如我们在SO中的gravatar）提供图像，而您没有控制权。它是从http://www.gravatar.com/提供的，这是stackoverflow团队根本无法控制的资源-尽管它很可靠。如果http://www.gravatar.com/停止工作，stackoverflow可以通过使用onerror来解决此问题。

- Daniel Silveira

---

啊哈...如果这是我所想的，当我真正需要它的时候，我应该早点知道这个。 :/ - Arnis Lapsa

为了澄清，onerror是JavaScript事件（就像onclick一样），它允许您在图像加载失败时执行某些操作。 - Jehiah

丹尼尔·席尔维拉，您能否澄清一下，即使出现损坏的（例如404）图像，它是否确实运行onerror代码？无论如何，这是一个DOM功能，而不是HTML功能本身。 - eyelidlessness

我曾经有一个菜鸟使用这个，指向一个不存在的图像，递归了吗？ - Pharabus

Answer 7

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

Ctrl+Alt+Del

- Russ Cam

---

<kbd>除了它是不同的字体格式之外，还有什么特别的吗？如果没有，这里有其他格式标签的列表：http://www.w3schools.com/tags/tag_phrase_elements.asp - Your Friend Ken

不是特别的，只是不太出名，我想。 - Russ Cam

没有默认值，但像 Stack Overflow 一样使用 CSS 标记元素会更清晰。 - Agent_9191

不知道它的存在，这很有趣。 - Kzqai

Answer 8

<blink>

必须用于站点上的任何重要内容。最重要的网站将所有内容都包含在闪烁中。

<marquee>

创建一个逼真的滚动效果，非常适用于电子书等领域。

编辑：别紧张，这只是一次幽默尝试。

- Mark Glorie

---

也许这个问题应该明确说明不要列出我们希望保持隐藏的功能。 - Ben Blank

我曾使用 <blink>标签，作为伪终端样式的一部分，用于显示代码的div区域（:before {content: "drthomas@house: ~$";} :after {content: "_"; text-decoration: blink; }），感觉效果很棒。也许我应该寻求帮助。=] - David Thomas

<marquee><blink>最烦人的HTML标签！！！</blink></marquee> 这些标签不是隐藏的，只是没有理由使用它们。 - Your Friend Ken

我将整个页面都包裹在跑马灯和闪烁中，因为我就是那么酷。 - Sphvn

请注意，<blink>标签的唯一合法用途是：薛定谔的猫<blink>不是</blink>死了。（我记得这在xkcd上，但我目前无法找到它。） - Christopher Creutzig

Answer 9

并不是很广为人知，但您可以为图像指定lowsrc，在加载图像的src时显示lowsrc：

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

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

有趣的小知识：曾经有一段时间，这个属性非常晦涩，被用于利用 Hotmail，大约是在2000年左右。

- aleemb

---

这个我不知道。它可以用于“加载”动画吗？ - Boris Callens

我在Opera浏览器中从“利用Hotmail”的链接中收到了欺诈警告。 :o - jrista

是的，我也使用 Opera 并收到了那个欺诈警告……这是什么？ - Svish

这是一个安全的网站，可以放心使用。 - Joey Robert

这个属性是专有的。http://msdn.microsoft.com/library/ms534138(VS.85).aspx - Gumbo

自HTML4以来，该属性已被弃用 - 您不应在生产网站中使用它。 - Ben Hull

Answer 10

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

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

- Gumbo

---

绝对不够使用。 - eyelidlessness

@eyelidlessness：标记已删除/插入文本的情况实在是太少了，没有那么有用。 - DisgruntledGoat

我敢肯定StackOverflow在一段时间前的修订页面上使用了<ins>和<del>，但现在它使用<span class="diff-add">和<span class="diff-delete">。:( - system PAUSE

@DisgruntledGoat维基百科的修订历史记录？有很多用例。 - HorusKol

@Horus：当然，你可以找到某些用途，但从长远来看，这仍然不是很多的情况。 - DisgruntledGoat