HTML は (少なくともマークアップ言語としては) 最も広く使用されている言語であり、正当な評価を得ていません。
何年も前から存在していることを考えると、FORM / INPUT コントロールなどは同じままで、新しいコントロールは追加されていません。
少なくとも既存の機能から、あまり知られていないが非常に便利な機能をご存知ですか。
もちろん、この質問は次のようなものです。
JavaScript の
隠れた機能 CSS の
隠れた機能 C#
の隠れた機能 VB.NET の
隠れた機能 Java の
隠れた機能 従来の ASP
の隠れた機能 ASP.NET の
隠れた機能 Python の
隠れた機能 TextPad の
隠れた機能 Eclipse の隠れた機能
HTML 5.0 の機能については言及しないでください。
回答ごとに 1 つの機能を指定してください。
プロトコルに依存しない絶対パスを使用:
<img src="//domain.com/img/logo.png"/>
ブラウザーが HTTPS を介して SSL でページを表示している場合、ブラウザーは https プロトコルを使用してそのアセットを要求し、それ以外の場合は HTTP を使用して要求します。
これにより、IE で「このページにはセキュアなアイテムと非セキュアなアイテムが含まれています」というひどいエラー メッセージが表示されなくなり、すべてのアセット リクエストが同じプロトコル内に保持されます。
警告: スタイルシートの <link> または @import で使用すると、IE7 および IE8はファイルを 2 回ダウンロードします。ただし、他のすべての用途は問題ありません。
label タグは、"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 タグはあまり使われない機能の 1 つだと思います。私が話をするほとんどの人は、それが存在することに気づいていません。
例：
<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は、小さな赤い十字（IEの場合）の画像が表示される直前に発生するJavaScriptイベントです。
これを使用して、壊れた画像をいくつかの有効な代替コンテンツに置き換えるスクリプトを記述し、ユーザーが赤十字の問題に対処する必要がないようにすることができます。
一見すると、これは完全に役に立たないように見えます。なぜなら、そもそも画像が利用可能であったかどうかを以前に知らなかったのでしょうか。しかし、あなたが考えるならば、このことのための完全に有効なアプリケーションがあります。たとえば、自分が管理していないサードパーティのリソースから画像を提供しているとします。ここSOのGravatarのように、http： //www.gravatar.com/から提供されます。これは、stackoverflowチームがまったく制御しないリソースですが、信頼性はあります。http://www.gravatar.com/がダウンした場合、stackoverflowはを使用してこれを回避できonerrorます。
<kbd>キーボード入力をマークアップするための要素
Ctrl+ Alt+Del
<blink>
サイト上で重要なものに使用する必要があります。ほとんどの重要なサイトは、すべてのコンテンツを瞬く間にラップします。
<marquee>
電子書籍などに最適な、リアルなスクロール効果を作成します。
編集：簡単な人、これは単なるユーモアの試みでした
あまり知られていませんが、画像の読み込み中lowsrcに表示される画像を指定できます。lowsrcsrc
<img lowsrc="monkey_preview.png" src="monkey.png" />
これは、インターレース画像が苦手な方に適したオプションです。
ちょっとした雑学: 2000 年頃、このプロパティは、 Hotmail の悪用に使用されるほど不明瞭でした。
印刷する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のせいです）私の好みのために十分な人々がthead、tbody、tfootについて知っていません。そして、マークアップでtfootがtbodyの上に表示されることになっていることを知っている人は何人いますか？
wbrまたは単語区切りタグ。Quirksmode より:
(word break) は、「ブラウザは、必要に応じてここに改行を挿入することができます」という意味です。ブラウザーが改行を必要としない場合、何も起こりません。
<div class="name">getElements<wbr>ByTagName()</div>ブラウザーに改行を追加するオプションを与えます。テーブルに十分なスペースがある場合、これは非常に大きな解像度では必要ありません。ただし、解像度が小さい場合は、戦略的に改行を配置することで、テーブルがウィンドウよりも大きくなり、水平スクロールバーが発生するのを防ぎます。
­同じページに記載されている HTML エンティティもあります。これは と同じですwbrが、ブレークが挿入されると、-ブレークを示すためにハイフン ( ) が追加されます。それが印刷物でどのように行われるかのようなものです。
例：
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
十分に活用されていない機能は、ページに表示されるコンテンツを提供するほぼすべての要素が「タイトル」属性を持つことができるという事実です。
このような属性を追加すると、マウスが要素の上に「ホバー」されたときに「ツールチップ」が表示され、ページが混雑しすぎないように、必須ではないが有用な情報を提供するために使用できます。 . （または、すでに混雑しているページに情報を追加する方法になる可能性があります）
複数の html/css クラスを 1 つのタグに適用します。ここに同じ投稿
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
私たちは皆、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についてを参照してください。
最近、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>
objectの代わりにタグを使用iframeして、ページに別のドキュメントを含めることができます。
<object data="data/test.html" type="text/html" width="300" height="200">
alt : <a href="data/test.html">test.html</a>
</object>
ほとんどの人は、名前と値のペアを指定するだけで、押されたフォームボタンを区別できるという事実にも気づいていません。例えば
<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のハック/回避策をほぼ同じくらい多く見ました。テーブル行を選択/チェックするたびに、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>
...
気付かないと、各チェックボックスに異なる名前が付けられ、value属性全体が省略されます。一部のJSハック/回避策のない状況では、チェックされた項目を区別するためにサーバー側のコードに不必要に圧倒的な魔法が見られました。
<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>
<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>
タグのfor属性が<label>指定されていない場合、最初の子として暗黙的に設定されます<input>。
<label>Alias: <input name="alias" id="alias"></label>
と同等です
<label for="alias">Alias:</label> <input name="alias" id="alias">
リンクとしてのボタン、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>
X 秒でページを更新する最も簡単な方法 - META Refresh
<meta http-equiv="refresh" content="600">
content の値は、ページを更新するまでの秒数を示します。
[編集]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
簡単なリダイレクトを行うには！
(ありがとう@rlb)
<html>、<head>および<body>タグはオプションです。それらを省略すると、パーサーによって適切な場所に暗黙のうちに挿入されます。HTML でこれを行うことは完全に有効です(暗黙のように<tbody>)。
理論上、 HTML はSGML アプリケーションです。これはおそらく最も短い有効なHTML 4 ドキュメントです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
上記は、W3C Validator 以外では機能しません。ただし、最短の有効な HTML5text/htmlドキュメントはどこでも機能します。
<!DOCTYPE html><title></title>
このlang属性はあまり知られていませんが、非常に便利です。この属性は、ドキュメント全体または単一要素のコンテンツの言語を識別するために使用されます。言語コードは ISO の 2 文字の言語コード (つまり、英語は「en」、フランス語は「fr」) で与えられます。
これは、引用符などの表示を調整できるブラウザに役立ちます。スクリーン リーダーもlang 、検索エンジンだけでなく、この属性の恩恵を受けます。
Sitepoint には、lang属性に関する優れた説明があります。
langDOM の下位レベルで別の属性によってオーバーライドされない限り、ドキュメント全体の言語を英語に指定します。
<html lang="en">
次の段落で言語をスウェーデン語に指定します。
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
「!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タグ内で特定の文字セットを使用するようにブラウザに指示できますが、ほとんどの場合、ドキュメントの MIME タイプへの変更は無視されます (そのため、ドキュメントをその方法<meta>で作成することはできません)。text/htmlapplication/xhtml+xml
例の両方のタグは、次の単純な呼び出しに置き換える必要があります。
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>
HTTP 準拠のブラウザー (つまり、ほぼすべてのブラウザー) で動作するようにバインドされています。
上付き文字<sup> x </sup>
フォームに送信ボタンがある場合にのみ、テキスト入力でEnterキーを押すと、フォームを送信できます。ここで試してみてください。ボタンの種類を「送信」に変更しないと機能しません。
私のお気に入りの隠れた機能はすでに言及されていますが、それは「base」タグです。相対 URL を持つコードの塊があり、突然すべてが移動するのにページが移動しない場合に非常に便利です。
しかし、言及されていないのはリストヘッダータグ<lh>です。「減価償却済み」と見なされているため、おそらく言及されていませんが、ほとんどのブラウザーはまだサポートしています。なぜ段階的に廃止されたのかはわかりませんが、私が作成するほぼすべての順序付けられていないリストはヘッダーを使用でき、h3 タグをドロップするだけで不快に感じ、最初のリスト項目をリストのタイトルにするのは正しくないと感じています。
数学、ギリシャ語などの特殊文字...あまり知られていない
定義リスト:
<dl>
<dt>Some Term</dt>
<dd>Some description</dd>
<dd>Some other description</dd>
<dt>Another Word/Phrase</dt>
<dd>Some description</dd>
</dl>
また、さまざまなサイトのフォーム レイアウトとナビゲーション メニューのために、これを再割り当てしました。