HTML的隐藏功能

110

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

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

当然,这个问题与以下类似:

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

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

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

36个回答

58

button标签是新的input submit标签,很多人还不熟悉。按钮中的文本可以使用


15
遗憾的是在IE < 8中出现了问题。有可能通过解决问题来绕过这些问题,但这可能很痛苦,并且有时会遇到Web服务器和服务器端编程环境之间的安全保护措施。 - Quentin
6
但是 IE < 8 将会提交元素的内容而不是它的值。我相信某些版本即使未被点击也会将其视为成功的控件。 - Quentin
4
如果你将它制作成<button contenteditable>,你还可以更改按钮文本!如果有人能找到有效的用途,就会获得奖励。 :) - Gavin
4
我从来不理解为什么会有“输入”类型的提交按钮。它并没有输入任何内容,只是提交你在其他字段中输入的内容。 - DisgruntledGoat
3
@DisgruntledGoat说:它的名称/值对实际上会被发送。如果表单中有多个按钮(例如,编辑、删除、上移等),并且希望区分按下的按钮,则这非常有用。不幸的是,在IE<8中,button元素的情况并非如此,令人惊讶的是,它会发送所有button元素的名称/值对。 - BalusC
显示剩余4条评论

56

指定打印时的CSS样式

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

1
发现几周前 - Daniel Moura
如果你以前没有处理过这个问题,我希望你之前没有制作过任何生产网站... - Kzqai
这怎么能被认为是隐藏的? - Marin

54

<dl><dt><dd>元素通常被遗忘,它们代表“定义列表”、“定义术语”和“定义”。

它们的工作方式类似于无序列表(<ul>),但不同的是,其条目更像是键/值对形式的。

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

2
默认的展示效果并不是很好,但人们常常忘记使用CSS可以对元素进行多种样式的设置。 - DisgruntledGoat
18
更有趣的事情经常被忘记了,那就是格式的关键在于键/值/值/值/值/键/值。 - Quentin
@eyelidlessness 仅因规范建议并不意味着它是有意义的。它与其自身的定义不一致。(我没有试图挑起争端。但语义从定义等方面流动;HTML4规范建议可以那样使用,但没有提供为何满足其已经给出的定义的理性。) - user241244
1
@D_N,我认为分歧在于我认为建议的用法是定义和语义的一部分,而不是与之分离和相互矛盾。 - eyelidlessness
1
@D_N和@eyelidlessness - 请查看Bruce Lawson有关语义标记对话的笔记...此外,HTML5对话框元素仍未定论...http://www.brucelawson.co.uk/2006/breaking-news-w3c-specs-are-not-word-of-god/ - Fenton
显示剩余5条评论

52

并不是真正的隐藏,但(这是IE的错)不够多的人知道关于 thead, tbody, tfoot。你们中有多少人知道tfoot应该在标记中出现在之上呢?


1
boris callens,是的,如果没有thead、tbody和tfoot中的任何一个存在,则tbody被隐含。 - eyelidlessness
2
如果IE5正确实现了TBODY,那么更多的人会使用它。这是几年前的主要问题。Mozilla和Opera支持滚动TBODY,这真的很酷;不幸的是,IE5没有支持。 - staticsan
9
它们在打印时非常有用,因为它们应该将“thead”和“tfoot”放置在每个页面的顶部和底部。可惜在浏览器中没有重复“thead”的机制,当你有非常长的表格时。 - DisgruntledGoat
1
我知道tfoot在tbody上面,但我认为这很愚蠢。我把我的tfoot放在下面,因为那是有意义的,结果得到了一个验证器错误,于是我把tfoot移到了tbody上面(虽然感到困惑,但总是遵守规则),你猜怎么着?!当你试图突出显示表格时,浏览器(至少是FF)会先突出显示tfoot,即使它在视觉上在tbody下面!然后!!!当你将它复制到文本编辑器中时,它在视觉上是在tbody上面。完全是武断的规定。 - Anthony
3
如果你的网络连接慢,@Anthony说的就有意义了,这意味着在表格内容仍在加载时,你可以看到所有的页眉和页脚。 - me_and
显示剩余3条评论

50

wbrword-break标记。来自Quirksmode:

(单词断开)的意思是:“如果浏览器认为必要,它可能在此处插入换行符。” 如果浏览器不认为需要换行,则什么都不会发生。

<div class="name">getElements<wbr>ByTagName()</div>
我在浏览器中提供添加换行的选项。在非常大的分辨率下并且表格拥有足够的空间时,这不是必需的。然而,在较小的分辨率下,这些位置精心放置的换行符可以防止表格变得比窗口更大,从而导致水平滚动条出现。
此页面还提到了HTML实体&shy;。与wbr类似,但插入换行时会添加连字符 (-) 表示换行。就像在印刷品中一样。
例如:
Text­Text­Text­... (此处省略)

2
请注意,这个可能会有浏览器兼容性问题。 - Christophe Eblé
7
IE8不支持该功能,在Windows上的Safari 3.0存在缺陷。除此之外,兼容性还算不错。请参考链接中的兼容性表。 - aleemb
哦,SitePoint 参考将此标签标记为已弃用和无用,谁是正确的?http://reference.sitepoint.com/html/wbr - Christophe Eblé
它可能已经被HTML规范弃用,但它仍然在浏览器中工作。每当有疑问时,请遵循QuirksMode的判断(兼容性表现现在由Google赞助)。 - aleemb
根据http://www.quirksmode.org/oddsandends/wbr.html#t02的说法,­在浏览器中得到了稍微更好的支持。(假设大多数Firefox用户定期更新;或者至少比IE用户更频繁)。 - GeReV
显示剩余2条评论

43

一个被广泛忽视的特性是,几乎所有在网页上提供可见内容的元素都可以添加“title”属性。

添加该属性会在鼠标“悬停”在元素上方时出现“工具提示”,并可用于以不引起页面拥挤的方式提供非必要但有用的信息(或为已经拥挤的页面添加信息的方法)。


是的,“title”属性非常有用——尤其是对于那些需要点击的元素。 - Steve Harrison
6
出现的提示文本取决于浏览器。不是所有浏览器显示title属性的方式都相同,但这是一个我一定会使用的好功能。 - Travis
8
标题属性是有用的,但只有在适当使用时才能发挥其作用。大多数浏览器只会在几秒钟内渲染工具提示,然后它就会消失。我讨厌设计师们觉得需要在标题属性中填写3或4行文字,这会导致你必须将鼠标悬停在上面,然后再次将鼠标移动到上面才能读取其余的内容。 - priestc
将其与jQuery结合使用等于令人惊叹的神奇。 - Levi Morrison
Levi - 你能给一些例子吗? - belugabob

38

如何将多个HTML/CSS类应用于一个标签?同样的问题在这里

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

22
这些是HTML类,而不是CSS类。CSS没有类(它有类选择器)。除了CSS之外,HTML类对其他事情也很有用。 - Quentin
36
哇!我简直无法相信人们认为这是一个“隐藏”的功能。我感到很愚蠢,因为我之前曾发布过一些“真正隐藏”的功能,因为那些投票支持此功能的人可能甚至不会想象扩展DTD的含义。 - aleemb
5
d03boy,p.foo和p.var并不等同于p.foo.bar。前者选择任何一个类为"foo"或"var"的段落,而后者选择同时拥有这两个类的段落。 - eyelidlessness
5
关于HTML类的事情是一个好的观点,因为它让我想到一点- HTML 不应该知道 CSS 的存在.. 你应该能够创建 HTML,并将其传递给设计师,在不需要更改 HTML 的情况下实现他们的设计(目前还不完全是这样的).. 因此,这取决于你命名和使用类的方式.. 不要创建用于定位 CSS 属性的类.. 使用类来识别元素本身的特性。 - meandmycode
1
从技术角度来说,“Foo Bar BlackBg”是单独的一个类,而p.foo只是p[class~=foo]语法糖的替代品(可以参考规范)。不过,把它看成有多个类会更容易理解。 - Tgr
显示剩余4条评论

34

我们都知道DTD或文档类型声明(使您的页面在W3C验证器上失败的那些东西)。然而,通过为自定义元素声明属性列表,可以扩展DTD。

例如,W3C验证器将因在<p>标记中添加behavior="mouseover"失败于此页面。 但是,您可以通过执行以下操作使其通过:

<!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了解更多信息。


10
当然,这使其成为“Valid: Your custom markup language”,而不是“XHTML 1.0 Transitional”。 - Quentin
3
+1. 我不知道为什么这个被评为-1。无论如何,需要注意的是浏览器支持几乎为零。 - eyelidlessness
很确定Opera支持这个。 - Rich Bradshaw
2
@eyelidlessness 它只适用于XHTML。不适用于伪装为text/HTML发送的XHTML。 - Kornel
2
额,我不是很喜欢这个。对我来说,HTML的价值在于全球所有人都知道它的意思(或多或少),因为我们都使用相同的标签和属性。我不确定为什么“class”属性的可扩展性还不够。 - Paul D. Waite
浏览器支持不足是很烦人的。但它仍然有用 - 我们可以编写一个脚本,在将其发送到验证器之前插入额外的文本。 - Casebash

28
我们可以将base64编码的字符串分配给图像、JavaScript、iframe、link等的源/ 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编码器/翻译器


4
遗憾的是,IE < 8 不支持此功能。但对于这些浏览器,你可以使用 MHTML 替代:http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ - Mathias Bynens

26

我最近了解到了


请提供一个使用示例。 - Binoj Antony
1
说明:http://www.w3schools.com/TAGS/tag_fieldset.asp -- 示例:http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_fieldset - Tyler
从 aspnet mvc 示例页面发现了 fieldset。^^ - Arnis Lapsa
2
不知道这个。这是W3C规范:http://www.w3.org/TR/html401/interact/forms.html#h-17.10 - MitMaro
字段集和图例非常好。这是标记表单的一种非常好的方式。 - Neil Aitken
字段集(Fieldset)有点不稳定。大多数浏览器都对它们进行了重大的渲染修补。 - zneak

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接