Bin*_*ony 110 html xhtml language-features hidden-features
HTML是使用最广泛的语言(至少作为标记语言)尚未获得应有的信誉.
考虑到它已经存在了这么多年,诸如FORM/INPUT控件之类的东西仍然保持不变,没有添加新的控件.
至少从现有功能来看,您是否知道任何不为人所熟知但非常有用的功能.
当然,这个问题是这样的:
JavaScript的
隐藏功能隐藏的CSS
功能隐藏C#的
功能隐藏的VB.NET
功能隐藏的Java
隐藏功能隐藏的功能经典ASP
隐藏的ASP.NET
功能隐藏的Python
功能隐藏的TextPad
功能隐藏的Eclipse功能
不要提及HTML 5.0的功能,因为它在工作草案中
请为每个答案指定一个功能.
Pau*_*ish 244
使用与协议无关的绝对路径:
<img src="//domain.com/img/logo.png"/>
如果浏览器通过HTTPS查看SSL中的页面,那么它将使用https协议请求该资产,否则它将使用HTTP请求它.
这可以防止IE中的"此页面包含安全和非安全项目"错误消息,将所有资产请求保留在同一协议中.
警告:当在<link>或@import上使用样式表时,IE7和IE8会下载文件两次.然而,所有其他用途都很好.
Bri*_*ter 138
label标签使用"for"属性在逻辑上将标签与表单元素链接起来.大多数浏览器将其转换为激活相关表单元素的链接.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
ale*_*emb 136
(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>
这将使细胞可编辑!来吧,如果你不相信我,试试吧.
Ric*_*dOD 102
我认为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>
Fen*_*ton 100
我最喜欢的是基本标签,如果你想使用路由或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
Dan*_*ira 99
<img onerror="{javascript}" />
onerror 是一个JavaScript事件,将在显示小红十字(在IE中)图片之前触发.
您可以使用它来编写一个脚本,用一些有效的替代内容替换损坏的图像,这样用户就不必处理红叉问题.
乍一看,这可以被视为完全没用,因为,如果图像首先可用,您以前不知道吗？但是,如果你考虑,这个东西有完美的有效应用; 例如:假设您正在从您无法控制的第三方资源提供图像.就像我们在SO中的gravatar ...它来自http://www.gravatar.com/,这是stackoverflow团队根本无法控制的资源 - 尽管它是可靠的.如果http://www.gravatar.com/发生故障,stackoverflow可以通过使用来解决此问题onerror.
Mar*_*rie 85
<blink>
必须用于网站上的任何重要内容.最重要的网站将所有内容包装成闪烁.
<marquee>
创造逼真的滚动效果,非常适合电子书等.
编辑:Easy-up fellas,这只是一种幽默的尝试
ale*_*emb 84
不太知名,但您可以指定lowsrc将显示lowsrc加载src图像的图像:
<img lowsrc="monkey_preview.png" src="monkey.png" />
对于那些不喜欢隔行扫描图像的人来说,这是一个不错的选择.
一点点琐事:有一点这个属性是模糊不清的,它被用来利用Hotmail,大约2000年.
Gum*_*mbo 67
HTML <del>sucks</del> <ins>rocks</ins>!
ale*_*emb 58
该按钮的标签是新的input submit标签,很多人仍然不熟悉它.例如,按钮中的文本可以使用按钮标签进行样式设置.
<button>
<b>Click</b><br />
Me!
</button>
将呈现一条带有两条线的按钮,第一条用粗体表示" Click ",第二条用"Me!"表示.在这里试试吧.
Bin*_*ony 56
指定要打印的CSS
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
Jeh*_*iah 54
这些<dl> <dt>和<dd>项目经常被遗忘,它们代表定义列表,定义术语和定义.
它们的工作方式类似于无序列表(<ul>),但它不是单个条目,而是更像是键/值列表.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
ann*_*ata 52
没有完全隐藏,但(这是IE的错)没有足够的人知道thead,tbody,tfoot为我的口味.有多少人知道tfoot应该出现在标记之上？
ale*_*emb 50
的wbr或字断标签.来自Quirksmode:
(分词)表示:"浏览器可以在此处插入换行符,如果愿意的话." 它浏览器不认为必要的换行没有任何反应.
Run Code Online (Sandbox Code Playgroud)<div class="name">getElements<wbr>ByTagName()</div>我给浏览器提供了添加换行符的选项.当桌子有足够的空间时,对于非常大的分辨率,这不是必需的.然而,在较小的分辨率上,这种策略性放置的换行符使得表格不会比窗口大,从而导致水平滚动条.
还有­在同一页面上提到的HTML实体.这是相同的,wbr但是当插入一个中断时,-会添加一个hypen()来表示中断.有点像它是如何在印刷中完成的.
一个例子:
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
bel*_*bob 43
一个未被充分利用的特征是,几乎每个在页面上提供可见内容的元素都可以具有"标题"属性.
添加这样的属性会导致当鼠标"悬停"在元素上时出现"工具提示",并且可以用于以不会导致页面过于拥挤的方式提供非必要但有用的信息.(或者它可以是一种向已经拥挤的页面添加信息的方式)
Bin*_*ony 38
将多个html/css类应用于一个标记.这里的帖子相同
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
ale*_*emb 34
我们都知道DTD或文档类型声明(使用W3C验证器使页面失败的那些).但是,可以通过声明自定义元素的属性列表来扩展DTD.
例如,由于添加到标记,W3C验证器将因此页面失败.但是,你可以这样做: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的更多信息,请参阅.
Xin*_*nus 28
我们可以将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>
参考
Mic*_*rek 26
我最近发现了fieldset和label标签.如上所述,不是隐藏但对表单有用.
例:
<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>
Zac*_*ach 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>
Jus*_*son 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>
Bal*_*usC 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黑客/解决方法是,例如,改变的形式作用或改变一个隐藏的输入值预先根据按下的按钮.这简直令人惊讶.
此外,我已经看到几乎一样多的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情况下,我还在服务器端代码中看到了一些不必要的神奇魔法来区分已检查的项目.
Çağ*_*kin 22
<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>
moo*_*moo 18
如果未指定标记的for属性<label>,则将其隐式设置为第一个子项<input>,即
<label>Alias: <input name="alias" id="alias"></label>
相当于
<label for="alias">Alias:</label> <input name="alias" id="alias">
Wad*_* M. 15
按钮作为链接,没有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>
Bin*_*ony 13
在X秒内刷新页面的最简单方法 - META Refresh
<meta http-equiv="refresh" content="600">
内容中的值表示您希望页面刷新的秒数.
[编辑]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
做一个简单的重定向!
(谢谢@rlb)
Kor*_*nel 12
<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>
Eri*_*ärd 11
该lang属性不是众所周知但非常有用.该属性用于标识整个文档或单个元素中内容的语言.Langage代码以ISO 2字母语言代码给出(即英语为'en',法语为'fr').
它对于可以调整引号等显示的浏览器很有用.屏幕阅读器也可以从lang属性和搜索引擎中受益.
指定整个文档的语言为英语,除非被langDOM中较低级别的其他属性覆盖.
<html lang="en">
将以下段落中的语言指定为瑞典语.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
Xn0*_*v3r 10
该"!DOCTYPE"声明.不要认为这是一个隐藏的功能,但它似乎并不为人所知,但非常有用.
例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
这与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标准的浏览器(这意味着,几乎每一个浏览器).
| 归档时间： |
|
| 查看次数： |
38492 次 |
| 最近记录： |