html - Hidden features of HTML

Question

HTML being the most widely used language (at least as a markup language) has not gotten its due credit.
Considering that it has been around for so many years, things like the FORM / INPUT controls have still remained same with no new controls added.

So at least from the existing features, do you know any features that are not well known but very useful.

Of course, this question is along the lines of:

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

Do not mention features of HTML 5.0, since it is in working draft

Please specify one feature per answer.

score 244 · Accepted Answer

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

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

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

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

警告：当用于样式表的 <link> 或 @import 时，IE7 和 IE8会下载文件两次。然而，所有其他用途都很好。

score 138 · Accepted Answer

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

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

score 136 · Accepted Answer

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

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

score 102 · Accepted Answer

我认为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>

score 100 · Accepted Answer

我最喜欢的一点是基本标签，如果你想使用路由或 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

score 99 · Accepted Answer

<img onerror="{javascript}" />

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

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

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

score 96 · Accepted Answer

96

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

Ctrl+ Alt+Del

于 2009-09-22T19:45:32.530 回答

score 84 · Accepted Answer

不太为人所知，但您可以指定将在加载lowsrc图像时显示的图像：lowsrcsrc

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

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

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

score 84 · Accepted Answer

<blink>

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

<marquee>

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

编辑：轻松的家伙，这只是幽默的尝试

score 67 · Accepted Answer

67

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

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

于 2009-06-06T19:43:57.423 回答

score 58 · Accepted Answer

按钮标签是新标签，input submit很多人还不熟悉。例如，按钮中的文本可以使用按钮标签设置样式。

<button>
    <b>Click</b><br />
    Me!
</button>

将呈现一个带有两行的按钮，第一行以粗体显示“单击”，第二行显示“我！”。在这里试试。

score 56 · Accepted Answer

指定用于打印的 css

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

score 54 · Accepted Answer

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

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

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

score 52 · Accepted Answer

不完全隐藏，但是（这是 IE 的错）没有足够的人知道我的口味关于thead、tbody、tfoot。你们中有多少人知道 tfoot 应该在标记中出现在 tbody上方？

score 50 · Accepted Answer

或wbr分词标记。从怪癖模式：

(word break) 的意思是：“如果浏览器愿意，可以在此处插入换行符。” 如果浏览器认为不需要换行，则什么也不会发生。
<div class="name">getElements<wbr>ByTagName()</div>
我给浏览器添加换行符的选项。当表格有足够的空间时，这对于非常大的分辨率不是必需的。然而，在较小的分辨率上，这种策略性地放置换行符可以防止表格变得比窗口大，从而导致水平滚动条。

同一页面上还提到了HTML 实体。wbr这与插入中断时相同，但-添加连字符 ( ) 以表示中断。有点像它是如何在印刷中完成的。

一个例子：

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

score 43 · Accepted Answer

A much underused feature is the fact that just about every element, that provides visible content on the page, can have a 'title' attribute.

Adding such an attribute causes a 'tooltip' to appear when the mouse is 'hovered' over the element, and can be used to provide non-essential - but useful - information in a way that doesn't cause the page to become too crowded. (Or it can be a way of adding information to an already crowded page)

score 38 · Accepted Answer

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

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

score 34 · Accepted Answer

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

例如，该页面的 W3C 验证器会因为添加到标签而失败。但是，您可以通过以下方式使其通过：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>
]>

在 QuirksMode上查看有关自定义 DTD 的更多信息。

score 28 · Accepted Answer

我们可以将 base 64 编码的字符串指定为 image、JavaScript、iframe、link 的 source/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>

参考

如何使用 HTML 标记构建图像？

二进制文件到 Base64 编码器/翻译器

score 26 · Accepted Answer

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

<fieldset> 解释

例子：

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

score 25 · Accepted Answer

您可以使用object标签而不是iframe在页面中包含另一个文档：

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

score 25 · Accepted Answer

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

<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 情况下，我还在服务器端代码中看到了一些不必要的压倒性魔法来区分检查的项目。

score 25 · Accepted Answer

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

score 22 · Accepted Answer

Colgroup 标签。

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

score 18 · Accepted Answer

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

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

相当于

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

score 15 · Accepted Answer

按钮作为链接，没有 JavaScript：

您可以将任何类型的文件放入表单操作中，并且您有一个充当链接的按钮。无需使用 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>

score 13 · Accepted Answer

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

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

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

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

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

score 12 · Accepted Answer

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

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

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

除了 W3C Validator 之外，上述方法在任何地方都不起作用。然而，最短的有效 HTML5text/html文档适用于任何地方：

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

score 11 · Accepted Answer

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

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

Sitepoint 对该属性有一些很好的解释lang。

例子

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

<html lang="en">

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

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

score 10 · Accepted Answer

The "!DOCTYPE" declaration. Don't think it's a hidden feature, but it seems it's not well known but very useful.

e.g.

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

score 6 · Accepted Answer

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

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

<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 的浏览器（这意味着几乎每一个浏览器）。

score 5 · Accepted Answer

5

上标与<sup> x </sup>

于 2010-06-03T17:20:50.663 回答

score 3 · Accepted Answer

仅当表单中有提交按钮时，才可以在文本输入上按 Enter 键提交表单。在这里试试。如果您不将按钮的类型更改为“提交”，它将不起作用。

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

2

数学、希腊语、......的特殊字符不太为人所知

于 2009-06-05T05:15:07.343 回答

score 0 · Accepted Answer

定义列表：

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

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

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

html - Hidden features of HTML

36 回答 36

例子

Related

Reference