HTML的隐藏function
HTML是最广泛使用的语言（至less作为标记语言）还没有得到应有的赞誉。
考虑到它已经存在了很多年了，像FORM / INPUT控件这样的东西仍然保持不变，没有添加新的控件。
因此，至less从现有的function，你知道任何function不知名，但非常有用。
当然，这个问题大致如下：
JavaScript的隐藏特性
CSS的隐藏特性
C＃的隐藏特性
VB.NET隐藏的function
Java的隐藏特性
传统ASP的隐藏function
ASP.NET的隐藏function
Python的隐藏特性
TextPad的隐藏function
Eclipse的隐藏特性
不要提到HTML 5.0的特性，因为它在工作草案中
请为每个答案指定一个function 。
使用独立于协议的绝对path：
<img src="//domain.com/img/logo.png"/> 如果浏览器正在通过HTTPS查看SSL中的页面，则会使用https协议请求该资产，否则将使用HTTP请求该资源。
这可以防止在IE中出现可怕的“本页包含安全和非安全项目”错误消息，将您的所有资产请求保留在相同的协议中。
警告：在样式表的<link>或@import上使用时，IE7和IE8 下载文件两次 。 但是，所有其他用途都很好。
标签标签使用“for”属性将标签与表单元素进行逻辑链接。 大多数浏览器将其变成激活相关表单元素的链接。
<label for="fiscalYear">Fiscal Year</label> <input name="fiscalYear" type="text" id="fiscalYear"/>
（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>
这将使细胞可编辑！ 如果你不相信我， 那就试试吧 。
我认为optgroup标签是人们不经常使用的一个function。 我说的大多数人不会意识到它存在。
例：
<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>
我最喜欢的是基本标记，如果你想使用路由或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
<img onerror="{javascript}" />
onerror是一个JavaScript事件，会在小红十字（IE）图片显示之前被触发。
您可以使用它来编写一个脚本，用一些有效的替代内容replace破损的图像，以便用户不必处理红叉问题。
乍一看，这可以被看作是完全无用的，因为，如果图像是可用的，你以前不知道吗？ 但是，如果你考虑，这个东西有完美的有效申请; 例如：假设您正在从不受控制的第三方资源提供图像。 就像我们在这里的gravatar一样…它来自于http://www.gravatar.com/ ，它是一个stackoverflow团队根本无法控制的资源 – 虽然它是可靠的。 如果http://www.gravatar.com/发生故障，stackoverflow可以通过使用;onerror来解决这个问题。
标记为键盘input的<kbd>元素
Ctrl + Alt + Del
<blink>
必须用于网站上的任何重要内容。 最重要的网站将所有内容都眨眼。
<marquee>
创造逼真的滚动效果，非常适合电子书等
编辑：容易的家伙，这只是一个幽默的尝试
不是很有名，但是你可以为图像指定lowsrc ，在加载图像的src时显示lowsrc ：
<img lowsrc="monkey_preview.png" src="monkey.png" />
对于那些不喜欢交错图像的人来说，这是一个不错的select。
有一点琐事：在某个时候，这个属性足够模糊，它被用来利用大约2000年的Hotmail 。
DEL和INS标记删除和插入的内容：
HTML <del>sucks</del> <ins>rocks</ins>!
button标签是新的input submit标签，很多人仍然不熟悉它。 例如，可以使用button标签对button中的文本进行样式设置。
<button> <b>Click</b><br /> Me! </button>
将显示一个button两行，第一个用粗体表示“ Click ”，第二个用“Me！”表示。 在这里尝试。
指定css进行打印
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" /> <link type="text/css" rel="stylesheet" href="print.css" media="print" />
<dl> <dt>和<dd>项目经常被遗忘，它们代表定义列表，定义项和定义。
它们与无序列表（ <ul> ）的工作方式类似，但不是单个条目，而更像是键/值列表。
<dl> <dt>What</dt><dd>An Example</dd> <dt>Why</dt><dd>Examples are good</dd> </dl>
不完全隐藏，但（这是IE的错）没有足够的人知道我的口味，tbody，tfoot 。 你们中有多less人知道tfoot应该在标记上面出现？
wbr或word-break标签。 从Quirksmode：
（word break）的意思是：“浏览器可以在这里插入一个换行符，如果它希望的话。” 它的浏览器不认为一个换行符是不需要的。
<div class="name">getElements<wbr>ByTagName()</div>我给浏览器添加换行符的选项。 当桌子有足够的空间的时候，这对于非常大的分辨率是不需要的。 然而，在较小的分辨率下，这种战略性的换行符使得表格不能比窗口变大，从而导致水平滚动条。
那里也有­ 在同一页面上提到的HTML实体。 这和wbr是一样的，但是当插入一个break时，会添加一个hypen（ - ）来表示一个break。 有点像是如何在印刷中完成的。
一个例子：
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
一个未被充分利用的特性是，几乎所有在网页上提供可见内容的元素都可以拥有“标题”属性。
添加这样的属性会导致在鼠标hover在元素上时出现“工具提示”，并且可以以不会导致页面过于拥挤的方式提供非必要的 – 但有用的信息。 （或者它可以将信息添加到已经拥挤的页面）
将多个html / css类应用于一个标记。 同样的post在这里
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
我们都知道DTD或文档types声明（那些让你的页面失败的事情，W3Cvalidation器）。 但是，可以通过声明自定义元素的属性列表来扩展DTD 。
例如，W3Cvalidation器将失败，因为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，请参阅更多内容。
我们可以指定base 64编码的string作为图像，JavaScript，iframe，链接的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>
参考
我怎样才能构build图像使用HTML标记？
二进制文件到Base64编码器/转换器
我最近发现了fieldset和label标签。 如上所述，不隐藏，但有用的forms。
<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>
您可以使用object标记而不是iframe来在页面中包含另一个文档：
<object data="data/test.html" type="text/html" width="300" height="200"> alt : <a href="data/test.html">test.html</a> </object>
在做分段的<select>列表时， <optgroup>是一个很好的<optgroup> 。
<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>
大多数人也不知道这样的事实，你可以通过给他们一个名称/值对来区分按下的表单button。 例如
<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>
在服务器端，只需检查与button名称相关联的请求参数的存在就可以获得按下的实际button。 如果不为null ，则按下该button。
我已经看到了很多 不必要的 JS hack /变通方法，例如，根据按下的button，预先更改表单动作或更改隐藏的input值。 这简直令人惊讶。
此外，我已经看到了几乎所有的JS黑客/解决方法来收集多个checkbox，如在表格行中的选中。 在每个表行的select/检查上，JS会将行索引添加到隐藏的input元素中的某个逗号分隔的值，然后在服务器端进一步拆分/parsing。 这是不知道的结果，你可以给多个input元素相同的名称，但不同的值，你仍然可以作为服务器端的数组访问它们。 例如
<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> ...
不知情会给每个checkbox一个不同的名称，并省略整个值属性。 在一些JS黑客/解决方法免费的情况下，我也在服务器端代码中看到了一些不必要的压倒性魔法来区分选中的项目。
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>
如果没有指定<label>标签的for属性，则隐式设置为第一个子<input> ，即
<label>Alias: <input name="alias" id="alias"></label>
相当于
<label for="alias">Alias:</label> <input name="alias" id="alias">
Button as link, no JavaScript :
You can put any kind of file in the form action, and you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn't see that technique in application much.
Replace this
<a href="myfile.pdf" target="_blank">Download file</a>
有了这个：
<form method="get" action="myfile.pdf" target="_blank"> <input type="submit" value="Download file"> </form>
Simplest way to refresh the page in X seconds – META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds after which you want the page to refresh.
[编辑]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
To do a simple redirect!
(Thanks @rlb)
<html> , <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It's perfectly valid to do so in HTML (just like implied <tbody> ).
HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <title//<p/
The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (ie 'en' for English, 'fr' for French).
It's useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
例子
Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.
<html lang="en">
Specify the language in the following paragraph to be Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
The "!DOCTYPE" declaration . Don't think it's a hidden feature, but it seems it's not well known but very useful.
例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
