HTML的隐藏功能

Question

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

中

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

Answer 1

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

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

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

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

警告：在＆lt; link＆gt;上使用时或者@import用于样式表，IE7和IE8 download the file twice。然而，所有其他用途都很好。

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

<img onerror="{javascript}" />

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

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

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

Answer 7

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

控制 + 替代 + 德尔

Answer 8

<blink>

必须用于网站上的任何重要内容。最重要的网站将所有内容包装成闪烁。

<marquee>

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

编辑：Easy-up fellas，这只是一种幽默的尝试

Answer 9

不是众所周知，但您可以为加载lowsrc图片时显示lowsrc的图片指定src：

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

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

一点点琐事：在某一点上，这个属性已经模糊不清，已经习惯于exploit Hotmail，大约2000年。

Answer 10

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

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

Answer 11

button 标记是新的input submit标记，很多人仍然不熟悉它。例如，按钮中的文本可以使用按钮标签进行样式设置。

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

将呈现一个包含两行的按钮，第一行以粗体显示“单击”，第二行显示“我！”。试一试here。

Answer 12

指定要打印的CSS

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

Answer 13

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

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

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

Answer 14

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

Answer 15

wbr或word-break标记。来自Quirksmode：

  

（分词）表示：“浏览器   可以在这里插入换行符，如果它   祝愿。“浏览器没有想到   断线必不可少   发生的情况。

<div class="name">getElements<wbr>ByTagName()</div>

     

我给浏览器选项   添加换行符。这不会   非常大的决议所必需的，   当桌子有足够的空间。上   然而，这样的决议更小   策略性地设置换行符   从增长大于表的表   窗口，从而导致水平   滚动条。

同一页面上还提到了 ­ HTML实体。这与wbr相同，但是当插入一个中断时，会添加一个hypen（-）来表示中断。有点像它是如何在印刷中完成的。

一个例子：

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Answer 16

一个未充分利用的功能是，几乎每个在页面上提供可见内容的元素都可以具有“标题”属性。

添加这样的属性会导致当鼠标“悬停”在元素上时出现“工具提示”，并且可以用于以不会导致页面的方式提供非必要但有用的信息变得太拥挤了。 （或者它可以是一种向已经拥挤的页面添加信息的方式）

Answer 17

将多个html / css类应用于一个标记。同一篇文章here

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

Answer 18

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

例如，由于behavior="mouseover"标记中添加了<p>，W3C验证程序将fail for this page。但是，你可以这样做：

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

Answer 19

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

e.g。

<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

Answer 20

我最近发现了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>

Answer 21

您可以使用object代码而不是iframe在页面中添加其他文档：

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

Answer 22

大多数人也不知道你可以通过给他们一个名字/价值对来区分按下的表格按钮。 E.g。

<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黑客攻击/解决方法，例如根据按下的按钮，预先更改表单操作或更改隐藏的输入值。这简直令人惊讶。

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

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

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

Answer 23

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

Answer 24

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>

Answer 25

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

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

相当于

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

Answer 26

按钮作为链接，没有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>

Answer 27

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

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

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

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

进行简单的重定向！
（谢谢@rlb）

Answer 28

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

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

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

除W3C Validator外，上述功能无效。但是，最短的有效HTML5 text/html文档无处不在：

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

Answer 29

lang属性不是众所周知但非常有用。该属性用于标识整个文档或单个元素中内容的语言。 Langage代码以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>

Answer 30

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

e.g。

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

Answer 31

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

Answer 32

上标<sup> x </sup>

Answer 33

我最喜欢的隐藏功能已被提及，这是“基础”标签。当你有一大堆具有相对URL的代码并且突然它们都移动但你的页面没有移动时非常方便。

但未提及的是列表标题<lh>。它可能没有被提及，因为它被认为是“折旧的”，但大多数浏览器仍然支持它。我不知道为什么它被逐步淘汰，我制作的几乎每个无序列表都可以使用一个标题，并且只是丢弃一个h3标签感觉很蹩脚，并且让第一个列表项成为列表标题感觉不正确。 / p>

Answer 34

只有在表单中有提交按钮时，才能在文本输入上按Enter键时提交表单。试一试here。如果您不将按钮类型更改为“提交”，则无效。

Answer 35

Special characters数学，希腊语，......不太清楚

Answer 36

定义列表：

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

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

我还为各种网站的表单布局和导航菜单重新设置了这个。