HTML的隐藏功能

Question

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

至少从现有功能来看，您是否知道任何不为人所熟知但非常有用的功能。

当然，这个问题是这样的：

JavaScript的隐藏功能
CSS的隐藏功能
C＃的隐藏功能
VB.NET的隐藏特性
Java的隐藏功能
经典ASP的隐藏功能
ASP.NET的隐藏功能
Python的隐藏功能
TextPad的隐藏功能
Eclipse的隐藏功能

不要提及HTML 5.0的功能，因为它在工作草案中

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

Answer 1

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

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

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

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

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

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>

这将使细胞可编辑！ 来吧，如果你不相信我， 试试吧 。

Answer 4

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

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

Ctrl + Alt + Del

Answer 8

<blink>

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

<marquee>

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

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

Answer 9

不太知名但你可以指定lowsrc用于在加载图像的src时显示lowsrc的图像：

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

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

一点点琐事：有一点这个属性是模糊的，它被用来利用Hotmail ，大约2000年。

Answer 10

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

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

Answer 11

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

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

将呈现一条带有两条线的按钮，第一条用粗体表示“ Click ”，第二条用“Me！”表示。 在这里试试吧。

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应该出现在标记之上 ？

Answer 15

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

（分词）表示：“浏览器可以在此处插入换行符，如果愿意的话。” 它浏览器不认为必要的换行没有任何反应。

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

我给浏览器提供了添加换行符的选项。 当桌子有足够的空间时，对于非常大的分辨率，这不是必需的。 然而，在较小的分辨率上，这种策略性放置的换行符使得表格不会比窗口大，从而导致水平滚动条。

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

一个例子：

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Answer 16

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

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

Answer 17

将多个html / css类应用于一个标记。 这里的帖子相同

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

Answer 18

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

例如，由于behavior="mouseover"添加到<p>标记，因此W3C验证程序将失败 。 但是，你可以这样做：

<!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的更多信息，请参阅。

Answer 19

我们可以将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编码器/转换器

Answer 20

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

Answer 21

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

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

<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会将行索引添加到隐藏输入元素中的某个逗号分隔值，然后在服务器端进一步分割/解析。 这是因为没有意识到您可以为多个输入元素赋予相同的名称但是具有不同的值，并且您仍然可以在服务器端将它们作为数组访问。 例如

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

Answer 23

您可以使用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 24

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>

Answer 25

如果未指定<label>标记的for属性，则将其隐式设置为第一个子<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属性以及搜索引擎。

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

例子

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

<html lang="en">

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

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

Answer 30

“！DOCTYPE”声明 。 不要认为这是一个隐藏的功能，但它似乎并不为人所知，但非常有用。

例如

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