logo标签列表

HTML的隐藏功能

htmlxhtmllanguage-featureshidden-features
110

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

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

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

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

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

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

36个回答
25

大多数人不知道你可以通过给表单按钮命名/值对来区分按下的按钮。例如：

<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 hack/解决方案，例如根据按下的按钮改变表单操作或预先更改一个隐藏输入的值。这太惊人了。

此外，我也看到了几乎一样多的JS hack/解决方案，用于收集多个复选框中已选择的内容，例如在表格行上。每次选择/选中表格行时，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>
...

由于不了解，每个复选框的名称都不同且整个值属性被省略。在某些没有JS hack/ workaround的情况下，我还看到服务器端代码中一些不必要的过度魔法来区分已选项目。

1
嘿...这显然是HTML的另一个隐藏功能:/ ;) - BalusC
1
如果一个表单有多个提交按钮，而用户点击其中一个，某些版本的Internet Explorer会高兴地告诉您的服务器它们都被点击了。太好了。 - detly
1
@detly：仅当您使用<button type =“submit”>而不是<input type =“submit”>时 :) - BalusC
1
...但是IE6对于<input type="submit">也有问题，不是吗？（我对这个问题的记忆有点模糊 - 我已经说服雇主不再担心内部Web应用程序的IE兼容性，所以这不再是我的问题。但我似乎记得在IE6中解决这个问题存在一些障碍。） - detly
2
这不太友好于国际化（i18n）。 - zneak
显示剩余7条评论
25

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

您可以使用 object 标签来代替 iframe，将另一个文档包含在页面中：

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>
57
最终的效果与 iframe 几乎相同，但是它的支持性更差，功能也较少。 - Quentin
iframe已经被弃用，希望我们能尽快得到更好的支持。 - Gordon Gustafson
12
在HTML 5中，iframe并没有被弃用。 - Zach
它能够防止来自嵌入页面的 XSS 攻击吗？ - user47322
1
我相信它使用SOP，就像使用iframes一样。 - Zach
22

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>
15
以我的经验来看，colgroup的支持情况最多只能算是不太可靠。 - eyelidlessness
非常相似的是WPF网格。 - Binoj Antony
18

如果一个<label>标签的for属性没有被指定，那么它会默认为第一个子元素是<input>，也就是说：

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

等同于

<label for="alias">Alias:</label> <input name="alias" id="alias">
4
但是这种方法得到的浏览器支持比 for 属性少。 - Quentin
4
@David — 你有任何支持这个说法的文献吗？我从未见过任何浏览器不支持此用法。我个人在IE6/7，FF2/3，Safari 3和Chrome 1/2中进行了测试。我没有在Opera中进行过测试，但如果它不起作用，我会非常惊讶。这种行为是最早发表于11年前的HTML 4.0规范的一部分：http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for - Ben Blank
此外，在标签内部放置输入框是无效的，而且你在两个示例中都没有关闭输入标签！ - Anthony
5
你两个方面都错了：这是有效的做法，而且输入元素禁止使用结束标签。 - moo
15

将按钮作为链接，无需JavaScript：

您可以在表单操作中放置任何类型的文件，并使用按钮作为链接。不需要使用onclick事件或类似技术。您甚至可以通过在表单中添加"target"属性在新窗口中打开文件。我没有在应用程序中经常看到这种技术的应用。

请替换此处

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

用这个：

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>
27
按钮将不会有“另存为”选项，这可能会被那些不喜欢Adobe Acrobat接管他们的浏览器的用户所需。 - Kornel
顺便提一下，在IE8中，当你将鼠标悬停在按钮上时，你可以在状态栏中看到目标。不幸的是，Firefox 3没有显示它 :( - Amro
1
为什么不直接将<a>标签样式设置成按钮呢？这样看起来你的标记中就少了很多垃圾代码。 - UpTheCreek
2
@UpTheCreek 一些网络应用程序希望看起来与操作系统相同。例如，当用户使用Windows时，按钮可能会很丑陋，而当用户使用Mac OS X时，按钮可能会很漂亮。 - user142019
是的，很公平，那些专有的Safari按钮真的很烦人。 - UpTheCreek
显示剩余2条评论
13

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

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

在content中指定的值表示页面刷新的秒数。
[编辑]

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

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

13
当然，确定需要更新的元素并通过AJAX更新它们会带来更好的用户体验... - Steve Harrison
11
在存在用户表单操作的页面中，META刷新实际上并没有做任何好事，因为它可能会打断用户的表单填写并且丢失所有的工作。我认为这种刷新很少是最佳选择。通常这只是一种简单的逃避方式。 - Robert Koritnik
11
我讨厌那种自动刷新的网页……应该禁止它们 =/ - Svish
3
如果将其设置为稍低于会话超时时间，则此功能还可以提醒用户会话已超时并已被删除，这也很有用。 - fforw
1
META REFRESH 也会导致浏览器对即使是新资源进行缓存验证，这会产生性能成本。 - EricLaw
显示剩余9条评论
12

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

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

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

上述内容除了W3C验证器外在其他地方都无法正常工作。但是最短的有效HTML5 text/html文档则可以在任何地方正常工作：

<!DOCTYPE html><title></title>
4
你应该小心你广告的内容。上面的代码将通过w3c验证器并得到4个警告，但文档类型是HTML 4.0。HTML 4是SGML的后代，因此保持了这种宽松的验证标准，这相当不错，但如果你将DTD更改为XHTML 1.0 STRICT，则会得到15个错误，几乎等于字符数。XHTML的开发是因为HTML太懒惰（因此不安全），所以我们不想再利用它了。 - Anthony
3
如果将HTML/SGML文档的DOCTYPE更改为XHTML/XML，你将得到一个毫无意义的混合。这是非常明显的，我不确定你为什么会指出这一点。 - Kornel
3
这个例子在技术上可能是有效的HTML 4，但浏览器不支持缩写的SGML语法。以下是最短的有效HTML 5文档，实际上浏览器是支持的：<!DOCTYPE html><title></title>。 - Brian Campbell
有没有想过从兼容性角度考虑，省略head/body标签会有什么影响？ - kibibu
@kibibu：浏览器对此没有问题。旧版本的Opera有时会在DOM中省略<head>，但头部内容仍然在DOM中并且可以正常工作。我发现最大的问题是OpenID客户端需要明确存在<head>。 - Kornel
11
lang属性不是很常见，但非常有用。该属性用于标识整个文档或单个元素中内容的语言。语言代码以ISO 2字母语言代码（即“en”表示英语，“fr”表示法语）给出。
对于可以调整引号等显示的浏览器非常有用。屏幕阅读器也受益于lang属性，搜索引擎也是如此。 Sitepoint有一些关于lang属性的不错解释。
示例：
指定整个文档的语言为英语，除非在DOM的较低级别上被另一个lang属性覆盖。
<html lang="en">

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

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

"!DOCTYPE"声明。 不要认为它是一个隐藏的特性，但似乎它并不广为人知，但非常有用。

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
10
更不用说，“对于大多数现行的标记语言而言，DOCTYPE 声明是必须的，没有它就无法可靠地验证文档”……http://validator.w3.org/docs/help.html#faq-doctype - Svish
我认为这已经不再是“不太知名”的了。在IE 6和IE 7之间的时间里，doctype的使用率从约1％增加到了超过50％。 - eyelidlessness
@eyelidlessness 大多数集成开发环境都包含了这个标签，所以它的使用率增加了。我认为这个标签并不是很出名。 - Daniel Moura
6
使用严格的文档类型可以解决95%的浏览器不兼容性问题。 - DisgruntledGoat
3
99%的开发者使用的标准部分听起来并不像“隐藏功能”。 - WhyNotHugo
HTML5使得文档类型声明易于记忆和输入，适用于所有使用普通文本编辑器的人。它只是 <!doctype html>。这就是开始使用HTML5的理由之一。 :) - Stéphan Kochen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接